2011年12月31日土曜日

Android:光沢のあるボタンをXMLで作る

もう少しカッコいいボタンが欲しくて、光沢感のあるものを作ってみました。
<layer-list>タグを使って光沢用のレイアウトを被せる手法を使いました。






<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >

    <!-- フォーカス時 -->
    <item android:state_focused="true"><layer-list>
        <item>
            <shape android:shape="rectangle" >
                <corners
                    android:topLeftRadius="5dip"
                    android:topRightRadius="5dip"
                    android:bottomLeftRadius="5dip"
                    android:bottomRightRadius="5dip"
                    />
                <gradient
                    android:startColor="@color/btn_glass_black_1"
                    android:endColor="@color/btn_glass_black_2"
                    android:angle="90"
                    />
                <stroke
                    android:width="2dip"
                    android:color="@color/btn_glass_black_1" />
            </shape>
        </item>
        <item
            android:top="5dip"
            android:bottom="14dip"
            android:left="10dip"
            android:right="10dip">
            <shape android:shape="rectangle">
                <corners
                    android:topLeftRadius="3dip"
                    android:topRightRadius="3dip"
                    android:bottomLeftRadius="3dip"
                    android:bottomRightRadius="3dip"
                    />
                <gradient
                    android:startColor="@color/btn_glass_black_2"
                    android:centerColor="@color/btn_brightness"
                    android:endColor="@color/btn_brightness"

                    android:angle="90"
                    />

            </shape>
        </item>
    </layer-list></item>

    <!-- 押下時 -->
    <item android:state_pressed="true">
        <shape android:shape="rectangle" >
            <corners
                android:topLeftRadius="5dip"
                android:topRightRadius="5dip"
                android:bottomLeftRadius="5dip"
                android:bottomRightRadius="5dip"
                />
            <gradient
                android:startColor="@color/btn_glass_black_2"
                android:endColor="@color/btn_glass_black_1"
                android:angle="90"
                />
            <stroke
                android:width="2dip"
                android:color="@color/btn_glass_black_1" />
        </shape>
    </item>


    <!-- 通常時 -->
    <item><layer-list>
        <item>
            <shape android:shape="rectangle" >
                <corners
                    android:topLeftRadius="5dip"
                    android:topRightRadius="5dip"
                    android:bottomLeftRadius="5dip"
                    android:bottomRightRadius="5dip"
                    />
                <gradient
                    android:startColor="@color/btn_glass_black_1"
                    android:endColor="@color/btn_glass_black_2"
                    android:angle="90"
                    />
            </shape>
        </item>
        <item
            android:top="5dip"
            android:bottom="14dip"
            android:left="10dip"
            android:right="10dip">
            <shape android:shape="rectangle">
                <corners
                    android:topLeftRadius="3dip"
                    android:topRightRadius="3dip"
                    android:bottomLeftRadius="3dip"
                    android:bottomRightRadius="3dip"
                    />
                <gradient
                    android:startColor="@color/btn_glass_black_2"
                    android:centerColor="@color/btn_brightness"
                    android:endColor="@color/btn_brightness"

                    android:angle="90"
                    />

            </shape>
        </item>
    </layer-list></item>

</selector>

どうも上に被せるitemは下に配置したitemのpaddingの影響を受けてしまうようで、自由に配置するのが難しいです。

なのでレイアウトを決める際にはボタンの高さを固定で30dipとして光沢位置を決めました。
paddingもXMLでは使わず、ボタンのプロパティとして設定しました。

大体イメージ通りのボタンになりましたが、layout_heightを30dipから変えられないという融通の利かないものになってしまったのが残念です。。。

0 件のコメント:

コメントを投稿