Androidアプリケーションのユーザーインターフェース(UI)の整え方～その1～

ユーザーインターフェース(UI)の作成で色々と苦労したので、作成方法のメモを残します。

例えば、以下のようなTextViewオブジェクトをxmlに記述したとします。

    <TextView android:id="@+id/page_title_label"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10px"
        android:layout_marginRight="10px" 
        android:layout_marginBottom="10px" 
        android:text="@string/page_title_top" />

上記は、指定した位置にTextViewオブジェクトを配置するxmlです。

表示される文字は、valuesフォルダ配下のstring.xmlのpage_title_topタグ内に記述された文字になります。

さらに、textSizeやtextColorなどを指定していくことになります。

しかし、textSizeやtextColorなどは配置位置とは異なり、共通で使いまわすことが多いと思います。

しかも、変更が起きることもあるでしょう。そのたびに、全てのtextSizeやtextColorを変更していたのでは面倒です。

こういった場合に対応するには、style.xmlを使うと便利です。

style.xmlには、以下のように記述します。

    <style name="page_title">
        <item name="android:textSize">12sp</item>
        <item name="android:textColor">#000000</item>
        <item name="android:background">#FFFFFF</item>
        <item name="android:typeface">monospace</item>
        <item name="android:textStyle">normal</item>
    </style>

上記で指定しているname属性は、あらゆるViewのオブジェクトで指定するべきです。

属性typefaceとtextStyleの指定はしない人が多いと思いますが、指定するべきです。

typefaceはテキストの書体を指定します。

日本語の場合はmonospaceを指定しましょう。日本語は等間隔のmonospaceが読みやすいとされているからです。

英語の場合はsansもしくは、serifにしましょう。英語は等間隔のmonospaceは読みにくいとされています。

textStyleは、テキストのスタイル（通常、太字、斜体）を指定します。
デフォルトはnormalです。他にbold（太字）、italic（斜体）も使用できるので、見やすい
ユーザーインターフェースをつくるためにも利用したほうが良いでしょう。

上記のstyle.xmlはTextViewの記述されたxmlに追加することで、適用できます。

    <TextView android:id="@+id/page_title_label"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10px"
        android:layout_marginRight="10px" 
        android:layout_marginBottom="10px" 
        android:text="@string/page_title_top" 
        style="@style/page_title" />

上記のように指定することで、style.xmlに指定した属性が反映されます。
他のオブジェクトで流用も可能な上、変更しても一発ですべて直せます。

というわけで、とりあえず基本的なxmlの使い方の説明でした。
他にも色々と公開していきたいと思います。でわ。

この記事がお役にたちましたらシェアをお願いします

Tweet