Android直播App礼物弹窗及连送礼物动画

二呆

一个Android直播App中，除了绚丽的礼物动画，首先要有礼物的弹出窗口，而且每个礼物都会有不同的类型，比如保时捷只1辆1辆的送，而像樱花这种礼物可以连续送，下面就实现这个功能，先看下示例。

一、直播App礼物弹窗的实现

实现礼物弹窗过程中，曾试想过用ViewPager+Fragment实现，因为在Fragment中认为改布局时会很方便，但很容易报错说在Popupwindow中找不到ViewPager的id的错误，如果用ActivityDialog的话，又面临如果想更新界面的话，在ViewPager中更新Fragment又比较困扰，这种思路属于顺序思想，下面我们将使用自定义GridView当作每一页礼物界面来实现，而排除使用ViewPager的方式，从而迎刃而解，如果你使用其他方式实现可与我交流。

1、首先要有礼物的实体类，我们定义为GiftEntity，假设包含属性id、name、type、price、pic等。
2、模拟礼物数据，假设有10种礼物，封装到List集合中，赋值于变量giftList。
3、点击按钮弹出Popupwindow礼物弹窗。
4、终点在于将每页礼物自定义成CustomGrideView，在内部进行点击事件等操作。能体现思路的代码如下：
显示礼物Popupwindow弹窗代码：

1. private void showGifViewWindow(List<GiftEntity> giftList) {
   
2.         if (popWindow == null) {
   
3.                 initGiftPopwindow(giftList);
   
4.                 if (giftList != null && giftList.size() != 0) {
   
5.                         for (int i = 0; i < (giftList.size() - 1) / 8 + 1; i++) {
   
6.                                 initGrideView(i);
   
7.                         }
   
8.                         GiftPageAdapter giftPageAdapter = new GiftPageAdapter();
   
9.                         vpGiftContainer.setAdapter(giftPageAdapter);
   
10.                         cpiGiftIndicator.setViewPager(vpGiftContainer);
    
11.                 }
    
12.         }
    
13.         popWindow.showAtLocation(btnGift, Gravity.BOTTOM, 0, 0);
    
14.         resetState(mGiftId, mGiftName);
    
15. }

复制代码

自定义每页礼物GridView的封装代码：

1. private String mGiftId,mGiftType,mGiftName;
   
2. private List<View> imageViewList = new ArrayList();
   
3. private List<CustomGrideView> grideList = new ArrayList<CustomGrideView>();
   
4. private void initGrideView(int i) {
   
5.         CustomGrideView mGifGrideView = new CustomGrideView(this, giftList, i);
   
6.         grideList.add(mGifGrideView);
   
7.         mGifGrideView.setOnGiftSelectCallBack(new CustomGrideView.EffectGiftCallBack() {
   
8.                 @Override
   
9.                 public void effectGiftId(String giftId, String giftType, String giftName, int type) {
   
10.                         mGiftId = giftId;
    
11.                         mGiftType = giftType;
    
12.                         mGiftName = giftName;
    
13.                         for (CustomGrideView mGride : grideList) {
    
14.                                 if (mGride != null && mGride.getType() != type) {
    
15.                                         mGride.clearAdapter();
    
16.                                 }
    
17.                         }
    
18.                         resetState(giftId,giftName);
    
19.                         mc.onFinish();
    
20.                 }
    
21.         });
    
22.         imageViewList.add(mGifGrideView.getViews());
    
23. }

复制代码

从以上图二可以看出用到了回调技术和GridView的适配方法，通过继承PagerAdapter实现翻页的功能，而imageViewList集合就是代表所有页礼物的集合，具体核心代码稍后给出。

二、直播App礼物连送的动画实现

1、连送礼物的动画功能主要是用到了CountDownTimer计时器的用法，当点击了可连送的礼物时，不断计时改变状态。

通过CountDownTimer计时器实现连送礼物的功能：

1. /**
   
2. * 计时器控制连续送礼物的状态
   
3. */
   
4. private int clickTimes = 2;
   
5. private Boolean isContinteFinish = false;
   
6. class MyCountDownTimer extends CountDownTimer {
   
7.         public MyCountDownTimer(long millisInFuture, long countDownInterval) {
   
8.                 super(millisInFuture, countDownInterval);
   
9.         }
   
10.         @Override
    
11.         public void onFinish() {
    
12.                 clickTimes = 2;
    
13.                 if (isContinteFinish) {
    
14.                         isContinteFinish = false;
    
15.                         if (btnContinueClick != null && btnGiftSend != null) {
    
16.                                 btnContinueClick.setVisibility(View.GONE);
    
17.                                 btnGiftSend.setVisibility(View.VISIBLE);
    
18.                         }
    
19.                 }
    
20.         }
    
21.         @Override
    
22.         public void onTick(long millisUntilFinished) {
    
23.                 isContinteFinish = true;
    
24.                 if (btnContinueClick != null) {
    
25.                         btnContinueClick.setText("连送" + "\n" + millisUntilFinished / 100);
    
26.                 }
    
27.         }
    
28. }

复制代码

2、当点击发送礼物按钮时，再通过礼物本身的类型属性，判断是否是可以连送的礼物，如果可以连送将累加次数，决定送出多少小礼物。

相关源码：

①此源码用到了ViewPagerIndicator库，可以在github中找到。

github.com/JakeWharton/ViewPagerIndicator

如果ViewPagerIndicator导入后找不到类，需要检查自己项目用到的V4包的版本和ViewPagerIndicator库中V4包的版本是否匹配，另外，引ViewPagerIndicator库中含有V4包，因此需要删除自己项目中的V4包，并可以选择更新到最新版本。

②Android直播App礼物弹窗及连送礼物动画Demo源码地址：

https://github.com/muzishanshi/app-livegift-demo