Android自定義圓形View實(shí)現(xiàn)小球跟隨手指移動(dòng)效果(詳細(xì)介紹)

一. 需求功能

手指在屏幕上滑動(dòng),紅色的小球始終跟隨手指移動(dòng)。

實(shí)現(xiàn)的思路:

1)自定義View,在onDraw中畫圓作為小球;

2)重寫自定義View的onTouchEvent方法,記錄觸屏坐標(biāo),用新的坐標(biāo)重新繪制小球;

3)在布局中引用自定義View布局,運(yùn)行程序,實(shí)現(xiàn)跟隨手指移動(dòng)效果。

關(guān)鍵技術(shù)點(diǎn)

自定義View應(yīng)用、觸摸事件處理、canvas繪圖、Paint應(yīng)用。


實(shí)現(xiàn)步驟

1. 新建一個(gè)工程,命名為BallViewDemo,Activity命名為BallActivity;

2. 創(chuàng)建自定義View類BallView,自定義屬性:ball_size;

新建attrs.xml文件,自定義屬性ball_size,可以在布局文件里設(shè)置小球的大小

3. 繼承View實(shí)現(xiàn)自定義View;

1)重寫自定義View的三個(gè)構(gòu)造方法

2)初始化自定義屬性

3)對(duì)自定義屬性對(duì)象做回收資源邏輯的處理

4. 實(shí)現(xiàn)onDraw()方法;

1) 用canvas將屏幕設(shè)為白色

2) 設(shè)置畫筆顏色為紅色

3) 繪制小圓作為小球,半徑通過(guò)自定義屬性設(shè)置

5. 實(shí)現(xiàn)onTouchEvent方法,處理觸摸事件;

1) 實(shí)現(xiàn)MotionEvent.ACTION_DOWN,記錄按下的x,y坐標(biāo)

2) 實(shí)現(xiàn)MotionEvent.ACTION_MOVE 記錄移動(dòng)的x,y坐標(biāo)

3) 實(shí)現(xiàn)MotionEvent.ACTION_UP 記錄抬起的x,y坐標(biāo)

4)使用 postInvalidate()方法實(shí)現(xiàn)重繪小球,跟隨手指移動(dòng)

三. 功能代碼

第一種實(shí)現(xiàn)效果方式: 自定義View類BallView配合xml文件

pckagecom.bwie.BallViewDemo.customView;

importandroid.content.Context;

importandroid.graphics.Canvas;

importandroid.graphics.Color;

importandroid.graphics.Paint;

importandroid.util.AttributeSet;

importandroid.view.MotionEvent;

importandroid.view.View;

importandroid.view.WindowManager;


/**

?* 自定義圓形小球view:手指在屏幕上滑動(dòng),紅色的小球始終跟隨手指移動(dòng)。

?*/

publicclassBallView extendsView{

?privatePaint paint;

?Context context;


?//圓的初始位置坐標(biāo)

?privateintx = 18;

?privateinty = 18;

?privateintradius = 188; //圓半徑


?/**

??* java代碼創(chuàng)建時(shí)調(diào)用

??* @param context

??*/

?publicBallView(Context context) {

??super(context);

??this.context = context;

?}


?/**

??* xml創(chuàng)建時(shí)調(diào)用

??* @param context

??* @param attrs

??*/

?publicBallView(Context context, AttributeSet attrs) {

??super(context, attrs);

??this.context = context;

?}


?/**

??* 有style資源文件時(shí)調(diào)用

??* @param context

??* @param attrs

??* @param defStyleAttr

??*/

?publicBallView(Context context, AttributeSet attrs, intdefStyleAttr) {

??super(context, attrs, defStyleAttr);

??this.context = context;

?}


?/**

??* 實(shí)現(xiàn)onDraw()方法實(shí)現(xiàn)繪圖操作

??* @param canvas

??*/

?@Override

?protectedvoidonDraw(Canvas canvas) {

??super.onDraw(canvas);


??//用canvas將屏幕設(shè)為白色

??canvas.drawColor(Color.WHITE);


??//設(shè)置畫筆顏色為紅色

??paint = newPaint();

??paint.setColor(Color.RED);


??//設(shè)置消除鋸齒

??paint.setAntiAlias(true);

??//使用畫筆繪制圓為小球

??//x :圓心的x坐標(biāo)

??//y :圓心的y坐標(biāo)

??//radius :圓的半徑

??//paint :畫筆

??canvas.drawCircle(x,y,radius, paint);

?}


?//實(shí)現(xiàn)onTouchEvent方法,處理觸摸事件

?@Override

?publicbooleanonTouchEvent(MotionEvent event) {

??//判斷觸摸點(diǎn)

??switch(event.getAction()) {

???//實(shí)現(xiàn)MotionEvent.ACTION_DOWN,記錄按下的x,y坐標(biāo):getRawX()和getRawY()獲得的是相對(duì)屏幕的位置

???caseMotionEvent.ACTION_DOWN:

????x = (int) event.getX();

????y = (int) event.getY();

????System.out.println("按下時(shí): "+ "x坐標(biāo):"+ event.getRawX() + "? "+ "y坐標(biāo):"+ event.getRawY());


????//實(shí)現(xiàn)MotionEvent.ACTION_MOVE 記錄移動(dòng)的x,y坐標(biāo):getRawX()和getRawY()獲得的是相對(duì)屏幕的位置

???caseMotionEvent.ACTION_MOVE:

????x = (int) event.getX();

????y = (int) event.getY();

????System.out.println("移動(dòng)時(shí): "+ "x坐標(biāo):"+ event.getRawX() + "? "+ "y坐標(biāo):"+ event.getRawY());


????//實(shí)現(xiàn)MotionEvent.ACTION_UP 記錄抬起的x,y坐標(biāo)

???caseMotionEvent.ACTION_UP:

????// 獲取當(dāng)前觸摸點(diǎn)的x,y坐標(biāo),為X軸和Y軸坐標(biāo)重新賦值:getX()和getY()獲得的永遠(yuǎn)是view的觸摸位置坐標(biāo)

????x = (int) event.getX();

????y = (int) event.getY();

????System.out.println("抬起時(shí): "+ "x坐標(biāo):"+ event.getRawX() + "? "+ "y坐標(biāo):"+ event.getRawY());

????break;

??}


??//獲取屏幕寬高

??WindowManager manager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);

??intwidth = manager.getDefaultDisplay().getWidth();

??intheight = manager.getDefaultDisplay().getHeight();


??//修正圓點(diǎn)坐標(biāo),重新繪制圓 ,控制小球不會(huì)被移出屏幕

??if(x >= 18&& y >= 18&& x <= width - 18&& y <= height - 18) {

???/**

????* Android提供了Invalidate方法實(shí)現(xiàn)界面刷新,但是Invalidate不能直接在線程中調(diào)用,因?yàn)樗沁`背了單線程模型:

????1. Android UI操作并不是線程安全的,并且這些操作必須在UI線程中調(diào)用。

????   invalidate()是用來(lái)刷新View的,必須是在UI線程中進(jìn)行工作。比如在修改某個(gè)view的顯示時(shí),調(diào)用invalidate()才能看到重新繪制的界面。invalidate()的調(diào)用是把之前的舊的view從主UI線程隊(duì)列中pop掉。

????2.Android 程序默認(rèn)情況下也只有一個(gè)進(jìn)程,但一個(gè)進(jìn)程下卻可以有許多個(gè)線程。在這么多線程當(dāng)中,把主要是負(fù)責(zé)控

????制UI界面的顯示、更新和控件交互的線程稱為UI線程,由于onCreate()方法是由UI線程執(zhí)行的,所以也可以把UI線程理解

????為主線程。其余的線程可以理解為工作者線程。invalidate()得在UI線程中被調(diào)動(dòng),在工作者線程中可以通過(guò)Handler來(lái)通

????知UI線程進(jìn)行界面更新。而postInvalidate()在工作者線程中被調(diào)用。

????*/

???//使用 postInvalidate()方法實(shí)現(xiàn)重繪小球,跟隨手指移動(dòng)

???postInvalidate();

??}

??/*

???* 備注:此處一定要將return super.onTouchEvent(event)修改為return true,原因是:

???* 1)父類的onTouchEvent(event)方法可能沒(méi)有做任何處理,但是返回了false。

???* 2)一旦返回false,在該方法中再也不會(huì)收到MotionEvent.ACTION_MOVE及MotionEvent.ACTION_UP事件。

???*/

??//return super.onTouchEvent(event);

??returntrue;

?}

}

xml文件

<?xmlversion="1.0"encoding="utf-8"?>

<RelativeLayoutxmlns: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>

第二種實(shí)現(xiàn)效果方式: 功能代碼中引用自定義View類BallView

packagecom.bwie.BallViewDemo;

importandroid.support.v7.app.AppCompatActivity;

importandroid.os.Bundle;

importandroid.widget.RelativeLayout;

importcom.bwie.BallViewDemo.customView.BallView;


/* 引用自定義控件,第二種:代碼中引用 */

publicclassBallActivity extendsAppCompatActivity {

?@Override

?protectedvoidonCreate(Bundle savedInstanceState) {

??super.onCreate(savedInstanceState);

??setContentView(R.layout.activity_main);

? //獲取容器

??RelativeLayout container = (RelativeLayout) findViewById(R.id.relativeLayout);

//引用自定義控件

??BallView ballView = newBallView(this);

? //添加到容器

??container.addView(ballView);

?}

}

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容