这一类的shape定义在xml中
-
file location:
-
res/drawable/filename.xml
The filename is used as the resource ID.(这个文件名作为资源id)
compiled resource datatype:(复杂资源的数据类型)
-
Resource pointer to a
GradientDrawable
.
resource reference(资源参考):
-
In Java:
R.drawable.filename
In XML:@[package:]drawable/filename
syntax:(语法)
-
<span class="pun" style="color:#666600;"><?</span><span class="pln" style="color:#000000;">xml version</span><span class="pun" style="color:#666600;">=</span><span class="str" style="color:#088000;">"1.0"</span><span class="pln" style="color:#000000;"> encoding</span><span class="pun" style="color:#666600;">=</span><span class="str" style="color:#088000;">"utf-8"</span><span class="pun" style="color:#666600;">?></span><span class="pln" style="color:#000000;"> </span><span class="tag" style="color:#008800;"><</span><a target=_blank style="color: rgb(0, 102, 153);" href="http://developer.android.com/guide/topics/resources/drawable-resource.html#shape-element"><span class="tag" style="color:#008800;">shape</span></a><span class="pln" style="color:#000000;"> </span><span class="atn" style="color:#882288;">xmlns:android</span><span class="pun" style="color:#666600;">=</span><span class="atv" style="color:#088000;">"http://schemas.android.com/apk/res/android"</span><span class="pln" style="color:#000000;"> </span><span class="atn" style="color:#882288;">android:shape</span><span class="pun" style="color:#666600;">=</span><span class="atv" style="color:#088000;">["rectangle"</span><span class="pln" style="color:#000000;"> | </span><span class="atv" style="color:#088000;">"oval"</span><span class="pln" style="color:#000000;"> | </span><span class="atv" style="color:#088000;">"line"</span><span class="pln" style="color:#000000;"> | </span><span class="atv" style="color:#088000;">"ring"</span><span class="pln" style="color:#000000;">] </span><span class="tag" style="color:#008800;">></span><span class="pln" style="color:#000000;"> </span><span class="tag" style="color:#008800;"><</span><a target=_blank style="color: rgb(0, 102, 153);" href="http://developer.android.com/guide/topics/resources/drawable-resource.html#corners-element"><span class="tag" style="color:#008800;">corners</span></a><span class="pln" style="color:#000000;"> </span><span class="atn" style="color:#882288;">android:radius</span><span class="pun" style="color:#666600;">=</span><span class="atv" style="color:#088000;">"</span><em><span class="atv" style="color:#088000;">integer</span></em><span class="atv" style="color:#088000;">"</span><span class="pln" style="color:#000000;"> </span><span class="atn" style="color:#882288;">android:topLeftRadius</span><span class="pun" style="color:#666600;">=</span><span class="atv" style="color:#088000;">"</span><em><span class="atv" style="color:#088000;">integer</span></em><span class="atv" style="color:#088000;">"</span><span class="pln" style="color:#000000;"> </span><span class="atn" style="color:#882288;">android:topRightRadius</span><span class="pun" style="color:#666600;">=</span><span class="atv" style="color:#088000;">"</span><em><span class="atv" style="color:#088000;">integer</span></em><span class="atv" style="color:#088000;">"</span><span class="pln" style="color:#000000;"> </span><span class="atn" style="color:#882288;">android:bottomLeftRadius</span><span class="pun" style="color:#666600;">=</span><span class="atv" style="color:#088000;">"</span><em><span class="atv" style="color:#088000;">integer</span></em><span class="atv" style="color:#088000;">"</span><span class="pln" style="color:#000000;"> </span><span class="atn" style="color:#882288;">android:bottomRightRadius</span><span class="pun" style="color:#666600;">=</span><span class="atv" style="color:#088000;">"</span><em><span class="atv" style="color:#088000;">integer</span></em><span class="atv" style="color:#088000;">"</span><span class="pln" style="color:#000000;"> </span><span class="tag" style="color:#008800;">/></span><span class="pln" style="color:#000000;"> </span><span class="tag" style="color:#008800;"><</span><a target=_blank style="color: rgb(0, 102, 153);" href="http://developer.android.com/guide/topics/resources/drawable-resource.html#gradient-element"><span class="tag" style="color:#008800;">gradient</span></a><span class="pln" style="color:#000000;"> </span><span class="atn" style="color:#882288;">android:angle</span><span class="pun" style="color:#666600;">=</span><span class="atv" style="color:#088000;">"</span><em><span class="atv" style="color:#088000;">integer</span></em><span class="atv" style="color:#088000;">"</span><span class="pln" style="color:#000000;"> </span><span class="atn" style="color:#882288;">android:centerX</span><span class="pun" style="color:#666600;">=</span><span class="atv" style="color:#088000;">"</span><em><span class="atv" style="color:#088000;">integer</span></em><span class="atv" style="color:#088000;">"</span><span class="pln" style="color:#000000;"> </span><span class="atn" style="color:#882288;">android:centerY</span><span class="pun" style="color:#666600;">=</span><span class="atv" style="color:#088000;">"</span><em><span class="atv" style="color:#088000;">integer</span></em><span class="atv" style="color:#088000;">"</span><span class="pln" style="color:#000000;"> </span><span class="atn" style="color:#882288;">android:centerColor</span><span class="pun" style="color:#666600;">=</span><span class="atv" style="color:#088000;">"</span><em><span class="atv" style="color:#088000;">integer</span></em><span class="atv" style="color:#088000;">"</span><span class="pln" style="color:#000000;"> </span><span class="atn" style="color:#882288;">android:endColor</span><span class="pun" style="color:#666600;">=</span><span class="atv" style="color:#088000;">"</span><em><span class="atv" style="color:#088000;">color</span></em><span class="atv" style="color:#088000;">"</span><span class="pln" style="color:#000000;"> </span><span class="atn" style="color:#882288;">android:gradientRadius</span><span class="pun" style="color:#666600;">=</span><span class="atv" style="color:#088000;">"</span><em><span class="atv" style="color:#088000;">integer</span></em><span class="atv" style="color:#088000;">"</span><span class="pln" style="color:#000000;"> </span><span class="atn" style="color:#882288;">android:startColor</span><span class="pun" style="color:#666600;">=</span><span class="atv" style="color:#088000;">"</span><em><span class="atv" style="color:#088000;">color</span></em><span class="atv" style="color:#088000;">"</span><span class="pln" style="color:#000000;"> </span><span class="atn" style="color:#882288;">android:type</span><span class="pun" style="color:#666600;">=</span><span class="atv" style="color:#088000;">["linear"</span><span class="pln" style="color:#000000;"> | </span><span class="atv" style="color:#088000;">"radial"</span><span class="pln" style="color:#000000;"> | </span><span class="atv" style="color:#088000;">"sweep"</span><span class="pln" style="color:#000000;">] </span><span class="atn" style="color:#882288;">android:useLevel</span><span class="pun" style="color:#666600;">=</span><span class="atv" style="color:#088000;">["true"</span><span class="pln" style="color:#000000;"> | </span><span class="atv" style="color:#088000;">"false"</span><span class="pln" style="color:#000000;">] </span><span class="tag" style="color:#008800;">/></span><span class="pln" style="color:#000000;"> </span><span class="tag" style="color:#008800;"><</span><a target=_blank style="color: rgb(0, 102, 153);" href="http://developer.android.com/guide/topics/resources/drawable-resource.html#padding-element"><span class="tag" style="color:#008800;">padding</span></a><span class="pln" style="color:#000000;"> </span><span class="atn" style="color:#882288;">android:left</span><span class="pun" style="color:#666600;">=</span><span class="atv" style="color:#088000;">"</span><em><span class="atv" style="color:#088000;">integer</span></em><span class="atv" style="color:#088000;">"</span><span class="pln" style="color:#000000;"> </span><span class="atn" style="color:#882288;">android:top</span><span class="pun" style="color:#666600;">=</span><span class="atv" style="color:#088000;">"</span><em><span class="atv" style="color:#088000;">integer</span></em><span class="atv" style="color:#088000;">"</span><span class="pln" style="color:#000000;"> </span><span class="atn" style="color:#882288;">android:right</span><span class="pun" style="color:#666600;">=</span><span class="atv" style="color:#088000;">"</span><em><span class="atv" style="color:#088000;">integer</span></em><span class="atv" style="color:#088000;">"</span><span class="pln" style="color:#000000;"> </span><span class="atn" style="color:#882288;">android:bottom</span><span class="pun" style="color:#666600;">=</span><span class="atv" style="color:#088000;">"</span><em><span class="atv" style="color:#088000;">integer</span></em><span class="atv" style="color:#088000;">"</span><span class="pln" style="color:#000000;"> </span><span class="tag" style="color:#008800;">/></span><span class="pln" style="color:#000000;"> </span><span class="tag" style="color:#008800;"><</span><a target=_blank style="color: rgb(0, 102, 153);" href="http://developer.android.com/guide/topics/resources/drawable-resource.html#size-element"><span class="tag" style="color:#008800;">size</span></a><span class="pln" style="color:#000000;"> </span><span class="atn" style="color:#882288;">android:width</span><span class="pun" style="color:#666600;">=</span><span class="atv" style="color:#088000;">"</span><em><span class="atv" style="color:#088000;">integer</span></em><span class="atv" style="color:#088000;">"</span><span class="pln" style="color:#000000;"> </span><span class="atn" style="color:#882288;">android:height</span><span class="pun" style="color:#666600;">=</span><span class="atv" style="color:#088000;">"</span><em><span class="atv" style="color:#088000;">integer</span></em><span class="atv" style="color:#088000;">"</span><span class="pln" style="color:#000000;"> </span><span class="tag" style="color:#008800;">/></span><span class="pln" style="color:#000000;"> </span><span class="tag" style="color:#008800;"><</span><a target=_blank style="color: rgb(0, 102, 153);" href="http://developer.android.com/guide/topics/resources/drawable-resource.html#solid-element"><span class="tag" style="color:#008800;">solid</span></a><span class="pln" style="color:#000000;"> </span><span class="atn" style="color:#882288;">android:color</span><span class="pun" style="color:#666600;">=</span><span class="atv" style="color:#088000;">"</span><em><span class="atv" style="color:#088000;">color</span></em><span class="atv" style="color:#088000;">"</span><span class="pln" style="color:#000000;"> </span><span class="tag" style="color:#008800;">/></span><span class="pln" style="color:#000000;"> </span><span class="tag" style="color:#008800;"><</span><a target=_blank style="color: rgb(0, 102, 153);" href="http://developer.android.com/guide/topics/resources/drawable-resource.html#stroke-element"><span class="tag" style="color:#008800;">stroke</span></a><span class="pln" style="color:#000000;"> </span><span class="atn" style="color:#882288;">android:width</span><span class="pun" style="color:#666600;">=</span><span class="atv" style="color:#088000;">"</span><em><span class="atv" style="color:#088000;">integer</span></em><span class="atv" style="color:#088000;">"</span><span class="pln" style="color:#000000;"> </span><span class="atn" style="color:#882288;">android:color</span><span class="pun" style="color:#666600;">=</span><span class="atv" style="color:#088000;">"</span><em><span class="atv" style="color:#088000;">color</span></em><span class="atv" style="color:#088000;">"</span><span class="pln" style="color:#000000;"> </span><span class="atn" style="color:#882288;">android:dashWidth</span><span class="pun" style="color:#666600;">=</span><span class="atv" style="color:#088000;">"</span><em><span class="atv" style="color:#088000;">integer</span></em><span class="atv" style="color:#088000;">"</span><span class="pln" style="color:#000000;"> </span><span class="atn" style="color:#882288;">android:dashGap</span><span class="pun" style="color:#666600;">=</span><span class="atv" style="color:#088000;">"</span><em><span class="atv" style="color:#088000;">integer</span></em><span class="atv" style="color:#088000;">"</span><span class="pln" style="color:#000000;"> </span><span class="tag" style="color:#008800;">/></span><span class="pln" style="color:#000000;"> </span><span class="tag" style="color:#008800;"></shape></span>
元素:
- example:
-
XML file saved at
res/drawable/gradient_box.xml
:<span class="pun" style="color:#666600;"><?</span><span class="pln" style="color:#000000;">xml version</span><span class="pun" style="color:#666600;">=</span><span class="str" style="color:#088000;">"1.0"</span><span class="pln" style="color:#000000;"> encoding</span><span class="pun" style="color:#666600;">=</span><span class="str" style="color:#088000;">"utf-8"</span><span class="pun" style="color:#666600;">?></span><span class="pln" style="color:#000000;"> </span><span class="tag" style="color:#008800;"><shape</span><span class="pln" style="color:#000000;"> </span><span class="atn" style="color:#882288;">xmlns:android</span><span class="pun" style="color:#666600;">=</span><span class="atv" style="color:#088000;">"http://schemas.android.com/apk/res/android"</span><span class="pln" style="color:#000000;"> </span><span class="atn" style="color:#882288;">android:shape</span><span class="pun" style="color:#666600;">=</span><span class="atv" style="color:#088000;">"rectangle"</span><span class="tag" style="color:#008800;">></span><span class="pln" style="color:#000000;"> </span><span class="tag" style="color:#008800;"><gradient</span><span class="pln" style="color:#000000;"> </span><span class="atn" style="color:#882288;">android:startColor</span><span class="pun" style="color:#666600;">=</span><span class="atv" style="color:#088000;">"#FFFF0000"</span><span class="pln" style="color:#000000;"> </span><span class="atn" style="color:#882288;">android:endColor</span><span class="pun" style="color:#666600;">=</span><span class="atv" style="color:#088000;">"#80FF00FF"</span><span class="pln" style="color:#000000;"> </span><span class="atn" style="color:#882288;">android:angle</span><span class="pun" style="color:#666600;">=</span><span class="atv" style="color:#088000;">"45"</span><span class="tag" style="color:#008800;">/></span><span class="pln" style="color:#000000;"> </span><span class="tag" style="color:#008800;"><padding</span><span class="pln" style="color:#000000;"> </span><span class="atn" style="color:#882288;">android:left</span><span class="pun" style="color:#666600;">=</span><span class="atv" style="color:#088000;">"7dp"</span><span class="pln" style="color:#000000;"> </span><span class="atn" style="color:#882288;">android:top</span><span class="pun" style="color:#666600;">=</span><span class="atv" style="color:#088000;">"7dp"</span><span class="pln" style="color:#000000;"> </span><span class="atn" style="color:#882288;">android:right</span><span class="pun" style="color:#666600;">=</span><span class="atv" style="color:#088000;">"7dp"</span><span class="pln" style="color:#000000;"> </span><span class="atn" style="color:#882288;">android:bottom</span><span class="pun" style="color:#666600;">=</span><span class="atv" style="color:#088000;">"7dp"</span><span class="pln" style="color:#000000;"> </span><span class="tag" style="color:#008800;">/></span><span class="pln" style="color:#000000;"> </span><span class="tag" style="color:#008800;"><corners</span><span class="pln" style="color:#000000;"> </span><span class="atn" style="color:#882288;">android:radius</span><span class="pun" style="color:#666600;">=</span><span class="atv" style="color:#088000;">"8dp"</span><span class="pln" style="color:#000000;"> </span><span class="tag" style="color:#008800;">/></span><span class="pln" style="color:#000000;"> </span><span class="tag" style="color:#008800;"></shape></span>
This layout XML applies the shape drawable to a View:
<span class="tag" style="color:#008800;"><TextView</span><span class="pln" style="color:#000000;"> </span><span class="atn" style="color:#882288;">android:background</span><span class="pun" style="color:#666600;">=</span><span class="atv" style="color:#088000;">"@drawable/gradient_box"</span><span class="pln" style="color:#000000;"> </span><span class="atn" style="color:#882288;">android:layout_height</span><span class="pun" style="color:#666600;">=</span><span class="atv" style="color:#088000;">"wrap_content"</span><span class="pln" style="color:#000000;"> </span><span class="atn" style="color:#882288;">android:layout_width</span><span class="pun" style="color:#666600;">=</span><span class="atv" style="color:#088000;">"wrap_content"</span><span class="pln" style="color:#000000;"> </span><span class="tag" style="color:#008800;">/></span>
This application code gets the shape drawable and applies it to a View:
<span class="typ" style="color:#660660;">Resources</span><span class="pln" style="color:#000000;"> res </span><span class="pun" style="color:#666600;">=</span><span class="pln" style="color:#000000;"> </span><code style="line-height: 1em;"><a target=_blank style="color: rgb(0, 102, 153);" href="http://developer.android.com/reference/android/content/Context.html#getResources%28%29"><span class="pln" style="color:#000000;">getResources</span><span class="pun" style="color:#666600;">()</span></a></code><span class="pun" style="color:#666600;">;</span><span class="pln" style="color:#000000;"> </span><span class="typ" style="color:#660660;">Drawable</span><span class="pln" style="color:#000000;"> shape </span><span class="pun" style="color:#666600;">=</span><span class="pln" style="color:#000000;"> res</span><span class="pun" style="color:#666600;">.</span><span class="pln" style="color:#000000;"> </span><code style="line-height: 1em;"><a target=_blank style="color: rgb(0, 102, 153);" href="http://developer.android.com/reference/android/content/res/Resources.html#getDrawable%28int%29"><span class="pln" style="color:#000000;">getDrawable</span></a></code><span class="pun" style="color:#666600;">(</span><span class="pln" style="color:#000000;">R</span><span class="pun" style="color:#666600;">.</span><span class="pln" style="color:#000000;">drawable</span><span class="pun" style="color:#666600;">.</span><span class="pln" style="color:#000000;">gradient_box</span><span class="pun" style="color:#666600;">);</span><span class="pln" style="color:#000000;"> </span><span class="typ" style="color:#660660;">TextView</span><span class="pln" style="color:#000000;"> tv </span><span class="pun" style="color:#666600;">=</span><span class="pln" style="color:#000000;"> </span><span class="pun" style="color:#666600;">(</span><span class="typ" style="color:#660660;">TextView</span><span class="pun" style="color:#666600;">)</span><span class="pln" style="color:#000000;">findViewByID</span><span class="pun" style="color:#666600;">(</span><span class="pln" style="color:#000000;">R</span><span class="pun" style="color:#666600;">.</span><span class="pln" style="color:#000000;">id</span><span class="pun" style="color:#666600;">.</span><span class="pln" style="color:#000000;">textview</span><span class="pun" style="color:#666600;">);</span><span class="pln" style="color:#000000;"> tv</span><span class="pun" style="color:#666600;">.</span><span class="pln" style="color:#000000;">setBackground</span><span class="pun" style="color:#666600;">(</span><span class="pln" style="color:#000000;">shape</span><span class="pun" style="color:#666600;">);</span>
gradient -- 对应颜色渐变。 startcolor、endcolor就不多说了。 android:angle 是指从哪个角度开始变。
gradient:渐变
android:startColor和android:endColor分别为起始和结束颜色,android:angle是渐变角度,必须为45的整数倍。
另外渐变默认的模式为android:type="linear",即线性渐变,可以指定渐变为径向渐变,android:type="radial",径向渐变需要指定半径android:gradientRadius="50"。
solid -- 填充。
solid:实心,就是填充的意思
android:color指定填充的颜色
stroke -- 描边。
stroke:描边
android:width="2dp" 描边的宽度,android:color 描边的颜色。
我们还可以把描边弄成虚线的形式,设置方式为:
android:dashWidth="5dp"
android:dashGap="3dp"
其中android:dashWidth表示'-'这样一个横线的宽度,android:dashGap表示之间隔开的距离。
corners -- 圆角。
corners:圆角
android:radius为角的弧度,值越大角越圆。
我们还可以把四个角设定成不同的角度,方法为:
<corners
android:topRightRadius="20dp" 右上角
android:bottomLeftRadius="20dp" 右下角
android:topLeftRadius="1dp" 左上角
android:bottomRightRadius="0dp" 左下角
/>
这里有个地方需要注意,bottomLeftRadius是右下角,而不是左下角,这个不要记错了。
padding -- 定义内容离边界的距离。 与android:padding_left、android:padding_right这些是一个道理。
http://www.cnblogs.com/xiaoQLu/archive/2011/09/14/2176359.html
android:angle网上有各种说法,这里,我说说自己的实验结果,渐变的时候,最原始的,即android:angle=“0”时,是从左到右,按照开始颜色到结束颜色来渲染的,android:angle=“90”是从上到下来渲染的,android:angle=“180”是从右到左来渲染的,android:angle=“360”和android:angle=“0”是一样的,所以这里应该是这样的,渲染时按照最原始的渲染色板(把控件内部看作一块可以绕中心旋转的板子)围绕控件中心来旋转相应的度数,即android:angle里面的值就是所需要旋转的角度,只是这个旋转角度必须是45的整数倍