要想APP用户体验好,精美 UI 少不了。
而 Shape 和 Selector 可以帮助我们轻易实现 View 的形状设计及状态变化后背景与颜色的变化,而不需很多逻辑代码。
Shape 学习
6个子标签,各属性如下:
填充(solid):
设置填充的颜色
内间距(padding):设置四个方向上的间距
大小(size):设置大小
圆角(corners):
同时设置五个属性,则Radius属性无效
android:Radius="20dp" 设置四个角的半径
android:topLeftRadius="20dp" 设置左上角的半径
android:topRightRadius="20dp" 设置右上角的半径
android:bottomLeftRadius="20dp" 设置右下角的半径
android:bottomRightRadius="20dp" 设置左下角的半径
描边(stroke):
dashWidth和dashGap属性,只要其中一个设置为0dp,则边框为实现边框
android:width="20dp" 设置边边的宽度
android:color="@android:color/black" 设置边边的颜色
android:dashWidth="2dp" 设置虚线的宽度
android:dashGap="20dp" 设置虚线的间隔宽度
渐变(grndient):
当设置填充颜色后,无渐变效果。
angle的值必须是45的倍数(包括0),仅在type="linear"有效,不然会报错。android:useLevel 这个属性不知道有什么用。
示例
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- 圆角 -->
<corners
android:radius="9dp" <!-- 无效 -->
android:topLeftRadius="2dp"
android:topRightRadius="2dp"
android:bottomLeftRadius="2dp"
android:bottomRightRadius="2dp"/><!-- 设置圆角半径 -->
<!-- 渐变 -->
<gradient
android:startColor="@android:color/white"
android:centerColor="@android:color/black"
android:endColor="@android:color/black"
android:useLevel="true"
android:angle="45"
android:type="radial"
android:centerX="0"
android:centerY="0"
android:gradientRadius="90"/>
<!-- 间距 -->
<padding
android:left="2dp"
android:top="2dp"
android:right="2dp"
android:bottom="2dp"/><!-- 各方向的间距 -->
<!-- 大小 -->
<!-- 宽度和高度 -->
<size
android:width="50dp"
android:height="50dp"/>
<!-- 填充 -->
<solid
android:color="@android:color/white"/><!-- 填充的颜色 -->
<!-- 描边 -->
<stroke
android:width="2dp"
android:color="@android:color/black"
android:dashWidth="1dp" <!-- 边的长度 -->
android:dashGap="2dp"/> <!-- 边与边间隔 -->
</shape>
Selector 学习
分 Color_Selector 和 Drawable_Selector 两种
Color_Selector 文件的位置存储于res/color/xxx.xml
使用:跟颜色一样使用
在Java中使用是:R.color.filename
在XML中使用是:@[package]color/filename
语法:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:color="hex_color" //颜色值RGB,$ARGB,
#RRGGBB,#AARRGGBB
android:state_pressed=["true" | "false"]//是否触摸
android:state_focused=["true" | "false"]//是否获得焦点
android:state_selected=["true" | "false"]//是否被状态
android:state_checkable=["true" | "false"]//是否可选
android:state_checked=["true" | "false"]//是否选中
android:state_enabled=["true" | "false"]//是否可用
android:state_window_focused=["true" | "false"] />//是否窗口聚焦
</selector>
示例:
扫描二维码关注公众号,回复:
2710212 查看本文章
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:color="#ffff0000"/> <!-- pressed -->
<item android:state_focused="true"
android:color="#ff0000ff"/> <!-- focused -->
<item android:color="#ff000000"/> <!-- default -->
</selector>
Drawable-Selector 文件存储于
/res/drawable/xxx.xml
使用: 跟图片一样使用
Java中调用:R.drawable.filename
XML中调用:@[package:]drawable/filename
语法:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
android:constantSize=["true" | "false"]//drawable的大小是否当中状态变化,true表示是变化,false表示不变换,默认为false
android:dither=["true" | "false"]//当位图与屏幕的像素配置不一样时(例如,一个ARGB为8888的位图与RGB为555的屏幕)会自行递色(dither)。设置为false时不可递色。默认true
android:variablePadding=["true" | "false"] >//内边距是否变化,默认false
<item
android:drawable="@[package:]drawable/drawable_resource"//图片资源
android:state_pressed=["true" | "false"]//是否触摸
android:state_focused=["true" | "false"]//是否获取到焦点
android:state_hovered=["true" | "false"]//光标是否经过
android:state_selected=["true" | "false"]//是否选中
android:state_checkable=["true" | "false"]//是否可勾选
android:state_checked=["true" | "false"]//是否勾选
android:state_enabled=["true" | "false"]//是否可用
android:state_activated=["true" | "false"]//是否激活
android:state_window_focused=["true" | "false"] />//所在窗口是否获取焦点
</selector>
示例:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:drawable="@drawable/button_bg_press" />
<item android:state_focused="true" android:drawable="@drawable/button_bg_press" />
<item android:state_pressed="true" android:drawable="@drawable/button_bg_press" />
<item android:drawable="@drawable/button_bg_normol" />
</selector>
经常是两者结合一起使用:
<?xml version="1.0" encoding="utf-8"?>
<!--左下圆角 By Moses-->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false" >
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@android:color/white"/>
<padding
android:right="10dp"
android:left="10dp"/>
<corners
android:bottomLeftRadius="10dp"/>
</shape>
</item>
<item android:state_pressed="true">
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@color/defaultColor"/>
<padding
android:right="10dp"
android:left="10dp"/>
<corners
android:bottomLeftRadius="10dp"/>
</shape>
</item>
</selector>
Vector的学习
知道目前自己再怎么学习,也写不出什么东西来,就直接贴大佬们的链接了。
群英传作者的博客:http://blog.csdn.net/eclipsexys/article/details/51838119
学无止境