2021/04/29

[Kotlin de Android] ViewBinding ビューバインディングを使ってみよう

久しぶりにAndroid Studioを立ち上げて色々調べていたら、
Android Kotlin Extensions プラグインが非推奨になり2021年9月以降に削除されるよう予定である、
とのこと…
主に findViewById の代わりに使ったいたわけですが、それも使えなくなるということのようです。

じゃあ、どうするんだ？と思ったら、前から実装はされていた View Binding を使いなさい、ということらしいです。

詳しくは以下のGoogle Developersのブロクを参照ください。
Google Developers Japan: Kotlin Android Extensions の未来

というわけで、自分の備忘録も兼ねて使い方をまとめてみたいと思います。
いつも通りプロジェクト一式はgithub にありますので、そちらも合わせて参考にしてみてください。

開発環境

Android Studio 4.1.3
JDK 1.8
Kotlin 1.4.13
macOS 10.16(Windows でも基本的には同じように開発できると思います。)

プロジェクトを作ろう

プロジェクトはこちらの記事を参考に作成してください。
（上記の記事では Kotlin Android Extensions の設置をしていますがそこは実施しないでください。この記事も書き直さないとですね…）

Activityのテンプレートは「Empty Activity」を選択してください。

プロジェクト名は「ViewBindindApp」にしましたが、お好きなものでOKです。

View Bindingを使えるように設定しよう

View Binding を使えるようにするには Gradleファイルを編集する必要があります。

build.gradle(:app)を開き、android {} の中に以下のように設定を追記します。

android {
    buildFeatures {
        viewBinding = true
    }
}

android {

buildFeatures {

viewBinding = true

}

上記を追加したら、右上に黄色い帯が表示されるのでその中「Sync now」を必ずクリックしておいてください。
これをしないと設定が反映されません。

画面を作ろう

View Bindingを使う設定ができたので、まずは画面を作っていきましょう。
TextView と Button を使って少しだけアプリっぽくしてみます。

activity_main.xml を開いてレイアウトエディタにしておきます。
（なっていなかった場合は右上の「Design」をクリックしてください。）

もともとあるTextViewは削除しておきます。（制約がついてて面倒なので）

PaletteからTextViewとButtonを1つずつ配置します。

Buttonの設定をしていこう

Buttonから設定していきます。
まずIDをつけます。今回は「changeBotton」とします。

次にTextを設定します。「Change」としておきます。
（本来はstrings.xmlを使うべきですが、今回は省略します）

最後にButtonの位置を調整していきます。
親Viewに対して中央に配置したいので、以下の画像を参考に「Align」から「Horizontally in Parent」と「Vertically in Parent」を選びます。

これで以下のようになっていれば大丈夫です。

TextViewの設定をしていこう

次にTextViewも設定していきます。

まずIDをつけます。今回は「dateTextView」とします。

次にTextを設定します。「2021/04/22」としましたが、なんでもいいですし、あとでコードから入力するので消してしまっても大丈夫です。
なにか書いておかないとデザイン時にわかりにくいので設定しています。

textSizeを「18sp」に、textWeightを「bold」にして、少し大きめの文字にします。

最後に位置の設定します。
左右は親Viewの中心に、上下はButtonとの中心にしたいので、「Align」から「Horizontally in Parent」と「Vertically」を設定します。

これで以下のようになるかと思います。

View Bindingを使ってTextViewに文字列を表示しよう

さて、諸々準備はできたので、実際にView Bindingを使ってみましょう！

View Bindingを有効にしておくと、XMLレイアウトファイルごとにバインディングクラスというものが作られます。
今回のレイアウトファイルはプロジェクトを作ったときに作られるactivity_main.xmlです。
この場合、バインディングクラスはキャメルケースのレイアウトファイル名＋Bindingとなるので、「ActivityMainBinding」という名前のクラスが生成されます。

MainActivity.ktを開いて、適当な位置で「Activitymb」などと打ってみると以下のように入力候補が出てくるのが確認できると思います。

では、このバインディングクラスをActivityから使えるようにしていきます。

MainActivity.ktを開いて、クラスの最初の変数を定義します。
あとからインスタンスを生成するので、変数の定義にはlateinit varを使います。型はバインディングクラスになりますが、前述の通りはActivityMainBindingという名前になるのでそのように記述します。

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

   ：中略

}

class MainActivity : AppCompatActivity() {

private lateinit var binding: ActivityMainBinding

：中略

}

次にonCreate()の中で初期化をし、使用できるようにしていきます。

バインディングクラスのinflate()メソッドを呼び出すことでインスタンスを生成することができます。
下記のソースの4行目ですね。生成したインスタンスを先に定義した変数bindingに代入しておきます。

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    binding = ActivityMainBinding.inflate(layoutInflater)
}

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

binding = ActivityMainBinding.inflate(layoutInflater)

}

次にこのバインディングクラスを使って画面を生成するために、setContentView()の引数をbinding.rootに変更します。

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    binding = ActivityMainBinding.inflate(layoutInflater)
    setContentView(binding.root)
}

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

binding = ActivityMainBinding.inflate(layoutInflater)

setContentView(binding.root)

}

これでバインディングクラスのインスタンスを使って、TextViewなどにアクセスできるようになったので早速使ってみましょう！

まずはTextViewの内容を更新してみましょう。
今回は日時を表示してみたいと思います。

と言ってもとっても簡単でbinding.textViewと言ったように使うことができます。

onCreate()メソッドの最後に以下のように記述します。

binding.dateTextView.text = Date().toString()

1	binding.dateTextView.text = Date().toString()

ひとまず日時はフォーマットせずそのまま表示してみます。

これで実行すると、以下のように日時が表示されました！

View Bindingを使ってButtonをクリックしてみよう

次はButtonのクリック処理を書いてみましょう。
クリック処理はsetOnClickListenerを使ってあげればいいので、以下ように書きます。
ここでは一旦Toastを表示してみます。

binding.changeBotton.setOnClickListener {
    Toast.makeText(this, "Clicked!", Toast.LENGTH_LONG).show()
}

binding.changeBotton.setOnClickListener {

Toast.makeText(this, "Clicked!", Toast.LENGTH_LONG).show()

}

これで実行してみて、ButtonをクリックしてToastが表示されればOKです！

ButtonをクリックしてTextViewを更新しよう

さて、最後にもう少しだけアプリっぽく行こうかと。
View Bindingの使い方がわかればいい人はこの先は読まなくても大丈夫です（笑）

Buttonをクリックするたびに、TextViewを更新するようにしてみます。

日時ですがSimpleDateFomatterを使ってもう少しだけ見やすくしてみます。

TextViewの更新処理はメソッドにまとめることにします。
というわけで、新しく updateTextViewというメソッドを作ります。

private fun updateTextView() {
}

1 2	private fun updateTextView() { }

この中に処理を書いていきます。
今回はSimpleDateFormatの使い方などは省略します。いろんなサイトで解説されているので調べてみてくださいー（汗）

private fun updateTextView() {
    val date = Date()
    val sdf = SimpleDateFormat("yyyy-MM-dd HH:mm:ss.SSS")
    binding.dateTextView.text = sdf.format(date)
}

private fun updateTextView() {

val date = Date()

val sdf = SimpleDateFormat("yyyy-MM-dd HH:mm:ss.SSS")

binding.dateTextView.text = sdf.format(date)

}

これで、フォーマットされた日時がTextViewに表示されるようになります。

まず、OnCreate()のTextViewの更新をしていたコードをこのメソッドを使うように書き換えます。

// binding.dateTextView.text = Date().toString()
updateTextView()

1 2	// binding.dateTextView.text = Date().toString() updateTextView()

次にbinding.changeBotton.setOnClickListenerの処理も書き換えます。

binding.changeBotton.setOnClickListener {
//    Toast.makeText(this, "Clicked!", Toast.LENGTH_LONG).show()
    updateTextView()
}

binding.changeBotton.setOnClickListener {

// Toast.makeText(this, "Clicked!", Toast.LENGTH_LONG).show()

updateTextView()

}

これで良いので実行してみましょう。
TextViewの内容が以下のように変わっていて、Buttonを押すたびに表示が更新されていればOKです！

今回はView Bindingについて説明してみました。
最初の初期化だけがちょっと面倒ですが、それさえやってしまえばKotlin Android Extensionsのときのように面倒なことがないのでいいですね。
bindingって書くのが面倒な気もするけど、それがあればレイアウトファイルの部品だとわかりやすいからいいのかもしれないですね。
Kotlin Android ExtensionsだといきなりtextViewとか出てきてどこで定義しているだ？ってなりやすい気もしますし、そういう意味では可読性も上がるように感じます。

今まで公開している記事は全部 Kotlin Android Extensions を使っているからどうしよう…。
コードだけ更新しますかね…。

前回の記事を公開したのが２０２０年１２月で、 Kotlin Android Extensions の廃止が告知されたのが２０２０年１１月。
もう少し調べてからにすればよかった（笑）

2020/12/30

[Kotlin de Android] RecyclerViewで2行表示するリスト表示してみよう

前回RecycleView の最もシンプルな表示に仕方について解説しましたが、今回は表示するViewが2つになった場合の解説をしていきます。
2行表示されるものなので、Androidが標準で用意しているレイアウトを使っていきます。

開発環境
 プロジェクトを作ろう
 画面を作ろう
 表示するデータを作ろう
 RecyclerViewを使うための設定しよう
 データを表示するためのアダプターを作ろう
 データを表示しよう
 区切り線を表示しよう
 項目をクリックできるようにしよう

いつも通りプロジェクト一式はgithub にありますので、そちらも合わせて参考にしてみてください。

開発環境

Android Studio 4.1
JDK 1.8
Kotlin 1.4.10
macOS(Windows でも基本的には同じように開発できると思います。)

プロジェクトを作ろう

プロジェクトはこちらの記事を参考に作成してください。

Activityのテンプレートは「Empty Activity」を選択してください。

プロジェクト名は「RecyclerViewApp2」にしましたが、お好きなものでOKです。

このアプリでは Kotlin Android Extensions を使用しているのでそちらの設定もしておいてください。

画面を作ろう

プロジェクトが起動したら早速画面を作っていきましょう。

activity_main.xmlを開きます。通常は「Design」の状態で開かれると思いますが、違う状態になっていたら右上のある「Design」をクリックしてください。

まず最初から配置してある TextView は不要なので削除します。選択して Delete キーで OK です。

次に「Palette」の左側から「Containers」を選択して、右側から「RecyclerView」を選択して、画面の適当なところにドラッグ＆ドロップします。
以下のような状態になるかと思います。

まずは位置を調整してあげましょう。配置した RecycleView を選択して、ツールバーの「Align」ボタンから「Horizontally in Parent」と「Vertically in Parent」を選択します。

次に右側の「Attributes」のなかの「Layout」を開いて「layout_width」と「layout_height」をそれぞれ「match_constraint」にします。

これで位置の調整ができたので、横画面にしたり、画面サイズを変えても RecycleView が画面いっぱいに表示されることを確認しておきましょう。

そうしたら、IDを付けてあげます。
「Attributes」の「ID」を「myRecycleView」にしておきます。

これで画面が完成です。以下のようになっていればOKです。

表示するデータを作ろう

早速 ListView を表示したいところですが、なにかしらのデータがないといけないでまずはデータを作っていきましょう。

といっても今回は一行表示するだけなので、文字列の配列を用意します。
スクロールするところが見たいので20個ほど用意してみます。

MainActivity.kt を開いてください。

onCreate() の最後に以下のように追加します。

val memos = List<Map<String, String>>(20) { mapOf("title" to "title-$it", "detail" to "detail-$it")}

1	val memos = List<Map<String, String>>(20) { mapOf("title" to "title-$it", "detail" to "detail-$it")}

これ一行だけです。

今回は2次元のリストを作りたかったので List と Map を組み合わせています。
List>(20) とするとListを作ってくれます。
引数は初期化したい数です。初期化する内容はクロージャーで書くのですが、it はデフォルトで使える変数でカウンターになっています。なので 0 から順に数値が入ってきます。
今回はタイトルと詳細といった感じのメモっぽいデータにしました。

データの作成はこれで完了です。

RecyclerViewを使うための設定しよう

RecyclerViewを使うにはソースからいくつか設定をする必要があります。

onCreate() にコードを追加いきます。

まずは最初に以下のようなコードを書いてあげます。

myRecyclerView.apply {
    setHasFixedSize(true)
}

myRecyclerView.apply {

setHasFixedSize(true)

}

Kotlin Android Extensionsを使うようにしているので、myRecyclerViewというようにレイアウトエディタで設定したIDを変数名としてそのまま使うことができます。
apply{}としてそのなかに色々設定をしていきます。
（applyの説明は長くなるのでここでは省きます。解説してくれているサイトがたくさんあるので検索してみてください）

setHasFixedSize(true)とすると、RecyclerViewのサイズを固定してくれるのですが、それによりパフォーマンスが向上するらしいです。
とりあえずおまじない的に書いておけばよさそうです。

次にどういったレイアウトにするかを指定します。

val viewManager = LinearLayoutManager(this)

myRecyclerView.apply {
    setHasFixedSize(true)
    layoutManager = viewManager
}

val viewManager = LinearLayoutManager(this)

myRecyclerView.apply {

setHasFixedSize(true)

layoutManager = viewManager

}

LinearLayoutManagerでリストのレイアウトが取得できます。それをmyRecyclerViewのlayoutManagerプロパティに設定してあげればOKです。

もう一つやることがあって、RecyclerViewにデータを表示するための設定です。
以下のように書きます。

val viewManager = LinearLayoutManager(this)
val viewAdapter = MyAdapter(items)

myRecyclerView.apply {
    setHasFixedSize(true)
    layoutManager = viewManager
    adapter = viewAdapter
}

val viewManager = LinearLayoutManager(this)

val viewAdapter = MyAdapter(items)

myRecyclerView.apply {

setHasFixedSize(true)

layoutManager = viewManager

adapter = viewAdapter

}

RecyclerViewにデータを表示するためにはRecyclerView.Adapterを継承したアダプターを作る必要があります。
MyAdapterがそれにあたります。
MyAdapterはのちほど作っていくのでここではエラーになっていて正解です。

ListViewに比べると単純なデータを表示するだけでもアダプターが必要になってくるので少し面倒にも感じますが、カスタマイズ性はRecyclerViewのほうが高いですし、慣れるとアダプターの作成もそれほど大変ではないかなと思います。

データを表示するためのアダプターを作ろう

さて、次にアダプターを作成していきます。これがないとデータが表示されないので作らないとしょうがないです（笑）

まずはRecyclerView.Adapterを継承したクラスを作ります。
ファイルを分けてもいいですが今回はMainActivityクラス内に作成していきます。

class MyAdapter(private val memos: List<Map<String, String>>) : RecyclerView.Adapter<MyAdapter.ViewHolder>() {
}

1 2	class MyAdapter(private val memos: List<Map<String, String>>) : RecyclerView.Adapter<MyAdapter.ViewHolder>() { }

クラス名はもちろん自由なのでお好きな名前で大丈夫です。
今回は引数は表示するデータを格納したListを渡していますが、これ以外にも引数は増やすこともできます。
親クラスはRecyclerView.Adapter()ですが、MyAdapter.ViewHolderは後ほど作るのでここではエラーになっていて大丈夫です。

次にそのMyAdapter.ViewHolderを作っていきます。
まずはRecyclerView.ViewHolderを継承したクラスを定義します。
引数は親クラスにも渡す必要があるViewにしておきます。

class MyAdapter(private val memos: List<Map<String, String>>) : RecyclerView.Adapter<MyAdapter.ViewHolder>() {
    class ViewHolder(val view: View) : RecyclerView.ViewHolder(view) {
    }
}

class MyAdapter(private val memos: List<Map<String, String>>) : RecyclerView.Adapter<MyAdapter.ViewHolder>() {

class ViewHolder(val view: View) : RecyclerView.ViewHolder(view) {

}

今回のサンプルはTextViewがふたつあるレイアウトを使っていくので、ViewHolderのなかでTextViewを取得しておきます。
おなじみfindViewByIdを使っていきます。

class MyAdapter(private val memos: List<Map<String, String>>) : RecyclerView.Adapter<MyAdapter.ViewHolder>() {
    class ViewHolder(val view: View) : RecyclerView.ViewHolder(view) {
        val title: TextView = view.findViewById(android.R.id.text1)
        val detail: TextView = view.findViewById(android.R.id.text2)
    }
}

class MyAdapter(private val memos: List<Map<String, String>>) : RecyclerView.Adapter<MyAdapter.ViewHolder>() {

class ViewHolder(val view: View) : RecyclerView.ViewHolder(view) {

val title: TextView = view.findViewById(android.R.id.text1)

val detail: TextView = view.findViewById(android.R.id.text2)

}

viewにはレイアウトの親Viewが入ってくるので、親Viewに対してfindViewByIdで子Viewを取得してあげればOKです。
今回、リストのレイアウトとして使用するのはAndroid標準のandroid.R.layout.simple_list_item_2なのですが、このレイアウトは TextView が2つ配置されていて、それぞれIDが text1、text2 となっているのでそちらを使って TextView を取得します。
VieｗHolderで使う変数名は title と detail とします。

ViewHolderができたらMyAdapterクラスのメソッドを実装していきます。

MyAdapterクラスでエラーがでていると思うので、以下の画像の赤い電球マークをクリックして、「Implement members」をクリックします。

そうすると以下のような画面が表示されるので、すべてのメソッドを選択して、「OK」をクリックします。

メソッドが以下のように追加されたかと思います。

class MyAdapter(private val items: Array<String>) : RecyclerView.Adapter<MyAdapter.ViewHolder>() {
    class ViewHolder(val view: View) : RecyclerView.ViewHolder(view) {
        val title: TextView = view.findViewById(android.R.id.text1)
        val detail: TextView = view.findViewById(android.R.id.text2)
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        TODO("Not yet implemented")
    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        TODO("Not yet implemented")
    }

    override fun getItemCount(): Int {
        TODO("Not yet implemented")
    }
}

class MyAdapter(private val items: Array<String>) : RecyclerView.Adapter<MyAdapter.ViewHolder>() {

class ViewHolder(val view: View) : RecyclerView.ViewHolder(view) {

val title: TextView = view.findViewById(android.R.id.text1)

val detail: TextView = view.findViewById(android.R.id.text2)

}

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {

TODO("Not yet implemented")

}

override fun onBindViewHolder(holder: ViewHolder, position: Int) {

TODO("Not yet implemented")

}

override fun getItemCount(): Int {

TODO("Not yet implemented")

}

では、各メソッドを実装していきます。

上から順にやっていきますね。

onCreateViewHolderはViewHolderを作成して、データを表示するために使うViewを設定します。
レイアウトファイルからViewを取得して、ViewHolderのインスタンスにして返してあげればOKです。

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
    val view = LayoutInflater.from(parent.context).inflate(android.R.layout.simple_list_item_2, parent, false)
    return ViewHolder(view)
}

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {

val view = LayoutInflater.from(parent.context).inflate(android.R.layout.simple_list_item_2, parent, false)

return ViewHolder(view)

}

今回はレイアウトファイルは作らずにAndroid標準のandroid.R.layout.simple_list_item_2を使っています。
このファイルを見てもらうとわかるのですが、TwoLineListItem というViewのなかに TextView が2つあるものになります。
ここでは親Viewである TwoLineListItem が取得できればいいので、そのまま引数にしてViewHolderを生成し、returnすればOKです。

次にonBindViewHolderでは、ViewHolderにデータを設定していきます。
今回、ViewHolderには2つの TextView があるので、それぞれに対応するデータを設定してあげればOKです。

override fun onBindViewHolder(holder: ViewHolder, position: Int) {
    holder.title.text = memos[position]["title"]
    holder.detail.text = memos[position]["detail"]
}

override fun onBindViewHolder(holder: ViewHolder, position: Int) {

holder.title.text = memos[position]["title"]

holder.detail.text = memos[position]["detail"]

}

引数にViewHolderとリストの位置が渡されてくるので、memos[position]["title"]やmemos[position]["detail"]としてあげれば対応するデータが取得できるのでそれを title と detail に入れてあげればOKです。

表示内容が複雑になればなるほど、このメソッドはちょっとやることが多くなりますね。

最後にgetItemCountですが、これはデータのサイズを返してあげるだけです。
なので以下のようになります。

override fun getItemCount(): Int {
    return memos.size
}

override fun getItemCount(): Int {

return memos.size

}

処理がreturnのみなので、以下のように短くこともできます。

override fun getItemCount(): Int  = memos.size

1	override fun getItemCount(): Int = memos.size

これでMyAdapterクラスが完成です。

データを表示しよう

さぁデータを表示しましょう！
と言ってもすでに設定は終わっているので、アプリを実行するだけです。

早速実行！

無事、表示されましたー。

でも、区切り線がない…
ので、そのあたりも少しやってみたいと思います。

区切り線を表示しよう

RecyclerViewはそのままでは区切り線が表示されないので、そのあたりの設定もしていきましょう。

単純に区切り線を出すだけなら結構簡単です。

onCreateの中で以下のように書きます。

val dividerItemDecoration = DividerItemDecoration(this, LinearLayoutManager(this).orientation)

1	val dividerItemDecoration = DividerItemDecoration(this, LinearLayoutManager(this).orientation)

DividerItemDecorationという区切り線用のクラスが用意されているのでそれを使います。
引数でLinearLayoutManager(this).orientationとすることでリスト表示の横線という感じになります。

これをrecyclerViewに設定してあげればいいので、myRecyclerView.apply{}の中に以下のように書いてあげればOKです。

addItemDecoration(dividerItemDecoration)

1	addItemDecoration(dividerItemDecoration)

最終的なonCreate()は以下のようになるかと思います。

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

        val memos = List<Map<String, String>>(20) { mapOf("title" to "title-$it", "detail" to "detail-$it")}

        val viewManager = LinearLayoutManager(this)
        val viewAdapter = MyAdapter(memos)
        val dividerItemDecoration = DividerItemDecoration(this, LinearLayoutManager(this).orientation)

        myRecyclerView.apply {
            setHasFixedSize(true)
            layoutManager = viewManager
            adapter = viewAdapter

            addItemDecoration(dividerItemDecoration)
        }

        viewAdapter.setOnItemClickListener(object : MyAdapter.OnItemClickListener {
            override fun onItemClickListener(position: Int, memo: Map<String, String>) {
                Toast.makeText(this@MainActivity, "Clicked ${memo["title"]}", Toast.LENGTH_SHORT).show()
            }
        })
    }

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_main)

val memos = List<Map<String, String>>(20) { mapOf("title" to "title-$it", "detail" to "detail-$it")}

val viewManager = LinearLayoutManager(this)

val viewAdapter = MyAdapter(memos)

val dividerItemDecoration = DividerItemDecoration(this, LinearLayoutManager(this).orientation)

myRecyclerView.apply {

setHasFixedSize(true)

layoutManager = viewManager

adapter = viewAdapter

addItemDecoration(dividerItemDecoration)

}

viewAdapter.setOnItemClickListener(object : MyAdapter.OnItemClickListener {

override fun onItemClickListener(position: Int, memo: Map<String, String>) {

Toast.makeText(this@MainActivity, "Clicked ${memo["title"]}", Toast.LENGTH_SHORT).show()

}

})

}

ここまでできたら実行してみましょう。

区切り線も表示されました！

項目をクリックできるようにしよう

最後にリストの項目をクリックできるようにしてみます。
ListViewのときはsetOnItemClickListenerがありましたが、RecyclerViewにはないのでsetOnClickListenerを使って実装する必要があります。

まずはListenerを作成します。

MyAdapter クラスのなかに以下のようにListenerを作ります。

interface OnItemClickListener{
    fun onItemClickListener(position: Int, memo: Map<String, String>)
}

interface OnItemClickListener{

fun onItemClickListener(position: Int, memo: Map<String, String>)

}

引数は今回は選択された位置とメモの内容を渡すようにしました。

次にListenerを保持しておく変数を定義しておきます。

lateinit var listener: OnItemClickListener

1	lateinit var listener: OnItemClickListener

あとで初期化するので、lateinit var で定義しておきます。

そのlistenerを初期化するためのメソッドを書きましょう。

fun setOnItemClickListener(listener: OnItemClickListener){
    this.listener = listener
}

fun setOnItemClickListener(listener: OnItemClickListener){

this.listener = listener

}

次にクリックされたときの処理をかいていきます。
MyAdapterのonBindViewHolder()で実装していきます。

onBindViewHolder()のなかでholder.textViewに対してsetOnClickListenerを設定します。

override fun onBindViewHolder(holder: ViewHolder, position: Int) {
    holder.title.text = memos[position]["title"]
    holder.detail.text = memos[position]["detail"]

    holder.view.setOnClickListener {
        listener.onItemClickListener(position, memos[position])
    }
}

override fun onBindViewHolder(holder: ViewHolder, position: Int) {

holder.title.text = memos[position]["title"]

holder.detail.text = memos[position]["detail"]

holder.view.setOnClickListener {

listener.onItemClickListener(position, memos[position])

}

setOnClickListener の中では作成した listenerのonItemClickListener を実行すればOKです。

ここまででlistenerの設定ができたので、MainActivityクラスの OnCreate() の方にクリック処理を実装していきます。

viewAdapter.setOnItemClickListener で設定します。MyAdapter.OnItemClickListener を設定しればOKです。

viewAdapter.setOnItemClickListener(object : MyAdapter.OnItemClickListener {
})

1 2	viewAdapter.setOnItemClickListener(object : MyAdapter.OnItemClickListener { })

ここまで書くとエラーが出ていると思うので、赤い電球マークをクリックして、「implement members」を選択して、onItemClickListenerを追加します。

viewAdapter.setOnItemClickListener(object : MyAdapter.OnItemClickListener {
    override fun onItemClickListener(position: Int, memo: Map<String, String>) {
    }
})

viewAdapter.setOnItemClickListener(object : MyAdapter.OnItemClickListener {

override fun onItemClickListener(position: Int, memo: Map<String, String>) {

}

})

onItemClickListener のなかにクリック時の処理を書いていきたいのですが、今回は単純にToastを使って選択された行の title を表示したいと思います。

viewAdapter.setOnItemClickListener(object : MyAdapter.OnItemClickListener {
    override fun onItemClickListener(position: Int, memo: Map<String, String>) {
        Toast.makeText(this@MainActivity, "Clicked ${memo["title"]}", Toast.LENGTH_SHORT).show()
    }
})

viewAdapter.setOnItemClickListener(object : MyAdapter.OnItemClickListener {

override fun onItemClickListener(position: Int, memo: Map<String, String>) {

Toast.makeText(this@MainActivity, "Clicked ${memo["title"]}", Toast.LENGTH_SHORT).show()

}

})

Toast の第一引数はContext ですが、thisだけだとどのthisなのかわからないのでthis@MainActivityとする必要があるようです。

これでクリック処理が実装ができたので、早速実行してみましょう！

適当な項目をクリックするとToastが表示されるようになりました！

ちょっと雑な説明になってしまいましたが、どなたかの参考になってら嬉しいです♪

年内に更新できてよかった…（笑）

2020/10/28

[Kotlin de Android] RecyclerViewでリスト表示してみよう

RecycleView の最もシンプルな表示に仕方について解説していきます。
表示内容も文字列ひとつのみで、Androidが標準で用意しているレイアウトを使っていきます。
今回はリストが表示されるところまで見ていきたいと思います。

開発環境

Android Studio 4.1
JDK 1.8
Kotlin 1.4.10
macOS(Windows でも基本的には同じように開発できると思います。)

プロジェクトを作ろう

プロジェクトはこちらの記事を参考に作成してください。

Activityのテンプレートは「Empty Activity」を選択してください。

プロジェクト名は「RecyclerViewApp」にしましたが、お好きなものでOKです。

このアプリでは Kotlin Android Extensions を使用しているのでそちらの設定もしておいてください。

画面を作ろう

プロジェクトが起動したら早速画面を作っていきましょう。

activity_main.xmlを開きます。通常は「Design」の状態で開かれると思いますが、違う状態になっていたら右上のある「Design」をクリックしてください。

まず最初から配置してある TextView は不要なので削除します。選択して Delete キーで OK です。

次に右側の「Attributes」のなかの「Layout」を開いて「layout_width」と「layout_height」をそれぞれ「match_constraint」にします。

これで位置の調整ができたので、横画面にしたり、画面サイズを変えても RecycleView が画面いっぱいに表示されることを確認しておきましょう。

そうしたら、IDを付けてあげます。
「Attributes」の「ID」を「myRecycleView」にしておきます。

これで画面が完成です。以下のようになっていればOKです。

表示するデータを作ろう

早速 ListView を表示したいところですが、なにかしらのデータがないといけないでまずはデータを作っていきましょう。

といっても今回は一行表示するだけなので、文字列の配列を用意します。
スクロールするところが見たいので20個ほど用意してみます。

MainActivity.kt を開いてください。

onCreate() の最後に以下のように追加します。

val items = Array(20) { i -> "item-$i" }

1	val items = Array(20) { i -> "item-$i" }

これ一行だけです。

Array() とすると配列を作ってくれます。配列の中身のデータ型は生成するデータから推論してくれるので書かなくてもOKです。
引数は初期化したい数です。初期化する内容はクロージャーで書くのですが、i はカウンタなので 0 順に数値が入ってきて、 -> の後ろの処理を第一引数で指定した数分実行してくれます。
これだけで、item-0 から item-19 という文字列の配列を作ってくれます。便利！

なので、データの作成はこれで完了です。

RecyclerViewを使うための設定しよう

RecyclerViewを使うにはソースからいくつか設定をする必要があります。

onCreate() にコードを追加いきます。

まずは最初に以下のようなコードを書いてあげます。

myRecyclerView.apply {
    setHasFixedSize(true)
}

myRecyclerView.apply {

setHasFixedSize(true)

}

次にどういったレイアウトにするかを指定します。

val viewManager = LinearLayoutManager(this)

myRecyclerView.apply {
    setHasFixedSize(true)
    layoutManager = viewManager
}

val viewManager = LinearLayoutManager(this)

myRecyclerView.apply {

setHasFixedSize(true)

layoutManager = viewManager

}

LinearLayoutManagerでリストのレイアウトが取得できます。それをmyRecyclerViewのlayoutManagerプロパティに設定してあげればOKです。

もう一つやることがあって、RecyclerViewにデータを表示するための設定です。
以下のように書きます。

val viewManager = LinearLayoutManager(this)
val viewAdapter = MyAdapter(items)

myRecyclerView.apply {
    setHasFixedSize(true)
    layoutManager = viewManager
    adapter = viewAdapter
}

val viewManager = LinearLayoutManager(this)

val viewAdapter = MyAdapter(items)

myRecyclerView.apply {

setHasFixedSize(true)

layoutManager = viewManager

adapter = viewAdapter

}

データを表示するためのアダプターを作ろう

さて、次にアダプターを作成していきます。これがないとデータが表示されないので作らないとしょうがないです（笑）

まずはRecyclerView.Adapterを継承したクラスを作ります。
ファイルを分けてもいいですが今回はMainActivityクラス内に作成していきます。

class MyAdapter(private val items: Array<String>) : RecyclerView.Adapter<MyAdapter.ViewHolder>() {

}

class MyAdapter(private val items: Array<String>) : RecyclerView.Adapter<MyAdapter.ViewHolder>() {

}

クラス名はもちろん自由なのでお好きな名前で大丈夫です。
今回は引数は表示する文字列を格納したArrayを渡していますが、これ以外にも引数は増やすこともできます。
親クラスはRecyclerView.Adapter()ですが、MyAdapter.ViewHolderは後ほど作るのでここではエラーになっていて大丈夫です。

次にそのMyAdapter.ViewHolderを作っていきます。

以下のように書いてあげればOKです。

class MyAdapter(private val items: Array<String>) : RecyclerView.Adapter<MyAdapter.ViewHolder>() {
    class ViewHolder(val textView: TextView) : RecyclerView.ViewHolder(textView)
}

class MyAdapter(private val items: Array<String>) : RecyclerView.Adapter<MyAdapter.ViewHolder>() {

class ViewHolder(val textView: TextView) : RecyclerView.ViewHolder(textView)

}

ViewHolderはRecyclerView.ViewHolderを継承する必要があります。親クラスの引数にはViewを渡す必要がありますが、
今回はTextViewが一つだけあるレイアウトを使っていくのでこのように単純なものになっています。
レイアウトの中にViewが複数あるものだともう少し複雑になるのですが、今回はとにかくシンプルに！ということでこれだけにしておきます。

ViewHolderができたらMyAdapterクラスのメソッドを実装していきます。

MyAdapterクラスでエラーがでていると思うので、以下の画像の赤い電球マークをクリックして、「Implement members」をクリックします。

そうすると以下のような画面が表示されるので、すべてのメソッドを選択して、「OK」をクリックします。

メソッドが以下のように追加されたかと思います。

class MyAdapter(private val items: Array<String>) : RecyclerView.Adapter<MyAdapter.ViewHolder>() {
    class ViewHolder(val textView: TextView) : RecyclerView.ViewHolder(textView)

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        TODO("Not yet implemented")
    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        TODO("Not yet implemented")
    }

    override fun getItemCount(): Int {
        TODO("Not yet implemented")
    }

}

class MyAdapter(private val items: Array<String>) : RecyclerView.Adapter<MyAdapter.ViewHolder>() {

class ViewHolder(val textView: TextView) : RecyclerView.ViewHolder(textView)

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {

TODO("Not yet implemented")

}

override fun onBindViewHolder(holder: ViewHolder, position: Int) {

TODO("Not yet implemented")

}

override fun getItemCount(): Int {

TODO("Not yet implemented")

}

では、各メソッドを実装していきます。

上から順にやっていきます（笑）

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
    val textView = LayoutInflater.from(parent.context).inflate(android.R.layout.simple_list_item_1, parent, false) as TextView
    return ViewHolder(textView)
}

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {

val textView = LayoutInflater.from(parent.context).inflate(android.R.layout.simple_list_item_1, parent, false) as TextView

return ViewHolder(textView)

}

今回はレイアウトファイルは作らずにAndroid標準のandroid.R.layout.simple_list_item_1を使っています。
このファイルを見てもらうとわかるのですが、TextViewが一つあるだけのものです。なのでViewを取得してTextViewにキャストしてあげます。
そのtextViewを引数にしてViewHolderを生成し、returnすればOKです。

次にonBindViewHolderでは、ViewHolderにデータを設定していきます。
今回、ViewHolderはTextViewのみなので、このTextViewにitemsのデータをひとつずつ設定してあげる感じです。

override fun onBindViewHolder(holder: ViewHolder, position: Int) {
    holder.textView.text = items[position]
}

override fun onBindViewHolder(holder: ViewHolder, position: Int) {

holder.textView.text = items[position]

}

引数にViewHolderとリストの位置が渡されてくるので、items[position]としてあげれば対応するデータが取得できるのでそれをTextViewに設定するだけです。

表示内容が複雑になればなるほど、このメソッドはちょっとやることが多くなります。

最後にgetItemCountですが、これはデータのサイズを返してあげるだけです。
なので以下のようになります。

override fun getItemCount(): Int {
    return items.size
}

override fun getItemCount(): Int {

return items.size

}

処理がreturnのみなので、以下のように短くこともできます。

override fun getItemCount(): Int  = items.size

1	override fun getItemCount(): Int = items.size

これでMyAdapterクラスが完成です。
MyAdapterクラスのソースはこんな感じになります。

class MyAdapter(private val items: Array<String>) : RecyclerView.Adapter<MyAdapter.ViewHolder>() {
    class ViewHolder(val textView: TextView) : RecyclerView.ViewHolder(textView)

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        val textView = LayoutInflater.from(parent.context).inflate(android.R.layout.simple_list_item_1, parent, false) as TextView
        return ViewHolder(textView)
    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        holder.textView.text = items[position]
    }

    override fun getItemCount(): Int  = items.size
}

class MyAdapter(private val items: Array<String>) : RecyclerView.Adapter<MyAdapter.ViewHolder>() {

class ViewHolder(val textView: TextView) : RecyclerView.ViewHolder(textView)

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {

val textView = LayoutInflater.from(parent.context).inflate(android.R.layout.simple_list_item_1, parent, false) as TextView

return ViewHolder(textView)

}

override fun onBindViewHolder(holder: ViewHolder, position: Int) {

holder.textView.text = items[position]

}

override fun getItemCount(): Int = items.size

}

データを表示しよう

さぁデータを表示しましょう！
と言ってもすでに設定は終わっているので、アプリを実行するだけです。

早速実行！

無事、表示されましたー。

でも、区切り線がない…
ので、そのあたりも少しやってみたいと思います。

区切り線を表示しよう

RecyclerViewはそのままでは区切り線が表示されないので、そのあたりの設定もしていきましょう。

単純に区切り線を出すだけなら結構簡単です。

onCreateの中で以下のように書きます。

val dividerItemDecoration = DividerItemDecoration(this, LinearLayoutManager(this).orientation)

1	val dividerItemDecoration = DividerItemDecoration(this, LinearLayoutManager(this).orientation)

これをrecyclerViewに設定してあげればいいので、myRecyclerView.apply{}の中に以下のように書いてあげればOKです。

addItemDecoration(dividerItemDecoration)

1	addItemDecoration(dividerItemDecoration)

最終的なonCreate()は以下のようになるかと思います。

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

    val items = Array(20) { i -> "item-$i" }

    val viewManager = LinearLayoutManager(this)
    val viewAdapter = MyAdapter(items)
    val dividerItemDecoration = DividerItemDecoration(this, LinearLayoutManager(this).orientation)

    myRecyclerView.apply {
        setHasFixedSize(true)
        layoutManager = viewManager
        adapter = viewAdapter
        addItemDecoration(dividerItemDecoration)
    }
}

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_main)

val items = Array(20) { i -> "item-$i" }

val viewManager = LinearLayoutManager(this)

val viewAdapter = MyAdapter(items)

val dividerItemDecoration = DividerItemDecoration(this, LinearLayoutManager(this).orientation)

myRecyclerView.apply {

setHasFixedSize(true)

layoutManager = viewManager

adapter = viewAdapter

addItemDecoration(dividerItemDecoration)

}

ここまでできたら実行してみましょう。

区切り線も表示されました！

項目をクリックできるようにしよう

MyAdapterのonBindViewHolder()で実装していきます。
今回は単純にクリックされた項目の文字列をToastで表示してみます。

onBindViewHolder()のなかでholder.textViewに対してsetOnClickListenerを設定します。
本当はListenerを作ったほうがいいのですが、今回は一番簡単なやり方にしています。

override fun onBindViewHolder(holder: ViewHolder, position: Int) {
    holder.textView.text = items[position]

    holder.textView.setOnClickListener {
    }
}

override fun onBindViewHolder(holder: ViewHolder, position: Int) {

holder.textView.text = items[position]

holder.textView.setOnClickListener {

}

holder.textView.setOnClickListener のなかでToastを表示したいので、ActivtyのContextが必要となってくるので、MyAdapterの引数を増やしてContextを取得するようにします。

class MyAdapter(private val context: Context, private val items: Array<String>) : RecyclerView.Adapter<MyAdapter.ViewHolder>() {

1	class MyAdapter(private val context: Context, private val items: Array<String>) : RecyclerView.Adapter<MyAdapter.ViewHolder>() {

準備はできたのでToastを表示します。

override fun onBindViewHolder(holder: ViewHolder, position: Int) {
    holder.textView.text = items[position]

    holder.textView.setOnClickListener {
        Toast.makeText(context, "Clicked ${items[position]}", Toast.LENGTH_SHORT).show()
    }
}

override fun onBindViewHolder(holder: ViewHolder, position: Int) {

holder.textView.text = items[position]

holder.textView.setOnClickListener {

Toast.makeText(context, "Clicked ${items[position]}", Toast.LENGTH_SHORT).show()

}

ここまでできたら早速実行！

適当な項目をクリックするとToastが表示されるようになりました！

クリック処理はListViewよりは面倒な気もしますが、View一つずつクリックできるようになるのでこれはこれで便利だと思いました。

さて、今回は一番シンプルなRecyclerViewの使い方を紹介しました。
ListViewに比べると少し複雑な気もしますが、色々とカスタマイズできるようなのでまた紹介できたらいいなと思います。（いつになるかな…💦）

どなたかの参考になってら嬉しいです♪

2020/10/17

[Kotlin de Android] Android Studio 4.1 でプロジェクトを作ろう

このところさっぱり触っておらず3系からアップデートもしていなかったので久しぶりに更新したので、ついでにプロジェクトの作成手順もまとめてみました。

開発環境

Mac (macOS Mojave 10.14.6)
Android Studio 4.1

プロジェクトを作ろう

Welcome 画面で「Start a new Android Studio project」をクリックします。

以下のような Create New Project ウィザードが表示されます。

まずは作成するアプリの種類とテンプレートを選択します。

通常は「Phone and Tablet」を選択すればいいと思います。

Activity の種類は作成するアプリによって異なると思うので、お好きなものを選択してください。

他にも以下のようなテンプレートを選択できます。

設定したら「Next」をクリックします。

そうすると、以下のような設定画面になります。

それぞれの項目は以下のように設定してください。

Name	アプリの名前を入力します
Package name	パッケージ名を入力します。パッケージ名とアプリ名で一意の名前になる必要があるので一般的には自分のドメインを逆から書いたものになります。公開する予定のない勉強用であればなんでもOKだと思います。例：com.example
Show loacation	プロジェクトの保存場所です。デフォルトの場所でもお好きなところでもOKです。
Language	開発言語を選択します。JavaかKotlinが選択できます。このブロクではすべてKotlinのプロジェクトを作成しているので、Kotlinを選択します。
Minimum API level	対象とするAPIを選択します。選択したAPI以上のものが対象となります。お好きなレベルを選択すればいいと思います。
use legacy android.support libraries	古いバージョンのサポートライブラリを使いたい場合にチェックを入れます。通常はチェックは入れなくていいかと思います。

設定ができたら「Finish」をクリックしてください。プロジェクトが立ち上がります！

Kotlin Android Extensionsを使えるようにしよう

4.1ではデフォルトではKotlin Android Extensionsが入っていないようなので追加します。
（ViewBindingが登場しているようなのでなるべく使わないでほしいのかもしれませんが…）

build.gradle(:app)を開いて冒頭のプラグインの設定に追加すればOKです。

plugins {
    id 'com.android.application'
    id 'kotlin-android'
    id 'kotlin-android-extensions'
}

plugins {

id 'com.android.application'

id 'kotlin-android'

id 'kotlin-android-extensions'

}

Kotlin Android Extensionsが入っていない以外は3.4の頃とそれほど大きく変わっていないような気もしますね。

今回はプロジェクトの作成方法でした！

2019/07/05

[Kotlin de Android] Android Studio 3.4 プロジェクトを作ろう

Android Studio 3.4 あたりからプロジェクトの作成画面が少し変わっているので、手順をまとめました。

開発環境

Mac (macOS Mojave 10.14.5)
Android Studio 3.4.1

プロジェクトを作ろう

Welcome 画面で「Start a new Android Studio project」をクリックします。

以下のような Create New Project ウィザードが表示されます。

まずは作成するアプリの種類とテンプレートを選択します。

通常は「Phone and Tablet」を選択すればいいと思います。

Activity の種類は作成するアプリによって異なると思うので、お好きなものを選択してください。

設定したら「Next」をクリックします。

そうすると、以下のような設定画面になります。

それぞれの項目は以下のように設定してください。

Name	アプリの名前を入力します
Package name	パッケージ名を入力します。パッケージ名とアプリ名で一意の名前になる必要があるので一般的には自分のドメインを逆から書いたものになります。公開する予定のない勉強用であればなんでもOKだと思います。例：com.example
Show loacation	プロジェクトの保存場所です。デフォルトの場所でもお好きなところでもOKです。
Language	開発言語を選択します。JavaかKotlinが選択できます。このブロクではすべてKotlinのプロジェクトを作成しているので、Kotlinを選択します。
Minimum API level	対象とするAPIを選択します。選択したAPI以上のものが対象となります。お好きなレベルを選択すればいいと思います。
This project will support instant apps	instant appに対応する場合はチェックが必要ですが通常はチェックしなくてOKだと思います。
Use andoirdx.* artifacts	AndroidXを使用する場合にチェックをいれます。AndroidXはSupport Libraryに代わるものとなってくるので今後は使う機会が増えてくるのかなとは思います。

設定ができたら「Finish」をクリックしてください。プロジェクトが立ち上がります！

以前より手順が少なくなってすっきりしたような気もしますが、最初から作られるActivityの名前が変更できなくなっちゃったんですねー。
MainActivityが作成されるので、あとで名前を変更すればいいのかなと思います。

今回はプロジェクトの作成方法でした！

2017/09/11

[Kotlin de Android] オプションメニューを使ってみよう

今回はオプションメニューの使い方について見ていきます。

ナビゲーションメニューが増えてきたのであまり需要はないかな？と思いつつも、
使っているアプリも結構ありそうなので紹介してみます。

開発環境
 プロジェクトを作ろう
 オプションメニューを作ろう
 画面を作ろう
 オプションメニューを表示しよう
 オプションメニューをクリックしてみよう
 オプションメニューのアイテムを常に表示してみよう
 オプションメニューを無効化してみよう
 オプションメニューを非表示にしてみよう

いつも通りプロジェクト一式はgithub にありますので、そちらも合わせて参考にしてみてください。

開発環境

Android Studio 3.4.1
JDK 1.8
Kotlin 1.3
macOS Mojave (Windows でも基本的には同じように開発できると思います。)

プロジェクトを作ろう

こちらの記事を参考にプロジェクトを作成してください。

Activityのテンプレートは「Empty Activity」を選択してください。

プロジェクト名は「OptionsMenuSample」にしましたが、お好きなものでOKです。

オプションメニューを作ろう

プロジェクトが立ち上がったら、早速オプションメニューを作っていきましょう！

メニューファイルを作ろう

オプションメニューもXMLファイルで作ります。

まずはメニュー用のディレクトリを用意する必要があるので、「res」ディレクトリを選択して、右クリックをしてください。

New -> Android Resource Directory を選択してください。
そうするとディレクトリ作成画面が表示されます。

「Resource type」で「menu」を選択してください。すると、「Directory name」も「menu」になると思うので確認して「OK」をクリックします。

これでresのなかに「menu」ディレクトリが作成されているはずです。

次に、作成したmenuディレクトリのなかにXMLファイルを作っていきたいので、menuを選択して、右クリックします。
New > Menu resource file を選択します。

そうするとリソースファイル作成画面が表示されます。

File nameに「memu_main」と入力して、「OK」をクリックします。

これでmenu_main.xmlがmenuディレクトリに追加されているはずです。

メニューを作っていこう

では、作成した menu_main.xml を開いて、編集していきましょう。
XMLで書いたほうが早いような気もしますが、せっかくなのでレウアウトエディタで編集していきます。

まずは最初から作成されている「Settings」メニューは削除してしまいましょう。
項目を選択してDeleteキーで削除できます。

新しいメニュー項目を追加していきましょう。
Paletteの「Menu Item」を使っていきます。
他にもいろいろItemはありますが、今回はMenu Itemのみ取り扱っていきます。Searchなんかもそのうち扱ってみたいですね。

では、Menu Itemを選択したらドラッグアンドドロップで追加してあげればいいのですが、レイアウト画面上だとちょっとやりにくかったりもするので、「Component Tree」のほうに追加していきます。
元々ある「menu」の中に追加されるようにドラッグしてあげてください。

追加できたら、下記の図のように id と title を設定します。
id を「action_add」、title を「Add」とします。
（画像では他のメニューも追加されていますが、ここまではメニューはひとつだけある状態で大丈夫です）

では、同じ要領であとふたつメニューを追加していきましょう。

全部で3つのメニューになりますが、それぞれidとtitleは以下のように設定してください。

	id	title
1	action_add	Add
2	action_delete	Delete
3	action_save	Save

今の状態でComponent Tree は以下のようになっているかと思います。

ここで各メニューの横に黄色いマークが出ているのがわかるかと思います。
これは警告なので動作には影響しないため放っておいてもいいのですが、一応直しておきましょう。

黄色いマークをクリックするとレイアウトエディアの下部に詳細が表示されます。

titleをハードコードしているよ、という警告になります。
この画面の下の方にいくと「Fix」ボタンがあるのですが、ここをクリックすることで簡単に直すことができます。

「Fix」ボタンを押すと以下のような画面が表示されて、strings.xmlの設定を追加することができます。

「Resource name」をidを同じものにしておきましょう。（なんでもいいのですが、わかりやすい名前にしておきましょう）

3つのメニューすべて同じように警告を直していきましょう。
黄色い警告マークが無くなったらOKです。

これで一番簡単な設定のメニューができました。

画面を作ろう

メニューが一応完成したので、MainActivityの画面を作成していきましょう。
と言っても、ここでは選択されたメニューの名前を表示したいだけなので、最初からあるTextViewをそのまま使っていきましょう。

textは「Please select options menu」としておきます。
文字サイズも少し大きくしたいので、textSize を 24spにします。

メニューを作成したときと同様に警告マークが付くと思うので、警告マークをクリックして同様にFixボタンからstringsを作っていきましょう。

ここではResouce name はdefault_textとしました。

以下のような状態になっていればOKです。

オプションメニューを表示しよう

現状ではエミュレータを起動して実行してもオプションメニューは表示されません。
表示されるようにしていきましょう。

MainActivityクラスの中に実装していくのでMainActivity.ktを開いてください。

onCreate()の下辺りに下記のようにオプションメニューを表示するためのメソッドである onCreateOptionsMenu()をオーバーライドします。
以下のようにメソッド名の一部を書くとコード補完ができると思うのでそちらを使ってください。

そうすると、以下のようなソースが追加されます。

override fun onCreateOptionsMenu(menu: Menu?): Boolean {
    return super.onCreateOptionsMenu(menu)
}

override fun onCreateOptionsMenu(menu: Menu?): Boolean {

return super.onCreateOptionsMenu(menu)

}

このメソッドでは使いたいメニューのメニューファイルを指定してあげる必要があるので、以下のように書き換えてください。

override fun onCreateOptionsMenu(menu: Menu?): Boolean {
    menuInflater.inflate(R.menu.menu_main, menu)
    return true
}

override fun onCreateOptionsMenu(menu: Menu?): Boolean {

menuInflater.inflate(R.menu.menu_main, menu)

return true

}

menuInflater.infrate()とすることでメニューを指定します。
第一引数にはメニューのIDを指定するので、作成したmenu_mainを書いてあげればOKです。
第二引数には引数で渡されてくるmenuを指定してください。
最後に true を返すことでメニューが表示されるようになります。

エミュレータで確認してみましょう。

起動すると、以下のように右上にオプションメニューのアイコンが表示されているはずです。

アイコンをクリックして、以下のようにメニューが表示されていればOKです。

オプションメニューをクリックしてみよう

表示されるようになったので、項目をクリックする処理を実装していきましょう。

クリックしたときに呼ばれる onOptionsItemSelected() メソッドをオーバーライドします。

override fun onOptionsItemSelected(item: MenuItem?): Boolean {
    return super.onOptionsItemSelected(item)
}

override fun onOptionsItemSelected(item: MenuItem?): Boolean {

return super.onOptionsItemSelected(item)

}

引数の item: MenuItem? にクリックされたメニュー項目が入ってくるのでそれを使って処理を振り分けていきます。

ざざっと書くと以下のようになります。

override fun onOptionsItemSelected(item: MenuItem?): Boolean {

    val message = when (item?.itemId) {
        R.id.action_add -> resources.getString(R.string.action_add)
        R.id.action_delete -> resources.getString(R.string.action_delete)
        R.id.action_save -> resources.getString(R.string.action_save)
        else -> "Please select menu"
    }

    textView.text = message

    return super.onOptionsItemSelected(item)
}

override fun onOptionsItemSelected(item: MenuItem?): Boolean {

val message = when (item?.itemId) {

R.id.action_add -> resources.getString(R.string.action_add)

R.id.action_delete -> resources.getString(R.string.action_delete)

R.id.action_save -> resources.getString(R.string.action_save)

else -> "Please select menu"

}

textView.text = message

return super.onOptionsItemSelected(item)

}

item?itemIdでメニュー項目のIDが取得できるので、それをwhenで処理を振り分けています。
今回はそれぞれ選択されたメニューの名前を表示するだけなので、when式の結果をmessageに代入しています。

messageをtextView.textに入れてあげれば画面に表示されます。

最後のreturn super.onOptionsItemSelected(item)は規定の動作をする上で必要なのでそのまま使用します。

ここまでできたらエミュレータで確認してみましょう。
選択したメニューが画面に表示されればOKです。

オプションメニューのアイテムを常に表示してみよう

基本的な流れはできたので、少し表示に仕方を変えてみたいと思います。

Addのメニューをアクションバーに常に表示されるようにしたいと思います。

Addをアクションバーに表示してみよう

Addのメニューを選択して、Attributesの「ShowAsAction」の旗のマークをクリックします。
以下のようなメニューが表示されるので、「always」にチェックを入れて、「Apply」ボタンをクリックします。

そうすると、以下のようにアクションバーに「Add」が表示されるようになります。

このShowAsActionですがその他の項目は以下のようになっていますので、必要に応じて変えてみるといいと思います。

never	アクションバーには配置しません。常に通常のメニューの中に表示されます。
always	常にアクションバーに項目を配置します。
ifRoom	アクションバーに空きがある場合にのみ配置します。空きがない場合には通常のメニューのなかに表示されます。
collapseActionView	項目に関連付けられているアクションビューは折りたたみ可能です。
withText	アクションバーに表示するときにタイトルも一緒に表示します。

「collapseActionView」はちょっと使ったことがないのでよくわかりません😓
「withText」は他の属性と合わせて使ったります。「always」や「ifRoom」と一緒に使うとアイコンも隣にタイトルを表示できるようになったります。ただし、余白が多い場合のみなので横画面にしたときに表示されるようです。

よく使うメニュー項目はアクションバーに常に表示させたりといったことができるので、いろいろ試してみるといいですね。

Addアイコンを表示してみよう

このままだとタイトルが表示されていますが、アクションバーにはできればアイコンを表示したいですよね。
その場合はアイコン画像を設定すればいいのですが、デフォルトで使えるものがいまいちいいものがないので作ってしまいましょう。

VectorAssetsという機能を使って、予め用意されているクリップアートを使って簡単にアイコンを作ることができます。

drawbleフォルダを右クリックして、New > Vecter assets を選択してください。

そうすると下記のような画面が表示されます。

クリップアートから画像を選択したいので赤丸のついているボタンをクリックしてください。

クリップアートの一覧が表示されるので、赤丸の入力ボックスから使いたいアイコンを検索します。

add で検索すると以下のようになるので、今回は赤丸で示しているアイコンを使ってみます。

最初の画面に戻るので次はアイコンの色を変更していきましょう。
Colorのところをクリックします。

カラーパレットが表示されますが、白なので右上にあるカラーコードに直接「FFFFFF」と入力して、「Choose」ボタンをクリックします。

アイコンが白になったのを確認して、Name を下図のように設定します。（Nameはなんでもいいのでわかりやすい名前にしておきましょう）

「Next」をクリックすると保存場所を聞かれるのでそのまま「Finish」ボタンをクリックします。

そうすると、drawbleフォルダのなかに「ic_add_white_24dp.xml」ができてると思います。
これでアイコン画像ができたのでメニューに適応させましょう。

下図のiconの項目の絵のマークをクリックします。

次のような画面が表示されるので作成したアイコン「ic_add_white_24dp」を選択して「OK」をクリックします。

そうすると「Add」を表示されていたメニューがアイコンに変わったのがわかると思います。

プレビュー画面では他のアイコンや文字が黒なので違和感がありますが、実際にエミュレータで起動すると白になるので大丈夫です。
なので、起動して確認してみましょう。

このように+マークが表示されればOKです！

オプションメニューを無効化してみよう

メニューの項目を状況に応じて無効化したいといった場合もあると思います。
そのやり方を見ていきましょう。

メニューが表示される前に呼ばれるonPrepareOptionsMenu()メソッドを使って表示の切り替えを行います。

override fun onPrepareOptionsMenu(menu: Menu?): Boolean {
    return super.onPrepareOptionsMenu(menu)
}

override fun onPrepareOptionsMenu(menu: Menu?): Boolean {

return super.onPrepareOptionsMenu(menu)

}

引数で渡されてく menu から該当のメニュー項目をmenu?.findItem()を使って取得して、isEnabledプロパティをfalseにしてあげればOKです。
以下の例ではDeleteのメニューを無効化しています。

override fun onPrepareOptionsMenu(menu: Menu?): Boolean {
    val deleteItem = menu?.findItem(R.id.action_delete)
    deleteItem?.isEnabled = false

    return super.onPrepareOptionsMenu(menu)
}

override fun onPrepareOptionsMenu(menu: Menu?): Boolean {

val deleteItem = menu?.findItem(R.id.action_delete)

deleteItem?.isEnabled = false

return super.onPrepareOptionsMenu(menu)

}

最後のreturn文は最初のままにしておけばいいと思います。

非表示にした項目を再度表示したい場合はisEnabledプロパティをtrueにすればOKです。

ではエミュレータで確認してみましょう。

このようにDeleteメニューが薄い表示になって押せなくなっていればOKです！

オプションメニューを非表示にしてみよう

メニュー項目の表示系をもう一つやってみましょう。
今度は非表示にしてみます。

先ほどと同様にonPrepareOptionsMenu()メソッドに書いていきます。

同様にメニュー項目をmenu?.findItem()を使って取得して、isVisibleプロパティをfalseにしてあげればOKです。

override fun onPrepareOptionsMenu(menu: Menu?): Boolean {
    val deleteItem = menu?.findItem(R.id.action_delete)
    deleteItem?.isEnabled = false

    val addItem = menu?.findItem(R.id.action_add)
    addItem?.isVisible = false

    return super.onPrepareOptionsMenu(menu)
}

override fun onPrepareOptionsMenu(menu: Menu?): Boolean {

val deleteItem = menu?.findItem(R.id.action_delete)

deleteItem?.isEnabled = false

val addItem = menu?.findItem(R.id.action_add)

addItem?.isVisible = false

return super.onPrepareOptionsMenu(menu)

}

非表示にした項目を再度表示したい場合はisVisibleプロパティをtrueにすればOKです。

ではエミュレータで確認してみましょう。

こうですね、Addのアイコンが消えているのでOKです。

簡単でしたがオプションメニューの使い方を説明してみました。
アクションバーにサーチメニューを置くやり方なんかも今後取り扱っていけたらなぁと思いますが、他にもいろいろ書きたいこともあり。
時間はかかりますがおいおい記事にしてこうと思います。

[Kotlin de Android] ViewBinding ビューバインディングを使ってみよう

目次

開発環境

プロジェクトを作ろう

View Bindingを使えるように設定しよう

画面を作ろう

Buttonの設定をしていこう

TextViewの設定をしていこう

View Bindingを使ってTextViewに文字列を表示しよう

View Bindingを使ってButtonをクリックしてみよう

ButtonをクリックしてTextViewを更新しよう

[Kotlin de Android] RecyclerViewで2行表示するリスト表示してみよう

目次

開発環境

プロジェクトを作ろう

画面を作ろう

表示するデータを作ろう

RecyclerViewを使うための設定しよう

データを表示するためのアダプターを作ろう

データを表示しよう

区切り線を表示しよう

項目をクリックできるようにしよう

[Kotlin de Android] RecyclerViewでリスト表示してみよう

目次

開発環境

プロジェクトを作ろう

画面を作ろう

表示するデータを作ろう

RecyclerViewを使うための設定しよう

データを表示するためのアダプターを作ろう

データを表示しよう

区切り線を表示しよう

項目をクリックできるようにしよう

[Kotlin de Android] Android Studio 4.1 でプロジェクトを作ろう

開発環境

プロジェクトを作ろう

Kotlin Android Extensionsを使えるようにしよう

[Kotlin de Android] Android Studio 3.4 プロジェクトを作ろう

開発環境

プロジェクトを作ろう

[Kotlin de Android] オプションメニューを使ってみよう

目次

開発環境

プロジェクトを作ろう

オプションメニューを作ろう

メニューファイルを作ろう

メニューを作っていこう

画面を作ろう

オプションメニューを表示しよう

オプションメニューをクリックしてみよう

オプションメニューのアイテムを常に表示してみよう

Addをアクションバーに表示してみよう

Addアイコンを表示してみよう

オプションメニューを無効化してみよう

オプションメニューを非表示にしてみよう

最近の投稿