Android Kotlin基礎講座 02.1: レイアウトエディターを利用したLinear layoutについて

タスク：テキストビューを整形する

アプリの画面を見てみると、自分の名前が画面のトップに押し上げられているのがわかります。パディング（内側の余白）とマージン（外側の余白）を追加していきましょう。

パディングとマージン

パディングはビューや要素の境界線の内側の余白のことです。ビューの縁とビューのコンテンツの間の空間を意味しています。

ビューのサイズにはパディングも含まれています。以下は一般的にパディングに使われる属性です。

android:padding ビューの4つの全ての縁のパディングを指定します。
android:paddingTop 上辺のパディングを指定します。
android:paddingBottom 底辺のパディングを指定します。
android:paddingStart スタート方向(日本語の場合、横文字は左から読むので左辺）のパディングを指定します。
android:paddingEnd エンド方向（スタートの反対）のパディングを指定します。
android:paddingLeft 左辺のパディングを指定します。
android:paddingRight 右辺のパディングを指定します。

マージンはビューの境界線の外側に追加できる余白です。上の画像で示されているように、ビューの縁から親ビューまでの幅でもあります。以下は一般的にマージンに使われる属性です。

android:layout_margin ビューの4つの全ての縁のマージンを指定します。
android:layout_marginBottom 底辺のマージンを指定します。
android:layout_marginStart スタート方向（日本語の場合、横文字は左から読むので左辺）のマージンを指定します。
android:layout_marginEnd エンド方向（スタートの反対）のマージンを指定します。
android:layout_marginLeft 左辺のマージンを指定します。
android:layout_marginRight 右辺のマージンを指定します。

Right/left とstart/endの違い

“right”と”left”はいつでも画面の右側・左側を意味します。アプリの仕様が左から右(LTR)に表示される場合も、右から左（RTL）に表示される場合であってもです。”start”と”end”はアプリの仕様に応じて左右が決まります。

アプリがLTR仕様の場合、start = left、end = right
アプリがRTL仕様の場合、start = right、end = left

アプリがAPI 17(Android 4.2)以上を対象としている場合：

“left”と”right”の代わりに”start”と”end”を使用してください。
例えば、RTL仕様の場合：
　　　　 android:layout_marginLeftは
　 android:layout_marginStartとなるべきです。

Android 4.2以下のバージョンでもアプリを作動させるようにしたい場合、つまりアプリのtagetSdkVersionやminSdkVersionが16またはそれ以下の場合：

“left”と”right”に加えて”start”と”end”も追加してください。
例えば、android:paddingLeftとandroid:paddingStartを両方追加します。

ステップ1：パディングを追加する

名前とテキストビューの上辺の間に余白を作るために、パディングを追加します。

activity_main.xmlファイルを開いてDesignタブをクリックしてください。
コンポーネントツリー、またはデザインエディター上でテキストビューをクリックしてアトリビュートパネルを開いてください。
アトリビュートパネルのトップの二つの矢印が描かれたアイコンをクリックして全ての属性を表示してください。(Android StudioのバージョンによってはAll Attributesが最初からあります）
paddingを見つけて展開してください。paddingTop属性の横の三つの点のアイコン、または縦長の白いボタン(Android Studioのバージョンによります）をクリックして、Resourcesダイアログを開いてください。
Resourcesダイアログの中のAdd new resource > New Dimension Valueを選択してください。（前ページでstringリソースを追加したときのようにバージョンにより多少操作が異なります)
New Dimension Value Resourceダイアログの中で8dpという値を持ったsmall_paddingという名前のディメンションリソースを作成してください。

dpとはdensity-independent(解像度独立)の省略です。UI要素の見た目を異なる解像度の端末でも同じ大きさで表示したい場合には長さの単位としてdpを使用してください。ただし文字サイズを指定する際にはsp(scalable pixels)を必ず使用してください。
OKをクリックしてください。

ステップ2：マージンを追加する

名前を表示するテキストビューを親要素の縁から離したいので上辺にマージンを追加します。

アトリビュートパネルでmarginを検索してLayout_Marginを見つけてください。
Layout_Marginを展開して、layout_marginTopの横の三つの点のアイコンをクリックしてください。
layout_marginという名前で値が16dpのディメンションリソースを作成してください。
OKをクリックしてください。

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

テキストビューの見た目をより良くするために、Android Robotoフォントを利用します。このフォントはサポートライブラリの一部で、リソースとしてフォントを追加していきます。

アトリビュートパネルで”fontFamily”と検索してください。
fontFamilyフィールドでドロップダウン矢印をクリックして、リストの一番下までスクロールしてください。More Fontsを選択してください。
Resourcesダイアログでrobと検索してRobotoを選択してください。Previewリストの中からRegularを選択してください。
Add font to projetラジオボタンを選択してください。
OKをクリックしてください。

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

ステップ4：スタイルを抽出する

スタイルとはビューの見た目やフォーマットを指定した属性の集まりのことです。スタイルにはフォントカラーやフォントサイズ、背景色、パディング、マージンなどの一般の属性が含まれます。

名前を表示するためのテキストビューのフォーマットをスタイルとして抽出し、アプリ内の他のビューに再利用することができます。スタイルを再利用することでアプリにの見た目に一貫性をもたせることができます。またスタイルを利用することで共通の属性を一つの場所に保存しておくことができるようになります。

コンポーネントツリーのTextViewの上で右クリックし、Refactor > Extract Styleを選択してください。
Extract Android Styleダイアログの中のlayout_width、layout_height、textAlignmentチェックボックスのチェックを外してください。これらの属性は通常ビューごとに異なるものなので、スタイルに含むべきではありません。
Style nameフィールドにNameStyleと入力してください。
OKをクリックしてください。

スタイルもリソースのひとつですので、スタイルもres/valuesフォルダーの中のstyles.xmlファイルに保存されます。styles.xmlを開いて、NameStyleとして生成されたコードを調べてみましょう。以下のように表示されていると思います。

<style name="NameStyle">
   <item name="android:layout_marginTop">@dimen/layout_margin</item>
   <item name="android:fontFamily">@font/roboto</item>
   <item name="android:paddingTop">@dimen/small_padding</item>
   <item name="android:textColor">@android:color/black</item>
   <item name="android:textSize">@dimen/text_size</item>
</style>