カテゴリー
Kotlin言語

ゼロから始めるAndroidアプリ(Kotlin編)Unit2 – 1 第8回 前半:MaterialのUI部品を使う

Android Developers > スタートガイド > Kotlin と Android をゼロから学ぶ > Unit2 – レイアウトUnit2-1 第8回 前半 の内容をまとめたものです(翻訳ではありません)


Unit2 – 1 第8回 前半

第8回 前半 の内容は以下の通りです

Material(Google 提供のデザインシステム)を使ってアプリのUI画面を商用ソフトのような見栄えに改良します

具体的には次のようなレッスンです

  • アプリでMaterialデザインコンポーネントを使ってみます
  • Vector Asset Studio から Material Icon をインポートして使ってみます

マテリアルコンポーネント

マテリアルコンポーネントは Material 版のUI部品です

  • マテリアルコンポーネント(Material Components) は Android, Web, iOS などに共通に使えるUI部品のウィジェットです。Material によるデザインスタイルをアプリなどに簡単に実装できます
  • Material Design Components は MDC と表記されます
  • Android の Design Editor で作成したUI部品(View)は、XMLファイルを書き換えることで Material Components のものに置き換えることができます
  • Google ではアプリ開発に Material Components を使うことを推奨しています
  • Android Studio 4.1 以降であれば、MDC ライブラリの設定は不要です(すでに設定されている)。4.0以前であれば モジュールの build.gradle セクションの dependency に設定が必要です(Unit2-1 第6回に説明があります)

EditText を MDC のUI部品(コンポーネント)に置き換えてみる

同じ機能の Material 版のUI部品に置き換えてみますね

EditText を MDC の TextInputLayout, TextInputEditText に置き換えてみます

  1. ブラウザで Material Components (Android) にアクセスします
  2. 左ペイン、またはタイル状に表示されいる Components の一覧から Text fields を選択します
  3. IMPLEMENTATION タブをクリックして、サンプルの XML コードをコピーします
  4. Android Studio で activity_main.xml を開きます
  5. XMLコードの画面に切り替えて、置き換えたい EditText の上にコピーしたコードを貼り付けます
  6. 元の EditText の属性を参考に、コピーしたMDCのコードを修正します
    • TextInputLayout のid名は EditText のものにします
    • 子View の TextInputEditText のid名は、EditTextのものに “_edit_text” を追加して区別します
  7. 元の EditText の部分は <!– と –> で囲んでコメントアウトします(削除してもかまいません)

コードはこんな感じになります

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/cost_of_service"
    android:layout_width="160dp"
    android:layout_height="wrap_content"
    android:hint="@string/cost_of_service"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/cost_of_service_edit_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="numberDecimal"
    />
</com.google.android.material.textfield.TextInputLayout>

<!--
<EditText
    android:id="@+id/cost_of_service"
    android:layout_width="160dp"
    android:layout_height="wrap_content"
    android:hint="@string/cost_of_service"
    android:inputType="numberDecimal"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />
-->

MainActivity.kt を修正する

UI部品のid名を変えちゃったときは、それを参照しているKotlinコードも書き換えてくださいね

  • calculateTip() メソッドが参照するid名を変更します
  • 参照するid名(リソースID名)を cost_of_service_edit_text に変更します。Kotlinコードからの View Binding を使った参照では camelCase に変換して costOfServiceEditText とします
fun calculateTip() {
    //val stringInTextField = binding.costOfService.text.toString()
    val stringInTextField = binding.costOfServiceEditText.text.toString()
    ・・・

  • MDC の TextInputLayout にはエラーメッセージを表示するためのオプションもあります
  • たとえば binding.constOfService.isErrorEnabled = true とするとテキストフィールドのラベルの色が変更され、エラーアイコンが表示されます。また設定されたエラーメッセージが表示されます
  • エラーメッセージは binding.constOfService.error = “エラーメッセージ” のように指定できます

Switch を MDC の Switch Material に置き換えてみる

どのUI部品でも同じように置き換えできます

  • 置き換え手順は EditText のときと同じです。こちらのほうはほぼそのまま置き換えるだけで大丈夫です
  • MainActivity.kt への書き換えも不要です(参照先のidが変わらないため)

コードはこんな感じになります

<com.google.android.material.switchmaterial.SwitchMaterial
android:id="@+id/round_up_switch"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:checked="true"
android:text="@string/round_up_tip"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/tip_options"
/>

<!--
<Switch
android:id="@+id/round_up_switch"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:checked="true"
android:text="@string/round_up_tip"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/tip_options"
/>
-->

UI部品(View)の横にアイコンを追加する

アイコンをUI画面でうまく使うと分かりやすいアプリになるの

  • アイコンは、Androidのメニュー画面(ランチャーアイコン)だけでなくUI画面にも使用できます
  • アイコンに使用する画像はビットマップ形式、ベクター形式どちらにも対応しています
  • ベクター形式はいろいろなデバイスに柔軟に対応できます
  • Android のベクター画像は vector drawable と言います。XMLで記述されています
  • Materialデザインでは、よく使うアイコンをカテゴリに分けて提供しています。Android Studio ではすぐに使えるようになっており、内容はこちらから確認できます

ベクター画像のライブラリを設定する(下位互換用)

旧バージョンのAndroidでもベクター画像が使えるようにします

  • Android5.0(API Level 21)までのデバイスでベクター画像を扱うにはアプリにライブラリを設定する必要があります
  • このチュートリアルで制作しているアプリは、APIレベル 19(Android 4.4)以上のデバイスを想定しています。そのままではベクター画像を扱うとビルドでエラーになってしまいます
  • モジュールの build.gradle を開いて次の内容を追加します
android {
  defaultConfig {
    ...
    vectorDrawables.useSupportLibrary = true
   }
   ...
}
  • 書き換えをしたら、画面に出てくるメッセージに従って Sync Now をクリックします
  • これによって Android 5.0 以下のデバイスでもベクター画像を扱うことができるようになります

UI画面で使うアイコンをプロジェクトに読み込む

アプリで使うアイコンを読み込みますね

  1. Resource Managerを開きます(画面左タブの Resource Managerをクリック)
  2. 左上の+をクリックして Vector Asset を選択します
  3. Asset Type で Clip Art が選択されていることを確認します
    • 横の Local File はディスク上にあるファイルを読み込むモードです
  4. 少し下の方にやはり Clip Art とあって、その横に小さいアイコンが表示されているのでこれをクリックします。Android Studio で用意されているアイコンが一覧で出てきます
  5. 一覧から適当なアイコンを選んでOKをクリックするとダイアログが出ます
  6. 分かりやすいアイコン名に変更します(ただし名前の先頭は ic_ にします)
    • 保存場所など残りの項目はデフォルトのままにします
  7. Finish ボタンをクリックします
  8. Resource Manager の Drawables でアイコンが追加されていることを確認します

UI画面にアイコンを追加する

アイコンでも ImageView で表示できちゃうんですね

  • UI画面にアイコンを表示するには ImageView を使います
  • Layout Editor で activity_main.xml に ImageView を追加します(Design view でも XML でもよい)
  • Image View に表示する画像として Drawable に登録したアイコンを指定します
  • Image View に constraint(制約)を設定して、適切な場所に表示できるようにします
  • 部品同士が近くて設定しにくい場合は、Design view と XMLコード表示を併用して確認しながら進めます
  • 必要に応じてUI部品にマージンを設定して部品の間のバランスをとります

まとめ

おつかれさまでした!

  • UI画面のカスタマイズには Material Design Components(MDC)を使うのがおすすめです
  • UI画面にアイコンを使うと機能が分かりやすくなります
  • レイアウトには ConstraintLayout を使います。ConstraintLayout では必ずUI部品ごとに constraint(制約)を設定します

参考