[Android UI]shapeとselectorの併用

10792 ワード

shapeとselectorはAndroid UIのデザインでよく使われています.例えば、フィレットButtonをカスタマイズしたり、Buttonをクリックしたりすると効果の変化があります.shapeとselectorを使用します.このようにshapeとselectorの美化コントロールにおける役割は極めて重要であると言える.
1.Shapeプロファイルの役割:XMLで定義されたジオメトリの場所:res/drawable/ファイルの名前.xml使用方法:Javaコード中:R.drawable.ファイル名XML:Android:background="@drawable/ファイル名"属性:Android:shape=["rectangle"|"oval"|"line"|"ring"]ここでrectagle矩形、oval楕円、line水平直線、ringリング中性子ノードの一般的なプロパティ:グラデーションAndroid:startColor開始色Android:endColor終了色Android:angleグラデーション角度、0は上から下、90は左から右、数値45の整数倍デフォルトは0を表します.Android:typeグラデーションのスタイルlinerリニアグラデーションradialリンググラデーションsweepフィラーAndroid:colorフィラーの色ストロークAndroid:widthストロークの幅Android:colorストロークの色Android:dashWidthで'-'横線の幅Android:dashGapで'-'横線の間の距離フィレットAndroid:radiusフィレットの半径値大角越円Android:topRightRadius右上フィレット半径Android:bottomLeftRadius右下フィレット角半径Android:topLeftRadius左上フィレット半径Android:bottomRightRadius左下フィレット半径
2.Selectorプロフィールの場所:res/drawable/ファイルの名前.xml使用方法:Javaコード中:R.drawable.ファイル名XML中:Android:background="@drawable/ファイルの名前"
<?xml version="1.0" encoding="utf-8" ?>    
<selector xmlns:Android="http://schemas.android.com/apk/res/android">  
<!--         -->   
<item Android:drawable="@drawable/pic1" />     
<!--            -->   
<item
   Android:state_window_focused="false"     
   android:drawable="@drawable/pic_blue"/>    
<!--                     -->   
<item
   Android:state_focused="true"
   android:state_pressed="true"  
   android:drawable= "@drawable/pic_red"/>  
<!--              -->   
<item
   Android:state_focused="false"
   Android:state_pressed="true"  
   Android:drawable="@drawable/pic_pink"/>   
<!--        -->   
<item
   Android:state_selected="true"
   android:drawable="@drawable/pic_orange“/>    
<!--          -->   
<item
   Android:state_focused="true"
   Android:drawable="@drawable/pic_green"/>    
</selector>

3:shape+selector総合使用例
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.android.com/apk/res/android">
    <item Android:state_selected="true">
        <shape>
            <gradient Android:angle="270" android:endColor="#99BD4C"
                android:startColor="#A5D245" />
            <size Android:height="60dp" android:width="320dp" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item Android:state_pressed="true">
        <shape>
            <gradient Android:angle="270" android:endColor="#99BD4C"
                android:startColor="#A5D245"/>
            <size Android:height="60dp" android:width="320dp" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item>
        <shape>
            <gradient Android:angle="270" android:endColor="#A8C3B0"
                android:startColor="#C6CFCE"  />
            <size Android:height="60dp" android:width="320dp" />
            <corners android:radius="8dp" />
        </shape>
    </item>
</selector>