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/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です。

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

2017/07/02

[Kotlin de Android] オリジナルなListViewを作ってみよう

前回までは Android が標準で用意しているレイアウトを使いましたが、
今回はオジリナルなレイアウトを使った ListView の作り方について見ていきたいと思います。

完成版はこのような形になります。

[peg-image src=”https://lh3.googleusercontent.com/-7KcKY8VfVdQ/W2unDOSoDaI/AAAAAAAAbFs/v_-n_0YkdZoPlW1BZrYE7nikUI2roP-3gCCoYBhgL/s144-o/kotlin_customlist_10.png” href=”https://picasaweb.google.com/104967861399298501788/6530100651433058145#6587542553777147298″ caption=”” type=”image” alt=”kotlin_customlist_10.png” image_size=”687×1181″ peg_single_image_size=”w400″ ]

Twitter のようなレイアウトを作っていきます。
クリックすると名前が表示されるようになっています。

開発環境
 プロジェクトを作ろう
 画面を作ろう
 画像ファイルを用意しよう
 リストビューに表示するレイアウトを作ろう
 リストビューに表示するデータを作ろう
 リストビューにデータを表示しよう
 リストをクリックしてみよう

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

開発環境

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

プロジェクトを作ろう

では早速プロジェクトを作っていきましょう。
プロジェクトの作成方法は[Kotlin de Android] 最初はやっぱりHelloWorld を参考にしてみてください。

各画面での設定は以下の通りです。
プロジェクトの名前は「CustomListView2」
「Include Kotlin support」にチェックを入れるのをお忘れなく。
Activityの種類は「Empty Activity」
Activityの名前は「MainActibity」

画面を作ろう

プロジェクトが作れたらまずは画面を作っていきましょう。
作り方は以前と同じなので、こちらの手順と同様に作成してください。

ListView の ID も myListView としておいてください。

画像ファイルを用意しよう

今回は画像とテキストを2つ使ったオリジナルのレイアウトを作っていくので、表示する画像を用意しておきましょう。
適当なサイズ（1000*1000pxくらいにしてあります）の正方形の画像を5枚用意しました。
ご自身で用意してもらっていいですし、GitHubからダウンロードして使っていただいてもOKです。

用意した画像を Finder 等ですべて選択してコピーします。
Android Studio に戻って、ファイル一覧から app > res > drawable を開いてください。

[peg-image src=”https://lh3.googleusercontent.com/-H5mLhUSFtQk/W2k_IvMek8I/AAAAAAAAbE4/tkbaMieKomgm2om2w-Y_Qgj6XAJ0hEJCACCoYBhgL/s144-o/kotlin_customlist_03.png” href=”https://picasaweb.google.com/104967861399298501788/6530100651433058145#6586865349346366402″ caption=”” type=”image” alt=”kotlin_customlist_03.png” image_size=”572×482″ peg_single_image_size=”w300″ ]

drawable フォルダを選択した状態で貼り付けます。

そうすると、下のようなダイアログが出るので、drawable のほうを選択してOKボタンをクリックします。

[peg-image src=”https://lh3.googleusercontent.com/-R1auZ3Gj2mE/W2k_IrwxuvI/AAAAAAAAbE4/bKQrFKMfxLsU6DE2VtQYk1CYcKSdfXFewCCoYBhgL/s144-o/kotlin_customlist_04.png” href=”https://picasaweb.google.com/104967861399298501788/6530100651433058145#6586865348424874738″ caption=”” type=”image” alt=”kotlin_customlist_04.png” image_size=”830×856″ peg_single_image_size=”w400″ ]

すると、drawable フォルダに画像がコピーされたかと思いますので、これでOKです。

[peg-image src=”https://lh3.googleusercontent.com/-CB-JY3qN3_0/W2k_IpHSR_I/AAAAAAAAbE4/P24fe0QZe_4elHlfKtpc2Pm1tuxeH3nkQCCoYBhgL/s144-o/kotlin_customlist_05.png” href=”https://picasaweb.google.com/104967861399298501788/6530100651433058145#6586865347713976306″ caption=”” type=”image” alt=”kotlin_customlist_05.png” image_size=”576×676″ peg_single_image_size=”w300″ ]

これで画像の準備は完了です。

リストビューに表示するレイアウトを作ろう

オリジナルなレイアウトを作成するために Layout ファイルをまずは作ってあげます。

app > res > layout フォルダを選択して、右クリックをします。
New > Layout resource file を選択します。

[peg-image src=”https://lh3.googleusercontent.com/-lqpT9-2BIEY/W2k_IvduSSI/AAAAAAAAbE4/WSR_731Gnr4IQ_y2WxEWDj3o9WKn8Dl-ACCoYBhgL/s144-o/kotlin_customlist_01.png” href=”https://picasaweb.google.com/104967861399298501788/6530100651433058145#6586865349418699042″ caption=”” type=”image” alt=”kotlin_customlist_01.png” image_size=”1518×1658″ ]

レイアウト作成ダイアログが表示されるので、下記のように設定してOKボタンをクリックします。
File name: list_item
Root element: android.support.constraint.ConstraintLayout
Source set: main
Directory name: layout

[peg-image src=”https://lh3.googleusercontent.com/-lOnkw0BAsIU/W2k_Igjp-ZI/AAAAAAAAbE4/N6t1zGk0vQwh5MiNXJHuojRtRf2z4mKFwCCoYBhgL/s144-o/kotlin_customlist_02.png” href=”https://picasaweb.google.com/104967861399298501788/6530100651433058145#6586865345417050514″ caption=”” type=”image” alt=”kotlin_customlist_02.png” image_size=”1648×946″ ]

では作った list_item.xml を開いてレイアウトを作っていきましょう。

まず、ImageView を左側に配置します。このときなにかしらの画像を選択するように言われるので、先程用意した画像を選択してください。
この状態のままだと ImageView が大きすぎるので、layout_width と layout_height を 72dp にしておきます。
ID は flowerImgView にします

TextView を2つ、ImageViewの右側に配置します。Twitter のようなレイアウトになります。

1つ目の TextView は以下のように設定します。
ID: nameTextView
textStyle: Bold (B を選択します)
textSize: 18dp

2つ目の TextView は以下のように設定します。
ID: descTextView

ざっと設定してから位置を調整していきます。
このあたりは文字で説明すると大変なので、動画にしてあるのでそちらを見てみてください。

リストビューに表示するデータを作ろう

次にリストに表示するデータを作っていきましょう。
今回はお花の写真をその名前、説明を表示していくので、それぞれ List を作っていきます。

MainActivity.kt を開いてください。
onCreate() の中に以下のように書いていきます。

val names = listOf(
        "あじさい",
        "蓮",
        "ネモフィラ",
        "バラ",
        "ふじ")
val descriptions = listOf(
        "アジサイ（紫陽花、学名 Hydrangea macrophylla）は、アジサイ科アジサイ属の落葉低木の一種である。広義には「アジサイ」の名はアジサイ属植物の一部の総称でもある。",
        "ハス（蓮、学名：Nelumbo nucifera）は、インド原産のハス科多年性水生植物。",
        "ネモフィラはムラサキ科ネモフィラ属（Nemophila）に分類される植物の総称。または、ルリカラクサ（瑠璃唐草、学名：Nemophila menziesii）のこと。",
        "バラ（薔薇）は、バラ科バラ属の総称である。あるいは、そのうち特に園芸種（園芸バラ・栽培バラ）を総称する。ここでは、後者の園芸バラ・栽培バラを扱うこととする。 バラ属の成形は、灌木、低木、または木本性のつる植物で、葉や茎に棘を持つものが多い。",
        "フジ（藤、学名: Wisteria floribunda）は、マメ科フジ属のつる性落葉木本。一般名称としての藤には、つるが右巻き（上から見て時計回り）と左巻きの二種類がある。")
val images = listOf(
        R.drawable.hydrangea,
        R.drawable.lotus,
        R.drawable.nemophila,
        R.drawable.rose,
        R.drawable.wisteria)

val names = listOf(

"あじさい",

"蓮",

"ネモフィラ",

"バラ",

"ふじ")

val descriptions = listOf(

"アジサイ（紫陽花、学名 Hydrangea macrophylla）は、アジサイ科アジサイ属の落葉低木の一種である。広義には「アジサイ」の名はアジサイ属植物の一部の総称でもある。",

"ハス（蓮、学名：Nelumbo nucifera）は、インド原産のハス科多年性水生植物。",

"ネモフィラはムラサキ科ネモフィラ属（Nemophila）に分類される植物の総称。または、ルリカラクサ（瑠璃唐草、学名：Nemophila menziesii）のこと。",

"バラ（薔薇）は、バラ科バラ属の総称である。あるいは、そのうち特に園芸種（園芸バラ・栽培バラ）を総称する。ここでは、後者の園芸バラ・栽培バラを扱うこととする。バラ属の成形は、灌木、低木、または木本性のつる植物で、葉や茎に棘を持つものが多い。",

"フジ（藤、学名: Wisteria floribunda）は、マメ科フジ属のつる性落葉木本。一般名称としての藤には、つるが右巻き（上から見て時計回り）と左巻きの二種類がある。")

val images = listOf(

R.drawable.hydrangea,

R.drawable.lotus,

R.drawable.nemophila,

R.drawable.rose,

R.drawable.wisteria)

names は String の List でお花の名前の一覧ですね。
descriptions も String の List でお花の説明の一覧です。
images は Int の List で画像の ID の一覧です。
それぞれ、順番通りになるようにしておいてください。

次にこれらをまとめて扱うために Data Class を作っていきます。

今回は MainActivity クラスのなかに定義していきますが、別のファイルにしてもOKです。
以下のように書いてあげます。

data class FlowerData(val name: String, val desc: String, val imageId: Int)

1	data class FlowerData(val name: String, val desc: String, val imageId: Int)

では、この FlowerData クラスを使って List を作ります。

val flowers = List(names.size) { i -> FlowerData(names[i], descriptions[i], images[i])}

1	val flowers = List(names.size) { i -> FlowerData(names[i], descriptions[i], images[i])}

List の生成と初期化が1行でできちゃうので、Kotlin って便利。
（Kotlinのバージョンアップに伴うものなのか、前回から少しだけ書き方が変わっています。）

これでデータは完成です。

リストビューにデータを表示しよう

次は実際にリストビューに表示するところを作っていくのですが、今までは ArrayAdapter や SimpleAdapter といった Android 標準のアダプタを使ってきましたが、今回のような複雑なレイアウトになってくると独自にアダプタを作成する必要があります。

すべて MainActivity クラス内に書いていきます。

ViewHolder を作ろう

まずは ViewHolder というクラスを作っていきます。
あとで詳しく見ていきますが、リストはすべての行数分のレイアウトを生成するわけではなく、画面に表示されている分だけ生成して、リソースを使い回すという処理をしています。
そのために必要となってくるのが ViewHolder というものになります。
このクラスにレイアウトの部品を保持しておいて、その中身だけ入れ替える（TextView ならテキストを替える）というような動作になります。

ViewHolder はデータを保持しておくだけなので、データクラスで以下のように作成してあげます。

data class ViewHolder(val nameTextView: TextView, val descTextView: TextView, val flowerImgView: ImageView)

1	data class ViewHolder(val nameTextView: TextView, val descTextView: TextView, val flowerImgView: ImageView)

今回は独自レイアウト内には3つの部品が配置されているので、このように3つプロパティを用意しました。
配置した部品の分だけ用意してくださいね。

独自アダプタを作ろう

ではいよいよ独自アダプタを作成しましょう。
いろいろな作り方がありますが、今回は ArrayAdapter を継承して独自アダプタを作っていきます。

クラスの定義は以下のようになります。

class FlowerListAdapter(context: Context, flowers: List<FlowerData>) : ArrayAdapter<FlowerData>(context, 0, flowers) {
}

1 2	class FlowerListAdapter(context: Context, flowers: List<FlowerData>) : ArrayAdapter<FlowerData>(context, 0, flowers) { }

FlowerListAdapter のコンストラクタ引数はコンテキストと先ほど作ったお花のデータのリストになります。
親クラスのコンストラクタ引数にもそのまま渡してあげます。親クラスの第二引数はレイアウトのIDを渡すのですが、あとで設定していくので、ここでは 0 としています。

では次に、あとで必要となってくるプロパティを先に用意しておきましょう。

class FlowerListAdapter(context: Context, flowers: List<FlowerData>) : ArrayAdapter<FlowerData>(context, 0, flowers) {
    private val layoutInflater = context.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater
}

class FlowerListAdapter(context: Context, flowers: List<FlowerData>) : ArrayAdapter<FlowerData>(context, 0, flowers) {

private val layoutInflater = context.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater

}

レイアウトファイルを取得するために必要となる LayoutInflater を取得しておきます。
レイアウトを生成するたびに取得してもいいのですが、何度もやる処理なのでクラスプロパティとして持っておきます。

さて、次は実際にレイアウトにデータを反映していく部分を作っていきます。

getView メソッドをオーバーライドしてあげればOKです。

class FlowerListAdapter(context: Context, flowers: List<FlowerData>) : ArrayAdapter<FlowerData>(context, 0, flowers) {
    private val layoutInflater = context.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater

    override fun getView(position: Int, convertView: View?, parent: ViewGroup?): View {
    }
}

class FlowerListAdapter(context: Context, flowers: List<FlowerData>) : ArrayAdapter<FlowerData>(context, 0, flowers) {

private val layoutInflater = context.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater

override fun getView(position: Int, convertView: View?, parent: ViewGroup?): View {

}

引数の position は行数、convertView はレイアウトのView、parent は親ビューといった感じです。

まずは必要な変数を用意しておきます。
このメソッドは View を返すのですが、convertView が null でなければそのまま使い、ｎｕｌｌだったらレイアウトを生成して返します。
Kotlin では引数は不変な変数なので書き換えができないため、別の変数に代入して使っていきます。(5行目)

それから先程作った ViewHolder も必要となっておくので変数を定義しておきます。(6行目)

class FlowerListAdapter(context: Context, flowers: List<FlowerData>) : ArrayAdapter<FlowerData>(context, 0, flowers) {
    private val layoutInflater = context.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater

    override fun getView(position: Int, convertView: View?, parent: ViewGroup?): View {
        var view = convertView
        var holder: ViewHolder
    }
}

class FlowerListAdapter(context: Context, flowers: List<FlowerData>) : ArrayAdapter<FlowerData>(context, 0, flowers) {

private val layoutInflater = context.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater

override fun getView(position: Int, convertView: View?, parent: ViewGroup?): View {

var view = convertView

var holder: ViewHolder

}

次に、view が null だった場合に、レイアウトと ViewHolder を生成していきます。
ViewHolder は view の tag に保持しておくことで、レイアウトの使い回しをしています。

view が null 以外だった場合には、view の tag に ViewHolder が格納されているはずなのでそれを使ってあげます。

class FlowerListAdapter(context: Context, flowers: List<FlowerData>) : ArrayAdapter<FlowerData>(context, 0, flowers) {
    private val layoutInflater = context.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater

    override fun getView(position: Int, convertView: View?, parent: ViewGroup?): View {
        var view = convertView
        var holder: ViewHolder

        if (view == null) {
            view = layoutInflater.inflate(R.layout.list_item, parent, false)
            holder = ViewHolder(
                    view?.nameTextView!!,
                    view.descTextView,
                    view.flowerImgView
            )
            view.tag = holder
        } else {
            holder = view.tag as ViewHolder
        }
    }
}

class FlowerListAdapter(context: Context, flowers: List<FlowerData>) : ArrayAdapter<FlowerData>(context, 0, flowers) {

private val layoutInflater = context.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater

override fun getView(position: Int, convertView: View?, parent: ViewGroup?): View {

var view = convertView

var holder: ViewHolder

if (view == null) {

view = layoutInflater.inflate(R.layout.list_item, parent, false)

holder = ViewHolder(

view?.nameTextView!!,

view.descTextView,

view.flowerImgView

)

view.tag = holder

} else {

holder = view.tag as ViewHolder

}

view と ViewHolder の生成ができたら、 ViewHolder のプロパティにデータを反映させて、最後に view を返してあげます。

class FlowerListAdapter(context: Context, flowers: List<FlowerData>) : ArrayAdapter<FlowerData>(context, 0, flowers) {
    private val layoutInflater = context.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater

    override fun getView(position: Int, convertView: View?, parent: ViewGroup?): View {
        var view = convertView
        var holder: ViewHolder

        if (view == null) {
            view = layoutInflater.inflate(R.layout.list_item, parent, false)
            holder = ViewHolder(
                    view?.nameTextView!!,
                    view.descTextView,
                    view.flowerImgView
            )
            view.tag = holder
        } else {
            holder = view.tag as ViewHolder
        }

        val flower = getItem(position) as FlowerData
        holder.nameTextView.text = flower.name
        holder.descTextView.text = flower.desc
        holder.flowerImgView.setImageBitmap(BitmapFactory.decodeResource(context.resources, flower.imageId))

        return view
    }
}

class FlowerListAdapter(context: Context, flowers: List<FlowerData>) : ArrayAdapter<FlowerData>(context, 0, flowers) {

private val layoutInflater = context.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater

override fun getView(position: Int, convertView: View?, parent: ViewGroup?): View {

var view = convertView

var holder: ViewHolder

if (view == null) {

view = layoutInflater.inflate(R.layout.list_item, parent, false)

holder = ViewHolder(

view?.nameTextView!!,

view.descTextView,

view.flowerImgView

)

view.tag = holder

} else {

holder = view.tag as ViewHolder

}

val flower = getItem(position) as FlowerData

holder.nameTextView.text = flower.name

holder.descTextView.text = flower.desc

holder.flowerImgView.setImageBitmap(BitmapFactory.decodeResource(context.resources, flower.imageId))

return view

}

ImageView のところですが、FlowerData では画像のIDを保持しているだけなので、 BitmapFactory.decodeResource を使って BitMap に変換して上げる必要があります。
最初からBitMapにして持っていくというやり方でもOKだと思いますが、このあたりは好みの問題ですかね。
個人的にはBitMapのような大きなデータをずっと保持しておくのも気持ち悪いのでIDで保持するようにしています。

そんなこんなで、これでアダプターは完成です。

データを表示しよう

ではいよいよ、データの表示ですね。
といってもここは今までと同じようにすればOKです。

onCreate メソッドに以下のように追記します。
独自アダプタを生成して、myListView にセットしてあげるだけですね。

val adapter = FlowerListAdapter(this, flowers)
myListView.adapter = adapter

1 2	val adapter = FlowerListAdapter(this, flowers) myListView.adapter = adapter

これで表示されるはずなので、エミュレーターで見てみましょう。

[peg-image src=”https://lh3.googleusercontent.com/-Ohlsipze6jY/W2unDBBHY5I/AAAAAAAAbFk/WyfteDz7HHIym0uT48fq9Yad1va39rziQCCoYBhgL/s144-o/kotlin_customlist_07.png” href=”https://picasaweb.google.com/104967861399298501788/6530100651433058145#6587542550214042514″ caption=”” type=”image” alt=”kotlin_customlist_07.png” image_size=”688×1224″ peg_single_image_size=”w300″ ]

あ、、、なんか各行の下のマージンがないのが微妙ですね(汗)
直しましょう。

list_item.xml を開きます。
ConstraintLayout を選択して、すべての Attributes を表示して、Padding の Botton を16dp にします。

[peg-image src=”https://lh3.googleusercontent.com/–mtBF4ngjxE/W2unDI8DrAI/AAAAAAAAbFk/XsuajUGFfiItpF7GmDRR85X6HprykvrIACCoYBhgL/s144-o/kotlin_customlist_08.png” href=”https://picasaweb.google.com/104967861399298501788/6530100651433058145#6587542552340311042″ caption=”” type=”image” alt=”kotlin_customlist_08.png” image_size=”1746×834″ peg_single_image_size=”w600″ ]

これでいいと思うので、もう一度エミュレーターで確認してみましょう。

[peg-image src=”https://lh3.googleusercontent.com/–X3HiBzSljw/W2unDHY9lHI/AAAAAAAAbFs/khEDL2aN_g8HrDncFWtO0n82AfMEQRwDgCCoYBhgL/s144-o/kotlin_customlist_09.png” href=”https://picasaweb.google.com/104967861399298501788/6530100651433058145#6587542551924675698″ caption=”” type=”image” alt=”kotlin_customlist_09.png” image_size=”684×1226″ peg_single_image_size=”w300″ ]

今度は良さそうですね！
無事、独自レイアウトが表示されるようになりました。

リストをクリックしてみよう

最後のクリック処理をさっと見ていきます。前回までとやり方は同じです。

onCreate メソッドの最後に次のように追記するだけです。

myListView.setOnItemClickListener { adapterView, view, position, id ->
    val name = view.findViewById<TextView>(R.id.nameTextView).text
    Toast.makeText(this, "clicked: $name", Toast.LENGTH_LONG).show()
}

myListView.setOnItemClickListener { adapterView, view, position, id ->

val name = view.findViewById<TextView>(R.id.nameTextView).text

Toast.makeText(this, "clicked: $name", Toast.LENGTH_LONG).show()

}

全て書いてしまいましたが、今まで通り、setOnItemClickListener に処理を書いてあげればOKです。
今回はお花の名前だけ表示するようしています。

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

クリックして Toast が表示されればOKです！

前回よりは少し難しくなりましたが、独自のレイアウトを使った ListView の作り方について見ていきました。
最初は独自アダプタを作ったりするのが難しく感じるかもしれませんが、慣れるとそこまで難しくも感じなくなるかな、と。
いろいろなレイアウトの ListView をつくってみてください！

2017/06/09

[Kotlin de Android] ListViewで2つのテキストを表示してみよう

前回 ListView について扱いましたが、今回は少しだけ発展させて 2 つのテキストを表示する方法について見ていきたいと覆います。

開発環境

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

プロジェクトを作ろう

では早速プロジェクトを作っていきましょう。
プロジェクトの作成方法は[Kotlin de Android] 最初はやっぱりHelloWorld を参考にしてみてください。

各画面での設定は以下の通りです。
プロジェクトの名前は「simpleListView2」
「Include Kotlin support」にチェックを入れるのをお忘れなく。
Activityの種類は「Empty Activity」
Activityの名前は「MainActibity」

画面を作ろう

プロジェクトが作れたらまずは画面を作っていきましょう。
作り方は前回と同じなので、こちらの手順と同様に作成してください。

ListView の ID も myListView としておいてください。

リストビューに表示するデータを作ろう

前回同様にまずは表示するデータを作っていきましょう。

今回は2つのテキストを表示したいので、Map の List を作ってあげます。
スクロールするところが見たいので20個ほど用意してみます。

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

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

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

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

Map の List なのですが、1行で済んじゃいます。Kotlin 素敵(笑)
前回より少しだけ複雑になりましたが、{} のなかで Map を生成しているだけなのでそれほど難しくないと思います。

2つ以上のデータを表示させたいときは必ず Map を使うようにしてください。
後でキー名が必要になってくるからです。

リストビューにデータを表示しよう

データができたので ListView に表示してみましょう。
色々やり方はあるのですが、今回は簡単に実装できるように Andriod が標準で用意している Layout やクラスを使っていきましょう。

前回は ArrayAdapter を使いましたが、今回は SimpleAdapter というのを使っていきます。
ListView に複数の部品を使いたいけど、単純に表示させたいだけと言ったときに使うと便利です。

onCreate() の最後に以下のように書いていきましょう。

val adapter = SimpleAdapter(
        this,
        items,
        android.R.layout.simple_list_item_2,
        arrayOf("title", "detail"),
        intArrayOf(android.R.id.text1, android.R.id.text2)
)
myListView.adapter = adapter

val adapter = SimpleAdapter(

this,

items,

android.R.layout.simple_list_item_2,

arrayOf("title", "detail"),

intArrayOf(android.R.id.text1, android.R.id.text2)

)

myListView.adapter = adapter

一行目では SimpleAdapter を生成しています。(引数が多いので複数行に分けていますが、1行で書けます)
第一引数には Context を指定するので this でOKです。
第二引数には表示したいデータを指定します。
第三引数はレイアウトのIDを指定するのですが、2行だけのレイアウトが Android 標準で用意されているのでそちらを使います。
第四引数には表示したいデータのキー名を指定します。ここでキー名が必要となってくるため Map が必要となってくるんですね。
第五引数には表示させる部品の ID を指定します。
ここで指定しているIDってなによ？ってなりますよね。
第三引数の android.R.layout.simple_list_item_2 を Command キーを押しながらクリックするとソースを表示できます。
simple_list_item_2.xml が開くと思いますので、そちらから ID を確認してみてください。
以下のようなソースになっていると思います。

[peg-image src=”https://lh3.googleusercontent.com/-xDRq8bXWNBE/WvFZ9JJyQ7I/AAAAAAAAauQ/Du_kK1LgGqwA8xPB8Z-v7Wz_UKIgGD77QCCoYBhgL/s144-o/kotlin_listview2_03.png” href=”https://picasaweb.google.com/104967861399298501788/6530100651433058145#6553117839764636594″ caption=”” type=”image” alt=”kotlin_listview2_03.png” image_size=”1286×944″ ]

Text の方で見てあげると早いのですが、TextView が2つ定義されていて、それぞれ ID(android:id) が text1 と text2 になっています。これらを指定していることになります。

第四引数と第五引数の配列の並びも重要で、今回の場合だと、title のデータを text1 に、detail のデータを text2 に表示してくれます。どちらかがを逆に書けば逆に表示表示されるというわけですね。

最後に生成した Adapter を myListView にセットしてあげれば表示されます。

ではここまでできたら一度エミュレータで確認してみましょう。

[peg-image src=”https://lh3.googleusercontent.com/-dkNrj64Wr9o/WvFWNkZdCwI/AAAAAAAAat4/fnwLbYN5LRMBe8Mi1O-OY8Ph2u7HBVJ-gCCoYBhgL/s144-o/kotlin_listview2_01.png” href=”https://picasaweb.google.com/104967861399298501788/6530100651433058145#6553113723909507842″ caption=”” type=”image” alt=”kotlin_listview2_01.png” image_size=”684×1222″ peg_single_image_size=”w300″ ]

Title−0 から Title-19 まで表示されていればOKです。

リストをクリックしてみよう

最後にリストをクリックできるようにしてみましょう。今回も画面遷移などはせず Toast で表示させるだけにしておきます。

前回同様にListView のクリックイベントを検知するには onCreate() のなかに以下のように書いていきます。

myListView.setOnItemClickListener { adapterView, view, position, id ->
}

1 2	myListView.setOnItemClickListener { adapterView, view, position, id -> }

引数の名前は自動生成されるものからわかりやすい名前に変更しています。

これでクリックイベントが検知できるようになったので、view から表示内容を取得して、Toast で表示してみます。

まずは view から TextView を取得したいのですが、findViewById() を使ってあげればOKです。
指定する ID は android.R.id.text1 としてあげます。
表示されている内容を取得したいので最後に .text としてあげましょう。

同様に detail のテキストも取得しましょう。

myListView.setOnItemClickListener { _, view, _, _ ->
    val title = view.findViewById<TextView>(android.R.id.text1).text
    val detail = view.findViewById<TextView>(android.R.id.text2).text
}

myListView.setOnItemClickListener { _, view, _, _ ->

val title = view.findViewById<TextView>(android.R.id.text1).text

val detail = view.findViewById<TextView>(android.R.id.text2).text

}

そうしたら、Toast で表示してあげればいいので次のように書いていきます。

myListView.setOnItemClickListener { adapterView, view, position, id ->
    val title = view.findViewById<TextView>(android.R.id.text1).text
    val detail = view.findViewById<TextView>(android.R.id.text2).text
    Toast.makeText(this, "$title: $detail", Toast.LENGTH_SHORT).show()
}

myListView.setOnItemClickListener { adapterView, view, position, id ->

val title = view.findViewById<TextView>(android.R.id.text1).text

val detail = view.findViewById<TextView>(android.R.id.text2).text

Toast.makeText(this, "$title: $detail", Toast.LENGTH_SHORT).show()

}

Toast.makeText() で生成してあげます。
第一引数は Context なので this としておきます。
第二引数は表示したい文字列です。ここではリストに表示されているテキストにしています。
第三引数は表示時間です。SHORT か LONG を選べるのでお好みで選択すればいいでしょう。

最後に show() メソッドを呼ぶことで表示されます。

では、エミュレータで動作確認をしていきましょう。

適当な行をクリックして、以下のように Toast が画面下部に表示されればOKです。

[peg-image src=”https://lh3.googleusercontent.com/-nLBvTrU1P3M/WvFWNnHbstI/AAAAAAAAat4/OapHqszIuQI3kzXieTEQG2iS-yQj36BHACCoYBhgL/s144-o/kotlin_listview2_02.png” href=”https://picasaweb.google.com/104967861399298501788/6530100651433058145#6553113724639228626″ caption=”” type=”image” alt=”kotlin_listview2_02.png” image_size=”902×1298″ peg_single_image_size=”w300″ ]

とても簡単でしたが、ListView に2つのテキストを表示させる方法でした！

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

目次

開発環境

プロジェクトを作ろう

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

画面を作ろう

Buttonの設定をしていこう

TextViewの設定をしていこう

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

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

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

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

開発環境

プロジェクトを作ろう

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

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

開発環境

プロジェクトを作ろう

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

目次

開発環境

プロジェクトを作ろう

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

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

メニューを作っていこう

画面を作ろう

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

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

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

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

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

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

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

[Kotlin de Android] オリジナルなListViewを作ってみよう

目次

開発環境

プロジェクトを作ろう

画面を作ろう

画像ファイルを用意しよう

リストビューに表示するレイアウトを作ろう

リストビューに表示するデータを作ろう

リストビューにデータを表示しよう

ViewHolder を作ろう

独自アダプタを作ろう

データを表示しよう

リストをクリックしてみよう

[Kotlin de Android] ListViewで2つのテキストを表示してみよう

目次

開発環境

プロジェクトを作ろう

画面を作ろう

リストビューに表示するデータを作ろう

リストビューにデータを表示しよう

リストをクリックしてみよう

最近の投稿