コードラボJP
プライバシーポリシー お問い合わせ サイトマップ

Android Kotlin基礎講座 10.1:スタイルとテーマ

タスク：スタイリング用に属性を使用する

このタスクでは、ヘッダーのテキストをスタイルするために属性を使用します。

  1. GDG-finder starterアプリをダウンロードして起動してください。
  2. ホーム画面には均一にフォーマットされたテキストがたくさんあり、このページが何に対するものなのか、何が重要なのかが分かりづらいことを確認してください。
  3. home_fragment.xmlレイアウトファイルを開いてください。
  4. レイアウトがScrollViewないの要素を配置するためにConstraintLayoutを使用していることを確認してください。
  5. それぞれのビューに対して、制約とマージン属性がそのビュー内で設定されていることを確認してください。これはこれらの属性がそれぞれのビューや画面に対してカスタマイズされる傾向があるためです。
  6. titleテキストビュー内に、textSize属性を追加し、テキストのサイズを24spに変更してください。

    復習になりますが、spはscale-independent pixelsを意味しており、ユーザーが端末設定で設定したピクセル密度やフォントサイズの両方によってスケールされます。Androidは文字を描写する際に、画面上で文字がどれくらい大きく表示されるべきかを判断します。テキストサイズには常にspを使用してください。
<TextView
       android:id="@+id/title"
...

android:textSize="24sp"
  1. titleテキストビューのtextColorをaRGB値を#FF555555にして不透明グレーに設定してください。
<TextView
       android:id="@+id/title"
...

android:textColor="#FF555555"
  1. Android Studioでプレビューを開くために、View > Tool Windows > Previewを選択、またはレイアウトエディターの右端にあるPreviewボタンをクリックしてください。プレビュー中で、タイトルがグレーで以前よりも大きくなっていることを確認してください。

Tip: aRGB値は色を透明度(alpha transparency)、赤(R)、緑(G)、青(B)の四つの値の組み合わせで表現したものです。aRGB値は上述した四つの値それぞれに対して、00からFFまでの16進数を使って記します。
#(alpha)(red)(green)(blue)
#(00-FF)(00-FF)(00-FF)(00-FF)

例）
#FFFF0000は不透明赤を表します。
#5500FF00は半透明緑を表します。
#FF0000FFは不透明青を表します。

  1. 見出しの色をヘッダーと同じ色で少し小さいサイズの18spにスタイリングしましょう。(デフォルトの透明度はFFで不透明です。透明度を変更する必要がない場合は記述を省略できます。）
<TextView
       android:id="@+id/subtitle"
...
android:textSize="18sp"
android:textColor="#555555"
  1. この記事では、ゴールはそれっぽくプロフェッショナルな感じに見えるようにスタイリングすることですが、お好きなようにいじっていただいて構いません。subtitleテキストビューに以下の属性も試してみてください。Previewタブを使って見た目がどう変化したか確認できます。
    最後に今追加した属性は削除しておいてください。
<TextView
       android:id="@+id/subtitle"
       ...
       android:textAllCaps="true"
       android:textStyle="bold"
       android:background="#ff9999"
  1. 先に進む前にsubtitleビューからtextAllCaps、textStyle、backgroundを削除することを忘れないでください。
  2. アプリを起動してみてください。既にだいぶ見た目が良くなっているはずです。