《Android群英传》Three自定义View音频条形图-优快云博客

本文介绍了如何在Android应用中使用VolumeView自定义视图来实现动态颜色渐变和随机小矩形的绘制，通过布局文件和MainActivity加载VolumeView实例，展示了一种创建美观动态UI的实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

1、VolumeView

package sunny.example.ahthreevolume;

import android.content.Context;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.LinearGradient;

import android.graphics.Paint;

import android.graphics.Shader;

import android.util.AttributeSet;

import android.view.View;

public class VolumeView extends View {
    private int mWidth;
    private int mRectWidth;
    private int mRectHeight;
    private Paint mPaint;
    private int mRectCount;
    private int offset = 5;
    private double mRandom;
    private LinearGradient mLinearGradient;
    public VolumeView(Context context) {
        super(context);
        initView();
    }
    public VolumeView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView();
    }
    public VolumeView(Context context, AttributeSet attrs,
                      int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView();
    }
    private void initView() {
        mPaint = new Paint();
        mPaint.setColor(Color.BLUE);
        mPaint.setStyle(Paint.Style.FILL);
        mRectCount = 12;
    }
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mWidth = getWidth();
        mRectHeight = getHeight();
        mRectWidth = (int) (mWidth * 0.6 / mRectCount);

//android.graphics.LinearGradient.LinearGradient(float x0, float y0, float x1, float y1, int color0, int color1, TileMode tile)
 
 //颜色渐变
     
        mLinearGradient = new LinearGradient(
                0,
                0,
                mRectWidth,
                mRectHeight,
                Color.YELLOW,
                Color.BLUE,
                Shader.TileMode.CLAMP);
        mPaint.setShader(mLinearGradient);
    }
   
    //绘制一个个的高度随机变化的小矩形
   
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        for (int i = 0; i < mRectCount; i++) {
            mRandom = Math.random();
         
            //高度随机变化
          
            float currentHeight = (float) (mRectHeight * mRandom);
            canvas.drawRect(
                    (float) (mWidth * 0.4 / 2 + mRectWidth * i + offset),
                    currentHeight,
                    (float) (mWidth * 0.4 / 2 + mRectWidth * (i + 1)),
                    mRectHeight,
                    mPaint);
        }
       
        //void android.view.View.postInvalidateDelayed(long delayMilliseconds)
      
        //每隔300ms通知View重绘
      
        postInvalidateDelayed(300);
    }
}

2、布局

<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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="sunny.example.ahthreevolume.MainActivity" >
    <sunny.example.ahthreevolume.VolumeView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />
</RelativeLayout>

3、MainActivity加载VolumeView

package sunny.example.ahthreevolume;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
public class MainActivity extends ActionBarActivity {
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
 }
 
}