Android/Jetpack Compose Modifierに関するパラメータを紹介

どうも。どっことです。今回はJetpack ComposeのModifierについてチートシートを紹介したいと思います。

前回はTextコンポーサブルを紹介しましたが、「そもそも共通で設定するパラメータってどこで管理するねん」となりまして、調べたらModifierというオブジェクトがあることがわかりました。 今回はこのModifierについて、チートシートとして紹介したいと思います。

Modifierオブジェクトとは

Modifierは、コンポーサブルに対して設定可能な共通のパラメータを管理しているオブジェクトです。 AndroidViewがわかる人なら、Viewに対して設定できる項目くらいの理解で問題ないと思います。

Modifierを使うときのパラメータチートシート

Modifierで設定できるパラメータは（よく使うものは）以下です。

    // ****** 横幅指定関連 ****** // 
Modifier.width(20.dp)                    // 幅指定(layout_width)
    .fillMaxWidth()                      // 幅いっぱい（layout_width="match_parent"）
    .widthIn(20.dp, 20.dp)               // 最小・最大幅指定(minWidth,maxWidth)

    //****** 高さ指定関連 ******//
    .height(20.dp)                       // 高さ指定(layout_height)
    .fillMaxHeight()                     // 高さいっぱい（layout_height="match_parent"）
    .heightIn(20.dp, 20.dp)              // 最小・最大高さ指定（minHeight, maxHeight）
    
    //****** 縦横まとめて指定 ******//
    .size(20.dp)                         // 縦横指定(layout_width,layout_height) 
    .size(20.dp, 20.dp)                  // 縦横指定(layout_width,layout_height) 
    .fillMaxSize()                       // 縦横幅いっぱい (layout_width="match_parent"/layout_height="match_parent")
    .sizeIn(20.dp, 20.dp, 50.dp, 50.dp)  // 最小・最大縦横指定(minWidth, minHeight, maxWidth, maxHeight) 
    
    //****** background関連 ******//
    .background(Color.Red)               // 背景色指定(background)
    
    //****** padding関連 ******//
    .padding(top = 10.dp)                // 上部余白 (paddingTop)
    .padding(start = 10.dp)              // 左余白 (paddingStart)
    .padding(end = 10.dp)                // 右余白 (paddingEnd)
    .padding(bottom = 10.dp)             // 下部余白 (paddingBottom)
    .padding(horizontal = 10.dp)         // 左右余白 (paddingHorizontal)
    .padding(vertical = 10.dp)           // 上下余白 (paddingVertical)
    .padding(10.dp)                      // 上下左右余白 (padding)
    
    //****** 位置調整関連 ******//
    .align(Alignment.CenterHorizontally) // layout_gravity(左右位置, Columnコンポーネント内などで）
    .align(Alignment.CenterVertically)   // layout_gravity(上下位置, Rowコンポーネント内などで）
    
    //****** タップ処理関連 ******//
    .clickable { /** */ }                // タップ処理(setOnClickListener)
    
    //****** 枠線関連 ******//
    .border(BorderStroke(3.dp, Color.Blue)) // 枠線をつける(witdh, color)

    //****** 角丸関連 ******//
    .background(Color.Red, RoundedCornerShape(10.dp))                  // 角丸背景にする
    .border(BorderStroke(3.dp, Color.Blue), RoundedCornerShape(10.dp)) // 角丸枠線をつけるそ

その他

dimens.xmlに定義した値をpadding/marginの値として使いたい

dimensionResourceを使えばリソース定義を参照できます。以下、参考ページから転記。

// In the res/values/dimens.xml file
// <dimen name="padding_small">8dp</dimen>
// In your Compose code
val smallPadding = dimensionResource(R.dimen.padding_small)
Text(
    text = "...",
    modifier = Modifier.padding(smallPadding)
)

まとめ

今回はModifierオブジェクトで設定できるパラメータについてチートシートとして紹介しました。目を通してみると、角丸の実装がサポートされるようになったのは非常に嬉しいポイントだと思いました。この記事も参考になりそうな項目を見つけたら随時更新していく予定ですので、参考にしていただけますと幸いです。

次回やるとしたら、Imageコンポーネントについて同様に紹介しようと思います。

参考

• Compose のリソース  |  Jetpack Compose  |  Android Developers

Android/Jetpack Compose Textに関するパラメータを紹介

どうも。どっことです。今回はJetpack ComposeのTextコンポーサブルについてチートシートを紹介したいと思います。

これまでのAndroidViewから、Jetpack Composeに移行が完了できた人も少なくないのではないでしょうか。私はそんな移行できていない人間の一人なのですが、今回はそんなJetpack Composeで画面を実装する時に「これってどうやって実装するんだっけ！？」となってもすぐに解決できるよう、チートシートとしてこのページに整理したいと思います。

Textコンポーサブルとは

Textコンポーサブルは、AndroidViewでいうところのTextView、つまりキホンのキですね。テキストを表示せずにアプリを作ることはできないので、まずはここから入るのが王道だと思います。

Textコンポーサブルをつかうときのパラメータチートシート

Textコンポーサブルに設定できるパラメータは（よく使うものは）以下です。

Text(
  "Hello World", 
  fontSize = 24.sp,    // テキストサイズ
  lineHeight = 30.sp,  // 行の高さ
  maxLine = 3,         // 最大行数
  minLine = 1,         // 最小行数
  color = Color.Red,   // テキスト色
  fontStyle = FontStyle.Italic, // テキストスタイル(斜体)
  fontWeight = FontWeight.Bold, // テキストスタイル(太字）
  textAlign = TextAlign.Center, // テキストの位置（gravity）
  overflow = TextOverflow.Ellpsis // テキストが収まらない場合の省略表示(ellipsize)
)

その他の使い方

リソースを参照してテキストを表示する

stringResourceを利用すると、リソースのテキストを参照できます。

Text(stringResource(R.string.app_name))

表示テキストを装飾する

buildAnnotatedStringを利用すると、装飾されたテキストを表示することができるらしいです。

今回は割愛。

まとめ

今回はTextコンポーサブルでよく使うであろうパラメータについて紹介しました。AndroidViewがDeprecatedになる前にJetpackComposeを身につけておきたいですね。

Android GridLayoutの使い方について解説

どうも。どっことです。今回はGridLayoutの使い方について解説します。

GridLayout

Androidのレイアウトを実装するとき、LinearLayoutやConstraintLayoutをよく利用しますが、Viewを格子状に配置する時はGridLayoutが便利です。 LinearLayoutを複数用意しなくても済みますし、ConstraintLayoutで必要なたくさんの属性値を設定しなくても済みます。また、一部のLayoutParam属性に初期値が設定されているので、実際に実装する時の設定項目が少なく済むのも良いところの一つかと思います。今回はそんなGridLayoutの使い方について解説します。

GridLayoutの使い方

今回は、レイアウトファイルでGridLayoutを利用する場合の実装を解説します。

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:columnCount="3"
    android:background="@android:color/holo_red_light"
    android:rowCount="1">

    <TextView
        android:layout_row="0"
        android:layout_column="0"
        android:padding="10dp"
        android:background="@android:color/holo_blue_bright"
        android:text="00" />
    <TextView
        android:layout_row="0"
        android:layout_column="1"
        android:padding="10dp"
        android:background="@android:color/holo_blue_dark"
        android:text="01" />
    <TextView
        android:layout_row="0"
        android:layout_column="2"
        android:padding="10dp"
        android:background="@android:color/holo_green_light"
        android:text="02" />
</GridLayout>

1. GridLayout
1. layout_width:match_content指定。画面幅いっぱい指定。
2. layout_height:wrap_content指定。必要最小限の高さ指定。
3. layout_row:1、layout_column:3をそれぞれ指定。1行3列の格子指定。
2. GridLayout内の子View
1. layout_width／layout_heightを指定していない。
• これはGridLayoutが初期値としてwrap_contentを設定しているため。
2. layout_column／layout_rowにはそれぞれの配置位置を指定。

この実装でそのままレイアウトを確認すると、以下が表示されます。

GridLayout内のTextViewが全て左寄せに表示されました。子Viewに大きさを指定していないので、当たり前といったら当たり前ですね。

LinearLayoutのlayout_weightのように、要素を均等に広げるためには、layout_columnWeight／layout_rowWeightを使います。今回は横幅を均等に広げるため、layout_columnWeightを使います。

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/holo_red_light"
    android:columnCount="3"
    android:rowCount="1">

    <TextView
        android:layout_row="0"
        android:layout_column="0"
        android:layout_columnWeight="1"
        android:background="@android:color/holo_blue_bright"
        android:padding="10dp"
        android:text="00" />

    <TextView
        android:layout_row="0"
        android:layout_column="1"
        android:layout_columnWeight="1"
        android:background="@android:color/holo_blue_dark"
        android:padding="10dp"
        android:text="01" />

    <TextView
        android:layout_row="0"
        android:layout_column="2"
        android:layout_columnWeight="1"
        android:background="@android:color/holo_green_light"
        android:padding="10dp"
        android:text="02" />
</GridLayout>

これでレイアウトを表示すると以下になります。

均等幅に表示されました。

layout_rowWeightも同様です。上のケースは、GridLayoutの高さ（layout_height）がwrap_content指定になっているため、100dp指定に変更して試してみます。

まずは、何も指定せずに表示を確認します。

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="100dp"
    android:background="@android:color/holo_red_light"
    android:columnCount="1"
    android:rowCount="2">

    <TextView
        android:layout_row="0"
        android:layout_column="0"
        android:background="@android:color/holo_blue_bright"
        android:padding="10dp"
        android:text="00" />

    <TextView
        android:layout_row="1"
        android:layout_column="0"
        android:background="@android:color/holo_green_light"
        android:padding="10dp"
        android:text="10" />

</GridLayout>

これでレイアウトを確認すると以下になります。

layout_columnWeightの時と同様、上寄せに要素が表示されました。layout_rowWeightを指定してみましょう。

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="100dp"
    android:background="@android:color/holo_red_light"
    android:columnCount="1"
    android:rowCount="2">

    <TextView
        android:layout_row="0"
        android:layout_rowWeight="1"
        android:layout_column="0"
        android:background="@android:color/holo_blue_bright"
        android:padding="10dp"
        android:text="00" />

    <TextView
        android:layout_row="1"
        android:layout_rowWeight="1"
        android:layout_column="0"
        android:background="@android:color/holo_green_light"
        android:padding="10dp"
        android:text="10" />

</GridLayout>

これでレイアウトの表示確認をすると以下になります。

子Viewが均等な高さで表示されました。

まとめ

今回はGridLayoutの使い方について解説しました。LinearLayoutやConstraintLayoutで大抵のことは実現できてしまうところではありますが、実はGridLayoutもうまく使えば同じように便利に利用することができます。実はGridLayoutだと、LinearLayoutでよく困るアレを解決することができるのですが...これは別の記事で紹介したいと思います。

参考

• GridLayout  |  API reference  |  Android Developers
• GridLayout.LayoutParams  |  API reference  |  Android Developers

Android 追加読み込みListViewを実装する方法を解説

どうも。どっことです。今回はListViewに追加読み込みする機能を実装する方法について解説します。

追加読み込み機能を持つListView

またまた、いにしえのListViewに関する解説です。RecyclerViewはカスタマイズ性に長けていますが、「単に一覧で表示してくれればいい」程度であれば、シンプル実装できるListViewもまだまだ使い道のあるコンポーネントかと思います。今回はそんなListViewで、追加読み込みをする機能の実装について解説しようと思います。

追加読み込みListViewを実装する

実装手順は以下の通りです。

1. 読み込み表示Viewを実装する
2. 読み込み表示Viewを表示する
3. 読み込み処理タイミングを検知する

順番に解説していきます。

読み込み表示Viewを実装する

まずは読み込み表示用のViewを実装します。一般的にはプログレスを表示する形かと思いますので、そのViewを用意しておきます。

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="50dp">

    <ProgressBar
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</FrameLayout>

読み込み表示Viewを表示する

次に読み込み表示用Viewの表示処理を実装します。ListViewにはFooterViewとしてViewを追加することができるので、ここに読み込み表示Viewを設定します。

listView.addFooterView(createFooterView())

fun createFooterView(): View {
    return layoutInflater.inflate(R.layout.view_progress, null)
}

読み込み処理タイミングを検知する

読み込み処理を実装します。OnScrollListener#onScrollを使って、スクロールが最下部に来た時を検知し、読み込み処理を実施します。

listView.setOnScrollListener(object : OnScrollListener {
    override fun onScrollStateChanged(view: AbsListView?, scrollState: Int) {
        // ここでは気にしない
    }
    override fun onScroll(view: AbsListView?, firstVisibleItem: Int,visibleItemCount: Int, totalItemCount: Int) {
        if (totalItemCount == firstVisibleItem + visibleItemCount) {
            // todo:すべての要素が表示されたので、追加読み込みを処理する
        }
    }
}

onScrollStateChangedが気になる人は、判定処理をあらかじめ実装したinterfaceを定義して、そちらを渡すような実装としても良いかもしれません。

interface OnBottomScrolledListener : OnScrollListener {
    /**
     * 最下部までスクロールされたことを検知
     **/
    fun onScrolledToBottom()

    override fun onScrollStateChanged(view: AbsListView?, scrollState: Int) {
        // ここでは気にしない
    }
    override fun onScroll(view: AbsListView?, firstVisibleItem: Int, visibleItemCount: Int, totalItemCount: Int) {
        if (totalItemCount == firstVisibleItem + visibleItemCount) {
            onScrolledToBottom()
        }
    }
}

listView.setOnScrollListener(object : OnBottomScrolledListener {
    override fun onScrolledToBottom() {
        // 最下部までスクロールされたことを検知したので、追加読み込みする
    }
}

また「読み込んだ結果、追加分が0件だった」場合に再度読み込み処理が実施されないよう、フラグなどでの管理も入れておきます。

listView.setOnScrollListener(object : OnBottomScrolledListener {
    override fun onScrolledToBottom() {
        if (!isLoadNecessary) {
            // 何もせず終了
            // このタイミングで読み込み表示Viewも消しておきましょう
            listView.addFooterView(null)
            return
        }
        // 最下部までスクロールされたことを検知したので、追加読み込みする
    }
}

まとめ

今回は下スクロールしたら追加読み込みしてくれるListViewについて解説しました。前回の解説でもコメントしましたが、RecyclerViewの登場によりListViewはもはやいにしえのコンポーネントとなっていますが、やはり初期装備が揃ってくれているおかげで実装が簡単という点がAndroidエンジニア初心者には優しいですね。

参考

• visible true: ListViewで最後尾までスクロールしたら自動的に要素を追加読み込みするサンプル

Android 久しぶりにzxing-android-embedded を使ってみたので紹介

どうも。どっことです。今回はzxingを使ってみたので紹介します。

zxingを使ってQRコード／バーコードリーダーを実装する

一時期流行りましたよね。バーコードとか、 QRコードとか読み取って、いい感じになにかやること。ネイティブアプリで。そんな時に、今回使用したzxingというライブラリが非常に使いやすく、何度も私を助けてくれました。今回は、久しぶりにこのライブラリを使ってQRコード読み取り画面を実装してみたので紹介したいと思います。（最近はAndroid標準のカメラがいろいろ読み取ってくれるからもう出番ないんだよなぁ。。。）

zxingの組み込みと実装の手順

ライブラリの追加(app/build.gradleに追記)

ライブラリを追加するので、例の如くapp/build.gradleのdependenciesに以下を追加します。

dependencies {
  implementation 'com.journeyapps:zxing-android-embedded:4.3.0'
}

AndroidManifest.xmlに追記

今回はライブラリ側で「この制御をいれてね」という案内があるのでそれに従います。

<application android:hardwareAccelerated="true" ... >

実装

ハードウェア（カメラ）の制御や、読み取った時の解析はすべてzxing側でやってくれるので、アプリ側からは呼び出す箇所と、読み取り結果を受け取るところだけを実装すればOKです。こちらも例の如くActivityResultLauncherを使ってライブラリの画面を呼び出し・読み取り結果を制御します。

private final ActivityResultLauncher<ScanOptions> barcodeLauncher = registerForActivityResult(new ScanContract(),result -> {
    if(result.getContents() == null) {
        Toast.makeText(this, "Cancelled", Toast.LENGTH_LONG).show()
    } else {
        Toast.makeText(this, "Scanned: " + result.getContents(), Toast.LENGTH_LONG).show()
    }
})

public void launch(View view) {
    barcodeLauncher.launch(new ScanOptions())
}

まとめ

今回はzxing-androidを使ってみたということで紹介しました。標準の機能が便利すぎるとはいえ、まだまだ使い所はあるかと思いますので、是非参考にしていただければと思います。

参考

• journeyapps/zxing-android-embedded: Barcode scanner library for Android, based on the ZXing decoder
• [Android] zxingでQRコードを読み取る時に画面が横回転しないようにする #Kotlin - Qiita
• 
  

Android テストコードの実装について解説

どうも。どっことです。今回は、テストコードの実装について解説したいと思います。

テストコード

テストコードは実機やエミュレータに開発段階のアプリをインストールせずとも、プログラムとしてテストを実行できるようにするものです。テストコードを実装せずとも、世の中に公開するアプリを開発することができるので、より難しい機能の実装や複雑なドメインロジックをプログラムに落とし込むなどのスキルを優先して獲得するというロードマップも考えとしてはあると思います。

ただ、昨今のCI／CDの重要性の高まりを鑑みると、テストコードを実装できることもエンジニアとして必要なスキルとして需要が上がってきているように見受けられます。そしてそんな需要が高まっている一方で、テストコードを実装できるエンジニアはまだまだ多くありません。ぜひテストコードを実装できるようになり、より広い知見をもつエンジニアへと一歩を進めましょう。

説明に入る前に（テストコードの種類）

Androidの開発においては、大きく2種類のテストコードがあります。

ユニットテスト

開発PC上で実行されるテストコードです。Androidの機能に依存しないビジネスロジックやアプリケーションロジックに対するテストコードを実装する際のものとなります。開発PC上で実行されるため、後述のインストルメントテストよりも高速に実行・実施ができます。

インストルメントテスト

実機やエミュレーター上で実行されるテストコードです。こちらは、Androidの機能に依存するUIまわりのテストや、外部機能などとの連携に対するテストコードとなります。より現実に近い環境でのテストとなるため、ユーザーストーリーを意識したテストに向いています。一方で、インストールなどのステップがビルド時に含まれるため、実行時間が比較的遅めになります。

今回は、ユニットテストの実装方法について解説します。

ユニットテストを実装する

ユニットテストの実装方法について、以下の流れで説明します。

• ライブラリの準備
• 実装
• その他
• Robolecticの紹介

ライブラリの準備

ユニットテストのテストコードを実装するためには以下をbuild.gradleに追加が必要です。プロジェクトを新規作成する際にAndroid Studioが自動で追加している場合がありますので、追加が必要か確認してください。

dependencies {
    testImplementation("junit:junit:4.13.2")
}

実装

それでは実装していきましょう。

テスト対象

テスト対象は以下のクラス・メソッドとします。

class Sample {
   fun test(input: Int?): Boolean {
       if (input == null) {
           throw IllegalArgumentException()
       }
       return input > 0
    }
}

テスト観点

テスト対象となるメソッドは、以下の観点でテストコードを実装することができます。

• trueが返される確認テスト
• falseが返される確認テスト
• 例外が投げられるテスト

上をベースに確認するテストコードを追加していきましょう。

テストクラスを追加する

テストを実装するため、テストクラスを実装します。テスト対象のクラスで option + Enter からCreate Testを選択すればテストクラスを作成できます。SampleTestという名前にすると、testディレクトリに以下のようなクラスが作成できると思います。

class SampleTest {
}

trueが返される確認テストを実装する

まずはtrueが返されることのテストです。

@Test
fun testTrue() {
    val sample = Sample()
    val value = sample.test(1)
    Assert.assertEquals(value, true)
}

以降の実装も同様ですが、テストメソッドを実装し@Testアノテーションを付与します。

そして、実際にテストしたい内容を実装します。今回は、入力値に1以上を指定した場合はtrueが返却されるので、それを確認するためのテストを実装します。

falseが返される確認テストを実装する

次にfalseが返されることのテストです。

@Test
fun testFalse() {
    val sample = Sample()
    val value = sample.test(0)
    Assert.assertEquals(value, false)
}

同様に、falseが返却されるケースを実装します。入力値に0以下を指定した場合はfalseが返却されるので、それを確認するためのテストを実装します。

例外が投げられるテストを実装する

そして、例外が投げられることのテストです。

@Test(expected = IllegalArgumentException::class)
fun testException() {
    val sample = Sample()
    sample.test(null)
    Assert.fail()
}

例外が発生するテストは@Testアノテーションのパラメータexpectedを指定します。そのパラメータには発生する例外のクラスを指定します。

また、例外が発生しなかった場合がテストがNGとなるように、例外がthrowされる直後のタイミングでAssert.fail()を実装しておきます。

これにて、該当クラスメソッドのテストが実装できました。あとはテストを実行すれば期待した結果になるかを確認する処理が実行されます。

その他

ここまでテストコードの実装について解説しましたが、実は1点問題があります。ユニットテストは開発PC上で実行されますが、その都合により、AndroidSDKに含まれる機能を利用することができません。これが結構ネックになり、例えばよくある実装の一つであるFragmentのインスタンス生成メソッドは、Fragmentやそれに渡すBundleがAndroidSDKに含まれるものなので、テストコードを実装することができません。

ではどうするかというと、一つはインストルメントテストで実装することです。実機やエミュレーター上でテストすることで、テストコードを実行することができます。

もう一つはRobolectricを利用することです。RobolectricはユニットテストでもAndroidSDKに含まれる機能を利用することができます。

Robolectricの紹介

今回は説明を省略しますが、公式サイトを紹介します。またRobolectricの利用方法についても、後日解説を予定しています。

• Robolectric

まとめ

今回はテストコード、特にユニットテストの実装方法について解説しました。テストコードやその実装の重要性は今後も高いものと予想されるので、今後もこれをテーマとした投稿をしていこうと考えていますので、よろしくお願いします。

参考

• ローカル単体テストを作成する  |  Android Developers

Android FlexboxLayoutの使い方を解説

どうも。どっことです。今回はFlexboxLayoutの使い方を解説します。

FlexboxLayoutを使う

タグやキーワードの一覧などに、Webサイトの見せ方の一つとして利用されている表示方法ですが、AndroidでもFlexboxLayoutというViewGroupで同様の表示が提供されています。今回はこちらのコンポーネントの使い方について解説します。

FlexboxLayoutを使ったレイアウトの実装方法

以下の順で利用方法について解説します。

• ライブラリを追加する。
• FlexboxLayoutをレイアウトとして利用する。
• 表示確認

ライブラリを追加する

ライブラリを追加します。build.gradleのdependenciesに以下を追加します。

dependencies {
  implementation 'com.google.android.flexbox:flexbox:3.0.0'
}

FlexboxLayoutをレイアウトとして利用する

FlexboxLayoutをレイアウトとして利用します。LinearLayoutやConstraintLayoutと同様に、レイアウト内に組み込みます。

<com.google.android.flexbox.FlexboxLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:flexWrap="wrap">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="テキスト1"
        android:padding="16dp"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="テキスト2 少し長め"
        android:padding="16dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="テキスト3"
        android:padding="16dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="テキスト4 長くなったら折り返される"
        android:padding="16dp" />
            
</com.google.android.flexbox.FlexboxLayout>

このときFlexboxLayoutの属性にはapp:flexWrap="wrap"を設定してください。このとき、appのnamespaceが定義されていないせいで赤文字表示される場合はnamespace定義を追加してください。（ctrl + Enter で大体解決してくれる）

表示確認

上記で実装すると、以下のように表示されます。

長いテキストが設定されているTextViewが折り返された位置で表示されているのが見てわかると思います。

まとめ

今回はFlexboxLayoutの使い方について解説しました。

参考

• google/flexbox-layout: Flexbox for Android
• AndroidでFlexboxLayoutを使ってViewを並べる - techium

Android RecyclerView コンテンツをドラッグ＆ドロップする実装を解説

どうも。どっことです。今回はRecyclerViewを使ったコンテンツのドラッグ＆ドロップの実装方法について解説します。

ドラッグ＆ドロップ機能を持ったRecyclerView

RecyclerViewの一番の利点は、拡張性に富んでいることだと思います。RecyclerViewが登場する以前では、ListViewがシンプルにコンテンツ一覧を表示する機能を担っていました。実装難易度もそこまで高くなく、単に一覧表示をさせるものであれば、今でもこれで十分です。しかし、より便利に、より良いUXを提供することを考えるとListViewではもうまかないきれないです。RecyclerViewは、拡張しやすいコンポーネントとして出てきたもので、今回のような機能はまさにRecyclerViewが活きるパターンの一つだといえます。

RecyclerViewにドラッグ&ドロップを実装する

それでは実装手順を解説します。

1. ItemTouchHelperインスタンスを実装する。
2. ItemTouchHelperをRecyclerViewにアタッチする。

順番に解説していきます。

ItemTouchHelperインスタンスを実装する

まずはItemTouchHelperを実装します。

ItemTouchHelperは、今回のドラッグ＆ドロップをはじめとするユーザ操作を司るヘルパークラスとなっています。今回のドラッグ＆ドロップでは、SimpleCallBack#onMove,SimpleCallBack#onMoved, SimpleCallBack#isLongPressDragEnabledのコールバックに追加実装が必要となってきます。

早速サンプルを載せます。

ItemTouchHelper(object : SimpleCallback(UP or DOWN, 0) {
    override fun onMove(
        recyclerView: RecyclerView,
        viewHolder: RecyclerView.ViewHolder,
        target: RecyclerView.ViewHolder
    ): Boolean {
        // 特定のコンテンツがドラッグされようとしている 
        val fromPosition = viewHolder.adapterPosition
        val toPosition = target.adapterPosition
        recyclerView.adapter?.notifyItemMoved(fromPosition, toPosition)
        // ドラッグしてOKなら　true を, NGなら false　を返す
        return true
    }

    override fun isLongPressDragEnabled(): Boolean {
        // 長押しされた。ドラッグ＆ドロップを有効にする
        return true
    }

    override fun onSwiped(viewHolder: RecyclerView.ViewHolder, direction: Int) {
        // 呼ばれない
    }

    override fun onMoved(
        recyclerView: RecyclerView,
        viewHolder: RecyclerView.ViewHolder,
        fromPos: Int,
        target: RecyclerView.ViewHolder,
        toPos: Int,
        x: Int,
        y: Int
    ) {
        super.onMoved(recyclerView, viewHolder, fromPos, target, toPos, x, y)
        // コンテンツがドラッグ＆ドロップされた。
    }
})

まずSimpleCallBack#isLongPressDragEnabledでは、ユーザがコンテンツを長押しした時にドラッグ＆ドロップを開始するかどうかを返します。trueなら開始する、falseならしないということになります。今回は簡単のため、trueを返すようにしています。

onMoveコールバックでは、ユーザのドラッグによりコンテンツをドラッグさせても問題ないかをチェックします。同じRecyclerView内に複数の種類のコンテンツが表示されている場合＝並び替えをさせたくない場合はここでfalseを返すことで、そのドラッグ＆ドロップを無効にすることができます。

そしてonMovedコールバックは、実際にコンテンツのドラッグ＆ドロップが行われたタイミングでここの処理が呼び出されます。このタイミングで、コンテンツの要素を渡された引数の内容をもとに更新してあげるのがよいでしょう。

ItemTouchHelperをRecyclerViewにアタッチする

あとは実装したItemTouchHelperをRecyclerViewにアタッチするだけです。Activity#onCreatedやFragment#onViewCreatedあたりで以下を読んであげれば問題ありません。

itemTouchHelper.attachToRecyclerView(recyclerView)

まとめ

今回はRecyclerViewを使ったコンテンツのドラッグ＆ドロップの実装方法について解説しました。RecyclerViewは拡張性が高く、今回以外の拡張も豊富に取り揃えているので、今後もテーマにしていきたいと思います。

参考

• アンドロイドで RecyclerView のアイテムを「優しく」ドラッグ操作する #Android - Qiita

Android RecyclerViewを使ったコンテンツ一覧の実装方法を解説 その2

どうも。どっことです。今回はRecyclerViewをより実用的に利用する場合の実装方法について解説します。

RecyclerViewでのコンテンツ一覧のカスタマイズ

前回の解説では、RecyclerViewの必要最低限の実装について解説しました。しかしこれだけでは実用性に欠いており、より実用に近いケースが必要なことを課題として挙げていました。

今回は前回に挙げた課題、つまり以下の内容を解説していきたいと思います。

• 表示要素を動的にする。
• データベースやAPIから取得した情報を一覧に表示するようなケースを解説します。
• クリックしたらその要素に対応する画面を表示したい。（クリックリスナーの制御）
• RecyclerViewで表示しているコンテンツに対応するページに遷移させる実装を解説します。

それぞれ解説します。

RecyclerViewの表示要素を動的に制御する

実装の手順は以下の通りです。

1. CustomAdapterのコンストラクタに表示要素のリストを追加する。
2. getCount()メソッドを修正する。
3. 表示要素の配列を使ってonBindViewHolder()でViewをカスタマイズする。

順番に解説していきます。

CustomAdapterのコンストラクタに表示要素のリストを追加する

CustomAdapterに、表示要素を管理するリストを渡します。今回はToDoリストを意識して以下のTodoクラスをあらかじめ用意します。

data class Todo(val id: Int, val title: String)

このデータのリストをCustomAdapterのコンストラクタで渡します。

class CustomAdapter(private val list: List<Todo>) : RecyclerView.Adapter<ViewHolder>()

getCount()メソッドを修正する

表示要素の数を設定します。表示要素は前項のリストの要素数と同じになるはずです。

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

表示要素の配列を使ってonBindViewHolder()でViewをカスタマイズする

ViewHolderに表示要素を反映していきます。onBindViewHolderでは表示要素の位置がパラメータとして参照できるのでそれを使って表示要素にアクセスします。

override fun onBindViewHolder(holder: ViewHolder, position: Int) {
    if (holder is CustomViewHolder) {
        val todo = list[position]
        holder.textView.text = todo.title
    }
}

クリックしたらその要素に対応する画面を表示する

実装手順は以下の通りです。

1. タップ時のインターフェースを用意する。
2. Viewがタップされた時の処理を追加する。
3. CustomAdapter内でViewがタップされた時の処理を設定する。

こちらも順に解説します。

タップ時のインターフェースを用意する

Viewがタップされた時に、Activity／Fragmentに必要な情報を渡すためのインターフェースを実装します。Todoクラスのデータを渡すように定義します。

interface ToDoClickListener {
    fun onClickToDo(todo: Todo)
}

このインターフェースをCustomAdapterのコンストラクタに追加します。

class CustomAdapter(
    private val list: List<Todo>,
    private val listener: ToDoClickListener
) : RecyclerView.Adapter<ViewHolder>() {

Viewがタップされた時の処理を追加する

Viewがタップされた時の実装をします。Todoデータへのアクセスが必要なので、この処理もonBindViewHolderに実装するとハマることなく実装できます。

override fun onBindViewHolder(holder: ViewHolder, position: Int) {
    if (holder is CustomViewHolder) {
        val todo = list[position]
        holder.textView.text = todo.title
        holder.itemView.setOnClickListener {
            listener.onClickToDo(todo) // 要素がタップされたら、それに対応するTodoデータを渡す
        }
    }
}

CustomAdapter内でViewがタップされた時の処理を設定する

Viewがタップされた時に、インターフェースから渡された情報を使って必要な処理をするよう実装します。例えば、渡されたTodoデータを渡す形で、詳細画面に実装するなどでしょうか。インターフェースの実装はActivity／Fragmentに実装しても良いですし、実装した無名オブジェクトを渡しても問題ありません。今回は無名オブジェクトを渡します。

val adapter = CustomAdapter(listOf(
    Todo(0, "買い物"),
    Todo(1, "掃除"),
    Todo(2, "洗濯")
), object : ToDoClickListener {
    override fun onClickToDo(todo: Todo) {
        // 画面に反映、画面遷移など必要な処理を実装する
    }
})

まとめ

今回はRecyclerViewをより実用的に利用する場合の実装方法について解説しました。RecyclerViewによるコンテンツ表示はカスタマイズ性が高く、さまざまな利用パターンに当てはめられるので、今後もRecyclerViewによるコンテンツ表示について解説していきます。

Android 通知領域に通知を表示する方法を解説

どうも。どっことです。今回は、通知を実際に表示する実装方法を解説します。

通知領域に通知を表示する

通知チャンネルも実装できて、いよいよ通知を表示する方法まで来ました。さっそく実装方法を解説していきます。

通知を表示する実装の流れ

• AndroidManifest.xmlにパーミッションの追加
• 通知の表示の許諾確認
• 拒否された時はさらに確認
• 通知の表示処理

AndroidManifest.xmlにパーミッションの追加

まずはAndroidManifest.xmlに今回の通知表示に必要となるpermission.POST_NOTIFICATIONSの権限を追加します。このpermission.POST_NOTIFICATIONSが実装時に忘れやすいので、実装時にはぜひ備忘録としてご確認いただけると嬉しいです。

<uses-permission android:name="android.permission.POST_NOTIFICATIONS" />

通知の表示の権限許諾確認

権限許諾ですが、実装方法は通常のパーミッションチェックと同様です。つまりregisterForActivityResultを使ってlauncherを生成し、Manifest.permission.POST_NOTIFICATIONSの許諾確認をします。このManifest.permission.POST_NOTIFICATIONSも実装時に忘れやすいので、ぜひ参考にしてください。

private val launcher = registerForActivityResult(
  ActivityResultContracts.RequestPermission()
) { 
  /** 許諾ダイアログが閉じられた。何かやりたいことがあればここに実装。*/ 
}

...

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU) {
    TODO("あとで追加実装")
    launcher.launch(Manifest.permission.POST_NOTIFICATIONS)
}

拒否された時の再許諾確認

権限を確認したにもかかわらず拒否されてしまった場合ですが、一般的には次回などで「この権限がXXXという理由で必要なんだ」という権限を必要としている理由を説明した上で再度権限を確認する流れとなります。前項のTODO("あとで追加実装")に追記していきます。

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU) {
    if (checkSelfPermission(Manifest.permission.POST_NOTIFICATIONS) == PackageManager.PERMISSION_GRANTED) {
        // 権限を許諾してもらっている。後続処理に流さないでOK
        return
    }
    val shouldShow = shouldShowRequestPermissionRationale(
        Manifest.permission.POST_NOTIFICATIONS
    )
    if (shouldShow) {
        // 過去に許諾確認したけど、許可してくれなかった人。
        //　ダイアログなどで権限を必要としている理由を説明した上で再度依頼する。
    } else {
        // それ以外。初回のケース、または「もう表示しない」設定としたケース。
        launcher.launch(Manifest.permission.POST_NOTIFICATIONS)
    }
}

通知の表示処理

そしてManifest.permission.POST_NOTIFICATIONSの許諾を確認をした上で、問題なければNotificationを表示するようNotificationManagerに依頼します

if (checkSelfPermission(Manifest.permission.POST_NOTIFICATIONS) == PackageManager.PERMISSION_GRANTED) {
    val notification = Notification.Builder(this, "id")
        .setContentTitle("this is title")
        .setSmallIcon(R.mipmap.ic_launcher)
        .setContentText("this is text")
        .build()
    NotificationManagerCompat.from(this)
        .notify(null, 0, notification)
}

実際にうまく動作していれば、上記の場合以下のような通知が通知領域に表示されます。

まとめ

今回は通知領域に通知を表示する方法を解説しました。実装はそんなに複雑ではないものの、参照すべき定数を毎回忘れてしまいがちなので、ぜひ参考にしていただけると嬉しいです。