Android 中的Shape

之前一直看项目用过这个东西，但是自己都不怎么熟悉，大概就知道可以画一些圆角之类的~ 今天就来好好了解一下吧~

Shape里面有很多属性，依次学习一下

第一步~首先来写一个Button

这个布局文件就不贴了...太简单了~ （PS：说贴出来的站出来,我保证不打死你！）

接下来开始学习第一个属性：

Solid:(填充)

在Drawable里面创建一个button_bg.xml 文件

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" >    <!-- 填充 -->    <solid android:color="#ff9d77" />    </shape>

就是设置一个颜色，然后填充没什么好说的。

效果图：

corners:(圆角)

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" >    <!-- 填充 -->    <solid android:color="#ff9d77" />    <!-- 圆角 -->    <corners        android:bottomLeftRadius="30dp"        android:bottomRightRadius="30dp"        android:topLeftRadius="30dp"        android:topRightRadius="30dp" />    <!-- 设置四个角的半径 --></shape>

这里我是设置四个角的半径为30dp,你也可以这样写 android:radius=”30dp” 代表四个角都为30dp

效果图： 

是不是感觉不错啊~ 而且很省事对吧？如果角度设置够大，甚至可以变成圆形！有兴趣的童鞋可以去试下

stroke:(描边)

顾名思义，就是在控件周围增加一层边框~ 

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" >    <!-- 填充 -->    <solid android:color="#FFFFFF" />    <!-- 圆角 -->    <corners        android:bottomLeftRadius="30dp"        android:bottomRightRadius="30dp"        android:topLeftRadius="30dp"        android:topRightRadius="30dp" />    <!-- 设置四个角的半径 -->    <!-- 描边 -->    <stroke        android:width="1dp"        android:color="#000000" />    <!-- 定义描边的宽度和描边的颜色值 --></shape>

效果图：

是不是很简洁啊~ 是不是看起来有点熟悉~ 实现起来就是这么任性! 不要感谢我.... 送我几斤反物质就好了。

Padding:(间隔)

这个大家都应该接触过~ 效果图一看估计就明白了~

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" >    <!-- 填充 -->    <solid android:color="#FFFFFF" />    <!-- 圆角 -->    <corners        android:bottomLeftRadius="30dp"        android:bottomRightRadius="30dp"        android:topLeftRadius="30dp"        android:topRightRadius="30dp" />    <!-- 设置四个角的半径 -->    <!-- 描边 -->    <stroke        android:width="1dp"        android:color="#000000" />    <!-- 定义描边的宽度和描边的颜色值 -->    <!-- 间隔 -->    <padding        android:bottom="5dp"        android:left="5dp"        android:right="30dp"        android:top="5dp" /></shape>

效果图;

就是这样的效果~ 文字向左移动了~ 千万别问我为什么！！！

gradient:(渐变)

这个东西可以好好说说

它有三种渐变类型,android:type="" ,分别是linear、radial、sweep，分别来说说吧~

linear(线性渐变)：

xml：

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" >    <!-- 圆角 -->    <corners        android:bottomLeftRadius="30dp"        android:bottomRightRadius="30dp"        android:topLeftRadius="30dp"        android:topRightRadius="30dp" />    <!-- 设置四个角的半径 -->    <!-- 描边 -->    <stroke        android:width="1dp"        android:color="#000000" />    <!-- 定义描边的宽度和描边的颜色值 -->    <!-- 渐变 -->    <gradient        android:endColor="#008000"        android:startColor="#FFFFFF"        android:type="linear" /></shape>

android:startcolor: 起始的颜色

android:endcolor :结束的颜色

type 渐变的类型

效果图：

看到了嘛~ 就是这样子啦

补充：可以设置渐变的角度哦！亲~ android：angle =“”   默认是从左向右， 如果你设置的90就是从下往上 180就是从右往左。注意：必须是45的倍数！！ 

开始我写了一个60度，然后就悲剧的报错了~

再补充一个：还可以设置渐变中间色 android:centerColor="" ,

XML:

 <gradient        android:endColor="#008000"        android:centerColor="#FF00FF"        android:startColor="#FFFFFF"        android:type="linear" />

应该是：白色---紫色--绿色

效果图：

恩~ 不过感觉好难看啊~ 不要在意这些细节！！！！

radial （放射性渐变）

XML:

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" >    <!-- 圆角 -->    <corners        android:bottomLeftRadius="30dp"        android:bottomRightRadius="30dp"        android:topLeftRadius="30dp"        android:topRightRadius="30dp" />    <!-- 设置四个角的半径 -->    <!-- 描边 -->    <stroke        android:width="1dp"        android:color="#000000" />    <!-- 定义描边的宽度和描边的颜色值 -->    <!-- 渐变 -->    <gradient        android:endColor="#008000"        android:gradientRadius="100"        android:startColor="#FFFFFF"        android:type="radial" /></shape>

效果图：

以开始色为中心，向外扩展 ，我这里是白色和绿色，所以就是这种效果~

 补充：android:gradientRadius 这个是渐变的半径，是用来和 android:type="radial" 配合使用的~

 再补充：有 android:centerX、android:centerY 这二个属性，就是渐变中心的X坐标 和 Y坐标的相对位置，可以在指定的地方射出来（为什么听起来感觉很邪恶.......）

 算了~直接看到代码和效果图~

    <gradient        android:endColor="#008000"        android:gradientRadius="100"        android:startColor="#FFFFFF"        android:centerX="1"        android:centerY="0"        android:type="radial" />

我这里分别写的是 X：1  Y:0   就是在按钮的最右边上放的地方开始渐变

效果图：

如果想在底部居中开始呢？设置： X：0.5  Y：1  

好了，这块就差不多了，有兴趣的可以自己试试

sweep（扫描）

XML:

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" >    <!-- 圆角 -->    <corners        android:bottomLeftRadius="30dp"        android:bottomRightRadius="30dp"        android:topLeftRadius="30dp"        android:topRightRadius="30dp" />    <!-- 设置四个角的半径 -->    <!-- 描边 -->    <stroke        android:width="1dp"        android:color="#000000" />    <!-- 定义描边的宽度和描边的颜色值 -->    <!-- 渐变 -->    <gradient        android:centerColor="#FF0000"        android:endColor="#2E8B57"        android:startColor="#0000FF"        android:type="sweep" /></shape>

直接上效果图：

就是这样。。。。。 一种扫描的感觉

我这里设置的是 蓝色 - 红色 - 绿色 ，然后就是这样样子了~

好了，android中的Shape就说到这里~  

果断去打把排位~上上分