学步园

http://kofi1122.blog.51cto.com/2815761/521605

Android中常常使用shape来定义控件的一些显示属性，今天看了一些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="2dp" 描边的宽度，android:color 描边的颜色。

我们还可以把描边弄成虚线的形式，设置方式为：

android:dashWidth="5dp" 

android:dashGap="3dp"

其中android:dashWidth表示'-'这样一个横线的宽度，android:dashGap表示之间隔开的距离。

corners：圆角

android:radius为角的弧度，值越大角越圆。

我们还可以把四个角设定成不同的角度，方法为：

<corners 

        android:topRightRadius="20dp"    右上角

        android:bottomLeftRadius="20dp"    右下角

        android:topLeftRadius="1dp"    左上角

        android:bottomRightRadius="0dp"    左下角

 />

这里有个地方需要注意，bottomLeftRadius是右下角，而不是左下角，这个有点郁闷，不过不影响使用，记得别搞错了就行。

还有网上看到有人说设置成0dp无效，不过我在测试中发现是可以的，我用的是2.2，可能修复了这个问题吧，如果无效的话那就只能设成1dp了。

padding：间隔

这个就不用多说了，XML布局文件中经常用到。



大体的就是这样，以下是一个使用的具体示例：用在Selector中作为Button的背景，分别定义了按钮的一般状态、获得焦点状态和按下时的状态，具体代码如下：

main.xml:
<Button

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:text="TestShapeButton"

    android:background="@drawable/button_selector"

    />

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>

运行效果如下图：

一般状态：

获得焦点状态：

按下状态：

详细：selector + shape

http://blog.sina.com.cn/s/blog_85adb3720100u656.html

Android Button特效-->selector+shape
<!--应用格式-->
<selector>
 <item>
  <shape>
  </shape>
 </item>
</selector>

<selector
 android:constantSize=["true" | "false"]
  Boolean-->“true”表示随着状态变化，Drawable 的大小保持不变
             （所有状态中最大的 size ）
     “false”表示大小会变化。默认是false
 android:dither=["true" | "false"]
  Boolean-->“true”表示当Bitmap和屏幕的不是相同的像素设定时支持Bitmap 抖动
      （例如， ARGB 8888 的 Bitmap 和 RGB 565 的屏幕）
     “false”表示不支持。默认是“true”
 android:variablePadding=["true" | "false"]
  Boolean-->“true”表示Drawable的Padding可以变化；
     “false”表示 Padding 保持相同（所有状态的最大 Padding ）
      使用这一特征需要在状态变化时处理 Layout，一般都不支持。默认值是false。
 />

<item
 android:drawable="@[package:]drawable/drawable_resource"
  drawable-->图片资源

 android:state_pressed=["true" | "false"]
  boolean-->“true”表示按下状态使用（例如按钮按下）
     “false”表示非按下状态使用

 android:state_focused=["true" | "false"]
  boolean-->“true”表示聚焦状态使用（例如使用滚动球/d-pad聚焦button）         

    “false”表示非聚焦状态使用

 android:state_selected=["true" | "false"]
  boolean-->“true”表示选中状态使用（例如tab打开）
     “false”表示非选中状态使用

 android:state_active=["true" | "false"]

 android:state_checkable=["true" | "false"]
  boolean-->“true”表示可勾选状态时使用
     “false”表示非可勾选状态使用
                          （只对能切换 (可勾选|非可勾选)的控件有用）

 android:state_checked=["true" | "false"]
  boolean-->“true”表示勾选状态使用
     “false”表示非勾选状态使用

 android:state_enabled=["true" | "false"]
  boolean-->“true”表示可用状态使用（能接收触摸/点击事件）
     “false”表示不可用状态使用

 android:state_window_focused=["true" | "false"]
  boolean-->“true”表示应用程序窗口有焦点时使用（应用程序在前台）
     “false”表示无焦点时使用（例如notification栏拉下或对话框显示）
 />

PS: 
 Item state 顺序是有讲究的，条件限定越细致，则应该放到前面。
 state list中第一个匹配当前状态的item会被使用。
 因此，如果第一个item没有任何状态特性的话，
 那么它将每次都被使用，这也是为什么默认的值必须总是在最后。 

<shape
 android:shape=["rectangle"|"oval"|"line"|"ring"]
  type--> 类型
   rectangle：矩形，默认形状
   oval：椭圆
   line：水平直线，需要 <stroke> 元素定义线的宽度
   ring：环形
  <!--
   接下来的特性只能在 android:shape=”ring” 时使用：
   android:innerRadius：内环的半径
   android:innerRadiusRatio
    Float：以环的宽度比率来表示内环的半径。
    例如，如果android:innerRadiusRatio="5"，内环半径等于环的宽度除以5。
    这个值可以被 android:innerRadius覆盖。默认值是9
   android:thickness：环的厚度
   android:thicknessRatio
    Float：以环的宽度比率来表示环的厚度。
    例如，如果android:thicknessRatio="2"，厚度就等于环的宽度除以2。
    这个值可以被android:thickness覆盖。默认值是3
   android:useLevel
    Boolean：“true”表示可以当作 LevelListDrawable 使用。一般都为“false”  
  -->
 >
 <solid 
  android:color="color"
  />
 <!--
 solid-->实心
  color：颜色
 -->
 <gradient
  android:angle="integer"
  android:centerX="Float"
  android:centerY="Float"
  android:centerColor="integer"
  android:startColor="color"
  android:endColor="color"
  android:gradientRadius="integer"
  android:type=["linear"|"radial"|"sweep"]
  android:usesLevel=["true"|"false"]
  />
 <!--
 gradient-->渐变
     angle：角度
     centerX：Float。渐变色中心的 X 相对位置（ 0-1.0 ）。当 android:type=“linear”时无效
     centerY：Float。渐变色中心的 Y 相对位置（ 0-1.0 ）。当 android:type=“linear”时无效
     centerColor：color。可选的颜色，出现在 start 和 end 颜色之间。
     gradientRadius：Float。渐变色的半径。当 android:type=“radial” 时有效。
     startcolor：开始的颜色
     endcolor：结束的颜色
     type：Keyword 。渐变色的样式。有效值为：
   "linear"：线性渐变，默认值
   "radial"：环形渐变。 start 颜色是处于中间的颜色
   "sweep"：sweep 渐变
     useLevel：Boolean。“ true ”表示可以当作 LevelListDrawable 使用
 -->
 <stroke
  android:width="integer"
  android:color="color"
  android:dashWidth="integer"
  android:dashGap="integer"
  />
 <!--
 stroke-->描边
   width：宽度
   color：颜色
   dashGap：间断线间的距离。仅在 android:dashWidth 设定时有效。
   dashWidth：间断线的大小。仅在 android:dashGap 设定时有效。
 -->
 <corners
  android:radius="integer"
  android:topLeftRadius="integer"
  android:topRightRadius="integer"
  android:bottomLeftRadius="integer"
  android:bottomRightRadius="integer"
  />
 <!--
 corners-->圆角
    radius：半径，会被下面的特性覆盖。
    topLeftRadius：左上圆角半径。
    topRightRadius：右上圆角半径。
    bottomLeftRadius：左下圆角半径。
    bottomRightRadius：右下圆角半径。  
 -->
 <padding
  android:left="integer"
  android:top="integer"
  android:right="integer"
  android:bottom="integer"
  />
 <!--
 padding-->间隔
    left：左内边距。
    top:上内边距。
    right:右内边距。
    bottom:下内边距。
 -->
</shape>

PS:
 color值：16进制颜色，这个颜色由rgb值指定，可带alpha。这个值必须以“#”开头，后面跟随alpha-red-green-blue信息。