短視訊開發app，自定義帶進度條的視訊播放按鈕

短視訊開發app，自定義帶進度條的視訊播放按鈕

具體的程式碼邏輯都有清楚的註釋，可以直接檢視程式碼

public class MusicProgress extends View {
    private Context mContext;
    private static final int DEFAULT_SIZE = 40;
    private static final float HALF = 0.5f;
    private static final float ONE_TENTH = 0.1f;
    private static final float DEFAULT_START_ANGLE = -90;
    private int defaultSize;
    private int mWidth;
    private int mHeight;
    private Paint mBgPaint;
    private Paint mProgressPaint;
    // 背景顏色和進度條顏色
    private int mBgColor;
    private int mProgressColor;
    // 背景圓
    private int radius;
    private int circlePoint;
    // 播放暫停按鈕
    private Bitmap mPlayBm;
    private Bitmap mPauseBm;
    private Bitmap mBitmap;
    private Rect mDstRect;
    private int mBmOffset;
    // 進度條
    private RectF mProgressRectF;
    private int mProgressWidth;
    // 進度條開始結束角度
    private float mStartAngle;
    private float mSweepAngle;
    public MusicProgress(Context context) {
        this(context, null);
    }
    public MusicProgress(Context context,
            @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }
    public MusicProgress(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.mContext = context;
        init();
    }
    private void init() {
        defaultSize = dp2px(DEFAULT_SIZE);
        mProgressWidth = (int) (defaultSize * ONE_TENTH);
        radius = (int) (defaultSize * HALF - mProgressWidth * HALF);
        circlePoint = (int) (defaultSize * HALF);
        mBgColor = ContextCompat.getColor(mContext, R.color.progress_bg_color);
        mProgressColor = ContextCompat.getColor(mContext, R.color.progress_color);
        // 暫停、播放按鈕的繪製區域
        mBmOffset = (int) (defaultSize * HALF * HALF);
        mDstRect = new Rect(mBmOffset, mBmOffset,
                defaultSize - mBmOffset, defaultSize - mBmOffset);
        mPlayBm = BitmapFactory.decodeResource(mContext.getResources(), R.drawable.play);
        mPauseBm = BitmapFactory.decodeResource(mContext.getResources(), R.drawable.pause);
        // 預設是暫停狀態
        mBitmap = mPlayBm;
        mBgPaint = new Paint();
        mBgPaint.setAntiAlias(true);
        mBgPaint.setColor(mBgColor);
        mProgressPaint = new Paint();
        mProgressPaint.setAntiAlias(true);
        mProgressPaint.setColor(mProgressColor);
        mProgressPaint.setStrokeWidth(mProgressWidth);
        mProgressPaint.setStyle(Paint.Style.STROKE);
        // 進度條
        mProgressRectF = new RectF(0, 0, defaultSize, defaultSize);
        this.mStartAngle = DEFAULT_START_ANGLE;
    }
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        this.mWidth = w;
        this.mHeight = h;
        if (mWidth > 0) {
            // 修改進度條寬度
            mProgressWidth = (int) (mWidth * ONE_TENTH);
            mProgressPaint.setStrokeWidth(mProgressWidth);
            // 修改背景圓的半徑
            radius = (int) (mWidth * HALF - mProgressWidth * HALF);
            // 修改圓心
            circlePoint = (int) (mWidth * HALF);
            // 暫停、播放按鈕的繪製區域
            mBmOffset = (int) (mWidth * HALF * HALF);
            mDstRect = new Rect(mBmOffset, mBmOffset,
                    mWidth - mBmOffset, mWidth - mBmOffset);
            float size = mWidth - mProgressWidth * HALF;
            // 進度條
            mProgressRectF = new RectF(mProgressWidth * HALF, mProgressWidth * HALF, size, size);
        }
    }
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        setMeasuredDimension(getSize(widthMeasureSpec), getSize(heightMeasureSpec));
    }
    /**
     * 獲取測量大小
     */
    private int getSize(int measureSpec) {
        int result;
        int specMode = MeasureSpec.getMode(measureSpec);
        int specSize = MeasureSpec.getSize(measureSpec);
        if (specMode == MeasureSpec.EXACTLY) {
            //確切大小,所以將得到的尺寸給view
            result = specSize;
        } else if (specMode == MeasureSpec.AT_MOST) {
            //預設值為40dp, 此處要結合父控制元件給子控制元件的最多大小(要不然會填充父控制元件),所以採用最小值
            result = Math.min(defaultSize, specSize);
        } else {
            result = defaultSize;
        }
        return result;
    }
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 繪製背景圓
        canvas.drawCircle(circlePoint, circlePoint, radius, mBgPaint);
        // 繪製播放暫停按鈕
        canvas.drawBitmap(mBitmap, null, mDstRect, mBgPaint);
        // 繪製進度條
        canvas.drawArc(mProgressRectF, mStartAngle, mSweepAngle, false, mProgressPaint);
    }
    /**
     * 重新整理播放UI.
     */
    public void play() {
        mBitmap = mPauseBm;
        invalidate();
    }
    /**
     * 重新整理暫停UI.
     */
    public void pause() {
        mBitmap = mPlayBm;
        invalidate();
    }
    /**
     * 更新進度.
     *
     * @param startAngle 開始角度
     * @param sweepAngle 掃過角度
     */
    public void updateProgress(@FloatRange(from = -360f, to = 360f) float startAngle,
            @FloatRange(from = 0f, to = 360f) float sweepAngle) {
        this.mStartAngle = startAngle;
        this.mSweepAngle = sweepAngle;
        invalidate();
    }
    /**
     * 更新進度.
     *
     * @param sweepAngle 掃過角度
     */
    public void updateProgress(@FloatRange(from = 0f, to = 360f) float sweepAngle) {
        this.mSweepAngle = sweepAngle;
        invalidate();
    }
    private int dp2px(final float dp) {
        final float density = mContext.getResources().getDisplayMetrics().density;
        return (int) (dp * density + 0.5f);
    }
    private int px2dp(final float px) {
        float scale = mContext.getResources().getDisplayMetrics().scaledDensity;
        return (int) (px / scale + 0.5f);
    }
}

涉及的資原始檔

<color name="progress_bg_color">#7A7A7A</color>
<color name="progress_color">#00F1B7</color>

以上就是短視訊開發app，自定義帶進度條的視訊播放按鈕， 更多內容歡迎關注之後的文章