通过布局资源配置文件设计用户画面

图形Drawable

Drawable类型表达了各种各样的图形，包括图片、色块、画板、背景等
包含图片在内的图形文件放在res目录的各个drawable目录下，其中drawable目录一般保存描述性的XML文件，
而图片文	件一般放在具体分辨率的drawable目录下。
各视图的background属性、lmageView 和ImageButton的src属性、
TextView和Button四个方向的drawable***系列属性都	可以引用图形文件。
1
2
3
4
5

形状图形

Shape图形又称形状图形，它用来描述常见的几何形状，包括矩形、圆角矩形、圆形、椭圆等。
用好形状图形可以让app页面不再呆板，还可以节省美工不少工作量。
形状图形的定义文件放在drawable目录下，它是以shape标签为根节点的XML描述文件。
根节点下定义了6个节点，分别是: size(尺寸) 、stroke (描边) 、corners(圆角) 、 solid(填充) 、
 padding (间隔)、gradient(渐变)，各节点的属性值主要是长宽、半径、角度以及颜色等。
1
2
3
4
5

1.形状 shape

形状图形的定义文件是以shape标签为根节点的XML描述文件，它支持四种类型的形状：

• rectangle:矩形。【默认值】
• oval:椭圆。【此时corners节点会失效】
• line:直线。【此时必须设置stroke节点,不然会报错】
• ring:圆环

2.尺寸 size

size是shape的下级节点，它描述了形状图形的宽高尺寸。若无size节点，则表示宽高与宿主视图一样大小。下面是size节点的常用属性说明：

• height:像素类型，图形高度。
• width:像素类型，图形宽度。

3.描边 stroke

stroke是shape的下级节点，它描述了形状图形的描边规格。若无stroke节点，则表示不存在描边。下面是stroke节点的常用属性说明：

• color:颜色类型，描边的颜色。
• dashGap:像素类型，每段虚线之间的间隔。
• dashWidth:像素类型，每段虚线的宽度。【若dashGap和dashWidth有一个值为0，则描边为实线。】
• width:像素类型，描边的厚度。

4.圆角 corners

corners是shape的下级节点，它描述了形状图形的圆角大小。若无corners节点，则表示没有圆角。下面是corners节点的常用属性说明：

• bottomLeftRadius:像素类型，左下圆角的半径。
• bottomRightRadius:像素类型，右下圆角的半径。
• topLeftRadius:像素类型，左上圆角的半径。
• topRightRadius:像素类型，右上圆角的半径。
• radius:像素类型，4个圆角的半径(若有上面4个圆角半径的定义，则不需要radius定义)。

5. 填充 solid

solid是shape的下级节点，它描述了形状图形的填充色彩。若无solid节点，则表示无填充颜色。下面是solid节点的常用属性说明：

• color:颜色类型，内部填充的颜色。

6.间隔 padding

padding是shape的下级节点，它描述了形状图形与周围边界的间隔。若无padding节点，则表示四周不设间隔。下面是padding节点的常用属性说明：

• top:像素类型，与上方的间隔。
• bottom:像素类型，与下方的间隔。
• left:像素类型，与左边的间隔。
• right:像素类型，与右边的间隔。

7.渐变 gradient

gradient是shape的下级节点，它描述了形状图形的颜色渐变。若无gradient节点，则表示没有渐变效果。下面是gradient节点的常用属性说明：

• angle:整型，渐变的起始角度。为0时表示时钟的9点位置，值增大表示往逆时针方向旋转。例如，值为90表示6点位置，值为180表示3点位置，值为270表示0点/12点位置。
• type:字符串类型，渐变类型。
• centerx:浮点型，圆心的X坐标。当android:type="linear"时不可用。
• centerY:浮点型，圆心的Y坐标。当android:type="linear"时不可用。
• gradientRadius:整型，渐变的半径。当android:type="radial"时需要设置该属性。
• centercolor:颜色类型，渐变的中间颜色。
• startColor:颜色类型，渐变的起始颜色。
• endColor:颜色类型，渐变的终止颜色。
• useLevel:布尔类型，设置为true为无渐变色、false为有渐变色。

【注：在实际开发中，形状图形主要使用3个节点: stroke(描边) 、corners(圆角）和solid(填充)。至于shape根节点的属性一般不用设置(默认矩形即可)】

绘制图形

主布局资源文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".DrawableShapeActivity">

    <View
        android:id="@+id/v_content"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:layout_margin="10dp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:id="@+id/btn_rect"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="圆角矩形背景" />

        <Button
            android:id="@+id/btn_oval"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="椭圆背景" />
    LinearLayout>
LinearLayout>
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

形状xml文件

• 圆角矩形

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    
    <solid android:color="#FF88C2" />
    
    <stroke
        android:width="1dp"
        android:color="#aaaaaa" />
    
    <corners android:radius="30dp" />
shape>
1
2
3
4
5
6
7
8
9
10
11

• 椭圆

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    
    <solid android:color="#FF8888" />
    
    <stroke
        android:width="1dp"
        android:color="#aaaaaa" />
shape>
1
2
3
4
5
6
7
8
9
10

主界面

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;

public class DrawableShapeActivity extends AppCompatActivity implements View.OnClickListener {

    private View v_content;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_drawable_shape);
        v_content = findViewById(R.id.v_content);
        //设置监听
        findViewById(R.id.btn_rect).setOnClickListener(this);
        findViewById(R.id.btn_oval).setOnClickListener(this);
        //v_content的背景设置为圆角矩形
        v_content.setBackgroundResource(R.drawable.shape_rect_gold);
        //v_content的背景设置为椭圆
        v_content.setBackgroundResource(R.drawable.shape_oval_rose);

    }

    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.btn_rect:
                v_content.setBackgroundResource(R.drawable.shape_rect_gold);
                break;
            case R.id.btn_oval:
                v_content.setBackgroundResource(R.drawable.shape_oval_rose);
                break;
        }
    }
}
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

实现效果

通过自定义视图设计控件与用户画面

自定义视图

在自定义视图里，可以利用android.graphics包中提供的图形绘制方法来绘制文本、图形与图像

使用自定义视图的基本步骤

1. 继承View类创建自定义视图（构造方法、绘制方法）
2. 在MainActivity里将自定义视图对象设置为用户界面

• 注：自定义视图也可以直接添加在布局文件中，作为用户界面的元素

自定义视图主要包括四个方面：

• 绘图
  画布（Canvas）
  画笔（Paint）
• 交互
  触摸（TouchEvent）
  动画（Animation）
• 性能
  ondraw()—考虑线程安全
  SurfaceView—副线程绘图【实现复杂的绘画，不会阻塞主线程】
• 封装
  尺寸（measure）
  属性（attributes）

带有清除键的文本框

绘制图形

指数函数和旋转矢量

• 线条
• 基本的圆形
• 笔画填充
• 画曲线路径
• 画文本
• 画笔颜色
• 画笔效果
• 动画

寻找目标

在屏幕上画了一个图标，取一个随机的位置放在屏幕上，随着手指的移动，只有一个小圆孔的填充颜色，实现类似于探照灯的效果，当遇到图片时就可以看到图片

• 路径的裁剪（clipPath）

点击屏幕【surfaseView中】

点击屏幕时出现泡泡图形