Android - 直播上下滑动布局(2)

概览

Android - 直播布局(1)
Android - 直播布局(2)


Android - 直播布局(2)


项目的基础结构

项目基础结构如下:

Android - 直播上下滑动布局(2)_第1张图片

  1. BaseApplication 初始化日志以及 UncaughtExceptionHandler ,主要用于日志打印和异常捕获,不影响这个项目。
  2. MainActivity 应用的入口 Activity,该页面有两个入口,直播列表页面的数据完全一样,直播列表点击进入直播间以后,使用不同的服务器接口来实现上下滑动。
  3. LiveListActivity 直播列表页面。
  4. LiveSlideDetailActivity 直播详情页,仿京东接口实现的上下滑动,该页面使用的接口 https://www.hi-cat.cn/api/live
  5. LiveDetailActivity 直播详情页,使用直播间列表分页实现的上下滑动,该页面使用的接口 https://www.hi-cat.cn/api/live/slide

项目依赖

   ... 
   // 图片加载
    implementation 'com.github.bumptech.glide:glide:4.9.0'
    annotationProcessor 'com.github.bumptech.glide:compiler:4.9.0'

    // 网络请求
    implementation 'com.squareup.okhttp3:okhttp:3.11.0'
    // 事件总线
    implementation 'org.greenrobot:eventbus:3.2.0'

    // Gson
    implementation 'com.google.code.gson:gson:2.8.6'

    // 日志框架
    implementation 'com.tencent.mars:mars-xlog:1.2.3'

    // 弹幕库
    implementation 'com.github.ctiao:DanmakuFlameMaster:0.9.25'
    implementation 'com.github.ctiao:ndkbitmap-armv7a:0.9.21'

    // leakcanary
    debugImplementation 'com.squareup.leakcanary:leakcanary-android:2.4'

    // 下拉刷新组件
    implementation 'com.scwang.smart:refresh-layout-kernel:2.0.1'      
    implementation 'com.scwang.smart:refresh-header-classics:2.0.1'  


代码介绍

以 LiveSlideDetailActivity 为例,其上下滑动时,调用的方法为:

        mViewPager.setPageTransformer(false, new ViewPager.PageTransformer() {
            @Override
            public void transformPage(View page, float position) {
                if (mList.size() == 0 || mIsNotifyData) {
                    return;
                }
                ViewGroup viewGroup = (ViewGroup) page;
                if ((position < 0 && viewGroup.getId() != mCurrentItem)) {
                    // room_container 为视频播放的根布局 id
                    View rootView = viewGroup.findViewById(R.id.room_container);
                    if (rootView != null && rootView.getParent() != null && rootView.getParent() instanceof ViewGroup) {
                        ((ViewGroup) (rootView.getParent())).removeView(rootView);
                        mLiveProxy.onRemove();
                    }
                }

                // 满足此种条件,表明需要加载直播视频,以及聊天室了
                if (viewGroup.getId() == mCurrentItem && position == 0 && mLastItem != mCurrentItem) {
                    View rootView = mLiveProxy.getRootView();
                    if (rootView.getParent() != null && rootView.getParent() instanceof ViewGroup) {
                        ((ViewGroup) (rootView.getParent())).removeView(rootView);
                        mLiveProxy.onRemove();
                    }
                    loadData(viewGroup, mCurrentItem);

                    // 页面滑动时,预加载上一页和下一页的数据
                    LiveItemBean data = mList.get(mCurrentItem);
                    getLiveSlide(data.getLiveId());
                }
            }
        });

当竖直 ViewPager 滑动到某一 item 的时候,首先将直播间的布局从上一个 item 移除,同时销毁直播间数据。然后将直播间布局添加到当前 item ,同时加载直播间数据。


LiveProxy

LiveProxy:因为既要支持竖屏直播间、又要支持横屏直播间,两种直播间的界面和逻辑有较大差别。因此使用 LiveProxy 为代理入口类,目的是避免将所有代码写到一个类中。当然这里也可以使用 Fragment,只是我平时开发不喜欢用 Fragment,因为有些 Fragment 崩溃的 Bug 不好定位。

LiveProxy 除了代理 Activity 的生命周期方法以外,还有两个重要的方法: onAdd 和 onRemove。

onAdd:用户滑动显示该页面时候调用,在这个方法里初始化直播、聊天室。

onRemove: 用户滑动移除该页面,在这个方法里销毁直播、聊天室。


PortraitLiveManager

竖屏直播间的 UI 和 逻辑处理。


LandscapeLiveManager

横屏直播间的 UI 和 逻辑处理。


项目引用

  1. 点赞动画(单独抽取):https://github.com/tencentyun/MLVBSDK
  2. 横屏上方弹幕:https://github.com/bilibili/DanmakuFlameMaster bilibili 开源的弹幕组件,现在基本不怎么维护了,有比较多的 Bug,网上相关的资料不多。
  3. 竖直滑动组件:https://github.com/castorflex/VerticalViewPager 项目中对该组件有细微的改动,即横屏全屏的时候,禁止滑动。
  4. EventBus : https://github.com/greenrobot/EventBus

EventBus

其实就 Demo 而言没有必要使用 EventBus,主要我是 EventBus 重度使用者。

直播间的业务必然有很多网络请求,此时需要注意一种情况:

在直播间内点赞,然后发送网络请求同步 -> 用户快速滑动到另一个直播间 -> 网络请求返回,此时需要刷新点赞数,但是当前直播间和点赞的直播间已经不是一个直播间了。因此,网络请求回调,需要判断当前直播间是否和发送网络请求的直播间是否为同一个直播间。

我使用 EventBus 主要有几个原因:

  1. 简化回调代码。
  2. 处理 Activity 退出后,网络请求仍在执行,造成的内存泄露。
  3. 跨组件、跨 module 通信。

当然开发过程中要注意看错误日志,默认情况下,EventBus 会捕获事件处理中的异常,并将其打印。


接口数据来源

  1. 直播列表中的 blurImg 来源于京东。
  2. 直播广播列表的数据来源于 Acfun。

TODO

  1. 天猫和京东的直播布局,支持单击隐藏、左右滑动直播间隐藏。其实左右滑动的实现是一个水平的 ViewPager。
  2. 悬浮窗。

你可能感兴趣的:(Android)