android中shape的使用介绍 3--矩形

这里给出的是shape中定义矩形的相关代码：

（1）矩形效果1

1）效果图： 
 
2）shape中的代码：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <solid android:color="#00ff00"/>
</shape>

3）xml布局文件中引用自定义shape

<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:background="@drawable/shape_test"
        android:text="只加了填充色的矩形"/>

• 在引用shape的时候，将shape用作tv的背景色

注意：下面的几个示例代码中，改变的只是shape中的代码，xml中引用时的代码不改变，所以，下面的示例代码中只给出效果图和shape代码

（2） 矩形效果2

1）效果图 
 
2）shape中的代码

示例代码1 ：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <solid android:color="#00ff00"/>
    <!--矩形每个角的弧度半径都定义为8 -->
    <corners android:radius="8dp"/>
</shape>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

示例代码2 ：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <solid android:color="#00ff00"/>
    <!--矩形每个角的弧度半径都定义为8 -->
    <corners android:bottomLeftRadius="8dp"
             android:bottomRightRadius="8dp"
             android:topLeftRadius="8dp"
             android:topRightRadius="8dp"/>
</shape>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

• 以上两种示例代码效果相同，方式1 统一设置每个角半径，方式2 分别设置角半径；如果要求的效果中角半径不一致的时候，使用方式2 ，如果要求的效果中角半径一致，推荐方式1

（3）矩形效果3

1）效果图 –左侧圆角，右侧依旧是直角 
 
2）shape中的代码：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <solid android:color="#00ff00"/>

    <corners android:bottomLeftRadius="8dp"
             android:bottomRightRadius="0dp"
             android:topLeftRadius="8dp"
             android:topRightRadius="0dp"/>
</shape>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

• 想改变哪个角的弧度，就设置对应的数据，如果不想改变，就设置为0dp；或者，直接不写不想改变角度的那一项，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <solid android:color="#00ff00"/>

    <corners android:bottomLeftRadius="8dp"
             android:topLeftRadius="8dp"/>
</shape>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

（4）矩形效果4

1）效果图 
 
2）shape中的代码

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <solid android:color="#00ff00"/>

    <!--矩形每个角的弧度半径都定义为8 -->
    <corners android:radius="8dp"/>

    <!--控制内容与该shape的边距-->
    <padding
        android:bottom="5dp"
        android:left="15dp"
        android:right="15dp"
        android:top="5dp"/>
</shape>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15

• 给shape增加padding节点，控制内容与shape图形的边距。

3）xml布局文件中引用自定义shape

<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:background="@drawable/shape_test"
        android:text="添加了填充色，圆角，padding的矩形"/>

• 1
• 2
• 3
• 4
• 5

• 我们并没有给TextView设置padding值，效果图中的文字与图形的边距，就是通过shape中的padding节点控制的

（5）矩形效果5

1）效果图 
 
2）shape中的代码：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">

    <!--矩形每个角的弧度半径都定义为8 -->
    <corners android:radius="8dp"/>

    <!--加一个普通的边线-->
    <stroke
        android:width="3dp"
        android:color="#ff0000"/>

    <!--控制内容与该shape的边距-->
    <padding
        android:bottom="5dp"
        android:left="15dp"
        android:right="15dp"
        android:top="5dp"/>
</shape>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19

• stroke边线的宽度（说是“厚度”更好理解）定义为3dp,颜色使用16进制颜色值，其实也可以引用color文件中的颜色

(6)矩形效果6

1）效果图 
 
2）shape中的代码

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <solid android:color="#00ff00"/>

    <!--矩形每个角的弧度半径都定义为8 -->
    <corners android:radius="8dp"/>

    <!--加虚边线-->
    <stroke
        android:width="3dp"
        android:color="#ff0000"
        android:dashGap="5dp"
        android:dashWidth="35dp"/>

    <!--控制内容与该shape的边距-->
    <padding
        android:bottom="5dp"
        android:left="15dp"
        android:right="15dp"
        android:top="5dp"/>
</shape>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22

• dashWidth 表示每个线段的长度
• dashGap 表示线段之间的间隔

（7）矩形效果7

1）效果图 
 
2）shape中的代码

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">

    <!--矩形每个角的弧度半径都定义为8 -->
    <corners android:radius="8dp"/>

    <!--固定色-->
    <solid android:color="#c4ff00"/>

    <!--渐变色-->
    <gradient
        android:endColor="#00ff00"
        android:startColor="#fff"
        />
    <!--solid 和 gradient不能同时使用，同时使用时后定义的会覆盖先定义的-->

    <!--加虚边线-->
    <stroke
        android:width="3dp"
        android:color="#ff0000"
        android:dashGap="5dp"
        android:dashWidth="35dp"/>

    <!--控制内容与该shape的边距-->
    <padding
        android:bottom="5dp"
        android:left="15dp"
        android:right="15dp"
        android:top="5dp"/>
</shape>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31

• 我们添加了gradient节点，指定了起始渐变色和终止渐变色，并没有指定渐变的类型
• 没有指定渐变类型的时候，默认是linear线性渐变，而且渐变角度angle 为0，也就是从左向右渐变
• gradient和solid共存时，后定义的会覆盖先定义的

(8)矩形效果8

1）效果图 
 
2）shape中的代码：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">

    <!--矩形每个角的弧度半径都定义为8 -->
    <corners android:radius="8dp"/>

    <!--固定色-->
    <solid android:color="#c4ff00"/>

    <!--渐变色-->
    <gradient
        android:angle="180"
        android:endColor="#00ff00"
        android:startColor="#fff"
        />
    <!--solid 和 gradient不能同时使用，同时使用时后定义的会覆盖先定义的-->

    <!--加虚边线-->
    <stroke
        android:width="3dp"
        android:color="#ff0000"
        android:dashGap="5dp"
        android:dashWidth="35dp"/>

    <!--控制内容与该shape的边距-->
    <padding
        android:bottom="5dp"
        android:left="15dp"
        android:right="15dp"
        android:top="5dp"/>
</shape>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32

• 更改了渐变色的渐变角度angle，该属性只有在渐变类型type是linear时才有效（不指定type时，默认linear），而且必须是45的倍数
• 代码中指定angle为180，表示从右向左渐变
• angle的取值以及对应的渐变方向： 
  • 0 从左到右
  • 45 左下到右上
  • 90 下到上
  • 135 右下到左上
  • 180 从右到左
  • 225 右上到左下
  • 270 上到下
  • 315 左上到右下
  • 360 效果同0 从左往右

（9）矩形效果9

1）效果图–圆角，虚边线，padding 
 
2）shape中的代码

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">

    <!--矩形每个角的弧度半径都定义为8 -->
    <corners android:radius="8dp"/>

    <!--加虚边线-->
    <stroke
        android:width="3dp"
        android:color="#ff0000"
        android:dashGap="5dp"
        android:dashWidth="35dp"/>

    <!--控制内容与该shape的边距-->
    <padding
        android:bottom="5dp"
        android:left="15dp"
        android:right="15dp"
        android:top="5dp"/>
</shape>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21

（10）矩形效果10

1）效果图 
 
2）shape中的代码

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">

    <!--矩形每个角的弧度半径都定义为8 -->
    <corners android:radius="8dp"/>

    <!--渐变色-->
    <gradient
        android:endColor="#00ff00"
        android:gradientRadius="500dp"
        android:startColor="#fff"
        android:type="radial"/>

    <!--加虚边线-->
    <stroke
        android:width="3dp"
        android:color="#ff0000"
        android:dashGap="5dp"
        android:dashWidth="35dp"/>

    <!--控制内容与该shape的边距-->
    <padding
        android:bottom="5dp"
        android:left="15dp"
        android:right="15dp"
        android:top="5dp"/>
</shape>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28

• 这里将渐变的类型设置成了radial 放射渐变,使用radial时必须设置gradientRadius 渐变半径，

• gradientRadius的取值类型有三种， dimension，float，fraction，上面的效果图是取的dimension

• 下面的效果图是当gradientRadius取 float类型的500时的效果 
  

（11）矩形效果11 –扫描渐变

1)效果图 
 
2）shape中的代码

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">

    <!--矩形每个角的弧度半径都定义为8 -->
    <corners android:radius="8dp"/>

    <!--渐变色-->
    <gradient
        android:endColor="#00ff00"
        android:startColor="#fff"
        android:type="sweep"/>

    <!--加虚边线-->
    <stroke
        android:width="3dp"
        android:color="#ff0000"
        android:dashGap="5dp"
        android:dashWidth="35dp"/>

    <!--控制内容与该shape的边距-->
    <padding
        android:bottom="5dp"
        android:left="15dp"
        android:right="15dp"
        android:top="5dp"/>
</shape>

• 这里将渐变类型设置成了sweep扫描渐变