形状图形(shape)
2018-05-22 本文已影响16人
Skypew
shape 常用属性
android:shape="rectangle" 矩形,默认值
android:shape="oval" 椭圆,此时corners (圆角节点)失效
android:shape="line" 直线,必须设置stroke(描边)节点
android:shape="ring" 圆环
下面定义了6种图形
-
corners (圆角)
android:radius="20dp" 直接定义4个圆角
android:bottomLeftRadius="20dp" 左下角
android:bottomRightRadius="20dp" 右下角
android:topLeftRadius="20dp" 左上角
android:topRightRadius="20dp" 右上角
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!--圆角 弧度为 20-->
<corners android:radius="20dp"
android:bottomLeftRadius="20dp"
android:bottomRightRadius="20dp"
android:topLeftRadius="20dp"
android:topRightRadius="20dp"/>
<!--填充颜色-->
<solid android:color="@color/white_alpha_32" />
</shape>
image.png
-
gradien(渐变)
android:angle ( 起始角度 0 -9点方向 90- 6点方向 180 -3点方向 270 12点方向)
android:type (linear 线性渐变 默认值 , radial 放射渐变 起始颜色是圆心, sweep 滚动渐变)
android:centerY="0.4" 圆心y坐标
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="270"
android:centerY="0.4"
android:startColor="@color/black_alpha_224"
android:centerColor="@color/black_alpha_80"
android:endColor="@color/trans"
/>
</shape>
image.png
-
padding (定义内容离边界的距离)
-
solid(填充颜色,背景色)
<solid android:color="@color/white_alpha_32" />
-
size(尺寸)
无节点表示宽高自适应
<size android:height="@dimen/len_4"
android:width="@dimen/len_4"/>
-
stroke(描边)
android:dashGap="@dimen/len_4" 每段虚线之间的间隔
android:dashWidth="@dimen/len_4" 每段虚线之间的宽度
上面2个同时存在才为虚线
android:width="@dimen/len_4" 描边厚度
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke android:color="@color/black"
android:width="@dimen/len_2"
/>
<corners android:radius="20dp"/>
<size android:width="400dp"
android:height="400dp"/>
</shape>
image.png
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!--圆角 弧度为 20-->
<corners android:radius="20dp" />
<solid android:color="@color/white_alpha_32" />
</shape>
v21 涟漪效果
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="@color/white_alpha_48">
<!--涟漪 效果 api 21-->
<item android:id="@android:id/mask">
<shape android:shape="rectangle">
<corners android:radius="20dp" />
<solid android:color="@color/white" />
</shape>
</item>
</ripple>
v21 以上
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="@color/black_alpha_32"/>
v21 以下
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape android:shape="rectangle">
<solid android:color="@color/black_alpha_16" />
</shape>
</item>
</selector>
进阶
点击背景 实现变色
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false">
<shape android:shape="rectangle">
<corners android:radius="22dp" />
<solid android:color="@color/trans" />
</shape>
</item>
<!--点击时的效果 -->
<item>
<shape android:shape="rectangle">
<corners android:radius="22dp" />
<solid android:color="@color/black_alpha_112" />
</shape>
</item>
</selector>