32、详解Android shape的使用方法(转载)
0、java绘制shape
在官方API介绍中:
ShapeDrawable:This object can be defined in an XML file with the <shape>
element(这个对象可以用<shape>元素在xml文件中定义)
GradientDrawable:This object can be defined in an XML file with the <shape>
element(这个对象可以用<shape>元素在xml文件中定义)
[父节点] shape -- ShapeDrawable
[子节点] gradient --
[子节点] padding --
[子节点] corners -- setCornerRadius 、setCornerRadii
[子节点] solid --
[子节点] stroke -- setStroke
[子节点] size -- setSize
1、概述
gradient -- 对应颜色渐变。 startcolor、endcolor就不多说了。 android:angle 是指从哪个角度开始变。
solid -- 填充。
stroke -- 描边。
corners -- 圆角。
padding -- 定义内容离边界的距离。 与android:padding_left、android:padding_right这些是一个道理。
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape=["rectangle" | "oval" | "line" | "ring"] //共有4种类型,矩形(默认)/椭圆形/直线形/环形
// 以下4个属性只有当类型为环形时才有效
android:innerRadius="dimension" //内环半径
android:innerRadiusRatio="float" //内环半径相对于环的宽度的比例,比如环的宽度为50,比例为2.5,那么内环半径为20
android:thickness="dimension" //环的厚度
android:thicknessRatio="float" //环的厚度相对于环的宽度的比例
android:useLevel="boolean"> //如果当做是LevelListDrawable使用时值为true,否则为false. <corners //定义圆角
android:radius="dimension" //全部的圆角半径
android:topLeftRadius="dimension" //左上角的圆角半径
android:topRightRadius="dimension" //右上角的圆角半径
android:bottomLeftRadius="dimension" //左下角的圆角半径
android:bottomRightRadius="dimension" /> //右下角的圆角半径 <gradient //定义渐变效果
android:type=["linear" | "radial" | "sweep"] //共有3中渐变类型,线性渐变(默认)/放射渐变/扫描式渐变
android:angle="integer" //渐变角度,必须为45的倍数,0为从左到右,90为从上到下
android:centerX="float" //渐变中心X的相当位置,范围为0~1
android:centerY="float" //渐变中心Y的相当位置,范围为0~1
android:startColor="color" //渐变开始点的颜色
android:centerColor="color" //渐变中间点的颜色,在开始与结束点之间
android:endColor="color" //渐变结束点的颜色
android:gradientRadius="float" //渐变的半径,只有当渐变类型为radial时才能使用
android:useLevel=["true" | "false"] /> //使用LevelListDrawable时就要设置为true。设为false时才有渐变效果 <padding //内部边距
android:left="dimension"
android:top="dimension"
android:right="dimension"
android:bottom="dimension" /> <size //自定义的图形大小
android:width="dimension"
android:height="dimension" /> <solid //内部填充颜色
android:color="color" /> <stroke //描边
android:width="dimension" //描边的宽度
android:color="color" //描边的颜色
// 以下两个属性设置虚线
android:dashWidth="dimension" //虚线的宽度,值为0时是实线
android:dashGap="dimension" /> //虚线的间隔
</shape>
2、圆角矩形,扫描式渐变
<?xml version="1.0" encoding="utf-8"?>
<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>
2、 圆形,线性渐变
<?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>
3、虚线
<?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>
4、 环形,放射型渐变
<?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>
5、demo
- <Button
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:text="TestShapeButton"
- android:background="@drawable/button_selector"
- />
button_selector.xml:
- <?xml version="1.0" encoding="utf-8"?>
- <selector
- xmlns:android="http://schemas.android.com/apk/res/android">
- <item android:state_pressed="true" >
- <shape>
- <!-- 渐变 -->
- <gradient
- android:startColor="#ff8c00"
- android:endColor="#FFFFFF"
- android:type="radial"
- android:gradientRadius="50" />
- <!-- 描边 -->
- <stroke
- android:width="2dp"
- android:color="#dcdcdc"
- android:dashWidth="5dp"
- android:dashGap="3dp" />
- <!-- 圆角 -->
- <corners
- android:radius="2dp" />
- <padding
- android:left="10dp"
- android:top="10dp"
- android:right="10dp"
- android:bottom="10dp" />
- </shape>
- </item>
- <item android:state_focused="true" >
- <shape>
- <gradient
- android:startColor="#ffc2b7"
- android:endColor="#ffc2b7"
- android:angle="270" />
- <stroke
- android:width="2dp"
- android:color="#dcdcdc" />
- <corners
- android:radius="2dp" />
- <padding
- android:left="10dp"
- android:top="10dp"
- android:right="10dp"
- android:bottom="10dp" />
- </shape>
- </item>
- <item>
- <shape>
- <solid android:color="#ff9d77"/>
- <stroke
- android:width="2dp"
- android:color="#fad3cf" />
- <corners
- android:topRightRadius="5dp"
- android:bottomLeftRadius="5dp"
- android:topLeftRadius="0dp"
- android:bottomRightRadius="0dp"
- />
- <padding
- android:left="10dp"
- android:top="10dp"
- android:right="10dp"
- android:bottom="10dp" />
- </shape>
- </item>
- </selector>
运行效果如下图:
一般状态:
获得焦点状态:
按下状态:
6、官方资料
<shape>
Basic method for drawing shapes via XML.
Attributes
Name | Type | Default | Description |
---|---|---|---|
visible | boolean | parent|true | Determines if drawable is visible. |
shape | enum (rectangle, oval, line, ring) | rectangle | Determines the shape: rectangle (shape is a rectangle, possibly with rounded corners); oval (shape is an ellipse); line (shape is a line); ring (shape is a ring). |
innerRadiusRatio | float | 3.0 | Only valid if shape == 'ring'. Inner radius of the ring expressed as a ratio of the ring's width. For instance, if innerRadiusRatio=3, then the inner radius equals the ring's width divided by 3. This value is ignored if innerRadius is defined. |
innerRadius | float | -1 | Only valid if shape == 'ring'. Inner radius of the ring. When defined, innerRadiusRatio is ignored. When undefined, innerRadiusRatio's default is used. |
thicknessRatio | float | 9.0 | Only valid if shape == 'ring'. Thickness of the ring expressed as a ratio of the ring's width. For instance, if thicknessRatio=9, then the thickness equals the ring's width divided by 9. This value is ignored if thickness is defined. Default value is 9. |
thickness | float | -1 | Only valid if shape == 'ring'. Thickness of the ring. When defined, thicknessRatio is ignored. When undefined, thicknessRatio's default is used. |
useLevel | boolean | true | Only valid if shape == 'ring'. Allows one to draw only part of the ring (arc-wise), by modifying the drawable's level. This setting only makes sense in context of a <level-list> (LevelListDrawable). |
Children
Element | Description |
---|---|
<size> | Determines the size of the shape. |
<gradient> | Adds a background gradient to the shape. |
<solid> | Adds a solid background color to the shape. Overides gradient element. |
<stroke> | Adds a border to the shape. |
<corners> | Adds rounded corners to the shape. |
<padding> | The padding for the content within this drawable. (Does not pad graphics in any way.) |
<size>
Determines the size of the shape.
Attributes
Name | Type | Default | Description |
---|---|---|---|
width | dimension | -1 | Width of the shape. |
height | dimension | -1 | Height of the shape. |
<gradient>
Adds a background gradient to the shape.
Attributes
Name | Type | Default | Description |
---|---|---|---|
startColor | color | 0 | The color at the start of the gradient. |
centerColor | color | 0 | The color in the center of the gradient. Optional; if not included, there is no center color. |
endColor | color | 0 | The color at the end of the gradient. |
type | enum (linear, radial, sweep) | linear | Determines the type of gradient. |
centerX | float|fraction | .5 | Determines the location of the centerColor. Ranges from 0 to 1. Ignored if centerColor is undefined. |
centerY | float|fraction | .5 | Determines the location of the centerColor. Ranges from 0 to 1. Ignored if centerColor is undefined. |
angle | float | 0 | Only valid if type == 'linear'. Determines the angle of a linear gradient. Must be a multiple of 45 degrees. |
gradientRadius | float|fraction | N/A | Only valid if type == 'radial' or 'sweep'. Required if type == 'radial'. Determines the radius of the gradient. |
useLevel | boolean | false | Determines the amount of the gradient to be drawn, based on the level of the shape. Affects all three gradient types. |
<solid>
Adds a solid background color to the shape. Overides gradient element.
Attributes
Name | Type | Default | Description |
---|---|---|---|
color | color | 0 | The color of the background. |
<stroke>
Adds a border to the shape.
Attributes
Name | Type | Default | Description |
---|---|---|---|
width | dimension | 0 | The width of the stroke. |
color | color | 0 | The color of the stroke. |
dashWidth | dimension | 0 | The width of each dash. Ignored unless dashGap is also defined. |
dashGap | dimension | 0 | The width of gaps between eahc dash. Ignored unless dashWidth is also defined. |
<corners>
Adds rounded corners to the shape.
Attributes
Name | Type | Default | Description |
---|---|---|---|
radius | dimension | 0 | The radius of every corner. |
topLeftRadius | dimension | radius | Determines the radius of the top left corner. Ignored unless radius for all corners is defined, either through 'radius' or the other corners' attributes. |
topRightRadius | dimension | radius | Determines the radius of the top right corner. Ignored unless radius for all corners is defined, either through 'radius' or the other corners' attributes. |
bottomLeftRadius | dimension | radius | Determines the radius of the bottom left corner (buggy; is actually bottom right corner). Ignored unless radius for all corners is defined, either through 'radius' or the other corners' attributes. |
bottomRightRadius | dimension | radius | Determines the radius of the bottom right corner (buggy; is actually bottom left corner). Ignored unless radius for all corners is defined, either through 'radius' or the other corners' attributes. |
<padding>
The padding for the content within this drawable. (Does not pad graphics in any way.)
Attributes
Name | Type | Default | Description |
---|---|---|---|
left | dimension | 0 | Left padding. |
top | dimension | 0 | Top padding. |
right | dimension | 0 | Right padding. |
bottom | dimension | 0 | Bottom padding. |
最新文章
- windows+nginx+iis+redis+Task.MainForm构建分布式架构 之 (nginx+iis构建服务集群)
- iOS多线程实现3-GCD
- blade and soul factions
- Java中public,private,protected,和默认的区别
- 自定义ViewGroup
- The absolute uri: http://java.sun.com/jsp/jstl/core cannot be resolved
- 学习笔记 - 数据绑定之knockout
- [BZOJ 1014] [JSOI2008] 火星人prefix 【Splay + Hash】
- LeetCode 58 Spiral Matrix II
- 【HOSTS相关】什么时候使用127.0.0.1
- 第二次项目冲刺(Beta阶段)5.22
- css给div添加阴影效果
- 2017-2018-1 1623 bug终结者 冲刺004
- 【docx4j】docx4j操作docx,实现替换内容、转换pdf、html等操作
- 数据分析与挖掘 - R语言:贝叶斯分类算法(案例三)
- AWD比赛常规套路
- tomcat启动报错:注释指定的bean类.与现有的冲突.相同的名称和类
- 深入理解JavaScript系列(9):根本没有“JSON对象”这回事!
- A. Yet Another Problem with Strings 分块 + hash
- 信号驱动IO