Android学习笔记第2章 Android应用的界面编程 2.1 界面编程与视图(View)组件 2.1.5 开发自定义View

不念不忘少年蓝@ 2024-03-26 21:03 53阅读 0赞

#### Android学习笔记 ####

#### 文章目录 ####

*   *   *  Android学习笔记
         *  第2章 Android应用的界面编程
         *   *  2.1 界面编程与视图(View)组件
             *   *  2.1.5 开发自定义View

> 疯狂Android讲义

#### 第2章 Android应用的界面编程 ####

##### 2.1 界面编程与视图(View)组件 #####

###### 2.1.5 开发自定义View ######

View它只是一个矩形的空白区域，View组件没有任何内容。对于Android应用的其他UI组件来说，它们都继承了View组件，然后在View组件提供的空白区域绘制外观。

基于Android UI组件的实现原理，开发者完全可以开发出项目定制的组件。当Android系统提供的UI组件不足以满足项目需要时，开发者可以通过继承Viw来派生自定义组件。

当开发者打算派生自己的UI组件时，首先要定义一个继承View基类的子类，然后重写View类的一个或多个方法。通常可以被用户重写的方法如下：

*  构造器：重写构造器是定制View的最基本方式，当Java或Kotlin代码创建一个View实例，或根据XML布局文件加载并构建界面时将，需要调用该构造器。
 *  onFinishInflate():这是一个回调方法，当应用从XML布局文件加载该组件并利用它来构建界面之后，该方法将会被回调。
 *  onMeasure(int,int):调用该方法来检测View组件及其所包含的所有子组件的大小。
 *  onLayout((boolean,int,int,int,int):当该组件需要分配其子组件的位置、大小时，该方法就会被回调。
 *  onSizeChanged(int,int,int,int):当该组件的大小被改变时回调该方法。
 *  onDraw(Canvas):当该组件将要绘制它的内容时回调该方法。
 *  onKeyDown(int,KeyEvent):当某个键被按下时触发该方法。
 *  onKeyUp(int,KeyEvent):当松开某个键时触发该方法。
 *  onTrackballEvent(MotionEvent):当发生轨迹球事件时触发该方法。
 *  onTouchEvent(MotionEvent):当发生触摸屏事件时触发该方法。
 *  onFocusChanged(boolean gainFocus,int direction,Rect previouslyFocusedRect):当该组件焦点发生改变时触发该方法。
 *  on WindowFocusChanged(boolean):当包含该组件的窗口失去或得到焦点时触发该方法。
 *  onAttachedTo Window0:当把该组件放入某个窗口中时触发该方法。
 *  onDetachedFromWindow():当把该组件从某个窗口中分离时触发该方法。
 *  on WindowVisibilityChanged(int):当包含该组件的窗口的可见性发生改变时触发该方法。

当需要开发自定义View时，开发者并不需要重写上面列出的所有方法，而是可以根据业务需要重写上面的部分方法。

例如，下面的实例程序就只重写了onDraw(Canvas)方法。

此外，如果要新建的自定义组件只是组合现有组件，不需要重新绘制所有组件内容，那么就更简单了一只要实现自定义组件的构造器，在自定义构造器中使用LayoutInflater加载布局文件即可。

【举个栗子】跟随手指的小球

为了实现一个跟随手指的小球，我们考虑开发自定义的UI组件，这个UI组件将会在指定位置绘制一个小球，这个位置可以动态改变。

当用户通过手指在屏幕上拖动时，程序监听到这个手指动作，把手指动作的位置传入自定义UI组件，并通知该组件重绘即可。下面是自定义组件的代码。

新建模块

![在这里插入图片描述][9139c9286b734bd5a1b04a983fe3595c.png_pic_center]

编写组件

package com.dingjiaxiong.customview;
    
    
    import android.content.Context;
    import android.graphics.Canvas;
    import android.graphics.Color;
    import android.graphics.Paint;
    import android.util.AttributeSet;
    import android.view.MotionEvent;
    import android.view.View;
    
    public class DrawView extends View {
        
    
        private float currentX = 40f;
        private float currentY = 50f;
        // 定义并创建画笔
        private Paint p = new Paint();
    
        public DrawView(Context context) {
        
            super(context);
        }
    
        public DrawView(Context context, AttributeSet set) {
        
            super(context, set);
        }
    
        @Override
        protected void onDraw(Canvas canvas) {
        
            super.onDraw(canvas);
            // 设置画笔颜色
            p.setColor(Color.RED);
            // 绘制一个小圆(作为小球)
            canvas.drawCircle(currentX, currentY, 15F, p);
        }
    
        // 为该组件的触碰事件重写事件处理方法
    
        @Override
        public boolean onTouchEvent(MotionEvent event) {
        
            // 修改currentX、currentY两个成员变量
            currentX = event.getX();
            currentY = event.getY();
    
            // 通知当前组件重绘自己
            invalidate();
            // 返回true表明该处理方法已经处理该事件
            return true;
        }
    }

![在这里插入图片描述][8e83ea1cb77e4a5b8502edebec8a54fc.png_pic_center]

上面的DrawView组件继承了View基类，并重写了onDraw方法，该方法负责在该组件的指定位置绘制一个小球。

除此之外，该组件还重写了onTouchEvent(MotionEvent event)方法，该方法用于处理该组件的触碰事件，当用户手指触碰该组件时将会触发该方法。

当手指在触摸屏上移动时，将会不断地触发触摸屏事件，事件监听器中负责触发事件的坐标将被传入DrawView组件，并通知该组件重绘一这样即可保证DrawView上的小球跟随手指移动。

有了这个自定义组件之后，接下来可以通过Java代码把该组件添加到指定容器中，这样就可以看到该组件的运行效果了。

布局文件

<?xml version="1.0" encoding="utf-8"?>
    
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/root"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context=".MainActivity">
    
    </LinearLayout>

下面是该应用的Activity类。

package com.dingjiaxiong.customview;
    
    import androidx.appcompat.app.AppCompatActivity;
    
    import android.os.Bundle;
    import android.widget.LinearLayout;
    
    public class MainActivity extends AppCompatActivity {
        
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
        
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            // 获取布局文件中的LinearLayout容器
            LinearLayout root = findViewById(R.id.root);
            // 创建DrawView组件
            DrawView draw = new DrawView(this);
            // 设置自定义组件的最小宽度、高度
            draw.setMinimumWidth(300);
            draw.setMinimumHeight(500);
    
            root.addView(draw);
        }
    }

运行效果

![在这里插入图片描述][42f43f937ce747c9bb6784b2cf4f83ea.gif_pic_center]

这是在Java代码中创建DrawView组件，再将其添加到LinearLayout 容器中的方式。

其实我们也可以完全在XML 布局文件中应用管理该组件。

![在这里插入图片描述][a678338df6ce4b77a4a352ea16a0d7c7.png_pic_center]

直接注释掉

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/root"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context=".MainActivity">
    
        <com.dingjiaxiong.customview.DrawView
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    
    </LinearLayout>

![在这里插入图片描述][4cd32eb1cd5649bd8437221cee120605.png_pic_center]

直接运行

![在这里插入图片描述][10b8c20e0cba42229f97ec7f6a2bd57f.gif_pic_center]

效果不变。

[9139c9286b734bd5a1b04a983fe3595c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/51ba5e8580af4bc09fb5b80e3970bf41.png
[8e83ea1cb77e4a5b8502edebec8a54fc.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/5dfd471b0f6b424ea7074ccfe1d7f3f1.png
[42f43f937ce747c9bb6784b2cf4f83ea.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/17890d717e7f40cc9efb2a7d05eb7382.png
[a678338df6ce4b77a4a352ea16a0d7c7.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/72a1867fbfb145b8bf5b95d373e39785.png
[4cd32eb1cd5649bd8437221cee120605.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/20383d295b5a4df292a1d6cee43d21cb.png
[10b8c20e0cba42229f97ec7f6a2bd57f.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/5f1e79e502e94ae5b93fbdc9143f9ee3.png