Android如何自定義圓形View實現小球跟隨手指移動效果

小編給大家分享一下Android如何自定義圓形View實現小球跟隨手指移動效果，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

本文實例為大家分享了Android實現小球跟隨手指移動效果的具體代碼，供大家參考，具體內容如下

一. 需求功能

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

實現的思路：

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);
 }
}

以上是“Android如何自定義圓形View實現小球跟隨手指移動效果”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！