Android 教程 2020

工程目录中有一个drawable文件夹,里面存放的是一些静态的图片资源文件。
比如位图文件(.png、.9.png、.jpg、.gif);或一些可绘制对象资源子类型的 XML 文件(本文称为drawable文件)。

当我们想给button或者TextView设定背景时,我们会想到纯色背景。如果要求圆角背景,或是渐变色背景,我们该如何实现呢?
一种办法是制作相应的美术素材,也就是切图。另一种办法是使用xml格式的资源文件。
本文要介绍的是shape。使用这类资源,可以完成一些比较简单的美术设计。

一个小栗子🌰

接下来我们新建一个shape试试,要求带有外围边框,有圆角,里面用渐变色填充。
res/drawable/目录中,右键新建一个Drawable Resource file文件,起名shape_rect_gradient_red.xml
root element选择shape。完整代码写成下面的样子:

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="rectangle">
<stroke
android:width="2dp"
android:color="#0E30B1" />
<corners android:radius="6dp" />
<gradient
android:centerColor="#F55353"
android:endColor="#F71515"
android:startColor="#FD7575" />
</shape>

as的右边可以打开预览,看看效果。
其中android:shape="rectangle"表示的是选择长方形的形状。
stroke标签代表的是边框。里面设定边框宽度是2dp,边框颜色是#0E30B1。
corners标签代表的是圆角。如果不设置,则默认为直角。这里我们设定圆角的半径为6dp。
gradient表示渐变色。分别可以设置起始,中间和结束的颜色值。

在layout中,给Button的background设置使用这个shape。xml的文件名就是它的资源名称。

1
2
3
4
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/shape_rect_gradient_red" />

再稍微完善一下这个Button。

1
2
3
4
5
6
7
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/shape_rect_gradient_red"
android:text="RFDev btn 1"
android:textAllCaps="false"
android:textColor="#ffffff" />

运行一下,可以看到效果。
shape_rect_gradient_red 效果

shape介绍

shape又称为“形状可绘制对象”。为了简便,以下都称作shape或者“shape文件”。
shape是一种在 XML 文件中定义的通用形状。经过编译后,可以得到GradientDrawable对象。

资源引用

在 Java 中:R.drawable.filename
在 XML 中:@[package:]drawable/filename

语法

上面那个栗子我们认识了几个元素,gradient,corners和stroke。下面是语法的详细介绍。

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="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>

详细元素介绍请参见 https://developer.android.google.cn/guide/topics/resources/drawable-resource.html#Shape

圆角背景的栗子🌰

上文介绍了corners的用法。我们来看一个圆角背景的实现方法。
新建文件shape_btn_2_normal.xml

1
2
3
4
5
6
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#6CB3DD" />
<corners android:radius="25dp" />
</shape>

在layout中给TextView使用这个背景。

1
2
3
4
5
6
7
8
<TextView
android:id="@+id/tv1"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="@drawable/shape_btn_2_normal"
android:gravity="center"
android:text="RFDev 圆角背景TextView 1"
android:textColor="#ffffff" />

TextView的高度设置成了50dp,而背景的圆角半径设置成了25dp。
运行可以看到效果。

shape_btn_2_normal

如果想要渐变色,再增加gradient的设置就好。

代码中使用资源

在java代码中使用资源,比如在activity中设置背景。

1
2
3
4
5
Resources res = getResources();
Drawable shape = ResourcesCompat.getDrawable(res, R.drawable.shape_btn_2_normal, getTheme());

TextView tv = (TextView)findViewById(R.id.tv1);
tv.setBackground(shape);

使用这种方式,我们可以自己实现一些简单的按钮效果。更复杂的颜色和效果,需要美术设计师的支持。

工程放这里: https://github.com/AnRFDev/Tutorial2020

环形的栗子🌰

尺寸和长度自己设定。

环形 thumb_round_1.xml

1
2
3
4
5
6
7
8
9
10
11
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#ffffff" />
<stroke
android:width="@dimen/audio_seek_bar_thumb_ring_width"
android:color="#7095fc" />
<size
android:width="@dimen/audio_seek_bar_thumb_size"
android:height="@dimen/audio_seek_bar_thumb_size" />
</shape>

带渐变的环形 thumb_round_progress_1.xml

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
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<size
android:width="@dimen/audio_seek_bar_thumb_size"
android:height="@dimen/audio_seek_bar_thumb_size" />
<solid android:color="#ffffff" />
</shape>
</item>
<item>
<shape
android:innerRadius="4dp"
android:thicknessRatio="6"
android:shape="ring"
android:useLevel="false">
<gradient
android:endColor="#ffffff"
android:startColor="#7095fc"
android:type="sweep" />
<size
android:width="@dimen/audio_seek_bar_thumb_size"
android:height="@dimen/audio_seek_bar_thumb_size" />
</shape>
</item>
</layer-list>

工程放这里: https://github.com/AnRFDev/Tutorial2020