2484天 Mr.贰呆

唯一自信的就是自己的人品。
寻求王者玩家一起开黑净化峡谷环境​​

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

发布于 / 8782 次围观 / 0 条评论 / Android / 二呆 /

一个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弹窗代码:

private void showGifViewWindow(List<GiftEntity> giftList) {
	if (popWindow == null) {
		initGiftPopwindow(giftList);
		if (giftList != null && giftList.size() != 0) {
			for (int i = 0; i < (giftList.size() - 1) / 8 + 1; i++) {
				initGrideView(i);
			}
			GiftPageAdapter giftPageAdapter = new GiftPageAdapter();
			vpGiftContainer.setAdapter(giftPageAdapter);
			cpiGiftIndicator.setViewPager(vpGiftContainer);
		}
	}
	popWindow.showAtLocation(btnGift, Gravity.BOTTOM, 0, 0);
	resetState(mGiftId, mGiftName);
}


自定义每页礼物GridView的封装代码: 
private String mGiftId,mGiftType,mGiftName;
private List<View> imageViewList = new ArrayList();
private List<CustomGrideView> grideList = new ArrayList<CustomGrideView>();
private void initGrideView(int i) {
	CustomGrideView mGifGrideView = new CustomGrideView(this, giftList, i);
	grideList.add(mGifGrideView);
	mGifGrideView.setOnGiftSelectCallBack(new CustomGrideView.EffectGiftCallBack() {
		@Override
		public void effectGiftId(String giftId, String giftType, String giftName, int type) {
			mGiftId = giftId;
			mGiftType = giftType;
			mGiftName = giftName;
			for (CustomGrideView mGride : grideList) {
				if (mGride != null && mGride.getType() != type) {
					mGride.clearAdapter();
				}
			}
			resetState(giftId,giftName);
			mc.onFinish();
		}
	});
	imageViewList.add(mGifGrideView.getViews());
}

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

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

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

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

/**
 * 计时器控制连续送礼物的状态
 */
private int clickTimes = 2;
private Boolean isContinteFinish = false;
class MyCountDownTimer extends CountDownTimer {
	public MyCountDownTimer(long millisInFuture, long countDownInterval) {
		super(millisInFuture, countDownInterval);
	}
	@Override
	public void onFinish() {
		clickTimes = 2;
		if (isContinteFinish) {
			isContinteFinish = false;
			if (btnContinueClick != null && btnGiftSend != null) {
				btnContinueClick.setVisibility(View.GONE);
				btnGiftSend.setVisibility(View.VISIBLE);
			}
		}
	}
	@Override
	public void onTick(long millisUntilFinished) {
		isContinteFinish = true;
		if (btnContinueClick != null) {
			btnContinueClick.setText("连送" + "\n" + millisUntilFinished / 100);
		}
	}
}


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

相关源码:

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

github.com/JakeWharton/ViewPagerIndicator

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

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

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

三、关于Android直播App其他功能的实现敬请关注后续直播……

sitemap