Android
 Computer >> コンピューター >  >> プログラミング >> Android

【Android】CheckBox(チェックボックス)の使い方をサンプルコード付きで解説

はじめに

この記事では、AndroidアプリでCheckBox(チェックボックス)を使用する方法を、実際のコード例とともにわかりやすく解説します。

CheckBoxは、ユーザーに複数の項目を選ばせたい場合に便利なUI部品です。RadioButtonがグループ内で1つしか選択できないのに対し、CheckBoxは複数選択が可能という点が大きな特徴です。

このチュートリアルでは、「ピザ」「コーヒー」「バーガー」の3つの商品を選択し、ボタンを押すと選択された商品と合計金額をToastで表示する、シンプルな注文アプリを作成します。

手順1:Android Studioで新規プロジェクトを作成する

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

手順2:レイアウトファイル(activity_main.xml)を編集する

res/layout/activity_main.xml に以下のコードを追加します。ここでは、3つのCheckBoxと1つのButtonをConstraintLayoutで配置しています。

<?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">
   <CheckBox
      android:id="@+id/checkBox"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginLeft="144dp"
      android:layout_marginTop="68dp"
      android:text="Pizza"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="parent" />
   <CheckBox
      android:id="@+id/checkBox2"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginLeft="144dp"
      android:layout_marginTop="28dp"
      android:text="Coffee"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toBottomOf="@+id/checkBox" />
   <CheckBox
      android:id="@+id/checkBox3"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginLeft="144dp"
      android:layout_marginTop="28dp"
      android:text="Burger"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toBottomOf="@+id/checkBox2" />
   <Button
      android:id="@+id/button"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginLeft="144dp"
      android:layout_marginTop="184dp"
      android:text="Order"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toBottomOf="@+id/checkBox3" />
</android.support.constraint.ConstraintLayout>

手順3:MainActivity.javaを実装する

src/MainActivity.java に以下のコードを追加します。各CheckBoxのチェック状態を isChecked() メソッドで判定し、選択された商品名と価格を合計金額とともにToastで表示します。

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
   CheckBox pizza,coffee,burger;
   Button buttonOrder;
   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      pizza = findViewById(R.id.checkBox);
      coffee = findViewById(R.id.checkBox2);
      burger = findViewById(R.id.checkBox3);
      buttonOrder = findViewById(R.id.button);
      buttonOrder.setOnClickListener(new View.OnClickListener() {
         @Override
         public void onClick(View v) {
            int totalAmount = 0;
            StringBuilder result = new StringBuilder();
            result.append("Selected Items");
            if (pizza.isChecked()) {
               result.append("\nPizza 100Rs");
               totalAmount += 100;
            }
            if (coffee.isChecked()) {
               result.append("\nCoffe 50Rs");
               totalAmount += 50;
            }
            if (burger.isChecked()) {
               result.append("\nBurger 120Rs");
               totalAmount += 120;
            }
            result.append("\nTotal: " + totalAmount + "Rs");
            Toast.makeText(getApplicationContext(), result.toString(), Toast.LENGTH_SHORT).show();
         }
      });
   }
}

手順4:AndroidManifest.xmlを編集する

androidManifest.xml に以下のコードを追加します。

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
   package="app.com.sample">
   <application
      android:allowBackup="true"
      android:icon="@mipmap/ic_launcher"
      android:label="@string/app_name"
      android:roundIcon="@mipmap/ic_launcher_round"
      android:supportsRtl="true"
      android:theme="@style/AppTheme">
      <activity android:name=".MainActivity">
         <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
         </intent-filter>
      </activity>
   </application>
</manifest>

アプリを実行してみる

それでは、作成したアプリを実行してみましょう。実機のAndroidスマートフォンをパソコンに接続しておいてください。

Android Studioでプロジェクト内のアクティビティファイルのいずれかを開き、ツールバーにある「Run」アイコンをクリックします。接続済みのモバイルデバイスを選択すると、端末上に以下のような画面が表示されます。

【Android】CheckBox(チェックボックス)の使い方をサンプルコード付きで解説

【Android】CheckBox(チェックボックス)の使い方をサンプルコード付きで解説

補足:AndroidXへの移行について

本記事のサンプルコードでは、以前よく使われていた android.support ライブラリを利用していますが、現在のAndroid開発では AndroidX の使用が推奨されています。新規プロジェクトではAndroidXが自動的に適用されるため、その場合はインポート文を次のように読み替えてください。

import androidx.appcompat.app.AppCompatActivity;

また、レイアウトのルート要素も androidx.constraintlayout.widget.ConstraintLayout を使用します。

まとめ

今回は、AndroidにおけるCheckBoxの基本的な使い方を学びました。ポイントは以下の3点です。

  • CheckBoxは複数選択が可能なUI部品である
  • チェック状態は isChecked() メソッドで取得できる
  • ボタンのクリックイベント内で各CheckBoxの状態をまとめて判定すれば、注文フォームなどに応用できる

ぜひ実際にコードを入力して動作を確認し、自分のアプリにも活用してみてください。

  1. Androidアプリでマテリアルデザインコンポーネントを使う方法をステップごとに解説

    本記事では、AndroidアプリにGoogle公式のMaterial Design(マテリアルデザイン)コンポーネントを組み込む方法を、シンプルなログイン画面を題材にして段階的に解説します。マテリアルデザインを活用することで、影・色・動きを備えたモダンで統一感のあるUIを、少ない工数で実現できます。 ステップ1:Android Studioで新規プロジェクトを作成する Android Studioを起動し、メニューから「File → New Project」を選択します。アプリ名やパッケージ名、保存先など必要な項目をすべて入力して、新しいプロジェクトを作成しましょう。テンプレートは「Empty

  2. 【Android】NavigationViewの実装方法をステップごとに解説

    この記事では、AndroidアプリでNavigationView(ナビゲーションビュー)を使用してドロワーメニューを実装する方法を、ステップごとに詳しく解説します。ハンバーガーアイコンから開閉できるサイドメニューは、多くのアプリで採用されている定番のUIです。ステップ1:新しいプロジェクトを作成するAndroid Studioを開き、File → New Project を選択して、必要な情報を入力し新しいプロジェクトを作成します。テンプレートには「Navigation Drawer Activity」を選ぶと、後の作業がスムーズになります。ステップ2:activity_main.xml にコ