Android开发中常用的背景效果

发表于   |  阅读量 次 | 分类于 ，

虽然资源文件的引用很简单，但好记性不如烂笔头，整理一些开发中常用的背景效果有助于快速开发，
效果图如下：

logo

shape

在Android开发中，使用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
33
34
35
36
<?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: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>

shape可以画四种图形，分别是：矩形（rectangle），椭圆（oval），线（line），圆环（ring）。
接下来来实现各种背景效果，方便以后开发，先上效果图：

圆角

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?xml version="1.0" encoding="UTF-8" ?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <solid android:color="@color/color_bg"></solid>

    <stroke android:color="@color/colorPrimary"
            android:width="2px"/>

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

渐变

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       >

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

    <padding android:bottom="12dp"
             android:left="12dp"
             android:right="12dp"
             android:top="12dp"></padding>

    <!--angle 渐变角度逆时针,0:左到右;90:下到上;180:右到左;270:上到下-->
    <gradient android:startColor="@android:color/white"
              android:endColor="@android:color/black"
              android:angle="0"></gradient>
</shape>

环形

1
2
3
4
5
6
7
8
9
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="ring"
       android:useLevel="false"
       android:thickness="10dp">
    <!--useLevel需要设置为false-->

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

android:thickness：圆环宽度

线

1
2
3
4
5
6
7
8
9
10
11
12
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="line">

    <stroke
        android:width="1dp"
        android:color="@color/colorAccent"
        android:dashGap="3dp"
        android:dashWidth="5dp"></stroke>

    <size android:height="2dp"></size>
</shape>

线是居中显示的，这点很无奈，你不能用此种方式将线作为背景来实现类似下划线的效果。
android:width：填充颜色的高度
android:dashGap：虚线间距宽度
android:dashWidth：虚线宽度
android:height：line的高度，size大小必须大于android:width

layer-list

layer-list简单的理解就是将shape，selector组合起来，可以实现一些更复杂的效果，下面来看一些效果：

tap选项卡切换效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true">
        <layer-list>
            <!-- 红色背景 -->
            <item>
                <color android:color="#E4007F" />
            </item>
            <!-- 白色背景 -->
            <item android:bottom="4dp" android:drawable="@android:color/white" />
        </layer-list>
    </item>
    <item>
        <layer-list>
            <!-- 红色背景 -->
            <item>
                <color android:color="#E4007F" />
            </item>
            <!-- 白色背景 -->
            <item android:bottom="1dp" android:drawable="@android:color/white" />
        </layer-list>
    </item>
</selector>

这里item里面相当于实现了前面shape的line没办法实现的下划线效果
为了让java代码更加简洁，这里控件我们可以选择RadioGroup，如下：

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
37
38
39
40
<RadioGroup
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:orientation="horizontal"
       android:layout_marginTop="10dp">

       <RadioButton
           android:id="@+id/layer1"
           android:layout_width="0dp"
           android:layout_height="wrap_content"
           android:layout_weight="1"
           android:background="@drawable/demo_bg_layer2"
           android:button="@null"
           android:gravity="center"
           android:padding="5dp"
           android:text="layer1"/>

       <RadioButton
           android:id="@+id/layer2"
           android:layout_width="0dp"
           android:layout_height="wrap_content"
           android:layout_weight="1"
           android:background="@drawable/demo_bg_layer2"
           android:button="@null"
           android:gravity="center"
           android:padding="5dp"
           android:text="layer2"/>

       <RadioButton
           android:id="@+id/layer3"
           android:layout_width="0dp"
           android:layout_height="wrap_content"
           android:layout_weight="1"
           android:background="@drawable/demo_bg_layer2"
           android:button="@null"
           android:gravity="center"
           android:padding="5dp"
           android:text="layer3"/>

   </RadioGroup>

这样，我们只需要在java代码里面监听RadioGroup即可。

阴影效果

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
37
38
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <!-- 阴影部分 -->
    <!-- 个人觉得更形象的表达：top代表下边的阴影高度，left代表右边的阴影宽度。
    其实也就是相对应的offset，solid中的颜色是阴影的颜色，也可以设置角度等等 -->
    <item
        android:left="2dp"
        android:top="2dp">
        <shape android:shape="rectangle" >
            <gradient
                android:angle="270"
                android:endColor="#0F000000"
                android:startColor="#0F000000" />
            <corners
                android:bottomLeftRadius="6dip"
                android:bottomRightRadius="6dip"
                android:topLeftRadius="6dip"
                android:topRightRadius="6dip" />
        </shape>
    </item>
    <!-- 背景部分 -->
    <!-- 形象的表达：bottom代表背景部分在上边缘超出阴影的高度，right代表背景部分在左边超出阴影的宽度（相对应的offset） -->
    <item
        android:bottom="3dp"
        android:right="3dp">
        <shape android:shape="rectangle" >
            <gradient
                android:angle="270"
                android:endColor="#FFFFFF"
                android:startColor="#FFFFFF" />
            <corners
                android:bottomLeftRadius="6dip"
                android:bottomRightRadius="6dip"
                android:topLeftRadius="6dip"
                android:topRightRadius="6dip" />
        </shape>
    </item>
</layer-list>
坚持原创分享，您的支持将鼓励我继续创作！