Android Shape使用

一、Shape简介

Shape是可以使用xml定义的一下通用形状，详细用法参考官方文档GradientDrawable。

文件位置：res/drawable/filename.xml(filename用来当作 resource ID)

资源引用：R.drawable.filename

二、属性

<?xml version="1.0" encoding="utf-8"?>
<shape           //这必须是根元素。
    xmlns:android="http://schemas.android.com/apk/res/android"     //定义 XML 命名空间
    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="float"
        android:centerY="float"
        android:centerColor="integer"
        android:endColor="color"
        android:gradientRadius="integer"
        android:startColor="color"
        android:type=["linear" | "radial" | "sweep"]
        android:useLevel=["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>

1、gradient

渐变熟悉较多单独列出来：

• android:angle ： 整型。渐变的角度（度）。0 为从左到右，90 为从上到上。必须是 45 的倍数。默认值为 0。
• android:centerX ： 浮点型。渐变中心的相对 X 轴位置 (0 - 1.0)。
• android:centerY ： 浮点型。渐变中心的相对 Y 轴位置 (0 - 1.0)。
• android:centerColor ：颜色。起始颜色与结束颜色之间的可选颜色
• android:endColor ： 颜色。结束颜色
• android:gradientRadius ： 浮点型。渐变的半径。仅在 android:type="radial" 时适用。
• android:startColor ： 颜色。起始颜色
• android:type ：要应用的渐变图案的类型
  • linear ：线性渐变。这是默认值
  • radial ： 径向渐变。起始颜色为中心颜色。
  • sweep ： 流线型渐变

2、ring

环，能看到有一些属性是单独针对它的(设置位置跟shape=ring同级)：

• android:innerRadius : 尺寸。环内部（中间的孔）的半径，以尺寸值或尺寸资源表示
• android:innerRadiusRatio : 浮点型。环内部的半径，以环宽度的比率表示。例如，如果 android:innerRadiusRatio="5"，则内半径等于环宽度除以 5。此值被 android:innerRadius覆盖。默认值为 9。
• android:thickness : 尺寸。环的厚度，以尺寸值或尺寸资源表示。
• android:thicknessRatio : 浮点型。环的厚度，表示为环宽度的比率。例如，如果 android:thicknessRatio="2"，则厚度等于环宽度除以 2。此值被 android:innerRadius 覆盖。默认值为 3。
• android:useLevel : 布尔值。如果这用作 LevelListDrawable，则此值为“true”。这通常应为“false”，否则形状不会显示。

三、示例

XML 文件保存在 res/drawable/gradient_box.xml 中：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="#FFFF0000"
        android:endColor="#80FF00FF"
        android:angle="45"/>
    <padding android:left="7dp"
        android:top="7dp"
        android:right="7dp"
        android:bottom="7dp" />
    <corners android:radius="10dp" />
</shape>

此布局 XML 会将形状可绘制对象应用到视图：

  <TextView
        android:id="@+id/textview"
        android:layout_gravity="center"
        android:layout_height="60dp"
        android:layout_width="100dp"
        android:background="@drawable/gradient_box"/>

或者在Java文件中使用代码将获取形状可绘制对象，并将其应用到视图：

Resources res = getResources();
Drawable shape = res. getDrawable(R.drawable.gradient_box);
TextView tv = (TextView)findViewByID(R.id.textview);
tv.setBackground(shape);

四、四种类型分析

1、矩形（rectangle）

1.1 直角矩形：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!--定义纯色/填充颜色-->
    <solid android:color="@color/colorPrimary" />
</shape>

1.2 圆角矩形：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!--定义纯色/填充颜色-->
    <solid android:color="@color/colorPrimary"></solid>
    <!--定义圆角度数-->
    <corners android:radius="15dp"></corners>
</shape>

1.3 内间距矩形：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!--定义纯色/填充颜色-->
    <solid android:color="@color/colorPrimary"></solid>
    <!--定义圆角度数-->
    <corners android:radius="15dp"></corners>
    <!--设置内边距,bottom向上距离不够会覆盖内容-->
    <padding android:bottom="10dp" android:top="10dp"></padding>
</shape>

1.4 半圆角矩形：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!--定义纯色/填充颜色-->
    <solid android:color="@color/colorPrimary"></solid>
    <!--定义某个方向的圆角度数-->
    <corners   android:topLeftRadius="20dp"  android:topRightRadius="20dp" />
</shape>

1.5 虚线/描边矩形：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!--定义纯色/填充颜色-->
    <solid android:color="@color/colorPrimary"></solid>
    <!--定义某个方向的圆角度数-->
    <corners   android:topLeftRadius="20dp"  android:topRightRadius="20dp" />
    <!--定义描边宽度和颜色，添加虚线间距-->
    <stroke android:width="3dp"   android:color="@color/colorAccent"
            android:dashGap="1dp"    android:dashWidth="4dp"></stroke>
</shape>

1.6 渐变矩形：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!--angle 渐变角度,0:左到右;90:下到上;180:右到左;270:上到下-->
    <gradient android:startColor="@android:color/background_dark"
        android:endColor="@android:color/white"
        android:angle="0"></gradient>
</shape>

2、圆形(oval)

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@color/colorPrimary"></solid>
    <!--size的height和width设置为一样大小就是一个圆了,如果不设置修饰的view需要设置宽高-->
    <size android:height="100dp"    android:width="100dp"></size>

</shape>

3、线(line)

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line">
    <!--此形状需要 <stroke> 元素定义线宽，主要是用做分割线-->
    <stroke  android:width="2dp"     android:color="@color/colorAccent"
             android:dashGap="10dp"   android:dashWidth="4dp"></stroke>

    <!--定义line的高度，size大小必须大于android:width-->
    <size android:height="3dp"></size>
</shape>

4、环(ring）

4.1 默认环：

<?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="35dp"
   >

    <solid android:color="@color/colorPrimary" />
</shape>

4.2 渐变环：

<?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="35dp"
    >
<gradient android:startColor="@android:color/white"
    android:endColor="#008577"
    android:angle="0"/>

</shape>

4.3 描边环：

<?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="35dp"
    >
    <!--定义描边宽度和颜色-->
    <stroke android:width="3dp"   android:color="@color/colorAccent"></stroke>
    <solid android:color="@color/colorPrimary" />
</shape>

详细项目工程