アンドロイド - Spinner(スピナー)の実装方法(AndroidX、Kotlin)

By JS | Last updated: December 02, 2018

androidbasic

アンドロイドスピナー(Android Spinner)は、ドロップダウンメニューです。スピナーをクリックすると、選択可能なメニューが見えて、このメニューのいずれかを押したときの出力値を別の方法で行うことができます。

AndroidX RecyclerView実装(kotlin)文で実装されたのは、 Android Dev SubmmitのYoutube情報をRecyclerViewに示しアプリでした。 このプロジェクトにスピナーを追加して、 Android Dev Submmitと Google I / O二つの情報を選択的に表示するようにアプリを実装してみます。

プロジェクトの作成

AndroidX RecyclerView実装(kotlin)で作成したプロジェクトでSpinnerを追加します。

このプロジェクトは、GitHubからダウンロードすることができます。

リソースの追加

新しいイメージを3つダウンロードする必要ですが。 完成したプロジェクトの /res/drawable/にみると、 googleioで始まるJPGファイル3つがあります。 このイメージをダウンロードして、自分のプロジェクトでは、同じ場所にファイルを追加してください。

そしてプロジェクトのリソース strings.xmlに以下の3つの文字列を追加してください。

/res/values/strings.xml

<resources>
  ...
<string name="io_title01">Keynote</string>
<string name="io_title02">Android: Open to the future</string>
<string name="io_title03">Wear OS by Google</string>
 ...
</resources>

最後に、 arrays.xmlを作成し、以下の文字列の配列を追加してください

/res/values/arrays.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="spinner_entries">
        <item >Android Dev Summit</item>
        <item >Android I/O</item>
    </string-array>
</resources>

スピナー定義

スピナーは、XMLレイアウトには、次のように定義することができます。

<Spinner
    android:id="@+id/planets_spinner"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content" />

私たちは、 entries属性を追加して、activity_main.xmlにスピナーを定義します。

/res/layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <Spinner
            android:id="@+id/spinner"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:entries="@array/spinner_entries"
            android:paddingTop="10dp"
            android:paddingBottom="10dp"/>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipToPadding="false"
        app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
        tools:listitem="@layout/list_item"/>

</LinearLayout>

ここでスピナーの entriesは@array/spinner_entriesを参照してますよ。スピナーのリストのリストを取得します。 このように、リソースのリストを管理することができます。

アプリをビルドして実行してみるとUIにスピナーが生成され、タッチしてみると、リソースの追加されたリストが出てくるのを見ることができます。 androidx spinner

リスナーの登録

しかし、リストを選択てみても、画面は変わりません。リスナーを登録して、特定のリストを選択したときに、画面構成が異なることがあります。

Spinnerのリスナーは、次のコードのように登録することができます。その後、 onNothingSelectedとonItemSelectedのコールバックを受け取ることができます。

spinner.onItemSelectedListener = object: AdapterView.OnItemSelectedListener {
    override fun onNothingSelected(parent: AdapterView<*>?) {
    }
    override fun onItemSelected(parent: AdapterView<*>?, view: View?, position: Int, id: Long) {
    }
}

コードを少し変更して、 "Android Dev Summit"を選択すると、Android Dev Summitの内容を示して Android I/Oを選択すると、Android I / Oの内容を表示するように修正してみましょう。

MainActivity.kt

class MainActivity : AppCompatActivity() {

    private lateinit var adapter: RecyclerAdapter

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val list = ArrayList<YoutubeItem>()
        adapter = RecyclerAdapter(list)
        recyclerView.adapter = adapter
        recyclerView.addItemDecoration(
            DividerItemDecoration(this, DividerItemDecoration.VERTICAL))

        spinner.onItemSelectedListener = object: AdapterView.OnItemSelectedListener {
            override fun onNothingSelected(parent: AdapterView<*>?) {
            }

            override fun onItemSelected(parent: AdapterView<*>?, view: View?, position: Int, id: Long) {
                Log.d("MainActivity",
                    "onItemSelected : $position, ${spinner.getItemAtPosition(position)}")
                when (spinner.getItemAtPosition(position)) {
                    "Android Dev Summit" -> {
                        updateAndroidSubmit()
                    }
                    "Android I/O" -> {
                        updateGoogleIO()
                    }
                    else -> {
                        updateAndroidSubmit()
                    }
                }
            }
        }
    }

    fun updateAndroidSubmit() {
        val list = ArrayList<YoutubeItem>()
        list.add(YoutubeItem(getDrawable(R.drawable.image01)!!, getString(R.string.title01)))
        list.add(YoutubeItem(getDrawable(R.drawable.image02)!!, getString(R.string.title02)))
        list.add(YoutubeItem(getDrawable(R.drawable.image03)!!, getString(R.string.title03)))
        list.add(YoutubeItem(getDrawable(R.drawable.image04)!!, getString(R.string.title04)))
        list.add(YoutubeItem(getDrawable(R.drawable.image05)!!, getString(R.string.title05)))
        list.add(YoutubeItem(getDrawable(R.drawable.image06)!!, getString(R.string.title06)))
        list.add(YoutubeItem(getDrawable(R.drawable.image07)!!, getString(R.string.title07)))
        list.add(YoutubeItem(getDrawable(R.drawable.image08)!!, getString(R.string.title08)))
        list.add(YoutubeItem(getDrawable(R.drawable.image09)!!, getString(R.string.title09)))
        list.add(YoutubeItem(getDrawable(R.drawable.image10)!!, getString(R.string.title10)))
        adapter.items = list
        adapter.notifyDataSetChanged()
    }

    fun updateGoogleIO() {
        val list = ArrayList<YoutubeItem>()
        list.add(YoutubeItem(getDrawable(R.drawable.googleio01)!!, getString(R.string.io_title01)))
        list.add(YoutubeItem(getDrawable(R.drawable.googleio02)!!, getString(R.string.io_title02)))
        list.add(YoutubeItem(getDrawable(R.drawable.googleio03)!!, getString(R.string.io_title03)))
        adapter.items = list
        adapter.notifyDataSetChanged()
    }
}

ビルドしてみると、コンパイルエラーが発生しますよ。 RecyclerViewのitemを private valでvarに変更するとエラーが解決されます。

RecyclerAdapter.kt

class RecyclerAdapter(var items: ArrayList<YoutubeItem>) :
  ....

ビルド後に実行しましょう。スピナーのリストを選択すると、UIが変更されることを確認することができます。

androidx spinner

スピナーアダプタ

XMLでスピナーのエントリを設定せずに鼻間違ったコードで設定することができます。このような場合は、直接スピナーのアダプタを作成する必要があります。

val adapter = ArrayAdapter.createFromResource(
    this,
    R.array.spinner_entries, android.R.layout.simple_spinner_item
)
adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item)
spinner.adapter = adapter

まとめ

簡単にXMLでスピナー(Spinner)を生成する方法と、リスナーを登録して、リストに基づいて異なる動作をするように実装しました。 また、アダプタを作成して、スピナーを実装する方法を説明しました。

参考

android

Related Posts

codechachaCopyright ©2019 codechacha