Android直播送礼物发消息页面（仿印客直播）

简介

年关将至，给大家拜个早年，祝大家鸡年大吉吧 ~ 哈哈 有污的同学面壁去吧！闲话不多说，今天实现的效果是直播的时候浮层View，不知道直播的sdk是不是都提供UI这方面的东西。先看一张效果图：

主要实现效果：
（当然直播的时候视频是主要的，这里不关心视频，重点是View，这里只是随意播放了一个视频。）

1. 首先是顶部横线滑动的ListView显示房间的成员；
2. ListView 自动滚动到底部；
3. 自定义实现刷礼物的View，过段时间自动消失；
4. 送礼物的时候弹出礼物的DialogFragment+ViewPager+GridView;
5. 点击评论的时候监听弹出键盘的事件；
6. 直播底部显示送心的特效（这里用了第三方的 tyrant:heartlayout）；
7. VedioView播放视频；

实现过程

首先需要清楚视频是出于最底部的，在视频上面浮着View，这里我用了ViewPager来实现右滑”隐藏“View，其实是切换。
很简单布局：

<?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"
    android:background="@drawable/wether_bg"
    android:orientation="vertical">
    <cm.wzh.live.view.MyVideoView
        android:id="@+id/video"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:background="@null"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </android.support.v4.view.ViewPager>
</RelativeLayout>

接下来实现2个Fragment，一个是空白的Fragment（NoFragment ），一个是带有各种特效的Fragment（ChatFragment ），再填充到ViewPager里面去，当然这里还需要去实现视频的播放，很简单的VedioView，这里就不再多说~

//从Raw资源文件读取视频
final String uri = ("android.resource://" + this.getPackageName() + "/raw/vedio");
videoView.setVideoURI(Uri.parse(uri));
videoView.start();
//视频可以循环播放
videoView.setOnCompletionListener(new MediaPlayer.OnCompletionListener() {
    @Override
    public void onCompletion(MediaPlayer mp) {
        videoView.setVideoURI(Uri.parse(uri));
        videoView.start();
    }
});

接下来看主要的ChatFragment ：

package cm.wzh.live.ui;

import android.content.Context;
import android.graphics.Color;
import android.net.Uri;
import android.os.Bundle;
import android.os.Handler;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.inputmethod.InputMethodManager;
import android.widget.AdapterView;
import android.widget.EditText;
import android.widget.ListView;
import android.widget.VideoView;

import java.util.ArrayList;
import java.util.Random;
import java.util.Timer;

import cm.wzh.live.R;
import cm.wzh.live.adapter.MemberAdapter;
import cm.wzh.live.adapter.MessageAdapter;
import cm.wzh.live.entity.Gift;
import cm.wzh.live.entity.Member;
import cm.wzh.live.entity.Message;
import cm.wzh.live.utils.CharUtils;
import cm.wzh.live.view.FragmentDialog;
import cm.wzh.live.view.FragmentGiftDialog;
import cm.wzh.live.view.GiftItemView;
import cm.wzh.live.view.HorizontialListView;
import cm.wzh.live.view.MyVideoView;
import tyrantgit.widget.HeartLayout;

/**
 * author：Administrator on 2016/12/26 09:35
 * description:文件说明
 * version:版本
 */
public class ChatFragment extends Fragment  implements View.OnClickListener, View.OnLayoutChangeListener {
    private HorizontialListView listview ;
    private ListView messageList ;
    private GiftItemView giftView ;
    private MemberAdapter mAdapter ;
    private MessageAdapter messageAdapter ;
    private ArrayList<Member> members ;
    private ArrayList<Message> messages ;
    private ArrayList<Gift> gifts ;
    private HeartLayout heartLayout ;
    private Random mRandom ;
    private Timer mTimer = new Timer();
    private View sendView,menuView ,topView;
    private EditText sendEditText ;
    //屏幕高度
    private int screenHeight = 0;
    //软件盘弹起后所占高度阀值
    private int keyHeight = 0;
    private View rootView ;


    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        super.onCreateView(inflater, container, savedInstanceState);
        View view = LayoutInflater.from(getActivity()).inflate(R.layout.fragment_chat,null,false);
        initView(view);
        initData();
        return view;
    }

    private void initView(View view) {
        mRandom = new Random();
        listview = (HorizontialListView) view.findViewById(R.id.list);
        mAdapter = new MemberAdapter(getActivity());
        listview.setAdapter(mAdapter);
        listview.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
                 showDialog(mAdapter.datas.get(i));
            }
        });
        messageList = (ListView) view.findViewById(R.id.list_message);
        messageAdapter = new MessageAdapter(getActivity());
        messageList.setAdapter(messageAdapter);
        giftView = (GiftItemView) view.findViewById(R.id.gift_item_first);
        heartLayout = (HeartLayout)view.findViewById(R.id.heart_layout);
        handler.postDelayed(runnable, 2000);//每5秒执行一次runnable.
        view.findViewById(R.id.send_message).setOnClickListener(this);
        view.findViewById(R.id.gift).setOnClickListener(this);
        sendView = view.findViewById(R.id.layout_send_message);
        menuView = view.findViewById(R.id.layout_bottom_menu);
        topView = view.findViewById(R.id.layout_top);
        sendEditText = (EditText) view.findViewById(R.id.send_edit);
        //获取屏幕高度
        screenHeight = getActivity().getWindowManager().getDefaultDisplay().getHeight();
        //阀值设置为屏幕高度的1/3
        keyHeight = screenHeight/3;
        rootView = view.findViewById(R.id.activity_main);
        rootView.addOnLayoutChangeListener(this);
    }

    private void showDialog(Member m) {
        FragmentDialog.newInstance(m.name, m.sig, "确定", "取消",-1,false, new FragmentDialog.OnClickBottomListener() {
            @Override
            public void onPositiveClick() {

            }

            @Override
            public void onNegtiveClick() {

            }
        }).show(getChildFragmentManager(),"dialog");

    }

    Handler handler=new Handler();
    Runnable runnable=new Runnable() {
        @Override
        public void run() {
            if (messages!=null){
                Message m = new Message();
                m.img = "http://v1.qzone.cc/avatar/201503/06/18/27/54f981200879b698.jpg%21200x200.jpg" ;
                m.name=CharUtils.getRandomString(8) ;
                m.level = (int)(Math.random()*100+1) ;
                m.message= CharUtils.getRandomString(20);
                messages.add(m);
                messageAdapter.notifyDataSetChanged();
                messageList.setSelection(messageAdapter.getCount()-1);
            }
            handler.postDelayed(this, 1000);
        }
    };
    Handler heartHandler=new Handler();
    Runnable heartRunnable=new Runnable() {
        @Override
        public void run() {
            heartLayout.post(new Runnable() {
                @Override
                public void run() {
                    heartLayout.addHeart(randomColor());
                }
            });
            heartHandler.postDelayed(this, 1000);
        }
    };

    @Override
    public void onPause() {
        super.onPause();
        heartHandler.removeCallbacks(heartRunnable);
    }

    @Override
    public void onResume() {
        super.onResume();
        heartHandler.postDelayed(heartRunnable, 2000);
    }

    private int randomColor() {
        return Color.rgb(mRandom.nextInt(255), mRandom.nextInt(255), mRandom.nextInt(255));
    }
    /**
     * 添加一些数据
     */
    private void initData() {
        members = new ArrayList<>();
        for (int i=0;i<18;i++){
            Member m = new Member();
            m.img = "http://www.ld12.com/upimg358/allimg/c150808/143Y5Q9254240-11513_lit.png" ;
            m.name="Baby" ;
            m.sig = "这个家伙很懒，什么都没留下！";
            members.add(m);
        }
        mAdapter.setDatas(members);


        messages = new ArrayList<>();
        for (int i=0;i<18;i++){
            Message m = new Message();
            m.img = "http://www.ld12.com/upimg358/allimg/c150808/143Y5Q9254240-11513_lit.png" ;
            m.name="Baby" ;
            m.level = i ;
            m.message="掘金是中国质量最高的技术分享社区,邀请稀土用户作为 Co-Editor 来分享优质的技术干货" ;
            messages.add(m);
        }
        messageAdapter.setDatas(messages);

        gifts = new ArrayList<>();
    }

    @Override
    public void onDestroy() {
        super.onDestroy();
        mTimer.cancel();
        handler.removeCallbacks(runnable);
    }

    @Override
    public void onClick(View v) {
        int id = v.getId() ;
        if (id==R.id.send_message){
            sendView.setVisibility(View.VISIBLE);
            menuView.setVisibility(View.GONE);
            topView.setVisibility(View.GONE);
            sendEditText.requestFocus();
            InputMethodManager inputManager =
                    (InputMethodManager)sendEditText.getContext().getSystemService(Context.INPUT_METHOD_SERVICE);
            inputManager.showSoftInput(sendEditText, 0);
        }else if (id==R.id.gift){
            FragmentGiftDialog.newInstance().setOnGridViewClickListener(new FragmentGiftDialog.OnGridViewClickListener() {
                @Override
                public void click(Gift gift) {
                    gift.name="文人骚客";
                    gift.giftName = "送你一个小礼物" ;
                    if (!gifts.contains(gift)){
                        gifts.add(gift);
                        giftView.setGift(gift);
                    }
                    giftView.addNum(1);
                }
            }).show(getChildFragmentManager(),"dialog");
        }
    }

    @Override
    public void onLayoutChange(View v, int left, int top, int right, int bottom, int oldLeft, int oldTop, int oldRight, int oldBottom) {
        //现在认为只要控件将Activity向上推的高度超过了1/3屏幕高，就认为软键盘弹起
        if(oldBottom != 0 && bottom != 0 &&(oldBottom - bottom > keyHeight)){
            sendView.setVisibility(View.VISIBLE);
            menuView.setVisibility(View.GONE);
            topView.setVisibility(View.GONE);
//            Toast.makeText(MainActivity.getActivity(), "监听到软键盘弹起...", Toast.LENGTH_SHORT).show();
        }else if(oldBottom != 0 && bottom != 0 &&(bottom - oldBottom > keyHeight)){
            sendView.setVisibility(View.GONE);
            menuView.setVisibility(View.VISIBLE);
            topView.setVisibility(View.VISIBLE);
//            Toast.makeText(MainActivity.getActivity(), "监听到软件盘关闭...", Toast.LENGTH_SHORT).show();
        }
    }
}

这里可以看到，已经把刷礼物的View封装成了 GiftItemView 。

package cm.wzh.live.view;

import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.content.Context;
import android.os.Handler;
import android.text.TextUtils;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.LinearInterpolator;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.bumptech.glide.Glide;

import java.util.ArrayList;

import cm.wzh.live.R;
import cm.wzh.live.entity.Gift;

/**
 * author：Administrator on 2016/12/27 09:34
 * description:文件说明
 * version:版本
 */
public class GiftItemView extends LinearLayout {

    private ImageView avatar ;
    private TextView name ;
    private TextView giftName ;
    private TextView giftNumTv ;
    private ImageView giftIv ;
    private Gift gift ;

    private int giftNum = 1 ;
    private boolean isShow = false ;

    public GiftItemView(Context context) {
        this(context,null);
    }

    public GiftItemView(Context context, AttributeSet attrs) {
        this(context, attrs,0);
    }

    public GiftItemView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        setOrientation(VERTICAL);
        setVisibility(INVISIBLE);
        LayoutParams lp = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        setLayoutParams(lp);
        View convertView = LayoutInflater.from(getContext()).inflate(R.layout.item_gift_message,null,false);
        avatar = (ImageView) convertView.findViewById(R.id.avatar);
        giftIv = (ImageView) convertView.findViewById(R.id.gift_type);
        name = (TextView) convertView.findViewById(R.id.name);
        giftName = (TextView) convertView.findViewById(R.id.gift_name);
        giftNumTv = (TextView) convertView.findViewById(R.id.gift_num);
        addView(convertView);
    }

    public void setGift(Gift gift) {
        this.gift = gift;
        refreshView();
    }

    /**
     * 设置礼物数量放大和复原的View
     * @param view
     * @param duration
     */
    public void scaleView(View view,long duration){
        AnimatorSet animatorSet = new AnimatorSet();//组合动画
        ObjectAnimator scaleX = ObjectAnimator.ofFloat(view, "scaleX", 2f, 1f);
        ObjectAnimator scaleY = ObjectAnimator.ofFloat(view, "scaleY", 2f, 1f);
        animatorSet.setDuration(duration);
        animatorSet.setInterpolator(new LinearInterpolator());
        animatorSet.play(scaleY).with(scaleX);//两个动画同时开始
        animatorSet.start();
        animatorSet.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                if (onAnimatorListener!=null){
                    onAnimatorListener.onAnimationEnd(gift);
                }
            }

            @Override
            public void onAnimationStart(Animator animation) {
                super.onAnimationStart(animation);
                if (onAnimatorListener!=null){
                    onAnimatorListener.onAnimationStart(animation);
                }
            }
        });
    }

    /**
     * 刷新view
     */
    public void refreshView(){
        if (gift==null){
            return;
        }
        giftNum = gift.num ;
        if (!TextUtils.isEmpty(gift.img)){
            Glide.with(getContext()).load(gift.img).placeholder(R.drawable.default_head).into(avatar);
        }else {
            avatar.setImageResource(R.drawable.default_head);
        }
        name.setText(gift.name);
        giftName.setText(gift.giftName);
        giftNumTv.setText("x"+gift.num);
        giftIv.setImageResource(gift.giftType);
        scaleView(giftNumTv,200);
    }

    /**
     * 连续点击送礼物的时候数字缩放效果
     * @param num
     */
    public void addNum(int num){
        giftNum += num ;
        giftNumTv.setText("x"+giftNum);
        scaleView(giftNumTv,200);
        handler.removeCallbacks(runnable);
        if (!isShow()){
            show();
        }
        handler.postDelayed(runnable, 3000);
    }
    Handler handler=new Handler();
    Runnable runnable=new Runnable() {
        @Override
        public void run() {
            isShow = false ;
            giftNum = 0;
            setVisibility(INVISIBLE);
        }
    };

    /**
     * 显示view，并开启定时器
     */
    public void show(){
        isShow = true ;
        setVisibility(VISIBLE);
        handler.postDelayed(runnable, 3000);
    }

    public boolean isShow() {
        return isShow;
    }

    private OnAnimatorListener onAnimatorListener ;

    public void setOnAnimatorListener(OnAnimatorListener onAnimatorListener) {
        this.onAnimatorListener = onAnimatorListener;
    }

    public interface OnAnimatorListener{
        public void onAnimationEnd(Gift gift);
        public void onAnimationStart(Animator animation);
    }
}

主要是Handler+Runnable实现定时任务，当连续送礼物的时候再重新计时，用属性动画ObjectAnimator对送的数字缩放动画。
对于ListView自动滚动是定时任务每来一个Item就加到ListView集合里面，然后用listview.setSelection(int adapter.getCount())定位到最后一个Item。

有兴趣的可以看一下源代码： github下载地址 github上有apk文件可以下载体验下。
如果有什么问题，希望大家指出来，谢谢~