Android基础之 Shape
Shape是android中一个比较基础但是也比较重要的部分,巧妙利用shape可以用代码写出比较好看的形状、背景等等,方便快捷,同时也减少图片资源的使用,为app瘦身。
1.Shape的四种类型
["rectangle" | "oval" | "line" | "ring"]
rectangle:矩形
oval:椭圆形
line:线性
ring:环形
默认为rectangle。即默认为矩形
定义:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
环形的属性:
android:innerRadius="dimension" //内环半径
android:innerRadiusRatio="float" //内环半径相对于环的宽度的比例,比如环的宽度为50,比例为2.5,那么内环半径为20
android:thickness="dimension" //环的厚度
android:thicknessRatio="float" //环的厚度相对于环的宽度的比例
android:useLevel="boolean"> //如果当做是LevelListDrawable使用时值为true,否则为false.
圆角:
<!--
圆角
android:radius 整型 半径
android:topLeftRadius 整型 左上角半径
android:topRightRadius 整型 右上角半径
android:bottomLeftRadius 整型 左下角半径
android:bottomRightRadius 整型 右下角半径
-->
<corners
android:bottomLeftRadius="20dp"
android:bottomRightRadius="25dp"
android:radius="8dp"
android:topLeftRadius="5dp"
android:topRightRadius="15dp" />
渐变色:
<!--
渐变色
android:startColor 颜色值 起始颜色
android:endColor 颜色值 结束颜色
android:centerColor 整型 渐变中间颜色,即开始颜色与结束颜色之间的颜色
android:angle 整型 渐变角度(PS:当angle=0时,渐变色是从左向右。
然后逆时针方向转,当angle=90时为从下往上。angle必须为45的整数倍)
android:type ["linear" | "radial" | "sweep"] 渐变类型(取值:linear、radial、sweep)
linear 线性渐变,这是默认设置
radial 放射性渐变,以开始色为中心。
sweep 扫描线式的渐变。
android:useLevel ["true" | "false"] 如果要使用LevelListDrawable对象,就要设置为true。设置为true无渐变。false有渐变色
android:gradientRadius 整型 渐变色半径.当 android:type="radial" 时才使用。单独使用 android:type="radial"会报错。
android:centerX 整型 渐变中心X点坐标的相对位置
android:centerY 整型 渐变中心Y点坐标的相对位置
-->
边距:
<!--
内边距,即内容与边的距离
android:left 整型 左内边距
android:top 整型 上内边距
android:right 整型 右内边距
android:bottom 整型 下内边距
-->
<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />
大小、填充颜色:
<!--
size 大小
android:width 整型 宽度
android:height 整型 高度
-->
<size android:width="600dp" />
<!--
内部填充
android:color 颜色值 填充颜色
-->
<solid android:color="#ffff9d77" />
描边:
<!--
描边
android:width 整型 描边的宽度
android:color 颜色值 描边的颜色
android:dashWidth 整型 表示描边的样式是虚线的宽度, 值为0时,表示为实线。值大于0则为虚线。
android:dashGap 整型 表示描边为虚线时,虚线之间的间隔 即“ - - - - ”
-->
<stroke
android:width="2dp"
android:color="#dcdcdc" />
几个示例:圆角矩形,扫描式渐变
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:useLevel="false" >
<corners
android:topLeftRadius="10dp"
android:topRightRadius="10dp"
android:bottomLeftRadius="10dp"
android:bottomRightRadius="10dp" />
<gradient
android:type="sweep"
android:endColor="@android:color/holo_blue_bright"
android:startColor="@android:color/holo_green_dark"
android:centerColor="@android:color/holo_blue_dark"
android:useLevel="false" />
<size android:width="60dp" android:height="60dp" />
</shape>
效果如图:
圆形,线性渐变:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
android:useLevel="false" >
<gradient
android:type="linear"
android:angle="45"
android:startColor="@android:color/holo_green_dark"
android:centerColor="@android:color/holo_blue_dark"
android:endColor="@android:color/holo_red_dark"
android:useLevel="false" />
<size android:width="60dp" android:height="60dp" />
<stroke android:width="1dp"
android:color="@android:color/white" />
</shape>
虚线:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line" >
<size android:width="60dp"
android:height="60dp" />
<stroke android:width="2dp"
android:color="@android:color/holo_purple"
android:dashWidth="10dp"
android:dashGap="5dp" />
</shape>
环形,放射性渐变:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:useLevel="false"
android:innerRadius="40dp"
android:thickness="3dp">
<gradient android:type="radial"
android:gradientRadius="150"
android:centerY="0.1"
android:centerX="0.2"
android:startColor="@android:color/holo_red_dark"
android:centerColor="@android:color/holo_green_dark"
android:endColor="@android:color/white" />
<size android:width="90dp"
android:height="90dp" />
</shape>
参考文章:http://blog.csdn.net/nature_day/article/details/52301375
来源:CSDN
作者:Nexts_
链接:https://blog.csdn.net/Momentyol/article/details/52779776