Android实现音频条形图效果

 更新时间:2022年08月17日 15:33:56   作者:这个杀手不太累  
这篇文章主要为大家详细介绍了Android实现音频条形图效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了Android实现音频条形图效果的具体代码,供大家参考,具体内容如下

效果图:

通过自定义View和属性动画实现此效果

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();
            }
        });
    }

}

实现原理,BarChartView继承线性布局,设置水平,内容底部居中,根据初始化后的barchartCount属性添加childView,调用方法start开始属性动画。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • Android开发中使用achartengine绘制各种图表的方法

    Android开发中使用achartengine绘制各种图表的方法

    这篇文章主要介绍了Android开发中使用achartengine绘制各种图表的方法,结合具体实例形式分析了Android基于图表生成类库achartengine进行图表绘制的具体步骤与相关操作技巧,需要的朋友可以参考下
    2017-10-10
  • Android客户端与服务端数据加密传输方案详解

    Android客户端与服务端数据加密传输方案详解

    这篇文章主要为大家介绍了Android客户端与服务端数据加密传输方案详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • Android8.1 通过黑名单屏蔽系统短信和来电功能

    Android8.1 通过黑名单屏蔽系统短信和来电功能

    最近小编接到一个新的需求,需要将8.1 设备的来电功能和短信功能都屏蔽掉,特殊产品就是特殊定制。接下来通过本文给大家介绍Android8.1 通过黑名单屏蔽系统短信和来电功能,需要的朋友参考下吧
    2019-05-05
  • Kotlin开发实战之hello world

    Kotlin开发实战之hello world

    这篇文章主要为大家详细介绍了Kotlin开发实战之hello world的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • Android实现View拖拽跟随手指移动效果

    Android实现View拖拽跟随手指移动效果

    这篇文章主要介绍了Android实现View拖拽跟随手指移动效果,主要使用setTranslationX() 和setTranslationY() 属性方法实现的,需要的朋友参考下吧
    2017-08-08
  • Flutter仿钉钉考勤日历的示例代码

    Flutter仿钉钉考勤日历的示例代码

    这篇文章主要介绍了Flutter仿钉钉考勤日历的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • Android开场动画类完整实现代码

    Android开场动画类完整实现代码

    这篇文章主要介绍了Android开场动画类完整实现代码,是非常实用的功能,需要的朋友可以参考下
    2014-07-07
  • android 软键盘的POPUP布局的问题解决

    android 软键盘的POPUP布局的问题解决

    这篇文章主要介绍了android 软键盘的POPUP布局的问题解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • Android自定义WheelView地区选择三级联动

    Android自定义WheelView地区选择三级联动

    这篇文章主要为大家详细介绍了Android自定义WheelView地区选择三级联动的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • Android端实现单点登录的方法详解

    Android端实现单点登录的方法详解

    所谓单点登录就是指的同一个账户(id)不能在一个以上的设备上登录对应的用户系统(排除web端和移动端可以同时登录的情况),例如:用户m在A设备登录并保持登录状态,然后又在B设备登录,此时A应该要强制下线,m无法在A设备上继续执行用户相关的操作,下面来一起看看吧。
    2016-11-11

最新评论