自定義圓形View：實現跟隨手指移動的小球

Dewey-W發表於2017-11-03
View

一. 需求功能：

手指在螢幕上滑動，紅色的小球始終跟隨手指移動。

實現的思路：

1）自定義View，在onDraw中畫圓作為小球；

2）重寫自定義View的onTouchEvent方法，記錄觸屏座標，用新的座標重新繪製小球；

3）在佈局中引用自定義View佈局，執行程式，實現跟隨手指移動效果。

關鍵技術點：

自定義View應用、觸控事件處理、canvas繪圖、Paint應用。

 

實現步驟：

1. 新建一個工程，命名為BallViewDemo，Activity命名為BallActivity；

2. 建立自定義View類BallView，自定義屬性：ball_size；

新建attrs.xml檔案，自定義屬性ball_size，可以在佈局檔案裡設定小球的大小

3. 繼承View實現自定義View；

1）重寫自定義View的三個構造方法

2）初始化自定義屬性

3）對自定義屬性物件做回收資源邏輯的處理

4. 實現onDraw()方法；

1） 用canvas將螢幕設為白色

2） 設定畫筆顏色為紅色

3） 繪製小圓作為小球，半徑通過自定義屬性設定

5. 實現onTouchEvent方法，處理觸控事件；

1） 實現MotionEvent.ACTION_DOWN，記錄按下的x，y坐標

2） 實現MotionEvent.ACTION_MOVE 記錄移動的x，y座標

3） 實現MotionEvent.ACTION_UP 記錄抬起的x，y座標

4）使用 postInvalidate()方法實現重繪小球，跟隨手指移動


二. 效果圖：


三. 功能程式碼：

第一種實現效果方式： 自定義View類BallView配合xml檔案

package com.bwie.BallViewDemo.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;
import android.view.WindowManager;

/**
 * 自定義圓形小球view：手指在螢幕上滑動，紅色的小球始終跟隨手指移動。
 */
public class BallView extends View{
    private Paint paint;
    Context context;

    //圓的初始位置座標
    private int x = 18;
    private int y = 18;
    private int radius = 188;    //圓半徑

    /**
     * java程式碼建立時呼叫
     * @param context
     */
    public BallView(Context context) {
        super(context);
        this.context = context;
    }

    /**
     * xml建立時呼叫
     * @param context
     * @param attrs
     */
    public BallView(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.context = context;
    }

    /**
     * 有style資原始檔時呼叫
     * @param context
     * @param attrs
     * @param defStyleAttr
     */
    public BallView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.context = context;
    }

    /**
     * 實現onDraw()方法實現繪圖操作
     * @param canvas
     */
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        //用canvas將螢幕設為白色
        canvas.drawColor(Color.WHITE);

        //設定畫筆顏色為紅色
        paint = new Paint();
        paint.setColor(Color.RED);

        //設定消除鋸齒
        paint.setAntiAlias(true);
        //使用畫筆繪製圓為小球
        //x :圓心的x座標
        //y :圓心的y座標
        //radius ：圓的半徑
        //paint ：畫筆
        canvas.drawCircle(x,y,radius, paint);
    }

    //實現onTouchEvent方法，處理觸控事件
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        //判斷觸控點
        switch (event.getAction()) {
            //實現MotionEvent.ACTION_DOWN，記錄按下的x，y座標：getRawX()和getRawY()獲得的是相對螢幕的位置
            case MotionEvent.ACTION_DOWN:
                x = (int) event.getX();
                y = (int) event.getY();
                System.out.println("按下時：  " + "x座標：" + event.getRawX() + "     " + "y座標：" + event.getRawY());

                //實現MotionEvent.ACTION_MOVE 記錄移動的x，y座標：getRawX()和getRawY()獲得的是相對螢幕的位置
            case MotionEvent.ACTION_MOVE:
                x = (int) event.getX();
                y = (int) event.getY();
                System.out.println("移動時：  " + "x座標：" + event.getRawX() + "     " + "y座標：" + event.getRawY());

                //實現MotionEvent.ACTION_UP 記錄抬起的x，y座標
            case MotionEvent.ACTION_UP:
                // 獲取當前觸控點的x,y座標，為X軸和Y軸座標重新賦值：getX()和getY()獲得的永遠是view的觸控位置座標
                x = (int) event.getX();
                y = (int) event.getY();
                System.out.println("抬起時：  " + "x座標：" + event.getRawX() + "     " + "y座標：" + event.getRawY());
                break;
        }

        //獲取螢幕寬高
        WindowManager manager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
        int width = manager.getDefaultDisplay().getWidth();
        int height = manager.getDefaultDisplay().getHeight();

        //修正圓點座標，重新繪製圓 ,控制小球不會被移出螢幕
        if (x >= 18 && y >= 18 && x <= width - 18 && y <= height - 18) {
            /**
             *  Android提供了Invalidate方法實現介面重新整理，但是Invalidate不能直接線上程中呼叫，因為他是違背了單執行緒模型：
             1. Android UI操作並不是執行緒安全的，並且這些操作必須在UI執行緒中呼叫。
             　　 invalidate()是用來重新整理View的，必須是在UI執行緒中進行工作。比如在修改某個view的顯示時，呼叫invalidate()才能看到重新繪製的介面。invalidate()的呼叫是把之前的舊的view從主UI執行緒佇列中pop掉。
             2.Android 程式預設情況下也只有一個程式，但一個程式下卻可以有許多個執行緒。在這麼多執行緒當中，把主要是負責控
             制UI介面的顯示、更新和控制元件互動的執行緒稱為UI執行緒，由於onCreate()方法是由UI執行緒執行的，所以也可以把UI執行緒理解
             為主執行緒。其餘的執行緒可以理解為工作者執行緒。invalidate()得在UI執行緒中被調動，在工作者執行緒中可以通過Handler來通
             知UI執行緒進行介面更新。而postInvalidate()在工作者執行緒中被呼叫。
             */
            //使用 postInvalidate()方法實現重繪小球，跟隨手指移動
            postInvalidate();
        }
        /*
         * 備註：此處一定要將return super.onTouchEvent(event)修改為return true，原因是：
         * 1）父類的onTouchEvent(event)方法可能沒有做任何處理，但是返回了false。
         * 2)一旦返回false，在該方法中再也不會收到MotionEvent.ACTION_MOVE及MotionEvent.ACTION_UP事件。
         */
        //return super.onTouchEvent(event);
        return true;
    }
}

xml檔案

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/relativeLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <!--    引用自定義控制元件，第一種：xml中引用-->
            <!-- 自定義控制元件的全類名 -->
    <com.bwie.BallViewDemo.customView.BallView
        android:id="@+id/ball"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</RelativeLayout>


第二種實現效果方式： 功能程式碼中引用自定義View類BallView

package com.bwie.BallViewDemo;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.RelativeLayout;
import com.bwie.BallViewDemo.customView.BallView;

/*  引用自定義控制元件，第二種：程式碼中引用   */
public class BallActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //獲取容器
        RelativeLayout container  = (RelativeLayout) findViewById(R.id.relativeLayout);

        //引用自定義控制元件
        BallView ballView = new BallView(this);

        //新增到容器
        container.addView(ballView);
    }
}


相關文章