Android直播送禮物發(fā)消息頁面（仿印客直播）

簡介

年關(guān)將至，給大家拜個早年，祝大家雞年大吉吧 ~ 哈哈 有污的同學(xué)面壁去吧！閑話不多說，今天實(shí)現(xiàn)的效果是直播的時候浮層View，不知道直播的sdk是不是都提供UI這方面的東西。先看一張效果圖：

實(shí)現(xiàn)效果圖
實(shí)現(xiàn)效果圖

主要實(shí)現(xiàn)效果：
（當(dāng)然直播的時候視頻是主要的，這里不關(guān)心視頻，重點(diǎn)是View，這里只是隨意播放了一個視頻。）

  1. 首先是頂部橫線滑動的ListView顯示房間的成員；
  2. ListView 自動滾動到底部；
  3. 自定義實(shí)現(xiàn)刷禮物的View，過段時間自動消失；
  4. 送禮物的時候彈出禮物的DialogFragment+ViewPager+GridView;
  5. 點(diǎn)擊評論的時候監(jiān)聽彈出鍵盤的事件；
  6. 直播底部顯示送心的特效（這里用了第三方的 tyrant:heartlayout）；
  7. VedioView播放視頻；

實(shí)現(xiàn)過程

首先需要清楚視頻是出于最底部的，在視頻上面浮著View，這里我用了ViewPager來實(shí)現(xiàn)右滑”隱藏“View，其實(shí)是切換。
很簡單布局：

<?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>

接下來實(shí)現(xiàn)2個Fragment，一個是空白的Fragment（NoFragment ），一個是帶有各種特效的Fragment（ChatFragment ），再填充到ViewPager里面去，當(dāng)然這里還需要去實(shí)現(xiàn)視頻的播放，很簡單的VedioView，這里就不再多說~

//從Raw資源文件讀取視頻
final String uri = ("android.resource://" + this.getPackageName() + "/raw/vedio");
videoView.setVideoURI(Uri.parse(uri));
videoView.start();
//視頻可以循環(huán)播放
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秒執(zhí)行一次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();
        //閥值設(shè)置為屏幕高度的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));
    }
    /**
     * 添加一些數(shù)據(jù)
     */
    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="掘金是中國質(zhì)量最高的技術(shù)分享社區(qū),邀請稀土用戶作為 Co-Editor 來分享優(yōu)質(zhì)的技術(shù)干貨" ;
            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) {
        //現(xiàn)在認(rèn)為只要控件將Activity向上推的高度超過了1/3屏幕高，就認(rèn)為軟鍵盤彈起
        if(oldBottom != 0 && bottom != 0 &&(oldBottom - bottom > keyHeight)){
            sendView.setVisibility(View.VISIBLE);
            menuView.setVisibility(View.GONE);
            topView.setVisibility(View.GONE);
//            Toast.makeText(MainActivity.getActivity(), "監(jiān)聽到軟鍵盤彈起...", 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(), "監(jiān)聽到軟件盤關(guān)閉...", Toast.LENGTH_SHORT).show();
        }
    }
}

這里可以看到，已經(jīng)把刷禮物的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();
    }

    /**
     * 設(shè)置禮物數(shù)量放大和復(fù)原的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);
    }

    /**
     * 連續(xù)點(diǎn)擊送禮物的時候數(shù)字縮放效果
     * @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實(shí)現(xiàn)定時任務(wù)，當(dāng)連續(xù)送禮物的時候再重新計時，用屬性動畫ObjectAnimator對送的數(shù)字縮放動畫。
對于ListView自動滾動是定時任務(wù)每來一個Item就加到ListView集合里面，然后用listview.setSelection(int adapter.getCount())定位到最后一個Item。

有興趣的可以看一下源代碼： github下載地址 github上有apk文件可以下載體驗(yàn)下。
如果有什么問題，希望大家指出來，謝謝~

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容