Android自定義圓形View實現(xiàn)小球跟隨手指移動效果
本文實例為大家分享了Android實現(xiàn)小球跟隨手指移動效果的具體代碼,供大家參考,具體內(nèi)容如下
一. 需求功能
手指在屏幕上滑動,紅色的小球始終跟隨手指移動。
實現(xiàn)的思路:
1)自定義View,在onDraw中畫圓作為小球;
2)重寫自定義View的onTouchEvent方法,記錄觸屏坐標,用新的坐標重新繪制小球;
3)在布局中引用自定義View布局,運行程序,實現(xiàn)跟隨手指移動效果。
關(guān)鍵技術(shù)點
自定義View應用、觸摸事件處理、canvas繪圖、Paint應用。
實現(xiàn)步驟
1. 新建一個工程,命名為BallViewDemo,Activity命名為BallActivity;
2. 創(chuàng)建自定義View類BallView,自定義屬性:ball_size;
新建attrs.xml文件,自定義屬性ball_size,可以在布局文件里設(shè)置小球的大小
3. 繼承View實現(xiàn)自定義View;
1)重寫自定義View的三個構(gòu)造方法
2)初始化自定義屬性
3)對自定義屬性對象做回收資源邏輯的處理
4. 實現(xiàn)onDraw()方法;
1) 用canvas將屏幕設(shè)為白色
2) 設(shè)置畫筆顏色為紅色
3) 繪制小圓作為小球,半徑通過自定義屬性設(shè)置
5. 實現(xiàn)onTouchEvent方法,處理觸摸事件;
1) 實現(xiàn)MotionEvent.ACTION_DOWN,記錄按下的x,y坐標
2) 實現(xiàn)MotionEvent.ACTION_MOVE 記錄移動的x,y坐標
3) 實現(xiàn)MotionEvent.ACTION_UP 記錄抬起的x,y坐標
4)使用 postInvalidate()方法實現(xiàn)重繪小球,跟隨手指移動
二. 效果圖
三. 功能代碼
第一種實現(xiàn)效果方式: 自定義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代碼創(chuàng)建時調(diào)用 * @param context */ public BallView(Context context) { super(context); this.context = context; } /** * xml創(chuàng)建時調(diào)用 * @param context * @param attrs */ public BallView(Context context, AttributeSet attrs) { super(context, attrs); this.context = context; } /** * 有style資源文件時調(diào)用 * @param context * @param attrs * @param defStyleAttr */ public BallView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); this.context = context; } /** * 實現(xiàn)onDraw()方法實現(xiàn)繪圖操作 * @param canvas */ @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); //用canvas將屏幕設(shè)為白色 canvas.drawColor(Color.WHITE); //設(shè)置畫筆顏色為紅色 paint = new Paint(); paint.setColor(Color.RED); //設(shè)置消除鋸齒 paint.setAntiAlias(true); //使用畫筆繪制圓為小球 //x :圓心的x坐標 //y :圓心的y坐標 //radius :圓的半徑 //paint :畫筆 canvas.drawCircle(x,y,radius, paint); } //實現(xiàn)onTouchEvent方法,處理觸摸事件 @Override public boolean onTouchEvent(MotionEvent event) { //判斷觸摸點 switch (event.getAction()) { //實現(xiàn)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()); //實現(xiàn)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()); //實現(xiàn)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方法實現(xiàn)界面刷新,但是Invalidate不能直接在線程中調(diào)用,因為他是違背了單線程模型: 1. Android UI操作并不是線程安全的,并且這些操作必須在UI線程中調(diào)用。 invalidate()是用來刷新View的,必須是在UI線程中進行工作。比如在修改某個view的顯示時,調(diào)用invalidate()才能看到重新繪制的界面。invalidate()的調(diào)用是把之前的舊的view從主UI線程隊列中pop掉。 2.Android 程序默認情況下也只有一個進程,但一個進程下卻可以有許多個線程。在這么多線程當中,把主要是負責控 制UI界面的顯示、更新和控件交互的線程稱為UI線程,由于onCreate()方法是由UI線程執(zhí)行的,所以也可以把UI線程理解 為主線程。其余的線程可以理解為工作者線程。invalidate()得在UI線程中被調(diào)動,在工作者線程中可以通過Handler來通 知UI線程進行界面更新。而postInvalidate()在工作者線程中被調(diào)用。 */ //使用 postInvalidate()方法實現(xiàn)重繪小球,跟隨手指移動 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>
第二種實現(xiàn)效果方式: 功能代碼中引用自定義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); } }
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android懸浮對話框(即點即關(guān)對話框)實現(xiàn)代碼
本文給大家介紹android懸浮對話框和即點即關(guān)閉對話框,本文介紹非常詳細,具有參考借鑒價值,感興趣的朋友一起學習吧2016-03-03Android 優(yōu)化之存儲優(yōu)化的實現(xiàn)
這篇文章主要介紹了Android 優(yōu)化之存儲優(yōu)化的實現(xiàn),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-07-07Android自定義View實現(xiàn)圓弧進度效果逐步完成過程
在Android開發(fā)中,通過自定義View實現(xiàn)自己想要的效果是作為android開發(fā)程序員的一項必備技能,自定義View對于android開發(fā)來說也是比較難的一項技術(shù)2023-04-04Android開發(fā)實現(xiàn)自動切換文字TextSwitcher功能示例
這篇文章主要介紹了Android開發(fā)實現(xiàn)自動切換文字TextSwitcher功能,結(jié)合實例形式詳細分析了Android使用TextSwitcher實現(xiàn)文字自動切換的原理、實現(xiàn)方法及相關(guān)操作注意事項,需要的朋友可以參考下2019-03-03Ubuntu下android adb環(huán)境變量配置方法
這篇文章主要介紹了Ubuntu下android adb環(huán)境變量配置方法,本文給出了操作步驟,按步驟操作即可,需要的朋友可以參考下2015-04-04