Android Shape设置背景

设置背景时，经常这样 android:background=“@drawable/xxx” 。如果是纯色图片，可以考虑用 shape 替代。

shape 相比图片，减少资源占用，缩减APK体积。

开始使用。

    
    
    
    
    
    

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
33
34
35
36

概览

使用 shape ，可以实现 矩形、椭圆、直线、圆环。

• corners ：设置圆角，android:radius 设置统一的圆角。也可以单独设置四个角的圆角。
• gradient ：渐变，有线性渐变（默认）、放射渐变（类似中心往外扩散的效果）、扫描式渐变（转一圈的效果）。
• padding ：内边距。和 View 的 padding 使用一样。可以不设置，由 View 来决定。
• size ：大小。设置宽高，和 View 的 padding 使用一样。可以不设置，由 View 来决定。
• solid ：填充颜色。
• stroke ：描边。可以设置边界的颜色，设置边界边缘为虚线。

使用方法：

• 1.在 res/drawable/ 目录创建 shape_demo.xml 。
• 2.在布局文件中 android:background=“@drawable/shape_demo”

矩形

默认直角矩形

    
    

1
2
3
4
5
6

圆角

用 corners 设置圆角，圆角的幅度由 android:radius 控制。

    
    

    
    

1
2
3
4
5
6
7
8
9
10
11

描边

用 stroke 描边，默认边缘时曲线，添加了 android:dashWidth 、android:dashGap 就是虚线。

• android:width 指定宽度，
• android:color 是边缘颜色，
• android:dashWidth 是虚线线段的宽度，
• android:dashGap 是虚线之间的间隔

    
    

    
    

    
    

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

渐变色

用 gradient 设置渐变色，

• android:type ：渐变色类型，线性渐变（默认）、放射渐变（类似中心往外扩散的效果）、扫描式渐变（转一圈的效果）。
• android:angle ：渐变开始角度。线性渐变下有效。
  Angle of the gradient, used only with linear gradient. Must be a multiple of 45 in the range [0, 315].
• android:startColor ：渐变开始的颜色
• android:centerColor ：渐变中间的颜色
• android:endColor ：渐变结束的颜色

    
    

    


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

几种矩形效果对比，

学会了矩形，其他的也就会了。

椭圆

线性渐变，

    
    

    
    

    


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

放射渐变，在 线性渐变 基础上把 android:type 改为 radial ，同时设置 android:gradientRadius ，它决定内圆的大小。

    
    

    
    

    

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

扫描式渐变，在 线性渐变 基础上把 android:type 改为 sweep 。

linear 、radial 、sweep ，三种渐变色的对比，

直线/虚线

直线

    

    
    


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

虚线，虚线就是直线加上描边效果。

    

    
    


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

对比，

圆环

android:shape=“ring” ，

• android:innerRadius ：内圆半径，直接设置 dp 值。
• android:thickness ：圆环厚度，直接设置 dp 值。
• android:useLevel ：设为 false ，否则不显示。
• android:innerRadiusRatio ：内圆半径，圆环宽度占比的形式，如 设为 4 ，意思是 内圆半径 = 圆环宽度 / 4 。
• android:thicknessRatio ：圆环厚度，圆环宽度占比的形式，如 设为 4 ，意思是 内圆半径 = 圆环宽度 / 4 。

本例 View 限定宽高都为 100 dp ，这两种写法，圆环大小是一样的。
写法1 ，

    
    

1
2
3
4
5
6
7
8
9
10

写法2 ，

    
    

	
    

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

写法 2 , gradient 中设置 android:angle=“90” ，看下和 0 的对比

    
    

	
    

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

三种效果对比，

• android:angle 为 0 是中间的效果，左边是开始渐变的颜色，右边是结束渐变的颜色。
• android:angle 为 90 是右边的效果，下面是开始渐变的颜色，上面是结束渐变的颜色。

复合

就是把前面的几个背景结合使用，

根节点是 layer-list ，它的每个 item 里实现 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

效果，