2015/07/23

    AndroidはDrawableでViewをデザインする

    Drawableを使う事で、Viewを独自のデザインに設定する事が出来る。


    Drawableのリファレンスはこちら

    http://developer.android.com/guide/topics/resources/drawable-resource.html



    こんなデザインを作ってみた。

    タイトル風な部分の背景をDrawableで独自のデザインに変えている。

     

    layoutのxmlは以下の通り。

    タイトル風な部分のTextView要素のandroid:background属性にdrawableのファイル名が指定されている。

     

    例）res/layout/test.xml 

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/alert_title"
        android:layout_width="match_parent"
        android:layout_height="36dip"
        android:background="@drawable/background_title"
        android:paddingBottom="6dip"
        android:paddingLeft="30dip"
        android:paddingRight="30dip"
        android:paddingTop="6dip"
        android:text="TITLE"
        android:textColor="#F6CF87"
        android:textSize="18sp" />

    <TextView
        android:id="@+id/alert_message"
        android:layout_width="match_parent"
        android:layout_height="110dip"
        android:gravity="center"
        android:padding="10dip"
        android:text="テストです\n\nDrawableを使って\nタイトルの背景を変えてみました"
        />

</LinearLayout>


    drawableのxmlを作る。

    この例では、３つの形状を重ね合わせて作られている。

    　・上半分の薄いグレー部分

    　・下半分の濃いグレー部分

    　・黄色いアンダーライン風の部分


    形状を重ね合わせる為、まずLayer-List要素を定義して、中に３つのitem要素が置かれる。

    　・上半分の薄いグレー部分

    上から下へ向かって徐々に濃くなるグラデーション

    　・下半分の濃いグレー部分

    上から下へ向かって徐々に薄くなるグラデーション

    上部にオフセットを持たせて下半分に描画する仕組み

    　・黄色いアンダーライン風の部分

    横方向にグレー→黄色→グレーとなるグラデーション

    上部と下部にオフセットを持たせて描画する仕組み

     

    例）res/drawable/background_title.xml 

    <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="rectangle">
            <gradient
                android:angle="270"
                android:startColor="#808080"
                android:endColor="#606060"
                android:type="linear" />
        </shape>
    </item>
    <item android:top="14dip">
        <shape
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="rectangle">
            <gradient
                android:angle="270"
                android:startColor="#606060"
                android:endColor="#808080"
                android:type="linear" />
        </shape>
    </item>
    <item
        android:top="30dip"
        android:bottom="5dip" >
        <shape
                xmlns:android="http://schemas.android.com/apk/res/android"
                android:shape="rectangle">
                <gradient
                    android:angle="0"
                    android:startColor="#808080"
                    android:centerColor="#F6CF87"
                    android:endColor="#808080"
                    android:centerX="0.1"
                    android:type="linear" />
        </shape>
    </item>
</layer-list>

     

     

    カテゴリ： Android