实现语音聊天播放自定义View

当我们需要实现一个聊天功能的时候必然要涉及语音聊天功能，语音播放时候像QQ、微信都有语音播放的View,这里我们就开始自己来实现一个这么一个View,效果如下：

这里我们使用了两种方式实现
1、通过自定义View的方式
2、通过帧动画的方式
两种方式各有各的优缺点自己根据需求选择

一、通过自定义View的方式
自定View主要使用两个类来完成

/** * 基础方法、及动画时长控制类 */public abstract class BaseLoading extends LinearLayout{    private static final int DEFAULT_DURATION_TIME=300;    private static final int MAX_DURATION_TIME=1000;    private int duration;    private Context context;    public BaseLoading(Context context) {        super(context);        init(context,null);    }    public BaseLoading(Context context, AttributeSet attrs) {        super(context, attrs);        init(context,attrs);    }    public BaseLoading(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        init(context,attrs);    }    private void init(Context context, AttributeSet attrs){        this.context=context;        TypedArray ta=context.obtainStyledAttributes(attrs, R.styleable.BasicLoading);        int duration = ta.getInt(R.styleable.BasicLoading_duration, DEFAULT_DURATION_TIME);        setDuration(duration);        ta.recycle();    }    private void setDuration(int duration){        this.duration=duration;        if(this.duration<0||this.duration>MAX_DURATION_TIME){            this.duration=DEFAULT_DURATION_TIME;        }    }    public int getDuration(){        return this.duration;    }    public Context getViewContext(){        return this.context;    }    protected abstract void start();    protected abstract void stop();    protected abstract void handle(Message msg);    protected Handler handler=new Handler(){        @Override        public void handleMessage(Message msg) {            handle(msg);        }    };}

/** * 循环播放图片组自定义View */public class CycleLoading extends BaseLoading{    private Drawable startBg;    private Drawable endBg;    private ImageView switcher;    private Drawable[] resources=null;    private boolean isStarted=false;    private boolean isExist=false;    private int index=-1;    private TaskThread thread;    public CycleLoading(Context context) {        super(context);        init(context,null);    }    public CycleLoading(Context context, AttributeSet attrs) {        super(context, attrs);        init(context,attrs);    }    public CycleLoading(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        init(context,attrs);    }    @Override    public void start() {        if(isStarted){            return;        }        isExist=false;        switcher.setImageDrawable(startBg);        if(this.resources==null){            throw new NullPointerException("resource array is null");        }        thread=new TaskThread();        thread.start();        isStarted=true;    }    @Override    public void stop() {        isExist=true;        if(thread!=null){            thread.interrupt();            thread=null;        }    }    @Override    protected void handle(Message msg) {        if(!isExist){            switch (msg.what){                case 1:                    switcher.setImageDrawable(endBg);                    break;                case 0:                    if(index==this.resources.length-1){                        index=-1;                    }                    index++;                    switcher.setImageDrawable(resources[index]);                    break;            }        }else{            switcher.setImageDrawable(endBg);        }    }    private void init(Context context, AttributeSet attrs){        TypedArray ta=context.obtainStyledAttributes(attrs, R.styleable.CycleLoading);        startBg=ta.getDrawable(R.styleable.CycleLoading_startBg);        endBg=ta.getDrawable(R.styleable.CycleLoading_endBg);        initImageView();        ta.recycle();    }    private void initImageView(){        switcher=new ImageView(getViewContext());        switcher.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,ViewGroup.LayoutParams.WRAP_CONTENT));        switcher.setPadding(0,0,0,0);        switcher.setImageDrawable(startBg);        addView(switcher);    }    public void setStartDrawable(int resId){        Drawable start=getResources().getDrawable(resId);        if(start==null){            throw new RuntimeException("not found resource for this resId");        }        this.startBg=start;        switcher.setImageDrawable(startBg);    }    public void setStartDrawable(Drawable drawable){        if(drawable==null){            throw new RuntimeException("not found resource for this drawable");        }        this.startBg=drawable;        switcher.setImageDrawable(startBg);    }    public Drawable getStartDrawable(){        return this.startBg;    }    public void setEndDrawable(int resId){        Drawable end=getResources().getDrawable(resId);        if(end==null){            throw new RuntimeException("not found resource for this resId");        }        this.endBg=end;    }    public void setEndDrawable(Drawable drawable){        if(drawable==null){            throw new RuntimeException("not found resource for this drawable");        }    }    public Drawable getEndDrawable(){        return this.endBg;    }    public void setDrawable(Drawable[] resources){        this.resources=resources;    }    public Drawable[] getDrawable(){        return this.resources;    }    class TaskThread extends Thread{        @Override        public void run() {            super.run();            while (!isExist){                try {                    Thread.sleep(getDuration());                } catch (InterruptedException e) {                    e.printStackTrace();                }                handler.sendEmptyMessage(0);            }            isStarted=false;            handler.sendEmptyMessage(1);        }    }}

自定义属性

<!-- BasicLoading -->    <declare-styleable name="BasicLoading">        <attr name="duration" format="integer" />    </declare-styleable>    <!-- CycleLoading -->    <declare-styleable name="CycleLoading">        <attr name="startBg" format="reference" />        <attr name="endBg" format="reference" />    </declare-styleable>

二、通过帧动画的方式

注意android studio中anim文件夹中不支持animation-list，需要把这个文件建在drawable下

<?xml version="1.0" encoding="utf-8"?><animation-list xmlns:android="http://schemas.android.com/apk/res/android"    android:oneshot="false">    <item android:duration="300" android:drawable="@drawable/chatfrom_voice_playing_f1"/>    <item android:duration="300" android:drawable="@drawable/chatfrom_voice_playing_f2"/>    <item android:duration="300" android:drawable="@drawable/chatfrom_voice_playing_f3"/></animation-list>

三、具体使用

public class MainActivity extends AppCompatActivity {    private LinearLayout audioReceive;    private CycleLoading audioReceiveCycle;    private LinearLayout audioSend;    private CycleLoading audioSendCycle;    private LinearLayout audioReceiveAnim;    private ImageView audioReceiveAnimImg;    private LinearLayout audioSendAnim;    private ImageView audioSendAnimImg;    private Drawable[] audioReceiveDrawable;    private Drawable[] audioSendDrawable;    private AnimationDrawable animationDrawableReceive;    private AnimationDrawable animationDrawableSend;    private boolean receiveIsStart=false;    private boolean sendIsStart=false;    private boolean receiveAnimIsStart=false;    private boolean sendAnimIsStart=false;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        initView();        initData();        initEvent();    }    private void initView() {        audioReceive = (LinearLayout) findViewById(R.id.audioReceive);        audioReceiveCycle = (CycleLoading) findViewById(R.id.audioReceiveCycle);        audioSend = (LinearLayout) findViewById(R.id.audioSend);        audioSendCycle = (CycleLoading) findViewById(R.id.audioSendCycle);        audioReceiveAnim= (LinearLayout) findViewById(R.id.audioReceiveAnim);        audioReceiveAnimImg= (ImageView) findViewById(R.id.audioReceiveAnimImg);        audioSendAnim= (LinearLayout) findViewById(R.id.audioSendAnim);        audioSendAnimImg= (ImageView) findViewById(R.id.audioSendAnimImg);    }    private void initData() {        //初始化资源        audioReceiveDrawable=new Drawable[]{getResources().getDrawable(R.drawable.chatfrom_voice_playing_f1),                getResources().getDrawable(R.drawable.chatfrom_voice_playing_f2),getResources().                getDrawable(R.drawable.chatfrom_voice_playing_f3)};        audioSendDrawable=new Drawable[]{getResources().getDrawable(R.drawable.chatto_voice_playing_f1),                getResources().getDrawable(R.drawable.chatto_voice_playing_f2),                getResources().getDrawable(R.drawable.chatto_voice_playing_f3)};        //初始化动画        animationDrawableReceive= (AnimationDrawable) audioReceiveAnimImg.getDrawable();        animationDrawableSend= (AnimationDrawable) audioSendAnimImg.getDrawable();    }    private void initEvent() {        //自定义View接收        audioReceive.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                if(!receiveIsStart){                    audioReceiveCycle.setDrawable(audioReceiveDrawable);                    audioReceiveCycle.start();                    receiveIsStart=true;                }else{                    audioReceiveCycle.stop();                    receiveIsStart=false;                }            }        });        //自定义View发送        audioSend.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                if(!sendIsStart){                    audioSendCycle.setDrawable(audioSendDrawable);                    audioSendCycle.start();                    sendIsStart=true;                }else{                    audioSendCycle.stop();                    sendIsStart=false;                }            }        });        //帧动画接收        audioReceiveAnim.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                if(!receiveAnimIsStart){                    animationDrawableReceive.start();                    receiveAnimIsStart=true;                }else{                    animationDrawableReceive.stop();                    receiveAnimIsStart=false;                }            }        });        //帧动画发送        audioSendAnim.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                if(!sendAnimIsStart){                    animationDrawableSend.start();                    sendAnimIsStart=true;                }else{                    animationDrawableSend.stop();                    sendAnimIsStart=false;                }            }        });    }}

源码下载：
源码AudioChatView