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

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>
  1. 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と表示された緑にスタイリングされたテキストビューが表示されています。