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

XML/HTML代码
  1. <Button
  2. android:layout_width="wrap_content"
  3. android:layout_height="wrap_content"
  4. android:text="TestShapeButton"
  5. android:background="@drawable/button_selector"
  6. />

button_selector.xml:

XML/HTML代码
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <selector
  3. xmlns:android="http://schemas.android.com/apk/res/android">
  4. <item android:state_pressed="true" >
  5. <shape>
  6. <!-- 渐变 -->
  7. <gradient
  8. android:startColor="#ff8c00"
  9. android:endColor="#FFFFFF"
  10. android:type="radial"
  11. android:gradientRadius="50" />
  12. <!-- 描边 -->
  13. <stroke
  14. android:width="2dp"
  15. android:color="#dcdcdc"
  16. android:dashWidth="5dp"
  17. android:dashGap="3dp" />
  18. <!-- 圆角 -->
  19. <corners
  20. android:radius="2dp" />
  21. <padding
  22. android:left="10dp"
  23. android:top="10dp"
  24. android:right="10dp"
  25. android:bottom="10dp" />
  26. </shape>
  27. </item>
  28. <item android:state_focused="true" >
  29. <shape>
  30. <gradient
  31. android:startColor="#ffc2b7"
  32. android:endColor="#ffc2b7"
  33. android:angle="270" />
  34. <stroke
  35. android:width="2dp"
  36. android:color="#dcdcdc" />
  37. <corners
  38. android:radius="2dp" />
  39. <padding
  40. android:left="10dp"
  41. android:top="10dp"
  42. android:right="10dp"
  43. android:bottom="10dp" />
  44. </shape>
  45. </item>
  46. <item>
  47. <shape>
  48. <solid android:color="#ff9d77"/>
  49. <stroke
  50. android:width="2dp"
  51. android:color="#fad3cf" />
  52. <corners
  53. android:topRightRadius="5dp"
  54. android:bottomLeftRadius="5dp"
  55. android:topLeftRadius="0dp"
  56. android:bottomRightRadius="0dp"
  57. />
  58. <padding
  59. android:left="10dp"
  60. android:top="10dp"
  61. android:right="10dp"
  62. android:bottom="10dp" />
  63. </shape>
  64. </item>
  65. </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.

最新文章

  1. windows+nginx+iis+redis+Task.MainForm构建分布式架构 之 (nginx+iis构建服务集群)
  2. iOS多线程实现3-GCD
  3. blade and soul factions
  4. Java中public,private,protected,和默认的区别
  5. 自定义ViewGroup
  6. The absolute uri: http://java.sun.com/jsp/jstl/core cannot be resolved
  7. 学习笔记 - 数据绑定之knockout
  8. [BZOJ 1014] [JSOI2008] 火星人prefix 【Splay + Hash】
  9. LeetCode 58 Spiral Matrix II
  10. 【HOSTS相关】什么时候使用127.0.0.1
  11. 第二次项目冲刺(Beta阶段)5.22
  12. css给div添加阴影效果
  13. 2017-2018-1 1623 bug终结者 冲刺004
  14. 【docx4j】docx4j操作docx,实现替换内容、转换pdf、html等操作
  15. 数据分析与挖掘 - R语言:贝叶斯分类算法(案例三)
  16. AWD比赛常规套路
  17. tomcat启动报错:注释指定的bean类.与现有的冲突.相同的名称和类
  18. 深入理解JavaScript系列(9):根本没有“JSON对象”这回事!
  19. A. Yet Another Problem with Strings 分块 + hash
  20. 信号驱动IO

热门文章

  1. Python开发环境Wing IDE搜索工具介绍
  2. CAS登录认证的简单介绍
  3. Unity光晕剑效果的Shader简单实现
  4. HDU5200 数据离线处理
  5. 用TextKit实现表情混排
  6. 【BZOJ1101】[POI2007] Zap(莫比乌斯反演)
  7. dojo中类的继承
  8. Drupal相关网站推荐
  9. python Scraping
  10. C# 界面跳转-登陆之后跳转至主窗口