Android中的Shape使用总结

本篇博客阐述的范围仅限于android:shape=“rectangle”，即方形。

shape是用于定义一些形状的样式，经常用于在Android开发中控制控件的背景，使用起来不难。shape一共有六个属性，分别是corners、gradient、padding、size、solid、stroke，当shape六个属性中有重复的定义时，会以后定义的属性为准，下面就来一一介绍这六种属性的用法以及它们分别控制的是哪些部分。

corners

用于控制边框四个角圆角的大小，默认如果是0dp的话就是直角，如果设置大于0dp的话就会有圆角的效果。

[html] view plain copy

1. <corners  
2.     android:radius="10dp"/>  

效果图：

有时候并不需要让边框的四个角都是圆角，例如在弹出窗口中，弹出窗口本身是四个角都是圆角，但左下角的按钮只需要左下角是圆角即可。corners中除了有radius这个属性用于控制四个角的圆角以外，还有bottomLeftRadius、bottomRightRadius、topLeftRadius、topRightRadius这四个属性，分别用于控制左下、右下、左上、右上四个角的圆角大小，单独设置这四个属性的时候，可以让特定的角变为圆角，并且当radius和这四个共存时，会以这四个属性的设置优先。

[html] view plain copy

1. <corners  
2.     android:bottomRightRadius="10dp"  
3.     android:topLeftRadius="10dp"/>  

效果图：

padding

用于控制背景边框与背景中的内容的距离，也就是内边距。一共包含四个属性：bottom、top、left、right，分别用于控制上、下、左、右的内边距，如果四个要设置成一样的话，也只能一个一个设置，没有提供一起设置的属性。

[html] view plain copy

1. <padding  
2.     android:top="20dp"  
3.     android:bottom="20dp"  
4.     android:left="40dp"  
5.     android:right="40dp"/>  

未添加padding前：                                             添加padding后：

                              

size

用于设置背景的大小，有两个属性，height和width，这两个属性是不能设置为match_parent或者wrap_content的，只能是具体的距离。并且，如果设置得过小以至于比背景上的控件还要小的时候，系统不会以这个距离去作为背景，而是会以包裹住控件的最小的长和宽来作为背景的长和宽。如果设置得比较大，则会以设置的为准。

[html] view plain copy

1. <size  
2.     android:height="200dp"  
3.     android:width="200dp"/>  

效果图：

[html] view plain copy

1. <size  
2.     android:height="2dp"  
3.     android:width="2dp"/>  

效果图：

顺便提一句，size这个属性和corners这个属性搭配可以做出圆形的背景，代码如下：

[html] view plain copy

1. <corners  
2.     android:radius="100dp"/>  
3. <size  
4.     android:height="200dp"  
5.     android:width="200dp"/>  

效果图：

将背景变成圆形有几个要求。第一，背景必须是正方形，也就是设置size的height和width的时候两者要相等。第二，corners的radius属性设置的值必须超过width或者height值的一半，否则会不够圆，超过一半和刚好是一半的效果是一样的。第三，最好不要设置padding这个属性，即使要设置的话也要小心，因为设置了padding后，内容的大小加上padding的距离可能会超过size的大小的设置，那么系统会以实际大小作为背景的大小，这样可能会使radius的设置显得太小，导致不是一个完好的圆形。

solid

用于控制背景颜色，只有一个属性就是color

[html] view plain copy

1. <solid  
2.     android:color="#FF4081"/>  

效果图：

stroke

控制背景的边框，一共有四个属性，width、color、dashGap、dashWidth。width用于控制边框的宽度，color用于控制边框的颜色。dashGap和dashWidth控制边框是否为虚线，如果两个值同时设置为正数，那么边框就会是虚线。dashGap控制的是虚线之间的距离，dashWidth控制的是虚线段的长度。这两个值只要有一个没有设置或者被设置为0dp，那边框就是实线。

[html] view plain copy

1. <corners  
2.     android:radius="50dp"/>  
3. <size  
4.     android:height="100dp"  
5.     android:width="100dp"/>  
6. <solid  
7.     android:color="#FF4081"/>  
8. <stroke  
9.     android:width="5dp"  
10.     android:color="#3F51B5"  
11.     android:dashWidth="20dp"  
12.     android:dashGap="10dp"/>  

效果图：

gradient

用于设置背景色的效果，一旦设置了这个属性，solid中设置的背景颜色不再生效。gradient中的属性有：angle、startColor、endColor、centerColor、type、gradientRadius、centerX、centerY、useLevel。当type的值不同时，有些属性不生效。

type指定了渐变的类型，一共有三种类型：linear（线性、默认）、radial（中间扩散）、sweep（旋转扫一周）

先解释一下几个在任何类型下表现都相同的属性：

startColor：渐变开始的颜色

endColor：渐变结束的颜色

centerColor：渐变中间的颜色

useLevel：这个属性有两个值，true和false。当设置为true时，这个shape会被当做LevelListDrawable处理，还没有理解这个LevelListDrawable是什么，但是如果设置为true的话预览中是没办法正常显示的，估计在运行中也是显示不出来的。所以这个属性一般设置为false，默认的话是设置为false。

[html] view plain copy

1. <gradient  
2.    android:startColor="@color/white"  
3.    android:endColor="@color/black"  
4.    android:type="linear"  
5.    android:useLevel="false"/>  

效果图：

加上中间色：

[html] view plain copy

1. <gradient  
2.     android:startColor="@color/white"  
3.     android:endColor="@color/black"  
4.     android:centerColor="#3F51B5"  
5.     android:type="linear"  
6.     android:useLevel="false"/>  

效果图：

接下来介绍其他属性在不同类型下的表现
在线性渐变的类型下，angle影响的是渐变的方向，默认的话是从左向右，如果要设置的话设置的值为整数并且要能被45整除，否则会报错。正数是逆时针，负数是顺时针。也就是说，angle=“90”是从下往上渐变，angle=“-90”是从上往下渐变。angle这个属性在其他两种类型下不生效，因为其他两种类型都是圆圈渐变，哪个方向都是一样的。

在线性渐变的类型下，centerX和centerY的表现比较奇怪，这两个结合可以移动开始色和结束色的边界，取值范围为0.0-1.0，类型为浮点型，但有时候出现设置后不生效或者移动没有规律，这个还没有弄懂，先放着。

[html] view plain copy

1. <gradient  
2.     android:angle="45"  
3.     android:startColor="@color/white"  
4.     android:endColor="@color/black"  
5.     android:centerColor="#3F51B5"  
6.     android:centerX="0.2"  
7.     android:centerY="0.2"  
8.     android:type="linear"  
9.     android:useLevel="false"/>  

效果图：

gradientRadius只有在渐变类型为radial的时候才生效，用于控制渐变的圆圈的大小。在radial类型下，这个属性必须设置，否则会报错。centerX用于控制渐变圆圈中心点距离左边框的距离，centerY用于控制渐变圆圈中心点距离上边框的距离

[html] view plain copy

1. <gradient  
2.     android:startColor="@color/white"  
3.     android:endColor="@color/black"  
4.     android:centerColor="#3F51B5"  
5.     android:gradientRadius="30dp"  
6.     android:type="radial"/>  

效果图：

[html] view plain copy

1. <gradient  
2.     android:startColor="@color/white"  
3.     android:endColor="@color/black"  
4.     android:centerColor="#3F51B5"  
5.     android:gradientRadius="30dp"  
6.     android:centerX="0.2"  
7.     android:centerY="0.2"  
8.     android:type="radial"/>  

效果图：

在sweep类型中，除了之前提到的四个每种类型都生效的属性外，只有centerX和centerY属性生效，控制旋转点的位置，控制方法参照radial类型下的控制方法。

[html] view plain copy

1. <gradient  
2.     android:startColor="@color/black"  
3.     android:endColor="@color/black"  
4.     android:centerColor="#FFFFFF"  
5.     android:type="sweep"/>  

效果图：

[html] view plain copy

1. <gradient  
2.     android:startColor="@color/black"  
3.     android:endColor="@color/black"  
4.     android:centerColor="#FFFFFF"  
5.     android:centerX="0.2"  
6.     android:centerY="0.2"  
7.     android:type="sweep"/>  

效果图：

结语

关于shape的介绍就到这里，使用shape来定义自己需要的形状还是挺自由的，有很多效果都可以实现。之后可能会再补充line，oval和ring类型下这六个属性的使用，大致上应该差不多，使用上可能有一些细节需要注意。