Android中shape的使用

引言

Android中常常需要用到一些边框、背景之类的素材，而这些很多时候不是通过美工人员P图得到的，而是通过shape标签来实现的。今天就探究一下shape到底怎么用以及相关的一些特性。

shape的定义

本来想在网上找点简单易懂的中文解释，搜了半天没看到，于是乎就上Android官网上看了看，官网的解释是：

An XML file that defines a geometric shape, including colors and gradients.
 
 
1
 
 
1

大概意思就是：一种定义形状的xml文件，包括颜色、渐变。其实还包括圆角、内间距、边框等。总之是一种用于定义形状资源的文件。

shape使用

举一个小例子先看看

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <!-- 边框 -->
    <stroke 
        android:width="2dp"
        android:color="#FFFFFF"
        />
    <!-- 圆角 -->
    <corners 
        android:radius="8dp"
        />
    <!--填充-->
    <solid 
        android:color="#00000000"
        />
</shape>
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

作为背景用于TextView

android:background="@drawable/recetegle_textview"
 
 
1
 
 
1

效果：

shape属性详解

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <!--属性-->
</shape>
 
 
1
2
3
4
5
 
 
1
2
3
4
5

这是shape文件的基本格式。 
根标签是shape，其中属性：android:shape="……"是必要属性，它规定shape的基本形状。

android：shape

它可选的值如下：

rectangle //矩形
oval      //椭圆
line      //线
ring      //圆环
 
 
1
2
3
4
 
 
1
2
3
4

android：shape=ring时的特殊属性

android:innerRadius="dimension"             //内环的半径。
android:innerRadiusRatio="float"            //这个值表示内部环的比例，例如,如果android:innerRadiusRatio = " 5 ",那么内部的半径等于环的宽度除以5。这个值会被android:innerRadius重写。 默认值是9。
android:thickness="dimension"              //环的厚度.
android:thicknessRatio="float"             //厚度的比例。例如,如果android:thicknessRatio= " 2 ",然后厚度等于环的宽度除以2。这个值是被android:innerRadius重写， 默认值是3。
android:useLevel="boolean"                 //如果用在 LevelListDrawable里，那么就是true。如果通常不出现则为false。
 
 
1
2
3
4
5
 
 
1
2
3
4
5

子属性

自属性是包含在shape内部的一些属性，主要包括：

corners //圆角
gradient//渐变
padding //内边距
size    //大小
solid   //填充
stroke  //边框

 
 
1
2
3
4
5
6
7
 
 
1
2
3
4
5
6
7

corners 圆角

 <corners
            android:radius="dimension"              //圆角，比如8dp、5dp等等
            android:topLeftRadius="dimension"       //左上圆角，比如8dp、5dp等等
            android:topRightRadius="dimension"      //右上圆角，比如8dp、5dp等等
            android:bottomLeftRadius="dimension"    //左下圆角，比如8dp、5dp等等
            android:bottomRightRadius="dimension" />//左下圆角，比如8dp、5dp等等

 
 
1
2
3
4
5
6
7
 
 
1
2
3
4
5
6
7

gradient渐变

<gradient
            android:angle="integer"           //渐变角度，默认为0，即从左向右，90为从下向上。值必须是45的倍数
            android:centerX="float"           //渐变中心X，相对位置与整个shape的X的相对位置，取值范围0.0~1.0 
            android:centerY="float"           //同X 
            android:centerColor="color"       //介于end和start之间的颜色
            android:endColor="color"          //结束颜色  
            android:gradientRadius="integer"  //渐变半径，只有当type="radial"时生效 
            android:startColor="color"        //开始颜色
            android:type="linear"             //渐变模式，可选的值有：linear线型，radial放射型，sweep范围型（这个真不知道怎么翻译）
            android:useLevel="boolean" />     //使用级别，默认为false，当用于levelListDrawable时设为true。
 
 
1
2
3
4
5
6
7
8
9
10
 
 
1
2
3
4
5
6
7
8
9
10

padding 内边距

<padding
            android:left="dimension"  //左
            android:top="dimension"   //上
            android:right="dimension" //左 
            android:bottom="dimension" /> //下
 
 
1
2
3
4
5
 
 
1
2
3
4
5

size 大小

<size
            android:width="dimension"     //宽
            android:height="dimension" /> //高
 
 
1
2
3
 
 
1
2
3

solid 填充

<solid
            android:color="color" /> //填充颜色 
 
 
1
2
 
 
1
2

stroke 边框

<stroke
            android:width="dimension" //边框宽
            android:color="color"     //边框颜色
            android:dashWidth="dimension" //虚线宽度，只有当设置了dashGap时有效
            android:dashGap="dimension" /> //虚线间距，只有当设置了dashWidth时有效
 
 
1
2
3
4
5
 
 
1
2
3
4
5

ShapeDrawable

ShapeDrawable是一个Drawable的子类用与绘制原始的shape。这里不再展开了。 
需要详细了解的同学看这里

总结

shape是一个很好的绘制图片的工具，如果用好了，可以绘制出很棒的效果。 
我画了个球，哈哈哈。

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

    <gradient

        android:startColor="#FFFFFF"
        android:endColor="#000000"
        android:centerX="0.6"
        android:centerY="0.4"
        android:type="radial"
        android:gradientRadius="25dp"/>

    <size
        android:height="50dp"
        android:width="50dp"/>

    </shape>
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18