Android shape Drawable的使用

1、首先我们来看看在Android开发的过程中哪些地方会需要用到Android shape

比如要实现下面的这个登陆界面中的名称和密码输入框：

分析其中实现这个布局的方法之一：

①这个界面的控件整体居中，所以可以使用一个线性布局设置其属性为：android:gravity="center_horizontal"来存放各个控件。

②依次放置ImageView、TextView

③然后就到了今天要讲解的登陆账号和密码框的输入的布局。可以看到输入框的左边是一个图片，那么我们可以使用线性布局设置其属性为：android:orientation="horizontal"水平排列，左边一个Imageview，右边一个Edittext，这个时候发现Imageview背景很容易就可以设置其颜色为#25D3D2 ，Edittext的边框的实现方法之一则可以通过用Android的shape属性在xml文件中定义自己需要的几何形状来做为Edittext的背景。

2、Android shape的介绍：

作用：XML中定义的几何形状

官方文档：

Shape Drawable
This is a generic shape defined in XML.

这是一个通用的XML中定义的形状

file location:
res/drawable/filename.xml

位置：res/drawable/文件的名称.xml
The filename is used as the resource ID.

compiled resource datatype:
Resource pointer to a GradientDrawable.
resource reference:
In Java: R.drawable.filename
In XML: @[package:]drawable/filename

Java代码中：R.drawable.文件的名称
XML中：Android:background="@drawable/文件的名称"

3、Android shape的syntax（语法）如何使用：

<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape=["rectangle" | "oval" | "line" | "ring"] >
<corners
android:radius="integer"
android:topLeftRadius="integer"
android:topRightRadius="integer"
android:bottomLeftRadius="integer"
android:bottomRightRadius="integer" />
<gradient
android:angle="integer"
android:centerX="integer"
android:centerY="integer"
android:centerColor="integer"
android:endColor="color"
android:gradientRadius="integer"
android:startColor="color"
android:type=["linear" | "radial" | "sweep"]
android:usesLevel=["true" | "false"] />
<padding
android:left="integer"
android:top="integer"
android:right="integer"
android:bottom="integer" />
<size
android:width="integer"
android:height="integer" />
<solid
android:color="color" />
<stroke
android:width="integer"
android:color="color"
android:dashWidth="integer"
android:dashGap="integer" />
</shape>

<shape>  Android:shape=["rectangle" | "oval" | "line" | "ring"]

其中rectagle矩形，oval椭圆，line水平直线，ring环形

<shape>中子节点的常用属性：

<gradient>  渐变

Android:startColor  起始颜色

Android:endColor  结束颜色             

Android:angle  渐变角度，0从上到下，90表示从左到右，数值为45的整数倍默认为0；

Android:type  渐变的样式 liner线性渐变 radial环形渐变 sweep

<solid >  填充

Android:color  填充的颜色

<stroke > 描边

Android:width 描边的宽度

Android:color 描边的颜色

Android:dashWidth 表示'-'横线的宽度

Android:dashGap 表示'-'横线之间的距离

<corners > 圆角

Android:radius  圆角的半径 值越大角越圆

Android:topRightRadius  右上圆角半径

Android:bottomLeftRadius 右下圆角角半径

Android:topLeftRadius 左上圆角半径

Android:bottomRightRadius 左下圆角半径

4、elements(原理):

①<shape>


            The shape drawable. This must be the root element.（<shape>这必须放在xml文件中的根节点的位置）

        attributes:（<shape>节点的属性，第一个属性是xml的命名空间，第二个属性是这个shape要定义的形状

        

       ①String. Required. Defines the XML namespace, which must          be "http://schemas.android.com/apk/res/android"

        （要求定义xml的命名空间为： "xmlns:android=http://schemas.android.com/apk/res/android".）

稍微补充一下有关命名空间：xmlns是xml namespace的缩写 ，android这个xml命名空间的资源路径在如下的这里路径“http://schemas.android.com/apk/res/android” ，  http://schemas.android.com/apk/res/这是res资源的标准前缀，后面的这个android是一个包名。也就是我们使用 ，android命名空间的资源定义的路径在android这个包名之下。那后面我们通过android引出的属性，例如一个textview的text值我么直接就可以通过一下的代码进行设置了，如*android:text="@string/lostworld"来进行设置了。那这样就很容易设置对应的那些值了

②android:shape

Keyword. Defines the type of shape. Valid values are:（矩形、椭圆、直线、环形）

Value	Desciption
"rectangle"	A rectangle that fills the containing View. This is the default shape.
"oval"	An oval shape that fits the dimensions of the containing View.
"line"	A horizontal line that spans the width of the containing View. This shape requires the <stroke> element to define the width of the line.
"ring"	A ring shape.

                The following attributes are used only when android:shape="ring":（定义的几何形状为环形时候，        shape节点还可以有如下的属性设置；这里需要特别注意的是：这里不能设置环的外半径，只能设置内   半径和环形的厚度（即外半径减掉内半径）。）

       android:innerRadius（内环的半径）

        Dimension. The radius for the inner part of the ring (the hole in the middle), as a dimension valueor dimension resource.

        android:innerRadiusRatio（内环半径比例）

    Float. The radius for the inner part of the ring, expressed as a ratio of the ring's width. For instance,         if android:innerRadiusRatio="5", then the inner radius equals the ring's width divided by 5. This value     is overridden by android:innerRadius. Default value is 9.

（内环的半径占整个环形的宽度（即从中心点到边缘）多少分之一，比如：android:innerRadiusRatio="5"，那么这里就是说内环半径是整个环形宽度的五分之一。如果同时设置了 android:innerRadius和android:innerRadiusRatio，那么android:innerRadiusRatio会被覆盖掉，失去作用。内环半径比例默认值是9

     android:thickness（环形的厚度，就是外径减掉内径）

Dimension. The thickness of the ring, as a dimension value or dimension resource.

android:thicknessRatio（环形厚度的比例）

Float. The thickness of the ring, expressed as a ratio of the ring's width. For instance, if android:thicknessRatio="2", then the thickness equals the ring's width divided by 2. This value is overridden byandroid:innerRadius. Default value is 3.

（环形厚度的比例是指环形厚度占整个环形的宽度（即从中心点到边缘）多少分之一，比如：android:thicknessRatio="2"，表示环形厚度是这个环形的二分之一。这个值同样会被android:innerRadius这个属性覆盖掉。

     android:useLevel

Boolean. "true" if this is used as a LevelListDrawable. This should normally be "false" or your shape may not appear.

（这个属性一般是设置为fasle，下次有时间再写一篇有关LevelistDrable的学习）

②<corners>（这个节点可以设置四个角的显示半径）

Creates rounded corners for the shape. Applies only when the shape is a rectangle.（创建圆角的形状，这个节点的设置只对shape节点指定形状为矩形才生效）

attributes:（属性）

android:radius

Dimension. The radius for all corners, as a dimension value or dimension resource. This is overridden for each corner by the following attributes.

（这个尺寸是对所有的角落设置一个半径，如果同时设置下面的属性的话，这个属性会被分别覆盖掉）

android:topLeftRadius

Dimension. The radius for the top-left corner, as a dimension value or dimension resource.

android:topRightRadius

Dimension. The radius for the top-right corner, as a dimension value or dimension resource.

android:bottomLeftRadius

Dimension. The radius for the bottom-left corner, as a dimension value or dimension resource.

android:bottomRightRadius

Dimension. The radius for the bottom-right corner, as a dimension value or dimension resource.

Note: Every corner must (initially) be provided a corner radius greater than 1, or else no corners are rounded. If you want specific corners to not be rounded, a work-around is to use android:radius to set a default corner radius greater than 1, but then override each and every corner with the values you really want, providing zero ("0dp") where you don't want rounded corners.

（注意点：每个角落的半径必须设置大于1，否则各个角都不会出现圆形， 如果需要设置某一个角不显示圆角，一种方法是使用android：radius=“某一个大于1的值”，然后接着设置你想要哪些角需要显示圆角对应的半径，同时设置0dp给你不希望显示圆角的角的半径。

③<gradient>（渐变）

Specifies a gradient color for the shape.（指定一个渐变颜色的几何形状）

attributes:（属性）

android:angle

Integer. The angle for the gradient, in degrees. 0 is left to right, 90 is bottom to top. It must be a multiple of 45. Default is 0.

（设置渐变角度，这个值是整形。颜色的渐变会根据设置的角度方向渐变。0表示渐变的方向与x轴水平方向夹角为0，从左边沿着水平方向向右渐变颜色。90表示与水平方向夹角为90度，颜色渐变从底部往顶部渐变）

android:centerX

Float. The relative X-position for the center of the gradient (0 - 1.0).

（设置中心点的相对x轴坐标，该属性值为float行，范围0-1.0）

android:centerY

Float. The relative Y-position for the center of the gradient (0 - 1.0).

（设置中心点的相对y轴坐标，该属性值为float行，范围0-1.0）

android:centerColor

Color. Optional color that comes between the start and end colors, as a hexadecimal value or color resource.

（设置渐变的中心颜色，可选颜色在开始渐变的颜色到结束渐变的颜色中间，十六进制或者是颜色资源指定的颜色）

android:endColor

Color. The ending color, as a hexadecimal value or color resource.

（渐变的开始颜色）

android:gradientRadius

Float. The radius for the gradient. Only applied when android:type="radial".

（渐变的半径，只有当渐变的类型是反射状的时候该属性才生效）

android:startColor

Color. The starting color, as a hexadecimal value or color resource.

（渐变开始的颜色）

android:type

Keyword. The type of gradient pattern to apply. Valid values are:

Value	Description
"linear"	A linear gradient. This is the default.
"radial"	A radial gradient. The start color is the center color.
"sweep"	A sweeping line gradient.

（渐变的类型，linear（线形，默认为该类型）、radial（放射形，即中心的为颜色开始渐变点）、sweep（扫描形）

android:useLevel

Boolean. "true" if this is used as a LevelListDrawable.

④<padding>（填充）

Padding to apply to the containing View element (this pads the position of the View content, not the shape).

（填充适用于有包含视图的元素，填充的位置为被包含的视图的位置，而不是定义的shape）

attributes:

android:left

Dimension. Left padding, as a dimension value or dimension resource.

android:top

Dimension. Top padding, as a dimension value or dimension resource.

android:right

Dimension. Right padding, as a dimension value or dimension resource.

android:bottom

Dimension. Bottom padding, as a dimension value or dimension resource.

⑤<size>（大小）
The size of the shape.

（定义的几何形状的大小）

attributes:

android:height

Dimension. The height of the shape, as a dimension value or dimension resource.

android:width

Dimension. The width of the shape, as a dimension value or dimension resource.

（上面分别是对高度和宽度进行设置）

Note: The shape scales to the size of the container View proportionate to the dimensions defined here, by default. When you use the shape in an ImageView, you can restrict scaling by setting the android:scaleType to "center".

（注意：默认情况下这个定义的几何形状会自动与将要与它关联的容器视图成比例，当这个定义的几何形状应用于Imageview的时候，可以设置其缩放方式为Android：scaleType="center")

⑥<solid>

A solid color to fill the shape.

（一种填充满这个定义的几何形状的纯色）
attributes:

android:color

Color. The color to apply to the shape, as a hexadecimal value or color resource.

⑦<stroke>

A stroke line for the shape.（形状边缘的线）

attributes:

android:width

Dimension. The thickness of the line, as a dimension value or dimension resource.

(边缘线条的宽度）

android:color

Color. The color of the line, as a hexadecimal value or color resource.

（边缘线条的颜色）

android:dashGap

Dimension. The distance between line dashes, as a dimension value or dimension resource. Only valid if android:dashWidth is set.

（表示两段边缘线条的间距，只有当边缘线条长度dashWidth值设置了，该属性才生效）

android:dashWidth

Dimension. The size of each dash line, as a dimension value or dimension resource. Only valid if android:dashGap is set.

（表示每段线的长度，只有当dashGap属性设置了，该属性才生效，即两者需要一起使用）

5、example（使用上面的原理实现登陆输入框的背景）

①在Drawable文件夹下面新建一个资源文件，选择shape类型。

②接下来只需将形状设置为矩形，边缘颜色设置为我们需要的颜色，设置填充整个几何形状的纯色为白色，设置边缘宽度为适当大小即可。

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <solid android:color="@color/white"/>
    <corners android:radius="@dimen/common_raudis"/>
    <stroke android:color="@color/border_gray" android:width="1px"/>
</shape>

6、代码下载（一般都不需要下载代码，就一个布局）