Android自定義view----音樂播放動畫

先給大家看一下效果，因為我也不知道這個東西具體叫什么，標題上面寫的是"音樂播放動畫"，可能描述的不太準確。

效果圖.gif

前言

最近項目中做了一個音頻播放的功能，播放條上需要一個如上圖的效果。一開始為了趕時間，就用幀動畫實現的，但是效果看起來沒那么絲滑。今天沒啥事，就抽時間用自定義view的方式了一下。看上圖的對比，自定義view的實現效果是不是像德芙一樣絲滑。

優勢

自定義view實現的方式比起幀動畫的方式，有以下幾個優勢。
1.視覺效果更佳。
2.幀動畫需要不同幀的圖片，而自定義view的方式使用paint畫出來的，更剩資源。
3.可變化性強，可以通過屬性來改變指針的顏色、寬高比、指針個數，從而應用到更多場景。
4.使用方便，就像使用TextView、Button等。

怎么使用

使用非常簡單，就像普通的控件一樣，在xml配置屬性，然后在Activity里，調用start()、stop()來控制開始與暫停。

    <com.chx.voiseplayingicon.VoisePlayingIcon
        android:id="@+id/voise_playint_icon"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_below="@+id/btn_stop"
        android:layout_marginLeft="300dp"
        android:layout_marginTop="50dp"
        android:background="#CCCCCC"
        android:padding="5dp"
        voisePlayingIconAttr:color="#FF6565"
        voisePlayingIconAttr:pointer_num="4"
        voisePlayingIconAttr:pointer_width="5" />

//開始
 voisePlayingIcon.start();
//停止
voisePlayingIcon.stop();

實現步驟

- 思路
1.自定義view,在畫布上依次畫幾個不同高度的矩形。
2.開啟一個子線程，在這個子線程中寫一個死循環，來模擬正弦函數的過程，x軸方向取值范圍是0到正無窮。然后去Y軸的絕對值，那么Y軸的取值范圍就是0到1。
3.利用上一步y軸取值來乘以控件高度，改變每個小舉行的高度。
4.刷新畫布。
5.這樣就達到了想要的效果，并且小矩形的高度變化速度，是符合正弦變化速率的。
代碼實現

代碼不是很多，這里直接貼出代碼，具體講解看代碼中的注釋。


public class VoisePlayingIcon extends View {

    //畫筆
    private Paint paint;

    //跳動指針的集合
    private List<Pointer> pointers;

    //跳動指針的數量
    private int pointerNum;

    //邏輯坐標 原點
    private float basePointX;
    private float basePointY;

    //指針間的間隙  默認5dp
    private float pointerPadding;

    //每個指針的寬度 默認3dp
    private float pointerWidth;

    //指針的顏色
    private int pointerColor = Color.RED;

    //控制開始/停止
    private boolean isPlaying = false;

    //子線程
    private Thread myThread;

    //指針波動速率
    private int pointerSpeed;


    public VoisePlayingIcon(Context context) {
        super(context);
        init();
    }

    public VoisePlayingIcon(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        //取出自定義屬性
        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.voisePlayingIconAttr);
        pointerColor = ta.getColor(R.styleable.voisePlayingIconAttr_color, Color.RED);
        pointerNum = ta.getInt(R.styleable.voisePlayingIconAttr_pointer_num, 4);//指針的數量，默認為4
        pointerWidth = DensityUtils.dp2px(getContext(),
                ta.getFloat(R.styleable.voisePlayingIconAttr_pointer_width, 5f));//指針的寬度，默認5dp
        pointerSpeed = ta.getInt(R.styleable.voisePlayingIconAttr_pointer_speed, 40);
        init();
    }

    public VoisePlayingIcon(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.voisePlayingIconAttr);
        pointerColor = ta.getColor(R.styleable.voisePlayingIconAttr_color, Color.RED);
        pointerNum = ta.getInt(R.styleable.voisePlayingIconAttr_pointer_num, 4);
        pointerWidth = DensityUtils.dp2px(getContext(), ta.getFloat(R.styleable.voisePlayingIconAttr_pointer_width, 5f));
        pointerSpeed = ta.getInt(R.styleable.voisePlayingIconAttr_pointer_speed, 40);
        init();
    }

    /**
     * 初始化畫筆與指針的集合
     */
    private void init() {
        paint = new Paint();
        paint.setAntiAlias(true);
        paint.setColor(pointerColor);
        pointers = new ArrayList<>();
    }


    /**
     * 在onLayout中做一些，寬高方面的初始化
     *
     * @param changed
     * @param left
     * @param top
     * @param right
     * @param bottom
     */
    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        //獲取邏輯原點的，也就是畫布左下角的坐標。這里減去了paddingBottom的距離
        basePointY = getHeight() - getPaddingBottom();
        Random random = new Random();
        if (pointers != null)
            pointers.clear();
        for (int i = 0; i < pointerNum; i++) {
            //創建指針對象，利用0~1的隨機數 乘以 可繪制區域的高度。作為每個指針的初始高度。
            pointers.add(new Pointer((float) (0.1 * (random.nextInt(10) + 1) * (getHeight() - getPaddingBottom() - getPaddingTop()))));
        }
        //計算每個指針之間的間隔  總寬度 - 左右兩邊的padding - 所有指針占去的寬度  然后再除以間隔的數量
        pointerPadding = (getWidth() - getPaddingLeft() - getPaddingRight() - pointerWidth * pointerNum) / (pointerNum - 1);
    }


    /**
     * 開始繪畫
     *
     * @param canvas
     */
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //將x坐標移動到邏輯原點，也就是左下角
        basePointX = 0f + getPaddingLeft();
        //循環繪制每一個指針。
        for (int i = 0; i < pointers.size(); i++) {
            //繪制指針，也就是繪制矩形
            canvas.drawRect(basePointX,
                    basePointY - pointers.get(i).getHeight(),
                    basePointX + pointerWidth,
                    basePointY,
                    paint);
            basePointX += (pointerPadding + pointerWidth);
        }
    }

    /**
     * 開始播放
     */
    public void start() {
        if (!isPlaying) {
            if (myThread == null) {//開啟子線程
                myThread = new Thread(new MyRunnable());
                myThread.start();
            }
            isPlaying = true;//控制子線程中的循環
        }
    }

    /**
     * 停止子線程，并刷新畫布
     */
    public void stop() {
        isPlaying = false;
        invalidate();
    }

    /**
     * 處理子線程發出來的指令，然后刷新布局
     */
    private Handler myHandler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            invalidate();
        }
    };

    /**
     * 子線程，循環改變每個指針的高度
     */
    public class MyRunnable implements Runnable {

        @Override
        public void run() {

            for (float i = 0; i < Integer.MAX_VALUE; ) {//創建一個死循環，每循環一次i+0.1
                try {
                    for (int j = 0; j < pointers.size(); j++) { //循環改變每個指針高度
                        float rate = (float) Math.abs(Math.sin(i + j));//利用正弦有規律的獲取0~1的數。
                        pointers.get(j).setHeight((basePointY - getPaddingTop()) * rate); //rate 乘以 可繪制高度，來改變每個指針的高度
                    }
                    Thread.sleep(pointerSpeed);//休眠一下下，可自行調節
                    if (isPlaying) { //控制開始/暫停
                        myHandler.sendEmptyMessage(0);
                        i += 0.1;
                    }
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
            }
        }
    }


    /**
     * 指針類
     */
    public class Pointer {
        private float height;

        public Pointer(float height) {
            this.height = height;
        }

        public float getHeight() {
            return height;
        }

        public void setHeight(float height) {
            this.height = height;
        }
    }
}

自定義屬性如下：

<resources>
    <declare-styleable name="voisePlayingIconAttr">
        <attr name="pointer_color" format="color" />
        <attr name="pointer_num" format="integer" />
        <attr name="pointer_width" format="float" />
        <attr name="pointer_speed" format="integer" />
    </declare-styleable>
</resources>

這樣的效果可以用在音樂播放的播放條，同樣也可以當作一個Loading來使用。

希望該文對大家有一定幫助。如有疑問，歡迎交流。

這里貼出demo地址：https://github.com/chaohengxing/VoisePlayingIcon.git
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,372評論 25贊 708
  • 發現 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,245評論 4贊 61
  • 你說了一個 和昨天一摸一樣的故事 人們開始忘記你了 于是你努力讓自己過得不好 不停講故事 直到有一天 你坐在榕樹的...
    留子堯閱讀 282評論 3贊 6
  • 就迷糊睡著的時候 也做著N年前的夢 夢里是老校長領著大干一場 哪怕他已經退了休 也不善感罷休 想起青春年華 就這樣...
    茶潤人生閱讀 241評論 0贊 0
  • 小引： 2017年4月下旬，一場交通事故讓我浪費了大約兩個月的時間，而今整理文檔，看到當時憤慨寫出的文字，便想記錄...
    溪谷Y閱讀 190評論 0贊 2