ホーム > カテゴリ > Java・Android >

各種コントロールの画面設計(ConstraintLayout)とイベント [Android Studio]

Android Studioの使い方(目次)

目次

1. 作るもの
2. 各コントロールを配置する
3. レイアウトのエラーと警告
  3-1. マージン(margin)を設定する
  3-2. 文字列をリソースで定義して使用する
4. コントロールのグループ化(チェーン)
5. 画像の追加
6. ラムダ式に対応させる
7. コーディング
8. 画面をスクロールさせる

事前準備

メニューの[ファイル][新規]の「新規プロジェクト」でプロジェクトを作成します。その時にアクティビティは「空のアクティビティ」を選択します。

1. 作るもの

今回は標準的なコントロールであるTextView、Plain Text、Phone、Spinner、RadioButton/RadioGroup、CheckBox、Button、ImageViewの作成と3つのボタンをグループ化(チェーン)します。

それと、各イベント(ラムダ式含む)についても取り扱います。

今後、主流となるConstraintLayout(制約レイアウト)で画面設計を行います。ConstraintLayoutは各コントロールを相対的に配置できます。

Android StudioのインストールとHello Worldまでの一連の流れの記事から進んでいない方は、メニューの[ツール][SDKマネージャー]の「SDKツール」タブの「ConstraintLayout for Android」をオンにしてインストールして下さい。※その後にプロジェクトを新規に作成して下さい。

2. 各コントロールを配置する

最初にAndroid Studioのres\layoutフォルダのレイアウトファイル(activity_main.xml)をダブルクリックします。次に画面下部にある「デザイン」「テキスト」タブの「デザイン」を選択します。

中央にある「Hello World!」のTextViewを選択して、キーボードのDeleteキーで削除します。これで画面上にはベース(土台)のConstraintLayoutのみとなります。

次に[Text][TextView]を画面にドロップします。

[Text][Plain Text]と[Text][Phone]も順番に貼り付けます。

[Containers][Spinner]を1つ、[Buttons][RadioButton]を2つ貼り付けます。

[Buttons][RadioGroup]をRadioButtonとRadioButtonの間ぐらいに設置します。次に左下の「コンポーネントツリー」にあるradioButtonをドロップしてRadioGroupの中に入れます。(2個とも図のようにする)

「コンポーネントツリー」のRadioGroupを選択します。そして、右側の属性の下部にある「View all attributes」をクリックします。

[orientation]を「horizontal」にします。

属性を下までスクロールして「View fewer attributes」を押して、前の画面に戻します。

属性のRadioGroupのcheckedButtonを「radioButton」にする。

次に[Buttons][CheckBox]と[Buttons][Button]を画面にドロップします。

そのButtonを選択して、属性で左右を「0」にします。これでボタンが中央寄せされます。

いったん、ここでコントロールの配置を中断します。

3. レイアウトのエラーと警告

画面右上の矢印の部分をクリックします。

「ConstraintLayoutの制約がありません。」のエラーはコントロールのマージン(margin)が未設定の場合に発生します。「ハードコードされたテキスト」はコントロールに直接、文字列が設定されている時の警告です。

3-1. マージン(margin)を設定する

一番上のTextViewを選択します。属性にあるマージンを左8、上8にします。

同様にPlain Text、Phone、Spinner、RadioGroup、CheckBoxのコントロールのマージンを順番に設定します。

RadioButtonは設定できないので親コントロールのRadioGroupで設定します。また、RadioGroupは画面上で選択できないので左下の「コンポーネントツリー」で選択します。

Buttonは次のように設定します。

これで、マージン未設定のエラーは消えています。

3-2. 文字列をリソースで定義して使用する

次に「ハードコードされたテキスト」の警告に対応します。

strings.xmlを選択します。

次のコードに置き換えてください。※各文字列を定義しています。

<resources>
    <string name="app_name">My Application</string>

    <string name="txt_label">各種コントロールの使い方</string>
    <string name="hint_name">名前を入力します。</string>
    <string name="hint_tel">電話番号を入力します。</string>

    <string-array name="lst_spinner">
        <item>りんご</item>
        <item>みかん</item>
        <item>メロン</item>
    </string-array>

    <string name="rad_man">男</string>
    <string name="rad_woman">女</string>

    <string name="chk_name">学生</string>

    <string name="btn_click">実行する</string>

    <string name="btn_run1">Run1</string>
    <string name="btn_run2">Run2</string>
    <string name="btn_run3">Run3</string>

    <string name="img_des">イメージの説明</string>

    <string name="toast_msg">3秒ぐらいで消えます。しばらくお待ち下さい。</string>
</resources>

そして、設計画面にあるtextViewを選択。右側にある「属性」のTextViewの上側のテキストの右横をクリックします。

txt_labelを選択します。

editTextは属性のEditTextのhintにhint_nameを設定。TextViewのテキストを削除する。

editText2は属性のEditTextのhintにhint_telを設定。

spinnerは属性のSpinnerのentriesの配列からlst_spinnerを設定。

radioButtonは属性のTextViewの上側のテキストでrad_manを設定。

radioButton2は属性のTextViewの上側のテキストでrad_womanを設定。

checkBoxは属性のTextViewの上側のテキストでchk_nameを設定。

buttonは属性のTextViewの上側のテキストでbtn_clickを設定。

これで、全ての警告が消えます。

4. コントロールのグループ化(チェーン)

次に[Buttons][Button]を3つ横に並べます。真ん中はわざと少し下にずらして下さい。

Shiftキーを押しながら3つのボタンを選択します。そして、右クリック後に[チェーン][Create Horizontal Chain]を選択します。

再度、3つを選択。右クリックで[位置合わせ][Vertical Centers]を選択。

ボタンが綺麗に整列されましたね。

button2は属性のTextViewの上側のテキストでbtn_run1を設定。

button3は属性のTextViewの上側のテキストでbtn_run2を設定。

button4は属性のTextViewの上側のテキストでbtn_run3を設定。

※マージンのエラーが表示されている場合は、適当に設定してください。

5. 画像の追加

res\drawableに小さめの画像を2つ追加します。追加方法はAndroid Studioの基本をご覧下さい。

※ファイル名はimg1とimg2にします。PNG/JPGでもOKです。

[Widgets][ImageView]を画面にドロップします。(img1を選択)

マージンを設定後に、属性のImageViewのcontentDescriptionにimg_desを設定します。

これで画面設計は全て完了です。次はコーディングです。

・・・

コーディングに進む前に各コントロールのIDが次のようになっていない場合は、属性のIDで再設定して下さい。

※IDが異なるとコンパイルエラーとなります。

6. ラムダ式に対応させる

今回のプロジェクトを「ラムダ式」のコーディングに対応させます。

[Gradle Scripts][build.gradle]を選択。次のコードを追加します。

  compileOptions {
    sourceCompatibility JavaVersion.VERSION_1_8
    targetCompatibility JavaVersion.VERSION_1_8
  }

その後に、青矢印付近にある「今すぐ同期」をクリックします。

7. コーディング

「ボタンクリック、画像クリック、テキスト変更」のイベントから「アラートダイアログ、トースト」のメッセージや「エディットテキスト、スピナー、ラジオボタン、チェックボックス」の値を取得しています。

[MainActivity.java]

import android.support.v7.app.AlertDialog;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.text.Editable;
import android.text.TextWatcher;
import android.view.View;
import android.widget.CheckBox;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.Spinner;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    // 画像の切り替えフラグ
    private boolean ImageFlg = false;

    // スピナーの選択アイテム名を取得する
    private String getSpinner(){
        Spinner sp = findViewById(R.id.spinner);
        return sp.getSelectedItem().toString();
    }

    // ラジオボタンの選択テキスト名を取得する
    private String getRadioButton(){
        RadioGroup rg = findViewById(R.id.radioGroup);
        return ((RadioButton)findViewById(rg.getCheckedRadioButtonId())).getText().toString();
    }

    // チェックボックスの値を取得する
    private String getCheckBox(){
        CheckBox ch = findViewById(R.id.checkBox);
        if (ch.isChecked())
            return "学生オン";
        else
            return "学生オフ";
    }

    // 3つのボタンイベント
    private class OnButtonClick implements View.OnClickListener{
        @Override
        public void onClick(View v) {
            String str = "";

            switch (v.getId()){
                case R.id.button2:
                    str = getResources().getString(R.string.btn_run1);
                    break;
                case R.id.button3:
                    str = getResources().getString(R.string.btn_run2);
                    break;
                case R.id.button4:
                    str = getResources().getString(R.string.btn_run3);
                    break;
            }

            // トースト
            str = str + "\n" + getResources().getString(R.string.toast_msg);
            Toast.makeText(MainActivity.this,  str, Toast.LENGTH_SHORT).show();
        }
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {

        // デフォルトの初期設定
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // EditTextとTextViewの連動
        EditText et = findViewById(R.id.editText);
        et.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {
                 // テキスト変更前
            }

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {
                // テキスト変更中 
            }

            @Override
            public void afterTextChanged(Editable s) {
                // テキスト変更後 
                TextView lable = findViewById(R.id.textView);
                lable.setText(((EditText) findViewById(R.id.editText)).getText());
            }
        });

        // ボタンイベント(ラムダ式)
        findViewById(R.id.button).setOnClickListener(e->
                        new AlertDialog.Builder(MainActivity.this)

                // リソース
                .setTitle(getResources().getString(R.string.btn_click)+
                          "ボタンを押しました。\n\n")
                // スピナー/ラジオボタン/チェックボックス
                .setMessage(getSpinner() + "\n" + getRadioButton()+"\n" + getCheckBox())
                .setPositiveButton("OK", null)
                .show()
        );

        // ボタンイベント(3つのボタン)
        View.OnClickListener Events =  new OnButtonClick();
        findViewById(R.id.button2).setOnClickListener(Events);
        findViewById(R.id.button3).setOnClickListener(Events);
        findViewById(R.id.button4).setOnClickListener(Events);

        // 画像クリックイベント
        findViewById(R.id.imageView).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                ImageView iv = findViewById(R.id.imageView);

                // 画像を切り替えます。
                if (ImageFlg)
                    iv.setImageResource(R.drawable.img1);
                else
                    iv.setImageResource(R.drawable.img2);

                ImageFlg = !ImageFlg;
            }
        });
    }
}

後は実行するだけです。

日本語入力は右下のアイコンで日本語に設定してください。

8. 画面をスクロールさせる

今回のケースですとスマートフォンを横画面にすると一部のコントロールが表示されません。

[縦]

[横]

自動でスクロールバーを表示するにはConstraintLayoutの上にScrollViewを配置します。さらにその上に各コントロールを配置する必要があります。


以上となります。1つの記事に詰め込み過ぎました :-)





関連記事



公開日:2018年05月17日 最終更新日:2018年05月19日
記事NO:02655