Androidはshapeをどう使うか

4508 ワード

Androidではコントロールの表示属性を定義するためにshapeを使用することがよくあります.では、どのように使うか、今日はshapeの使用を見てみましょう.

<shape>

<!--    -->
<solid android:color="#ff9d77"/>

<!--    -->
<gradient
android:startColor="#ff8c00"
android:endColor="#FFFFFF"
android:angle="270" />

<!--    -->
<stroke
android:width="2dp"
android:color="#dcdcdc" />

<!--    -->
<corners
android:radius="2dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />

</shape>

solid:実心、充填の意味です
Android:color塗りつぶしの色を指定する
gradient:グラデーション
Android:startColorとandroid:endColorはそれぞれ開始色と終了色で、ndroid:angleはグラデーション角度で、45の整数倍でなければなりません.
また、ランプのデフォルトモードはandroid:type=「linear」、すなわち線形ランプです.ランプをラジアルランプ、android:type=「radial」と指定できます.ラジアルランプには半径android:gradientRadius=「50」を指定する必要があります.
stroke:線
Android:width=「2 dp」の線の幅、android:colorの線の色.
また、線を破線の形にすることもできます.
android:dashWidth="5dp"
android:dashGap="3dp"
ここでandroid:dashWidthは'-'という横線の幅を表し、android:dashGapは間隔を隔てた距離を表す.
Corners:フィレット
android:radiusは角の弧で、値が大きいほど角が丸くなります.
4つの角を異なる角度に設定することもできます.方法は次のとおりです.

<corners
android:topRightRadius="20dp"    
android:bottomLeftRadius="20dp"    
android:topLeftRadius="1dp"    
android:bottomRightRadius="0dp"    
/>

ここで注意しなければならないことがあります.bottomLeftRadiusは右下で、左下ではありません.これは少し憂鬱ですが、使用に影響しません.間違えないでください.
またネット上では0 dp無効に設定されていると言われていますが、テストでは可能であることがわかりました.2.2を使っています.この問題を修復したのかもしれませんが、無効であれば1 dpに設定するしかありません.
padding:間隔
これは言うまでもなく、XMLレイアウトファイルでよく使われています.
概して、以下は、SelectorにおいてButtonの背景として用いられるボタンの一般状態、フォーカス取得状態、および押下時の状態をそれぞれ定義する使用例であり、具体的なコードは以下の通りである.

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TestShapeButton"
android:background="@drawable/button_selector"
/>

見てみましょうxmlコード:

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

<!--    -->
<gradient
android:startColor="#ff8c00"
android:endColor="#FFFFFF"
android:type="radial"
android:gradientRadius="50" />

<!--    -->
<stroke
android:width="2dp"
android:color="#dcdcdc"
android:dashWidth="5dp"
android:dashGap="3dp" />

<!--    -->
<corners
android:radius="2dp" />

<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>

</item>

<item android:state_focused="true" >
<shape>
<gradient
android:startColor="#ffc2b7"
android:endColor="#ffc2b7"
android:angle="270" />

<stroke
android:width="2dp"
android:color="#dcdcdc" />
<corners
android:radius="2dp" />

<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>

<item>
<shape>
<solid android:color="#ff9d77"/>
<stroke
android:width="2dp"
android:color="#fad3cf" />

<corners
android:topRightRadius="5dp"
android:bottomLeftRadius="5dp"
android:topLeftRadius="0dp"
android:bottomRightRadius="0dp"
/>

<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
</selector>