AndroidTVでインジケーターを実装

はじめに

初めましての方ははじめまして。

最近仕事でAndroidTVアプリの開発をすることが増えてきたので備忘録です。
AndroidTV(またはFireTV)はAndroidと違ってリモコンを用いて操作するので特有のUIになります。
トレイアートを横に並べるデザインが主流ですのでインジケーター等で視認性を上げる必要があります。

実装方法

いくつかあり、RecyclerViewで並べたりfor文で並べたりjetpack Composeを用いたりと実装方法自体はAndroidと変わりません。

今回はわかりやすさも兼ねてfor文で紹介します。

実装

レイアウトファイルにインジケーターの挿入位置を決めます。

<LinearLayout
                android:id="@+id/indicator"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="8dp"
                android:layout_marginEnd="@dimen/masthead_content_margin_end"
                android:gravity="end"
                android:orientation="vertical"
                app:layout_constraintBottom_toBottomOf="@id/space_masthead"
                app:layout_constraintStart_toStartOf="@id/linear_layout">

                <LinearLayout
                    android:id="@+id/indicator_container"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal" >

                </LinearLayout>

            </LinearLayout>

indicatorがインジケーターの位置、indicator_containerが１つ１つのインジケーターになります。

それではインジケーターを追加していきます。

indicatorView = findViewById(R.id.indicator_container);

for(int i = 0; i < "表示したい数"; i++) {
    ImageView indicator = new ImageView(this);
    indicator.setId(i);
    indicator.setFocusable(true);
    indicator.setOnFocusChangeListner(new view.OnFocusChangeListner() {
        @Override
        public void onFocusChange(View view, boolean isFocused) {
            if(isFocused) {
                view.setBackGroundResource("フォーカス時のインジケーター");
            } else {
        view.setBackGroundResource("非フォーカス時のインジケーター");
            }   
        }
    });
    indicatorView.addView(indicator)
}

ざっくり言えばindicator_containerを表示させたい数だけaddViewするだけです。

インジケーター自体はImageViewなどで作成し、AndroidTVはリモコンを使った操作をするのでフォーカスされるような場合はsetFocusableをtrueとしておきましょう。

そしてフォーカスされる場合、フォーカスされたときとされていない時の見分けがつかないとユーザーが迷子になってしまうので色を変えるなり、デザインを変えるなりをonFocusChangeListnerで行います。

最後に上記で設定した要素を持ったindicatorをaddViewすれば完成です。

ご覧いただきありがとうございました。