首页 > Android中实现直播带货功能

快手直播软件漂浮功能,Android中实现直播带货功能

互联网 2020-12-03 06:51:03

 一、 这两年直播带货非常火,前段时间我们项目需求也提了这个功能,于是查看抖音、快手、淘宝的实现方式,结合咱们自己的项目,直播带货有2种场景:

1.一种是在单一页面进行商品购买.

2.一种是全局悬浮窗,在所有页面都可以去购物.

二、单一页面一个拖拽按钮就可以实现,全局悬浮窗比较麻烦,由于涉及到多个页面的跳转传递数据和回收问题。

三、单个页面的悬浮按钮,可以用一个自定义的可拖拽按钮来实现.

四、实现思路:

1.通过重写控件的onTouchEvent方法监听触摸效果.

2.通过view的setX和setY方法来实现移动.

3.使用属性动画来实现边缘吸附效果.

左右吸附功能,ScreenUtils.dip2px(getContext(), 20)是控制左右边距的大小,通过dp转化为px,适配不同分辨率的机型。如果需要靠边吸附,更改为0即可,如果不需要自动吸附功能,也直接注释掉就可以了,使用十分简单方便。

/** * @作者: njb * @时间: 2019/12/10 14:38 * @描述: 可拖动的悬浮按钮 */@SuppressLint("AppCompatCustomView")publicclass DragFloatActionButton extends ImageView {private int parentHeight;private int parentWidth;private int lastX;private int lastY;private boolean isDrag;public DragFloatActionButton(Context context) {super(context);}public DragFloatActionButton(Context context, AttributeSet attrs) {super(context, attrs);}public DragFloatActionButton(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);}@SuppressLint("ClickableViewAccessibility")@Overridepublic boolean onTouchEvent(MotionEvent event) {int rawX = (int) event.getRawX();int rawY = (int) event.getRawY();switch (event.getAction() & MotionEvent.ACTION_MASK) {case MotionEvent.ACTION_DOWN:isDrag = false;setPressed(true);getParent().requestDisallowInterceptTouchEvent(true);lastX = rawX;lastY = rawY;ViewGroup parent;if (getParent() != null) {parent = (ViewGroup) getParent();parentHeight = parent.getHeight();parentWidth = parent.getWidth();}break;case MotionEvent.ACTION_MOVE:if (parentHeightparentWidth - getWidth() ? parentWidth - getWidth() : x;y = getY() < 0 ? 0 : getY() + getHeight() > parentHeight ? parentHeight - getHeight() : y;setX(x);setY(y);lastX = rawX;lastY = rawY;Rlog.d("aa", "isDrag=" + isDrag + "getX=" + getX() + ";getY=" + getY() + ";parentWidth=" + parentWidth);break;case MotionEvent.ACTION_UP:if (isDrag) {//恢复按压效果setPressed(false);moveHide(rawX);}break;default:break;}//如果是拖拽则消耗事件,否则正常传递即可。return isDrag || super.onTouchEvent(event);}/** * 吸附动画 * @param rawX */private void moveHide(int rawX) {if (rawX >= parentWidth / 2) {//靠右吸附animate().setInterpolator(new DecelerateInterpolator()).setDuration(500).xBy(parentWidth - getWidth() - getX() - ScreenUtil.dip2px( 20)).start();} else {//靠左吸附ObjectAnimator oa = ObjectAnimator.ofFloat(this, "x", getX(),ScreenUtil.dip2px(20));oa.setInterpolator(new DecelerateInterpolator());oa.setDuration(500);oa.start();}}}

4.单页面实现的效果截图如下:

点击按钮就可以进入直播购物界面,这里就不写了,很简单的一个跳转事件.后面会给出全局悬浮窗实现方案。

五、全局悬浮窗:

这里全局悬浮窗用的是EasyFloat这个第三方库,由于项目时间太赶,所以用的现成的方案,没有专门用系统的windowmanager,EasyFloat的github地址为:https://github.com/princekin-f/EasyFloat,这里有详细的使用说明和介绍.导入方式:implementation 'com.github.princekin-f:EasyFloat:1.2.1'1.如果你要在整个项目全局使用的话就可以直接在application中初始化, ** * @author: njb * @date: 2020/2/28 0028 12:35 * @desc: */public class App extends Application {//全局Contextprivate static Context sContext;@Overridepublic void onCreate() {super.onCreate();sContext = getApplicationContext();//初始化悬浮窗initEasyFloat();}private void initEasyFloat() {EasyFloat.init(this);}public static Context getContext() {return sContext;}}

 2.请求系统浮窗权限

loadPermissions();

 

/** * 请求悬浮窗权限 */private void loadPermissions() {if (PermissionUtils.checkPermission(this)) {String liveId = "100086";//初始化悬浮窗initFlowWindow(liveId);}else {final AlertDialog.Builder alert = new AlertDialog.Builder(this);alert.setMessage("使用浮窗功能,需要您授权悬浮窗权限。");alert.setNegativeButton("取消", ((dialog, which) -> dialog.dismiss()));alert.setPositiveButton("去开启", (dialog, which) -> {String liveId = "100086";initFlowWindow(liveId);dialog.dismiss();});alert.show();}}

3.初始化悬浮窗布局,由于我们的需求是从直接跳转到购物页面,所以点击按钮回到直播间,这里只是给出悬浮窗的使用,具体的业务逻辑要根据需求自己去实现,当然回直播间后这个悬浮按钮也随之隐藏,如果需求不需要隐藏也可以设置不隐藏.

/** * 初始化悬浮窗布局 * @param liveId */private void initFlowWindow(String liveId) {if (!TextUtils.isEmpty(liveId)) {EasyFloat.with(this)// 设置浮窗xml布局文件.setLayout(R.layout.layout_float_window, view -> {// view就是我们传入的浮窗xml布局view.findViewById(R.id.go_to_image).setOnClickListener(view1 -> {//回直播 startActivity(new Intent(Mainivity.this,LiveActivity.class))//隐藏悬浮框EasyFloat.hideAppFloat("live");EasyFloat.dismissAppFloat("live");});})// 设置浮窗显示类型,默认只在当前Activity显示,可选一直显示、仅前台显示.setShowPattern(ShowPattern.FOREGROUND)// 设置吸附方式,共15种模式,详情参考SidePattern.setSidePattern(SidePattern.RESULT_HORIZONTAL)// 设置浮窗的标签,用于区分多个浮窗.setTag("live")// 设置浮窗是否可拖拽.setDragEnable(true)// 设置浮窗的对齐方式和坐标偏移量.setGravity(Gravity.END | Gravity.CENTER_VERTICAL, 0, 200)// 设置宽高是否充满父布局,直接在xml设置match_parent属性无效.setMatchParent(false, false)// 设置Activity浮窗的出入动画,可自定义,实现相应接口即可(策略模式),无需动画直接设置为null.setAnimator(new DefaultAnimator())// 设置系统浮窗的出入动画,使用同上.setAppFloatAnimator(new AppFloatDefaultAnimator()).show();EasyFloat.showAppFloat("live");} else {EasyFloat.hide();EasyFloat.hideAppFloat("live");}}

界面效果如下:

最后感谢刘振峰大佬的开源方案,全局悬浮窗介绍这么简单便捷.后面会尝试使用系统的windowmanager实现全局悬浮框.

免责声明:非本网注明原创的信息,皆为程序自动获取自互联网,目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责;如此页面有侵犯到您的权益,请给站长发送邮件,并提供相关证明(版权证明、身份证正反面、侵权链接),站长将在收到邮件24小时内删除。

相关阅读