Android實現(xiàn)音頻條形圖效果

更新時間：2022年08月17日 15:33:56 作者：這個殺手不太累

這篇文章主要為大家詳細介紹了Android實現(xiàn)音頻條形圖效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Android實現(xiàn)音頻條形圖效果的具體代碼，供大家參考，具體內(nèi)容如下

效果圖：

通過自定義View和屬性動畫實現(xiàn)此效果

public class BarChartView extends LinearLayout implements Runnable {
? ? private ViewWrapper[] mViewWrapper;

? ? private int barchartCount = 1;
? ? private int barchartWidth = 20;
? ? private int barchartHeight = 0;
? ? private int barcharMarginLeft = 5;
? ? private int barchartDuration = 500;
? ? private int barcharBackColor;

? ? private boolean startAnimtor = false;

? ? @DrawableRes
? ? private int myShape;

? ? public BarChartView(Context context) {
? ? ? ? this(context, null);
? ? }

? ? public BarChartView(Context context, @Nullable AttributeSet attrs) {
? ? ? ? this(context, attrs, 0);
? ? }

? ? public BarChartView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
? ? ? ? super(context, attrs, defStyleAttr);
? ? ? ? init(context, attrs);
? ? ? ? addBarView();
? ? }

? ? /**
? ? ?* 初始化配置
? ? ?*
? ? ?* @param context
? ? ?* @param attrs
? ? ?*/
? ? private void init(Context context, @Nullable AttributeSet attrs) {
? ? ? ? setOrientation(LinearLayout.HORIZONTAL);
? ? ? ? setGravity(Gravity.CENTER_HORIZONTAL | Gravity.BOTTOM);

? ? ? ? TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.BarChartView);
? ? ? ? barchartCount = typedArray.getInt(R.styleable.BarChartView_barchartCount, 0);
? ? ? ? barchartWidth = typedArray.getDimensionPixelSize(R.styleable.BarChartView_barchartWidth, 0);
? ? ? ? barchartHeight = typedArray.getDimensionPixelSize(R.styleable.BarChartView_barchartHeight, 0);
? ? ? ? barcharMarginLeft = typedArray.getDimensionPixelSize(R.styleable.BarChartView_barcharMarginLeft, 0);
? ? ? ? barchartDuration = typedArray.getInt(R.styleable.BarChartView_barchartDuration, 500);
? ? ? ? myShape = typedArray.getResourceId(R.styleable.BarChartView_barchartShape, 0);
? ? ? ? barcharBackColor = typedArray.getColor(R.styleable.BarChartView_barcharBackColor, Color.RED);
? ? ? ? typedArray.recycle();
? ? }

? ? /**
? ? ?* add View
? ? ?*/
? ? private void addBarView() {
? ? ? ? if (barchartCount <= 0) {
? ? ? ? ? ? return;
? ? ? ? }
? ? ? ? mViewWrapper = new ViewWrapper[barchartCount];
? ? ? ? ImageView childView;
? ? ? ? LinearLayout.LayoutParams layoutParams;
? ? ? ? ViewWrapper viewWrapper;
? ? ? ? for (int i = 0; i < barchartCount; i++) {
? ? ? ? ? ? childView = new ImageView(getContext());
? ? ? ? ? ? if (myShape != 0) {
? ? ? ? ? ? ? ? childView.setBackgroundResource(myShape);
? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? childView.setBackgroundColor(barcharBackColor);
? ? ? ? ? ? }
? ? ? ? ? ? layoutParams = new LayoutParams(barchartWidth, 100);
? ? ? ? ? ? layoutParams.setMargins(barcharMarginLeft, 0, 0, 0);
? ? ? ? ? ? childView.setLayoutParams(layoutParams);
? ? ? ? ? ? addView(childView);
? ? ? ? ? ? viewWrapper = new ViewWrapper(childView);
? ? ? ? ? ? mViewWrapper[i] = viewWrapper;
? ? ? ? }
? ? }

? ? /**
? ? ?* 開始動畫
? ? ?*/
? ? public void start() {
? ? ? ? if (mViewWrapper == null || mViewWrapper.length <= 0) {
? ? ? ? ? ? return;
? ? ? ? }
? ? ? ? startAnimtor = true;
? ? ? ? Random a = new Random();
? ? ? ? for (int i = 0; i < mViewWrapper.length; i++) {
? ? ? ? ? ? startAnimator(mViewWrapper[i], a.nextInt(barchartHeight));
? ? ? ? }
? ? ? ? removeCallbacks(this);
? ? ? ? postDelayed(this, barchartDuration);
? ? }

? ? /**
? ? ?* 停止動畫
? ? ?*/
? ? public void stop() {
? ? ? ? startAnimtor = false;
? ? ? ? for (int i = 0; i < mViewWrapper.length; i++) {
? ? ? ? ? ? startAnimator(mViewWrapper[i], 1);
? ? ? ? }
? ? }

? ? private void startAnimator(ViewWrapper viewWrapper, int height) {
? ? ? ? viewWrapper.mTarget.clearAnimation();
? ? ? ? ObjectAnimator.ofInt(viewWrapper, "height", height).setDuration(barchartDuration).start();
? ? }

? ? @Override
? ? public void run() {
? ? ? ? if (startAnimtor) {
? ? ? ? ? ? start();
? ? ? ? }
? ? }
? ??
? ? private static class ViewWrapper {
? ? ? ? public View mTarget;

? ? ? ? public ViewWrapper(View target) {
? ? ? ? ? ? mTarget = target;
? ? ? ? }

? ? ? ? public int getWidth() {
? ? ? ? ? ? return mTarget.getLayoutParams().width;
? ? ? ? }

? ? ? ? public void setWidth(int width) {
? ? ? ? ? ? mTarget.getLayoutParams().width = width;
? ? ? ? ? ? mTarget.requestLayout();
? ? ? ? }

? ? ? ? public int getHeight() {
? ? ? ? ? ? return mTarget.getLayoutParams().height;
? ? ? ? }

? ? ? ? public void setHeight(int height) {
? ? ? ? ? ? mTarget.getLayoutParams().height = height;
? ? ? ? ? ? mTarget.requestLayout();
? ? ? ? }
? ? }
}

自定義屬性

<declare-styleable name="BarChartView">
? ? ? ? <attr name="barchartCount" format="integer" />
? ? ? ? <attr name="barchartDuration" format="integer" />
? ? ? ? <attr name="barchartShape" format="reference" />
? ? ? ? <attr name="barchartHeight" format="dimension" />
? ? ? ? <attr name="barchartWidth" format="dimension" />
? ? ? ? <attr name="barcharMarginLeft" format="dimension" />
? ? ? ? <attr name="barcharBackColor" format="color" />
</declare-styleable>

布局文件:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
? ? xmlns:app="http://schemas.android.com/apk/res-auto"
? ? xmlns:tools="http://schemas.android.com/tools"
? ? android:layout_width="match_parent"
? ? android:layout_height="match_parent"
? ? android:orientation="vertical"
? ? tools:context="com.tlkg.testdemo.valueanimatordemo.MainActivity">

? ? <LinearLayout
? ? ? ? android:layout_width="match_parent"
? ? ? ? android:layout_height="0dp"
? ? ? ? android:layout_weight="1"
? ? ? ? android:orientation="horizontal">

? ? ? ? <com.tlkg.testdemo.valueanimatordemo.BarChartView
? ? ? ? ? ? android:id="@+id/myRealMapView"
? ? ? ? ? ? android:layout_width="0dp"
? ? ? ? ? ? android:layout_height="match_parent"
? ? ? ? ? ? android:layout_weight="1"
? ? ? ? ? ? app:barcharMarginLeft="3dp"
? ? ? ? ? ? app:barchartCount="10"
? ? ? ? ? ? app:barchartDuration="500"
? ? ? ? ? ? app:barchartHeight="100dp"
? ? ? ? ? ? app:barchartWidth="10dp" />

? ? ? ? <com.tlkg.testdemo.valueanimatordemo.BarChartView
? ? ? ? ? ? android:id="@+id/myRealMapView1"
? ? ? ? ? ? android:layout_width="0dp"
? ? ? ? ? ? android:layout_height="match_parent"
? ? ? ? ? ? android:layout_weight="1"
? ? ? ? ? ? android:background="#ff000000"
? ? ? ? ? ? app:barcharBackColor="#ffffffff"
? ? ? ? ? ? app:barcharMarginLeft="3dp"
? ? ? ? ? ? app:barchartCount="10"
? ? ? ? ? ? app:barchartDuration="500"
? ? ? ? ? ? app:barchartHeight="70dp"
? ? ? ? ? ? app:barchartWidth="5dp" />
? ? </LinearLayout>

? ? <LinearLayout
? ? ? ? android:layout_width="match_parent"
? ? ? ? android:layout_height="0dp"
? ? ? ? android:layout_weight="1"
? ? ? ? android:orientation="horizontal">

? ? ? ? <com.tlkg.testdemo.valueanimatordemo.BarChartView
? ? ? ? ? ? android:id="@+id/myRealMapView2"
? ? ? ? ? ? android:layout_width="0dp"
? ? ? ? ? ? android:layout_height="match_parent"
? ? ? ? ? ? android:layout_weight="1"
? ? ? ? ? ? app:barcharMarginLeft="1dp"
? ? ? ? ? ? app:barchartCount="50"
? ? ? ? ? ? app:barchartDuration="300"
? ? ? ? ? ? app:barchartHeight="40dp"
? ? ? ? ? ? app:barcharBackColor="#ff0000ff"
? ? ? ? ? ? app:barchartWidth="2dp" />

? ? ? ? <com.tlkg.testdemo.valueanimatordemo.BarChartView
? ? ? ? ? ? android:id="@+id/myRealMapView3"
? ? ? ? ? ? android:layout_width="0dp"
? ? ? ? ? ? android:layout_height="match_parent"
? ? ? ? ? ? android:layout_weight="1"
? ? ? ? ? ? app:barcharMarginLeft="3dp"
? ? ? ? ? ? app:barchartCount="8"
? ? ? ? ? ? app:barchartDuration="200"
? ? ? ? ? ? app:barchartHeight="90dp"
? ? ? ? ? ? app:barchartShape="@drawable/mshape"
? ? ? ? ? ? app:barchartWidth="10dp" />
? ? </LinearLayout>

? ? <LinearLayout
? ? ? ? android:layout_width="match_parent"
? ? ? ? android:layout_height="wrap_content"
? ? ? ? android:gravity="center"
? ? ? ? android:orientation="horizontal">

? ? ? ? <Button
? ? ? ? ? ? android:id="@+id/start"
? ? ? ? ? ? android:layout_width="wrap_content"
? ? ? ? ? ? android:layout_height="wrap_content"
? ? ? ? ? ? android:text="start" />

? ? ? ? <Button
? ? ? ? ? ? android:id="@+id/stop"
? ? ? ? ? ? android:layout_width="wrap_content"
? ? ? ? ? ? android:layout_height="wrap_content"
? ? ? ? ? ? android:text="stop" />
? ? </LinearLayout>
</LinearLayout>

MainActivity代碼:

public class MainActivity extends AppCompatActivity {

? ? @Override
? ? protected void onCreate(Bundle savedInstanceState) {
? ? ? ? super.onCreate(savedInstanceState);
? ? ? ? setContentView(R.layout.activity_main);
? ? ? ? final BarChartView realMapView = (BarChartView) findViewById(R.id.myRealMapView);
? ? ? ? final BarChartView realMapView1 = (BarChartView) findViewById(R.id.myRealMapView1);
? ? ? ? final BarChartView realMapView2 = (BarChartView) findViewById(R.id.myRealMapView2);
? ? ? ? final BarChartView realMapView3 = (BarChartView) findViewById(R.id.myRealMapView3);

? ? ? ? findViewById(R.id.start).setOnClickListener(new View.OnClickListener() {
? ? ? ? ? ? @Override
? ? ? ? ? ? public void onClick(View v) {
? ? ? ? ? ? ? ? realMapView.start();
? ? ? ? ? ? ? ? realMapView1.start();
? ? ? ? ? ? ? ? realMapView2.start();
? ? ? ? ? ? ? ? realMapView3.start();
? ? ? ? ? ? }
? ? ? ? });

? ? ? ? findViewById(R.id.stop).setOnClickListener(new View.OnClickListener() {
? ? ? ? ? ? @Override
? ? ? ? ? ? public void onClick(View v) {
? ? ? ? ? ? ? ? realMapView.stop();
? ? ? ? ? ? ? ? realMapView1.stop();
? ? ? ? ? ? ? ? realMapView2.stop();
? ? ? ? ? ? ? ? realMapView3.stop();
? ? ? ? ? ? }
? ? ? ? });
? ? }

}

實現(xiàn)原理，BarChartView繼承線性布局，設置水平，內(nèi)容底部居中，根據(jù)初始化后的barchartCount屬性添加childView,調用方法start開始屬性動畫。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: