首页 > 代码库 > Android 自定义View,仿微信视频播放按钮

Android 自定义View,仿微信视频播放按钮

闲着,尝试实现了新版微信视频播放按钮,使用的是自定义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 = http://www.mamicode.com/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();            }                    };    }}

 

Android 自定义View,仿微信视频播放按钮