【Android】CheckedTextViewの使い方を徹底解説！クリック判定の実装手順

CheckedTextViewとは？

Android開発におけるCheckedTextViewは、標準のTextViewを拡張したウィジェットで、「Checkableインターフェース」を実装している点が大きな特徴です。このウィジェットを活用することで、ユーザーがテキストビューをクリック（チェック）したかどうかを簡単に判別できます。

本記事では、AndroidアプリでCheckedTextViewを使用する具体的な方法を、サンプルコードとともにステップごとにわかりやすく解説します。

ステップ1：新規プロジェクトを作成する

まずはAndroid Studioで新しいプロジェクトを作成しましょう。メニューから「File」→「New Project」を選択し、必要な項目を入力してプロジェクトを生成します。

ステップ2：レイアウトファイル（activity_main.xml）を編集する

続いて、res/layout/activity_main.xmlに以下のコードを追加してください。

<?xml version = "1.0" encoding = "utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android = "https://schemas.android.com/apk/res/android"
   xmlns:app = "https://schemas.android.com/apk/res-auto"
   xmlns:tools = "https://schemas.android.com/tools"
   android:layout_width = "match_parent"
   android:layout_height = "match_parent"
   tools:context = ".MainActivity">
   <CheckedTextView
      android:id = "@+id/text"
      android:layout_width = "wrap_content"
      android:layout_height = "wrap_content"
      android:text = "Checked Text View"
      android:textSize = "25sp"
      app:layout_constraintBottom_toBottomOf = "parent"
      app:layout_constraintLeft_toLeftOf = "parent"
      app:layout_constraintRight_toRightOf = "parent"
      app:layout_constraintTop_toTopOf = "parent" />
</android.support.constraint.ConstraintLayout>

上記のコードでは、画面中央にCheckedTextViewを1つ配置しています。この状態でユーザーがテキストビューをタップすると、チェックマークの画像が表示される仕組みになります。

ステップ3：MainActivity.javaにコードを追加する

次に、src/MainActivity.javaに以下のコードを記述します。

package com.example.andy.myapplication;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.CheckedTextView;
public class MainActivity extends AppCompatActivity {
    CheckedTextView text;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        text = findViewById(R.id.text);
        text.setCheckMarkDrawable(null);
        text.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                text.setCheckMarkDrawable(R.drawable.ic_check_circle_pink_400_24dp);
            }
        });
    }
}

ポイントはsetCheckMarkDrawable()メソッドです。初期状態では引数にnullを渡してチェックマークを非表示にし、onClickイベントが発生したタイミングでチェックアイコンのドローアブルを設定しています。

アプリを実行して動作を確認しよう

それでは、実際にアプリケーションを起動してみましょう。ここでは、実機のAndroidスマートフォンをPCに接続しているものとして進めます。Android Studioからアプリを実行するには、プロジェクト内のいずれかのアクティビティファイルを開き、ツールバーの「Run」アイコンをクリックします。表示された選択肢から自分のモバイルデバイスを選ぶと、端末の画面に初期状態が表示されます。

上の画像が起動直後の初期画面です。ここでテキストビューをタップすると、次のようにチェックマークが表示されます。

このように、CheckedTextViewを使えば数行のコードだけで、クリック状態を視覚的に示すUIを簡単に実装できます。リスト形式の選択画面や設定画面など、さまざまなシーンで活用できるので、ぜひ実際のプロジェクトでも試してみてください。