各種コントロールの画面設計(ConstraintLayout)とイベント [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つの記事に詰め込み過ぎました :-)