Android 中的Shape
2015-07-29 16:28
381 查看
之前一直看项目用过这个东西,但是自己都不怎么熟悉,大概就知道可以画一些圆角之类的~ 今天就来好好了解一下吧~
Shape里面有很多属性,依次学习一下
第一步~首先来写一个Button
![](https://img-blog.csdn.net/20150729155425995)
这个布局文件就不贴了...太简单了~ (PS:说贴出来的站出来,我保证不打死你!)
接下来开始学习第一个属性:
Solid:(填充)
在Drawable里面创建一个button_bg.xml 文件
就是设置一个颜色,然后填充没什么好说的。
效果图:
![](https://img-blog.csdn.net/20150729160827917)
corners:(圆角)
这里我是设置四个角的半径为30dp,你也可以这样写 android:radius=”30dp” 代表四个角都为30dp
效果图:
![](https://img-blog.csdn.net/20150729161603621)
是不是感觉不错啊~ 而且很省事对吧?如果角度设置够大,甚至可以变成圆形!有兴趣的童鞋可以去试下
stroke:(描边)
顾名思义,就是在控件周围增加一层边框~
效果图:
![](https://img-blog.csdn.net/20150729162600072)
是不是很简洁啊~ 是不是看起来有点熟悉~ 实现起来就是这么任性! 不要感谢我.... 送我几斤反物质就好了。
Padding:(间隔)
这个大家都应该接触过~ 效果图一看估计就明白了~
效果图;
![](https://img-blog.csdn.net/20150729164852204?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
就是这样的效果~ 文字向左移动了~ 千万别问我为什么!!!
gradient:(渐变)
这个东西可以好好说说
它有三种渐变类型,android:type="" ,分别是linear、radial、sweep,分别来说说吧~
linear(线性渐变):
xml:
android:startcolor: 起始的颜色
android:endcolor :结束的颜色
type 渐变的类型
效果图:
![](https://img-blog.csdn.net/20150730144659772)
看到了嘛~ 就是这样子啦
补充:可以设置渐变的角度哦!亲~ android:angle =“” 默认是从左向右, 如果你设置的90就是从下往上 180就是从右往左。注意:必须是45的倍数!!
开始我写了一个60度,然后就悲剧的报错了~
![](https://img-blog.csdn.net/20150730145307293)
再补充一个:还可以设置渐变中间色 android:centerColor="" ,
XML:
应该是:白色---紫色--绿色
效果图:
![](https://img-blog.csdn.net/20150730150100977)
恩~ 不过感觉好难看啊~ 不要在意这些细节!!!!
radial (放射性渐变)
XML:
效果图:
![](https://img-blog.csdn.net/20150730150727046)
以开始色为中心,向外扩展 ,我这里是白色和绿色,所以就是这种效果~
补充:android:gradientRadius 这个是渐变的半径,是用来和 android:type="radial" 配合使用的~
再补充:有 android:centerX、android:centerY 这二个属性,就是渐变中心的X坐标 和 Y坐标的相对位置,可以在指定的地方射出来(为什么听起来感觉很邪恶.......)
算了~直接看到代码和效果图~
我这里分别写的是 X:1 Y:0 就是在按钮的最右边上放的地方开始渐变
效果图:
![](https://img-blog.csdn.net/20150730152002197)
如果想在底部居中开始呢?设置: X:0.5 Y:1
好了,这块就差不多了,有兴趣的可以自己试试
sweep(扫描)
XML:
直接上效果图:
![](https://img-blog.csdn.net/20150730153350132)
就是这样。。。。。 一种扫描的感觉
我这里设置的是 蓝色 - 红色 - 绿色 ,然后就是这样样子了~
好了,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就说到这里~
果断去打把排位~上上分
相关文章推荐
- android Socket 编程
- Android Fragment 你应该知道的一切
- Android 分区挂载
- android fragment activity详解
- android TextView自动实现省略号
- Android笔记:定时提醒、闹钟实现
- android 从log来判断耳机的状态
- 自定义复杂组件-登录组件模块
- 唤醒锁: 检测 Android* 应用中的 No-Sleep(无法进入睡眠)问题
- 浅谈Android数据库版本升级及数据的迁移
- This message is already in use错误及解决
- android之WakeLock机制浅析
- Android Intent Service Usage
- Android Activity 组件生命周期
- Android 签名+混淆( 签名+proguard.cfg)
- android开发 Edittext编辑框超出屏幕
- Android Fragment 真正的完全解析(上)
- Android Fragment 真正的完全解析(下)
- Android 官方推荐 : DialogFragment 创建对话框
- Android的Dalvik和ART运行环境比较