Android自定义带有圆形进度条的可长按控件功能
这几天有在学习Jetpack中CameraX的内容,在拍摄视频的时候想着做一个自定义带有进度条的可长按控件,用来显示拍摄进度,故记录下来与大家分享!效果如下:
(篇幅过长是因为有代码解析过程,可直接到最后查看完整代码)
这个控件较为简易,从效果中可以看出,控件模拟了单击拍照,长按可以录制视频的功能,中途松手或者时间到都可以停止录制
思路很简单,使用简单的画笔工具就可以完成这个控件
- 继承自View
- 定义自定义属性并获取
- 定义填充样式的画笔
- onMeasure中测量大小,onDraw中绘制圆与扇形
- 监听长按监听开始定时器并刷新画布,监听触摸事件进行结束的回调
以上就是全部的思路了,代码拆解如下:
(一)继承自View并实现构造方法,代码如下:
public class LongClickView extends View { public int DEFAULT_MAX_SECONDS = 15; public int DEFAULT_ANNULUS_WIDTH = 5; public int DEFAULT_ANNULUS_COLOR; public int DEFAULT_RATE = 50; private Paint mSmallCirclePaint; private Paint mMiddenCirclePaint; private Paint mBigCirclePaint; private Paint mAngleCirclePaint; private int mWidthSize; private Timer mTimer;//计时器 private AtomicInteger mCount = new AtomicInteger(0); private MyClickListener mMyClickListener; private boolean mIsFinish = true; private long mStartTime;//点击的时间 private long mEndTime;//点击结束的时间 private int mMaxSeconds; private int mDelayMilliseconds; private int mAnnulusColor; private float mAnnulusWidth; public interface MyClickListener { void longClickFinish();//长按结束 void singleClickFinish();//单击结束 } public void setMyClickListener(MyClickListener myClickListener) { mMyClickListener = myClickListener; } public LongClickView(Context context) { this(context, null); } public LongClickView(Context context, @Nullable AttributeSet attrs) { this(context, attrs, 0); } public LongClickView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); getAttrs(context, attrs); initView(); } }
(二)定义并获取自定义属性,属性以及获取属性代码如下:
attr_long_click_view.xml
<?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="LongClickView"> <attr name="maxSeconds" format="integer" /> <attr name="annulusWidth" format="integer" /> <attr name="annulusColor" format="color" /> <attr name="delayMilliseconds" format="integer" /> </declare-styleable> </resources>
private void getAttrs(Context context, @Nullable AttributeSet attrs) { TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.LongClickView); //maxSeconds 最大的秒数 mMaxSeconds = typedArray.getInt(R.styleable.LongClickView_maxSeconds, DEFAULT_MAX_SECONDS); //annulusWidth 圆环的宽度 mAnnulusWidth = typedArray.getInt(R.styleable.LongClickView_annulusWidth, DEFAULT_ANNULUS_WIDTH); //annulusColor 圆环的颜色 DEFAULT_ANNULUS_COLOR = context.getResources().getColor(R.color.color_grey); mAnnulusColor = typedArray.getColor(R.styleable.LongClickView_annulusColor, DEFAULT_ANNULUS_COLOR); //delayMilliseconds 进度条隔多少时间走一次,值越小走的越快,显得更流畅 mDelayMilliseconds = typedArray.getInt(R.styleable.LongClickView_delayMilliseconds, DEFAULT_RATE); }
(三)定义画笔工具 的代码如下:
private void initView() { mBigCirclePaint = new Paint(); mSmallCirclePaint = new Paint(); mMiddenCirclePaint = new Paint(); mAngleCirclePaint = new Paint(); mBigCirclePaint.setStyle(Paint.Style.FILL); mBigCirclePaint.setColor(Color.LTGRAY); mBigCirclePaint.setAntiAlias(true); mBigCirclePaint.setStrokeWidth(5); mSmallCirclePaint.setStrokeWidth(5); mSmallCirclePaint.setAntiAlias(true); mSmallCirclePaint.setColor(Color.WHITE); mSmallCirclePaint.setStyle(Paint.Style.FILL); mMiddenCirclePaint.setStrokeWidth(5); mMiddenCirclePaint.setAntiAlias(true); mMiddenCirclePaint.setColor(Color.LTGRAY); mMiddenCirclePaint.setStyle(Paint.Style.FILL); mAngleCirclePaint.setStrokeWidth(5); mAngleCirclePaint.setAntiAlias(true); mAngleCirclePaint.setColor(mAnnulusColor); mAngleCirclePaint.setStyle(Paint.Style.FILL); ...//这里是长按监听 }
(四)onMeasure中测量大小,onDraw中绘制圆与扇形,代码如下:
onMeasure中,如果没有定义实际宽高就会使用父组件的宽高,如果有实际宽高便会使用自己的宽高
@Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); mWidthSize = MeasureSpec.getSize(widthMeasureSpec); setMeasuredDimension(mWidthSize, mWidthSize); }
onDraw中,一共有三层圆形填充绘制以及一层扇形填充绘制,先绘制最外层的灰色圆形,再根据此时的进度绘制一定角度的扇形,然后覆盖一层灰色的圆形,最后在覆盖上一层白色的中心圆,并且在绘制过程以及绘制结束时的中心圆半径不同。代码如下:
@Override protected void onDraw(Canvas canvas) { canvas.drawCircle(mWidthSize / 2, mWidthSize / 2, mWidthSize / 2, mBigCirclePaint);//最外层的填充圆 RectF rectF = new RectF(0, 0, mWidthSize, mWidthSize);//进度扇形 if (mCount.get() > 0) { //求出每一次定时器执行所绘制的扇形度数 float perAngle = 360f / mMaxSeconds / (1000f / mDelayMilliseconds); canvas.drawArc(rectF, 0, perAngle * mCount.get(), true, mAngleCirclePaint); } canvas.drawCircle(mWidthSize / 2, mWidthSize / 2, mWidthSize / 2 - mAnnulusWidth, mMiddenCirclePaint);//中间一层灰色的圆 //最后绘制中心圆 if (mIsFinish) { canvas.drawCircle(mWidthSize / 2, mWidthSize / 2, mWidthSize / 2 - mAnnulusWidth, mSmallCirclePaint); } else { canvas.drawCircle(mWidthSize / 2, mWidthSize / 2, mWidthSize / 8, mSmallCirclePaint); } super.onDraw(canvas); }
(五)监听长按监听开始定时器并刷新画布,监听触摸事件进行结束的回调,定时器使用的是Timer类,当时间超过自定义的最大秒数时就会自动停止,并定时刷新画布,代码如下:
this.setOnLongClickListener(new OnLongClickListener() { @Override public boolean onLongClick(View v) { mIsFinish = false; mCount.set(0); mTimer = new Timer(); mTimer.schedule(new TimerTask() { @Override public void run() { mCount.addAndGet(1); invalidate(); if (mCount.get() * mDelayMilliseconds >= mMaxSeconds * 1000) { mCount.set(0); this.cancel(); invalidate(); mIsFinish = true; if (mMyClickListener != null) { mMyClickListener.longClickFinish(); } } } }, 0, mDelayMilliseconds); return true; } });
@Override public boolean onTouchEvent(MotionEvent event) { if (event.getAction() == MotionEvent.ACTION_UP) { mEndTime = System.currentTimeMillis(); new MyAsyncTask().execute(); } else if (event.getAction() == MotionEvent.ACTION_DOWN) { mStartTime = System.currentTimeMillis(); } return super.onTouchEvent(event); }
将定时器停止与停止后的判断逻辑放在AsyncTask中编写,确保定时器不会继续处理逻辑之后再做判断
public class MyAsyncTask extends AsyncTask<Void, Void, Void> { @Override protected Void doInBackground(Void... voids) { if (mTimer != null) { mTimer.cancel(); } return null; } @Override protected void onPostExecute(Void aVoid) { //使用时间戳的差来判断是单击或者长按 if (mEndTime - mStartTime > 1000) { //防止在自动结束后松开手指又重新调用了一次长按结束的回调 if (!mIsFinish) { if (mMyClickListener != null) { mMyClickListener.longClickFinish(); } } } else { //若是单击就清除进度条 mCount.set(0); invalidate(); if (mMyClickListener != null) { mMyClickListener.singleClickFinish(); } } mIsFinish = true; } }
结束后的回调类代码如下:
public interface MyClickListener { void longClickFinish();//长按结束 void singleClickFinish();//单击结束 }
最后,完整的代码如下,自定义属性上方有贴出来代码:
public class LongClickView extends View { public int DEFAULT_MAX_SECONDS = 15; public int DEFAULT_ANNULUS_WIDTH = 5; public int DEFAULT_ANNULUS_COLOR; public int DEFAULT_RATE = 50; private Paint mSmallCirclePaint; private Paint mMiddenCirclePaint; private Paint mBigCirclePaint; private Paint mAngleCirclePaint; private int mWidthSize; private Timer mTimer;//计时器 private AtomicInteger mCount = new AtomicInteger(0); private MyClickListener mMyClickListener; private boolean mIsFinish = true; private long mStartTime;//点击的时间 private long mEndTime;//点击结束的时间 private int mMaxSeconds; private int mDelayMilliseconds; private int mAnnulusColor; private float mAnnulusWidth; public interface MyClickListener { void longClickFinish();//长按结束 void singleClickFinish();//单击结束 } public void setMyClickListener(MyClickListener myClickListener) { mMyClickListener = myClickListener; } public LongClickView(Context context) { this(context, null); } public LongClickView(Context context, @Nullable AttributeSet attrs) { this(context, attrs, 0); } public LongClickView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); getAttrs(context, attrs); initView(); } private void getAttrs(Context context, @Nullable AttributeSet attrs) { TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.LongClickView); //maxSeconds 最大的秒数 mMaxSeconds = typedArray.getInt(R.styleable.LongClickView_maxSeconds, DEFAULT_MAX_SECONDS); //annulusWidth 圆环的宽度 mAnnulusWidth = typedArray.getInt(R.styleable.LongClickView_annulusWidth, DEFAULT_ANNULUS_WIDTH); //annulusColor 圆环的颜色 DEFAULT_ANNULUS_COLOR = context.getResources().getColor(R.color.color_grey); mAnnulusColor = typedArray.getColor(R.styleable.LongClickView_annulusColor, DEFAULT_ANNULUS_COLOR); //delayMilliseconds 进度条隔多少时间走一次,值越小走的越快,显得更流畅 mDelayMilliseconds = typedArray.getInt(R.styleable.LongClickView_delayMilliseconds, DEFAULT_RATE); } private static final String TAG = "LongClickView"; private void initView() { mBigCirclePaint = new Paint(); mSmallCirclePaint = new Paint(); mMiddenCirclePaint = new Paint(); mAngleCirclePaint = new Paint(); mBigCirclePaint.setStyle(Paint.Style.FILL); mBigCirclePaint.setColor(Color.LTGRAY); mBigCirclePaint.setAntiAlias(true); mBigCirclePaint.setStrokeWidth(5); mSmallCirclePaint.setStrokeWidth(5); mSmallCirclePaint.setAntiAlias(true); mSmallCirclePaint.setColor(Color.WHITE); mSmallCirclePaint.setStyle(Paint.Style.FILL); mMiddenCirclePaint.setStrokeWidth(5); mMiddenCirclePaint.setAntiAlias(true); mMiddenCirclePaint.setColor(Color.LTGRAY); mMiddenCirclePaint.setStyle(Paint.Style.FILL); mAngleCirclePaint.setStrokeWidth(5); mAngleCirclePaint.setAntiAlias(true); mAngleCirclePaint.setColor(mAnnulusColor); mAngleCirclePaint.setStyle(Paint.Style.FILL); this.setOnLongClickListener(new OnLongClickListener() { @Override public boolean onLongClick(View v) { mIsFinish = false; mCount.set(0); mTimer = new Timer(); mTimer.schedule(new TimerTask() { @Override public void run() { mCount.addAndGet(1); invalidate(); if (mCount.get() * mDelayMilliseconds >= mMaxSeconds * 1000) { mCount.set(0); this.cancel(); invalidate(); mIsFinish = true; if (mMyClickListener != null) { mMyClickListener.longClickFinish(); } } } }, 0, mDelayMilliseconds); return true; } }); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); mWidthSize = MeasureSpec.getSize(widthMeasureSpec); setMeasuredDimension(mWidthSize, mWidthSize); } @Override protected void onDraw(Canvas canvas) { canvas.drawCircle(mWidthSize / 2, mWidthSize / 2, mWidthSize / 2, mBigCirclePaint);//最外层的填充圆 RectF rectF = new RectF(0, 0, mWidthSize, mWidthSize);//进度扇形 if (mCount.get() > 0) { //求出每一次定时器执行所绘制的扇形度数 float perAngle = 360f / mMaxSeconds / (1000f / mDelayMilliseconds); canvas.drawArc(rectF, 0, perAngle * mCount.get(), true, mAngleCirclePaint); } canvas.drawCircle(mWidthSize / 2, mWidthSize / 2, mWidthSize / 2 - mAnnulusWidth, mMiddenCirclePaint);//中间一层灰色的圆 //最后绘制中心圆 if (mIsFinish) { canvas.drawCircle(mWidthSize / 2, mWidthSize / 2, mWidthSize / 2 - mAnnulusWidth, mSmallCirclePaint); } else { canvas.drawCircle(mWidthSize / 2, mWidthSize / 2, mWidthSize / 8, mSmallCirclePaint); } super.onDraw(canvas); } @Override public boolean onTouchEvent(MotionEvent event) { if (event.getAction() == MotionEvent.ACTION_UP) { mEndTime = System.currentTimeMillis(); new MyAsyncTask().execute(); } else if (event.getAction() == MotionEvent.ACTION_DOWN) { mStartTime = System.currentTimeMillis(); } return super.onTouchEvent(event); } public class MyAsyncTask extends AsyncTask<Void, Void, Void> { @Override protected Void doInBackground(Void... voids) { if (mTimer != null) { mTimer.cancel(); } return null; } @Override protected void onPostExecute(Void aVoid) { //使用时间戳的差来判断是单击或者长按 if (mEndTime - mStartTime > 1000) { //防止在结束后松开手指有重新调用了一次长按结束的回调 if (!mIsFinish) { if (mMyClickListener != null) { mMyClickListener.longClickFinish(); } } } else { mCount.set(0); invalidate(); if (mMyClickListener != null) { mMyClickListener.singleClickFinish(); } } mIsFinish = true; } } }
使用的代码如下:
activity_long_click_view.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:orientation="vertical"> <com.example.customerview.long_click_view.LongClickView android:id="@+id/long_click_view" android:layout_width="100dp" android:layout_height="wrap_content" app:annulusColor="@color/color_2196F3" app:annulusWidth="20" app:delayMilliseconds="40" app:maxSeconds="4" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="20dp" android:text="长按录制视频,单击拍照" android:textColor="@color/colorBlack" android:textSize="20dp" /> </LinearLayout>
LongClickViewActivity.java
mLongClickView.setMyClickListener(new LongClickView.MyClickListener() { @Override public void longClickFinish() { runOnUiThread(new Runnable() { @Override public void run() { Toast.makeText(LongClickViewActivity.this, "长按结束", Toast.LENGTH_SHORT).show(); } }); } @Override public void singleClickFinish() { runOnUiThread(new Runnable() { @Override public void run() { Toast.makeText(LongClickViewActivity.this, "单击结束", Toast.LENGTH_SHORT).show(); } }); } });
到此这篇关于Android自定义带有圆形进度条的可长按控件功能的文章就介绍到这了,更多相关Android圆形进度条内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
原文出处:https://juejin.cn/post/7102072792484413453
相关文章
- 下面我们来看一篇关于Android子控件超出父控件的范围显示出来方法,希望这篇文章能够帮助到各位朋友,有碰到此问题的朋友可以进来看看哦。 <RelativeLayout xmlns:an...2016-10-02
- 这篇文章主要介绍了解决echarts 一条柱状图显示两个值,类似进度条的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-20
Android开发中findViewById()函数用法与简化
findViewById方法在android开发中是获取页面控件的值了,有没有发现我们一个页面控件多了会反复研究写findViewById呢,下面我们一起来看它的简化方法。 Android中Fin...2016-09-20- 如果我们的项目需要做来电及短信的功能,那么我们就得在Android模拟器开发这些功能,本来就来告诉我们如何在Android模拟器上模拟来电及来短信的功能。 在Android模拟...2016-09-20
- 本文实例讲述了jQuery实现文件上传进度条效果的代码。分享给大家供大家参考。具体如下: 运行效果截图如下:具体代码如下:<!DOCTYPE html><html><head><meta charset="utf-8"><title>upload</title><link rel="stylesheet...2015-11-24
- 夜神android模拟器如何设置代理呢?对于这个问题其实操作起来是非常的简单,下面小编来为各位详细介绍夜神android模拟器设置代理的方法,希望例子能够帮助到各位。 app...2016-09-20
- 为了增强android应用的用户体验,我们可以在一些Button按钮上自定义动态的设置一些样式,比如交互时改变字体、颜色、背景图等。 今天来看一个通过重写Button来动态实...2016-09-20
- 如果我们要在Android应用APP中加载html5页面,我们可以使用WebView,本文我们分享两个WebView加载html5页面实例应用。 实例一:WebView加载html5实现炫酷引导页面大多...2016-09-20
ant design中upload组件上传大文件,显示进度条进度的实例
这篇文章主要介绍了ant design中upload组件上传大文件,显示进度条进度的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-29- 本文实例讲述了jquery实现模拟百分比进度条渐变效果代码。分享给大家供大家参考,具体如下:这里为了便于看到加载百分比,对代码进行了处理,实际使用时并不需要这样。运行效果截图如下:在线演示地址如下:http://demo.jb51.net...2015-10-30
- 深入理解Android中View和ViewGroup从组成架构上看,似乎ViewGroup在View之上,View需要继承ViewGroup,但实际上不是这样的。View是基类,ViewGroup是它的子类。本教程我们深...2016-09-20
- 下面我们来看一篇关于Android自定义WebView网络视频播放控件开发例子,这个文章写得非常的不错下面给各位共享一下吧。 因为业务需要,以下代码均以Youtube网站在线视...2016-10-02
- java开发的Android应用,性能一直是一个大问题,,或许是Java语言本身比较消耗内存。本文我们来谈谈Android 性能优化之MemoryFile文件读写。 Android匿名共享内存对外A...2016-09-20
- TextView默认是横着显示了,今天我们一起来看看Android设置TextView竖着显示如何来实现吧,今天我们就一起来看看操作细节,具体的如下所示。 在开发Android程序的时候,...2016-10-02
android.os.BinderProxy cannot be cast to com解决办法
本文章来给大家介绍关于android.os.BinderProxy cannot be cast to com解决办法,希望此文章对各位有帮助呀。 Android在绑定服务的时候出现java.lang.ClassCastExc...2016-09-20- 这篇文章主要介绍了Android 实现钉钉自动打卡功能的步骤,帮助大家更好的理解和学习使用Android,感兴趣的朋友可以了解下...2021-03-15
- 下面我们来看一篇关于Android 开发之布局细节对比:RTL模式 ,希望这篇文章对各位同学会带来帮助,具体的细节如下介绍。 前言 讲真,好久没写博客了,2016都过了一半了,赶紧...2016-10-02
- 这篇文章主要介绍了C#实现带进度条的ListView 的相关资料,需要的朋友可以参考下...2020-06-25
- 首先如果要在程序中使用sdcard进行存储,我们必须要在AndroidManifset.xml文件进行下面的权限设置: 在AndroidManifest.xml中加入访问SDCard的权限如下: <!--...2016-09-20
- 下面来给各位简单的介绍一下关于Android开发之PhoneGap打包及错误解决办法,希望碰到此类问题的同学可进入参考一下哦。 在我安装、配置好PhoneGap项目的所有依赖...2016-09-20