Android直播间购物袋动画,Android直播送礼物发消息页面（仿印客直播）

简介

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

实现效果图

主要实现效果：

(当然直播的时候视频是主要的，这里不关心视频，重点是View，这里只是随意播放了一个视频。)

首先是顶部横线滑动的ListView显示房间的成员；

ListView 自动滚动到底部；

自定义实现刷礼物的View，过段时间自动消失；

送礼物的时候弹出礼物的DialogFragment+ViewPager+GridView;

点击评论的时候监听弹出键盘的事件；

直播底部显示送心的特效(这里用了第三方的 tyrant:heartlayout)；

VedioView播放视频；

实现过程

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

很简单布局：

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@drawable/wether_bg"

android:orientation="vertical">

android:id="@+id/video"

android:layout_width="match_parent"

android:layout_height="match_parent" />

android:id="@+id/view_pager"

android:background="@null"

android:layout_width="match_parent"

android:layout_height="match_parent">

接下来实现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 members ;

private ArrayList messages ;

private ArrayList 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文件可以下载体验下。

如果有什么问题，希望大家指出来，谢谢~