android Shape全解析——再也不担心包size了

android Shape全解析——再也不担心包size了

在工作中通常会遇到很多UI的问题，特别是当看到设计稿的时候，这个对话框是圆角的，背景还是渐变的！截图的话略占包大小。使用shape可以替换大部分图片，极大的减小包size。

Shape使用

1.Shape的类型

注：我很懒，各个shape代码的效果图就留给读者去实现了。
先简单介绍下这几个类型，以及如何创建这几个类型的Shape

1.1 rectangle

android:shape="rectangle"
四边形

示例：黄色的四边形 solid属性是指定图形的填充色

<shape                  
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle">
    <solid android:color="#ffff00"/>
shape>

1.2 oval

android:shape="oval"
椭圆

示例：如果设置width和height高度一样，那么就是圆形了

    <shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="oval">
    <solid android:color="#ffff00"/>
    <size android:width="20dp"
        android:height="20dp"/>
shape>

1.3 line

android:shape="line"
直线
基本不用

1.4 ring

android:shape="ring"
圆环  

示例：

    <shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="ring"
    android:innerRadius="10dp"
    android:thickness="10dp"
    android:useLevel="false">
    <solid android:color="#ffff00"/>
    shape>

效果图：

注意：android:useLevel 只有当我们的shape使用在LevelListDrawable中的时候，这个值为true，否则为false。当shape为ring的时候必须设置这个属性为false

android:innerRadius 内环的半径

android:thickness 环的厚度，也就是外环半径-内环半径

android:innerRadiusRatio; 默认值为3，内环半径的比例，例如这个值=2，那么内环的半径就是环的宽度1/2，通常这个值都会大于2，否则就显示不全环了，可以被android:innerRadius覆盖
android:thicknessRatio：如果android:thicknessRatio=”2”，那么环的厚度就等于环的宽度除以2。可以被android:thickness覆盖的

2.Shape标签的子标签

在shape标签下还有5个标签是给shape设置其他属性的，shape的填充颜色，边角等

2.1 填充颜色solid

就是Shape的

2.2 圆角corners

android:radius=""
android:topLeftRadius=""
android:topRightRadius=""
android:bottomLeftRadius=""
android:bottomRightRadius=""

后面4个属性会覆盖radius属性，比如下面这个四边形，它的左上圆角半径就是5,右上圆角半径是20，其他的左下和右下的圆角半径就是50：

    <shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle">
    <solid android:color="#ffff00"/>
    <corners 
        android:topLeftRadius="5dp"
        android:topRightRadius="20dp"
        android:radius="50dp"/>
    shape>

2.3 padding

left，top，right，bottom四个属性
同控件里的padding

2.4 size

width,height
通常shape都是作为background的，所以这个size通常不会有效，而是控件的宽高为准，当然，当作为imageview的src的时候，这个size默认还是会有用的

2.5 * 渐变gradient

渐变应该是这所有属性里最复杂，也最有用的一个属性了，比较复杂的可以使用shape实现的图形基本都会用到这个属性

1.默认的startColor可能为白色也可能是黑色~不同的手机默认不同
2.默认的渐变type为linear
3.radial的渐变类型必须要添加属性android:gradientRadius；

属性说明表格：所属type列是这个属性必须在gradient属性值为这列值的时候这个属性才有效

属性	属性值类型	属性说明	所属type(linear，radial，sweep )
android:startColor=”“	color	开始渐变颜色	all
android:endColor=”“	color	结束渐变的颜色	all
android:centerColor=”“	color	中间颜色	all
android:centerX=”“	float	渐变中心x的相对位置 0-1	radial，sweep
android:centerY=”“	float	渐变中心y的相对位置 0-1	radial，sweep
android:useLevel=”“	boolean	默认false，建议false
android:angle=”“	int	渐变开始角度，必须是45的倍数	linear
android:type=”“	linear，radial，sweep	线性渐变（默认）/放射渐变/扫描式渐变
android:gradientRadius=”“	dp	渐变半径	radial

linear示例：

        
    <shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle">
    <solid android:color="#ffffff"/>
    <gradient
         android:startColor="#ff00ff"
         android:endColor="#00ffff"
         android:angle="90"
         android:type="linear"/>
    shape>

效果图：

sweep示例：

    
    <shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle">
    <solid android:color="#ffffff"/>
    <gradient
         android:startColor="#ff00ff"
         android:endColor="#00ffff"
         android:type="sweep"
         android:angle="270"
         android:centerX="0.2"
         android:centerY="0.2"/>
    shape>

效果图：

radial示例：

    
    <shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle">
    <solid android:color="#ffffff"/>
    <gradient
         android:startColor="#ff00ff"
         android:endColor="#00ffff"
         android:type="radial"
         android:gradientRadius="50dp"
         android:centerX="0.5"
         android:centerY="0.5"/> 
    shape>

效果图：

思考： android:useLevel true和false对渐变的影响？

2.6 * 描边stroke

属性	属性值类型	属性说明
android:width=”“	dp	描边厚度
android:color=”“	color	描边的颜色
android:dashWidth=”“	dp	将描边分为多个dash，每隔dash块的宽度
android:dashGap=”“	dp	dash块的间隔

示例：

    
    <shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle">
    <solid android:color="#0f0"/>
    <stroke
      android:width="10dp"
      android:color="#ff00ff"
      android:dashWidth="10dp"
      android:dashGap="1dp">stroke>
    shape>

效果图

3.小结

1.solid属性可能会被gradient覆盖，如下，solid的颜色无效

    
    <shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle">
    <solid android:color="#fff"/>
    <gradient
         android:startColor="#ff00ff"
         android:endColor="#00ffff"
         android:type="radial"
         android:gradientRadius="100"
         android:centerX="0.3"
         android:centerY="0.3"
         android:useLevel="false"/>
    shape>

2.stoke和gradient不冲突

3.shape标签的其他内部属性

android:visible=""
    可见性,true, false,好像没什么用
android:dither=""
    http://blog.csdn.net/superjunjin/article/details/7670864
android:tint=""
    着色，就是在已有的图形上在覆盖一层颜色（简单理解）。会覆盖solid属性
android:tintMode=""
    api21才有，通常不使用
xmlns:android=""    
。。。。