安卓實現音響效果的背景設計

先來張圖看看效果：

設計思路：

        在構建自定義的視圖的時候，我們可以先這樣想，首先設計一根線，在一根線的基礎上實現添加其他的線。那個問題來了，怎麼實現一根線的設計呢？答案：自定義控件.

 現在來談談設計一根線的步驟。

   1，設計第一根線，我們需要知道他的起始位置X，當前的對應的Y座標，以及目標的Y軸的座標。方便後面調用計算。

代碼如下:

MediaInfo.java

public class MediaInfo {

    private int startX;
    private int currentY;
    //目標Y軸座標
      private  int targetY;

    public int getStartX() {
        return startX;
    }

    public void setStartX(int startX) {
        this.startX = startX;
    }

    public int getCurrentY() {
        return currentY;
    }

    public void setCurrentY(int currentY) {
        this.currentY = currentY;
    }

    public int getTargetY() {
        return targetY;
    }

    public void setTargetY(int targetY) {
        this.targetY = targetY;
    }
}

2.自定義一個類，繼承View.在這個類裏面實現自定義控件的實現。在設計音響效果背景之前，我們需要知道，背景的線在不停的增長或者降低，其實是都是在重新繪製的新的線，而不是在原來的線的基礎上，增加或者減少。所以要明白了這一點，那麼開始工作。   

首先我們需要設置這根線的對象，還需要畫筆，設置繪製線條的數量，設置線條虛線效果，顏色漸變等。

主要講解會在代碼中寫好註釋，方便大家閱讀。

MediaPlay.java


import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.DashPathEffect;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PathEffect;
import android.graphics.Shader;
import android.util.AttributeSet;
import android.view.View;

import java.util.ArrayList;
import java.util.List;
import java.util.Random;

public class MediaPlay extends View {
    //畫筆
    private Paint mPaint;
    //路徑對象
    private Path path;
    //線條對象集合
    private ArrayList<MediaInfo> mediaInfo;
    //每次界面重新繪製時候改變Y軸時的值（像素）
    private int CHANGE_Y = 12;
    //繪製線條的數量
    private int count = 20;
    private List<MediaInfo> list;


    public MediaPlay(Context context) {
        this(context, null);
    }

    public MediaPlay(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public MediaPlay(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        init();
    }

    private void init() {

        path = new Path();
        mPaint = new Paint();
        mPaint.setAntiAlias(true);//抗鋸齒
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(30);
        mPaint.setColor(Color.BLUE);
        //使用path的虛線功能
        PathEffect effect = new DashPathEffect(new float[]{16, 5, 16, 5}, 1);
        mPaint.setPathEffect(effect);

    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //獲取控件的高度
        int height = getHeight();
        //獲取控件的寬度
        int width=getWidth();
        if (list == null) {
            list = new ArrayList<MediaInfo>();
            for (int i=0;i<count;i++) {
                MediaInfo mediaInfo = new MediaInfo();
                //設置每個線條之間的間距爲  width/count
                mediaInfo.setStartX(25+width/count*i);
                mediaInfo.setCurrentY(height);
                //使用隨機數來設置目標Y軸的座標
                mediaInfo.setTargetY(new Random().nextInt(height));
                list.add(mediaInfo);
            }

        }
        for(MediaInfo mediaInfo:list){
            updateView(mediaInfo, height, canvas);
        }
        invalidate();
    }

    //更新單個線條的方法
    private void updateView(MediaInfo mediaInfo, int height, Canvas canvas) {
        //如果當前Y軸座標接近Y軸目標時，就去衝新設置Y軸座標
        if (Math.abs(mediaInfo.getCurrentY() - mediaInfo.getTargetY()) < CHANGE_Y) {
            //重新設置目標Y軸座標
            mediaInfo.setTargetY(new Random().nextInt(height));
        } else {
            //當目標Y軸座標大於目標時，每次減少CHANGE_Y來，反之增加
            if (mediaInfo.getCurrentY() > mediaInfo.getTargetY()) {
                mediaInfo.setCurrentY(mediaInfo.getCurrentY() - CHANGE_Y);
            } else {
                mediaInfo.setCurrentY(mediaInfo.getCurrentY() + CHANGE_Y);
            }
        }
        //設置path的開始節點
        path.moveTo(mediaInfo.getStartX(), height);
        //設置path 的結束點
        path.lineTo(mediaInfo.getStartX(), mediaInfo.getCurrentY());
        //線性漸變功能
        LinearGradient gradient = new LinearGradient(
                mediaInfo.getStartX(), height, mediaInfo.getStartX(), mediaInfo.getCurrentY(), Color.BLUE, Color.YELLOW, Shader.TileMode.CLAMP);
        mPaint.setShader(gradient);

        canvas.drawPath(path, mPaint);
        path.reset();//清空上次繪製的數據
    }

}

3,設置UI

MainActivity.java


import android.app.Activity;
import android.os.Bundle;

public class MainActivity extends Activity {


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);



    }


}

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.qianfeng.mobileplayer.MediaPlay
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:layout_centerInParent="true" />

</RelativeLayout>

好了。代碼講解完了。。。。。。