闲着,尝试实现了新版微信视频播放按钮,使用的是自定义View,先来个简单的效果图。。。真的很简单哈。
由于暂时用不到,加上时间原因,加上实在是没意思,加上……,本控件就没有实现自定义属性,有兴趣的朋友可以自己去添加一下,方法都给你们准备好了。- =
其实这个控件主要步骤
1、画外环的圆
2、画进度的圆或者画三角形播放按钮
其余剩下的都是围绕以上两步准备或者收尾的。
接下来贴主要我们的自定义控件代码,注释很全,我就不过多解释了,请各位看官自己分析,有疑问可以在评论区一起讨论。
package com.lwd.playbutton; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Path; import android.graphics.RectF; import android.util.AttributeSet; import android.util.TypedValue; import android.view.View; import android.view.View.OnClickListener; /** * 仿微信视频播放按钮 * @author Vitor Lee */ public class PlayButton extends View implements OnClickListener { /**默认最大角度*/ private static final int DEFAULT_MAX_ANGLE = 360; /**默认最大的进度*/ private static final int DEFAULT_MAX_PROGRESS=100; /**描边宽度*/ private int mStrokeWidth; /**外圆环半径*/ private int mOutRadius; /**内圆半径*/ private int mInnerRiadius; /**控件的宽度*/ private int mWidth; /**控件的高度*/ private int mHeight; /**描边的画笔*/ private Paint mStrokePaint; /**实心画笔*/ private Paint mFillPaint; /**进度圆的*/ private RectF mProgressOval; /**最大进度*/ private int mMax=DEFAULT_MAX_PROGRESS; /**当前进度*/ private int mProgress; /**三角形的路径*/ private Path mTriangle; private ProgressState mCurrentState=ProgressState.PRE_START; public PlayButton(Context context) { this(context,null); } public PlayButton(Context context, AttributeSet attrs) { this(context, attrs,0); } public PlayButton(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); initParams(); initAttribute(context, attrs, defStyle); } private void initParams() { mStrokeWidth = (int) TypedValue.applyDimension( TypedValue.COMPLEX_UNIT_SP, 1, getResources() .getDisplayMetrics()); //初始化描边的笔 mStrokePaint = new Paint(Paint.ANTI_ALIAS_FLAG); mStrokePaint.setColor(Color.WHITE); mStrokePaint.setStyle(Paint.Style.STROKE); mStrokePaint.setStrokeWidth(mStrokeWidth); //初始化画实心的笔 mFillPaint = new Paint(Paint.ANTI_ALIAS_FLAG); mFillPaint.setColor(Color.WHITE); mFillPaint.setStyle(Paint.Style.FILL); setOnClickListener(this); } private void initAttribute(Context context, AttributeSet attrs, int defStyle) { //TODO 增加自定义属性,解析应用自定义属性 } @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); mWidth = w; mHeight = h; //计算外环的半径 得到控件宽高的最小值作为圆的半径,还要减去掉描边的宽度 mOutRadius = (Math.min(w, h))/2-mStrokeWidth; //计算进度圆的半径,减去两倍描边宽度,作为进度圆和外圆环之间的间隙 mInnerRiadius =mOutRadius-2*mStrokeWidth; //确定进度圆的范围 mProgressOval = new RectF(mWidth / 2 - mInnerRiadius, mHeight / 2 - mInnerRiadius, mWidth / 2 + mInnerRiadius, mHeight / 2 + mInnerRiadius); int triangleHeight = mOutRadius/3; //用三个点来确定三角形的位置,这里以外圆环直径的1/3作为三角形的水平方向的高度, //水平方向向右做了 1/2高度的偏移,让三角形中心与圆的中心重叠(从视觉上来说是中心了,从科学的角度来讲这里应该不是中心,博主数学基础不扎实。。) mTriangle = new Path(); mTriangle.moveTo(w/2-triangleHeight/2,w/2-triangleHeight); mTriangle.lineTo(w/2+triangleHeight+triangleHeight/2,h/2); mTriangle.lineTo(w/2-triangleHeight/2,w/2+triangleHeight); mTriangle.close(); //等边三角形 // mRantange = new Path(); // float halfOfRantangeHeight = (float) (Math.sqrt(1f/27*Math.pow(mOutRadius*2,2))); // Log.e("xxx","mOutRadius/3="+mOutRadius/3+" ,halfOfRantangeHeight="+halfOfRantangeHeight); // mRantange.moveTo(w/2-mOutRadius/6,h/2-halfOfRantangeHeight); // mRantange.lineTo(w/2+mOutRadius/3+mOutRadius/6,h/2); // mRantange.lineTo(w/2-mOutRadius/6,h/2+halfOfRantangeHeight); // mRantange.close(); } @Override protected void onDraw(Canvas canvas) { //绘制外圆环 canvas.drawCircle(mWidth/2,mHeight/2,mOutRadius,mStrokePaint); if (mCurrentState==ProgressState.RUNNING) {//运行状态,绘制进度圆 canvas.drawArc(mProgressOval,-90,(mProgress*1f/mMax*DEFAULT_MAX_ANGLE),true,mFillPaint); }else{//非运行状态画三角形 canvas.drawPath(mTriangle,mStrokePaint); } } @Override public void onClick(View v) { switch (mCurrentState) { case PRE_START: if (listener != null) { listener.onStart(); } mCurrentState = ProgressState.RUNNING; break; case RUNNING: if (listener != null) { listener.onPause(mProgress * 100 / mMax); } mCurrentState = ProgressState.PAUSE; invalidate(); break; case PAUSE: if (listener != null) { listener.onStart(); } mCurrentState = ProgressState.RUNNING; invalidate(); break; case COMPLETELY: if (listener!=null) { listener.onCompletedClick(); } break; } } private OnProgressClickListener listener; /** * 设置最大值 * @param max 最大值 */ public void setMax(int max){ mMax=max; } /** * 设置当前进度 * @param progress 当前进度 */ public void setProgress(int progress){ mProgress=progress; if (mCurrentState!=ProgressState.RUNNING) { mCurrentState=ProgressState.RUNNING; } if (mProgress>=mMax) { mCurrentState=ProgressState.COMPLETELY; if (listener!=null) {//进度圆完成回调 listener.onCompletely(); } } invalidate(); } /** * 设置监听事件 * @param l 监听器 */ public void setOnProgressClickListener(OnProgressClickListener l) { this.listener = l; } /** * 这里提供了四个回调方法,比较多,可能只用到其中几个, * 所以采用了抽象类来实现,除了必要的开始操作以外, * 其他的操作用户需要哪个方法自己复写就行了。 */ public static abstract class OnProgressClickListener { /** 开始 */ public abstract void onStart(); /** 暂停 */ public void onPause(int percent){}; /** 结束 */ public void onCompletely(){}; /** 完成后点击 */ public void onCompletedClick(){}; } /**控件状态*/ public enum ProgressState{ /**开始之前*/ PRE_START, /**运行*/ RUNNING, /**暂停*/ PAUSE, /**完成*/ COMPLETELY; } }
接下来我们说说怎么使用,现在xml中定义我们的自定义控件。
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="${relativePackage}.${activityClass}" android:background="@android:color/black" > <com.lwd.playbutton.PlayButton android:id="@+id/buffer_button" android:layout_width="50dp" android:layout_height="50dp" /> </RelativeLayout>
然后我们在Activity中模拟一下缓冲视频,并且播放的操作。
package com.lwd.playbutton; import com.lwd.bufferbutton.R; import com.lwd.playbutton.PlayButton.OnProgressClickListener; import android.app.Activity; import android.os.Bundle; import android.os.SystemClock; import android.widget.Toast; /** * 模拟视频缓冲的activity * @author Vitor Lee */ public class MainActivity extends Activity { private static final int DEFAULT_MAX_VALUE = 100; private int mProgress = 0; private PlayButton mProgressView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mProgressView = (PlayButton) findViewById(R.id.buffer_button); mProgressView.setOnProgressClickListener(getProgressClickListener()); mProgressView.setMax(DEFAULT_MAX_VALUE); } private OnProgressClickListener getProgressClickListener() { return new OnProgressClickListener() { private Thread mDownloadThread; private boolean isStop; @Override public void onStart() {//模拟下载 if (mDownloadThread==null) { mDownloadThread = new Thread() { @Override public void run() { while (true) { if (!isStop) { runOnUiThread(new Runnable() { @Override public void run() { mProgressView.setProgress(mProgress); mProgress++; } }); if (mProgress==DEFAULT_MAX_VALUE) { break; } } SystemClock.sleep(100); } } }; mDownloadThread.start(); } isStop=false; } @Override public void onPause(int percent) {//暂停 isStop=true; } @Override public void onCompletely() { Toast.makeText(MainActivity.this, "完成", 1).show(); } @Override public void onCompletedClick() {//缓冲完成之后点击播放 Toast.makeText(MainActivity.this, "播放", 1).show(); } }; } }
时间: 2024-08-04 03:39:20