安卓实现音响效果的背景设计

先来张图看看效果：

设计思路：

        在构建自定义的视图的时候，我们可以先这样想，首先设计一根线，在一根线的基础上实现添加其他的线。那个问题来了，怎么实现一根线的设计呢？答案：自定义控件.

 现在来谈谈设计一根线的步骤。

   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>

好了。代码讲解完了。。。。。。