android Shape全解析——再也不担心包size了
2016-03-29 18:11
756 查看
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
<solid android:color="#ffff00"/> 就是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 |
<?xml version="1.0" encoding="utf-8"?> <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示例:
<?xml version="1.0" encoding="utf-8"?> <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示例:
<?xml version="1.0" encoding="utf-8"?> <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块的间隔 |
<?xml version="1.0" encoding="utf-8"?> <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的颜色无效<?xml version="1.0" encoding="utf-8"?> <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="" 。。。。
相关文章推荐
- 使用C++实现JNI接口需要注意的事项
- Android IPC进程间通讯机制
- Android Manifest 用法
- [转载]Activity中ConfigChanges属性的用法
- Android之获取手机上的图片和视频缩略图thumbnails
- Android之使用Http协议实现文件上传功能
- Android学习笔记(二九):嵌入浏览器
- android string.xml文件中的整型和string型代替
- i-jetty环境搭配与编译
- android之定时器AlarmManager
- android wifi 无线调试
- Android Native 绘图方法
- Android java 与 javascript互访(相互调用)的方法例子
- android 代码实现控件之间的间距
- android FragmentPagerAdapter的“标准”配置
- Android"解决"onTouch和onClick的冲突问题
- android:installLocation简析
- android searchView的关闭事件
- SourceProvider.getJniDirectories