Android Kotlin基礎講座 02.3: レイアウトエディターを利用したレイアウトの位置制約付け

タスク：TextViewをスタイリングする

ステップ1：フォントを追加する

1. アトリビュートパネルでfontFamilyと検索して、その横に表示されているドロップダウン矢印を選択してください。スクロールダウンしてMore Fontsをクリックしてください。Resourcesダイアログが開きます。
   
   
2. Resourcesダイアログでrobotoと検索してください。
   
3. Robtotoをクリックして、Previewリストの中のRegularを選択してください。
   
4. Add font to projectラジオボタンを選択してください。
   
5. OKをクリックしてください。
   
   

これによってroboto.ttfというフォントファイルを含むres/fontフォルダーが追加されます。また@font/roboto属性がテキストビューに追加されました。

ステップ2：スタイルを追加する

1. res/values/dimens.xmlを開いてください。フォントサイズを設定するための次のディメンションリソースを追加してください。

<dimen name="box_text_size">24sp</dimen>

2. res/values/styles.xmlを開いてください。テキストビューに使用する以下のスタイル情報を追加してください。

<style name="whiteBox">
   <item name="android:background">@android:color/holo_green_light</item>
   <item name="android:textAlignment">center</item>
   <item name="android:textSize">@dimen/box_text_size</item>
   <item name="android:textStyle">bold</item>
   <item name="android:textColor">@android:color/white</item>
   <item name="android:fontFamily">@font/roboto</item>
</style>

このスタイルでは、背景色とテキストカラーはデフォルトのAndroidカラーリソースに設定されています。フォントはRobotoに設定されています。テキストは中央に太字で表示され、テキストサイズはbox_text_sizeに設定されています。

ステップ3：テキストビュー用のstringリソースを追加する

1. アトリビュートパネルでtext属性を見つけてください。（レンチアイコンがついていない方を利用してください）
   
2. text属性の横にある三つの点をクリックしてResourcesダイアログを開いてください。
   
3. ResourcesダイアログでAdd new resource > New string Valueを選択してください。resource nameはbox_oneとし、valueにはBox Oneと入力してください。
   
4. OKをクリックしてください。
   

ステップ4：テキストビューの属性の設定を終える

1. アトリビュートパネルでテキストビューのidをbox_one_textにしてください。
   
2. style属性を@style/whiteBoxにしてください。
   
3. コードをスッキリさせるために、Textタブに切り替えて、android:fontFamily=”@font/robot”という属性部分を削除してください。このフォントはwhiteBoxというスタイルの中に含まれているので削除して問題ありません。
   
4. Designタブに再び戻ってください。デザインエディタートップのDevice for previw(D)ボタンをクリックしてください。異なるスクリーン環境のデバイス一覧が表示されます。デフォルトのデバイスはPixelです。
   
   
5. リストから別のデバイスを選択してTextViewがどのように別のスクリーン環境に適応するのか確認してみてください。
   
6. アプリを起動してください。Box Oneと表示された緑にスタイリングされたテキストビューが表示されています。