直播基础功能 Android接入方法

一、获取Feed流

使用场景

有一个完整的页面可以展示直播feed,需要一下无限loading的直播feed。

示意图
接入方式

以下方式可获取单列、方形大卡样式的列表。TTLiveService.``_getLiveService_

().getOpenLiveListFactory().createLiveFragment(params)

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // ......
    FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
    // 1. 初始化参数
    OpenFeedParams params = new OpenFeedParams.Builder(FeedType.COMMON_FEED)
            .feedStyle(FeedStyle.SINGLE_LIST_H)
            .setEnableFeedTitle(true)
            .setEnableFeedBackIcon(true)
            .build();
    // 2. 获取直播feed列表
    Fragment feedFragment = TTLiveService.getLiveService().getOpenLiveListFact
ory().createLiveFragment(params);
    ft.add(R.id.fragment_container, feedFragment);
    ft.commit();
}
参数说明

OpenFeedParams,以下配置为Feed列表所有配置项,部分配置项只针对特定

FeedStyle生效,具体可参考后续表格

OpenFeedParams feedPrams = new OpenFeedParams.Builder(feedType) // feed 类
型,关注feed/推荐feed
        .feedStyle(feedStyle) // feed样式,目前仅支持SINGLE_LIST_H
        .supportFollowListInFeed(true) // 是否显示关注天窗,默认不显示
        .setEnableFeedTitle(true) // 是否显示title bar
        .setFeedTitle("抖音直播") // 配置直播feedtitle
        .setEnableFeedBackIcon(true) // 是否显示返回按钮,当title bar显示时生效
        .setFeedBackIcon(newBackDrawable) // 配置title bar返回按钮,支持传入Drawable
        .setVerticalFeedItemDecoration(dp2px(4)) // 配置卡片垂直方向的间距,仅双列样式生效
        .setHorizontalFeedItemDecoration(dp2px(4)) // 配置卡片水平方向的间距,单双列样式都生效
        .setEnableOperationLabel(false) // 是否显示活动标签
        .setEnableContentLabel(false) // 是否显示内容标签 (PK,红包,聊天室等标签)
        .setLiveTagColor(Color.BLACK) // 当feed样式有直播中状态标签时,支持配置标签背景色
        .setLiveTagRadius(dp2px(2)) // 当feed样式有直播中状态标签时,支持配置标签圆角
        .build();

FeedStyle (1.8.3版本支持SINGLE_LIST_H, 其余样式1.8.4版本支持)

enum class FeedStyle {
    DOUBLE_LIST_D, // 双列列表,方形小卡片
    DOUBLE_LIST_X, // 双列列表,长方形小卡片
    SIMPLE_LIST, // 单列列表,类似关注列表
    SINGLE_LIST_X, // 单列列表,长方形大卡片,可预览
    SINGLE_LIST_H // 单列列表,方形大卡片,可预览
}

卡片样式对应的配置项

卡片样式
FeedStyle
支持的配置项
配置项方法调用
单列-方形
大卡+预览流
FeedStyle.SINGLE
_LIST_X

1.配置列表间距

2.配置标签有无

1. setHorizontalFeedItemDecoration(dp2px(4)) 

2. setEnableOperationLabel(false) 

 setEnableContentLabel(false)

单列-长方形
大卡+预览流

SINGLE_LIST_X

1.配置标签有无

2.配置直播中标签

背景色,圆角

1. setEnableOperationLabel(false) 

 setEnableContentLabel(false)

2. setLiveTagColor(Color.BLACK

 setLiveTagRadius(dp2px(2))

双列-方形卡片
(无预览流)
DOUBLE_LIST_D

1.配置标签有无

2.配置列表横向,

纵向间距

3.配置卡片圆角

1. setEnableOperationLabel(false) 

 setEnableContentLabel(false)

2. setHorizontalFeedItemDecoration(dp2px(4)) 

 setVerticalFeedItemDecoration(dp2px(4))

3. setFeedCardCornerRadius(dp2Px(6f))

双列-长方形
卡片
(无预览流)

DOUBLE_LIST_X

1. 配置标签有无

2. 配置列表横向,

纵向间距

1. setEnableOperationLabel(false) 

 setEnableContentLabel(false)

2. setHorizontalFeedItemDecoration(dp2px(4)) 

 setVerticalFeedItemDecoration(dp2px(4))
单列-简单列表
(类似关注列表)
SIMPLE_LIST

1. 配置标签有无

2. 配置直播中标

签背景色,

3. 呼吸圈颜色

1. setEnableOperationLabel(false) 

 setEnableContentLabel(false)

2. setLiveTagColor(Color.BLACK

二、Feed卡片

2.1 获取卡片

使用场景

接入方有自己的feed,想在自己的feed流中插入几个直播卡片,UI和数据源均由直播提供;

目前仅提供预览流样式的封面卡片,对应CardStyle.PREVIEW_CARD_H(1.8.3版

本),CardStyle.PREVIEW_CARD_X(1.8.4版本)

示意图
接入方式
  1. 接口定义

ILiveListManager:用于获取cardView列表

ILiveCardView:卡片的抽象接口,返回的ILiveCardView都是View,可以添加到父布局中。

// ILiveListManager: 用于获取card view列表
interface ILiveListManager {
    /**
     * @param context
     * @param openFeedParams feed参数
     * @return 异步获取 List<ILiveCardView>
     */
    fun requestAndGetView(context: Context, openFeedParams: OpenFeedPar
ams) : Observable<List<ILiveCardView>>
}

// 直播封面卡片接口
interface ILiveCardView {
    fun bindRoom(room: Room, enterFromMerge: String?, liveCoverConfig: LiveCoverCo
nfig?) // 可选,如果外部提供数据结
构,则调用该接口绑定数据

    /**
     * 是否支持播放预览流
     */
    fun enablePreview(): Boolean

    /**
     * view展示的时候调用,用于上报埋点
     */
    fun onShow()

    /**
     * 播放预览流
     */
    fun startPreview()

    /**
     * 停止播放
     */
    fun stopPreview(destroyPlayer: Boolean)
}
  1. 使用示例

通过ILiveListManager#requestAndGetView直接获取view。

ILiveCardView可能具有预览功能,使用步骤如下:

  1. 调用enablePreview()判断是否支持预览。
  2. 根据滑动位置停留位置获取对应位置的ILiveCardView,调用startPreview()
  3. 播放预览流。
  4. 根据滑动位置暂停预览流,调用stopPreview()暂停预览流。建议在整个页面
  5. 退出的时候调用stopPreview(true)销毁播放器实例,具体时机参考下面代码示例。

注意:直播sdk仅提供ILiveCardView,滑动控制逻辑需要接入方自行实现,由于卡片内部复用

播放器,同一时间只能播放一个预览流,在调用startPreview之前请确保已经将

上一个正在播放的预览流暂停。

public class LiveFeedActivity extends Activity{
    
    // 1. 获取factory
    private val liveListFactory: IOpenLiveListFactory? by lazy {
        TTLiveService.getLiveService()?.openLiveListFactory
    }
    
    
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activty_feed_test)
        liveListFactory?.let {
            // 2. 配置参数
            val hsCardParams = OpenFeedParams.Builder(FeedType.COMMON_FEED)
            .setCardCount(2)
            .setCardStyle(CardStyle.PREVIEW_CARD_H)
            .build()
            hsCardListManager = it.createLiveCardManager(this)
            // 3. 通过ILiveListManager请求数据且返回card view
            hsCardListManager?.requestAndGetView(this, hsCardParams)
            ?.subscribeOn(AndroidSchedulers.mainThread())
            ?.subscribe({ list ->
                // 展示2个直播大卡
                if (list?.isNotEmpty() == true) {
                    val size = 2.coerceAtMost(list.size)
                    for (i in 0 until size) {
                        hs_large_card_container.addView(list[i] as View)
                        hsCardList.add(list[i])
                        // 4.1 显示的时候调用onShow()上报埋点
                        list[i].onShow()
                    }
                    if (hsCardList?.isNotEmpty()) {
                        hs_large_card_container.post {
                            previewIndex = 0
                            previewNeedRelease = true
                            releaseIndex = 0
                            // 4.2 调用startPreview显示预览流
                            hsCardList[0].startPreview()
                        }
                    }
                }
            }, { error ->
                error.printStackTrace()
            })
        }
    }
    
    @Override
    protected void onResume() {
        super.onResume();
        // 6. 如果退出页面时暂停了预览流,再回到当前页面尝试重新播放预览流
        if (stopPreviewWhenResume && cardList.size() > 0) {
            cardList.get(previewIndex).startPreview();
        }
    }
    
    @Override
    protected void onPause() {
        super.onPause();
        // 5. 在页面onPause时暂停预览流,节约内存资源
        if (previewIndex > -1) {
            stopPreviewWhenResume = true;
            cardList.get(previewIndex).stopPreview(false);
        }
    }
    
    @Override
    protected void onDestroy() {
        super.onDestroy();
        // 7. 页面销毁时暂停预览流,并释放播放器
        if (previewNeedRelease && releaseIndex > -1) {
            cardList.get(releaseIndex).stopPreview(true);
        }
    }
}

参数说明
val hsCardParams = OpenFeedParams.Builder(FeedType.COMMON_FEED) // feed 类
型,关注feed/推荐feed
.setCardCount(2) // 卡片个数
.setCardStyle(CardStyle.PREVIEW_CARD_H) // 卡片样式,1.8.3版本支持PREVIE
W_CARD_H,1.8.4版本支持
 PREVIEW_CARD_X
.build()

2.2 双排卡片

使用场景

希望页面中既有直播卡片,又有宿主自己的元素,可通过获取一部分直播列表添

加到页面中。目前仅支持

FeedStyle.DOUBLE_LIST_D。

示意图

双列正方形(model.style = IESLiveSaaSFeedShowStyleSquDouble)

双列长方形(model.style = IESLiveSaaSFeedShowStyleRecDouble)

接入方式
// LiveFeedActivity
private void addFeedBlock(Intent intent) {
    // 1. 通过TTLiveService获取feed服务
    IOpenLiveListFactory feedFactory = TTLiveService.getLiveService().g
etOpenLiveListFactory();
    if (feedFactory != null) {
        // 2. 配置参数
        OpenFeedParams params = new OpenFeedParams.BlockParamsBuilder()
            .feedStyle(FeedStyle.DOUBLE_LIST_D)
            .setEnableMoreLiveEntry(true) // 是否显示更多直播入口,默认显示
            .setFeedTitle("抖音直播") // 配置直播标题
            .build();
        // 3. 获取模块block,这是一个view,添加到container中,并设置布局参数
        ILiveBlock feedBlock = feedFactory.createLiveBlock(this, params);
        FrameLayout container = findViewById(R.id.container);
        container.removeAllViews();
        FrameLayout.LayoutParams lp = new FrameLayout.LayoutParams(View
Group.LayoutParams.
     MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        lp.gravity = Gravity.TOP;
        container.addView((View) feedBlock, lp);
        // 4. 调用refresh()请求数据,同时监听列表为空和列表请求错误的状态,显示相应提示
        feedBlock.refresh();
        feedBlock.isEmpty().observe(this, isEmpty -> {
            if (isEmpty) {
                Toast.makeText(this, "暂无数据", Toast.LENGTH_SHORT).show();
            }
        });
        feedBlock.isError().observe(this, isError -> {
            if (isError) {
                Toast.makeText(this, "接口错误,请稍后重试", Toast.LENGTH_SHORT).show();
            }
        });
    }
}
参数说明

模块配置的参数是OpenFeedParams,BlockParamsBuilder完成相关配置

OpenFeedParams params = new OpenFeedParams.BlockParamsBuilder()
        .feedStyle(feedStyle) // 仅支持FeedStyle.DOUBLE_LIST_D
        .setEnableMoreLiveEntry(true) // 是否显示更多直播入口,默认显示
        .setFeedTitle("抖音直播") // 配置直播标题
        .build();

三、关注天窗

使用场景

关注天窗是横向的列表,可嵌入页面中任何位置。

示意图
接入方式

通过IOpenLiveListFactory#createHorizontalLiveBlock获取关注天窗的view。

// 1. 获取IOpenLiveListFactory
private val liveListFactory: IOpenLiveListFactory? by lazy {
    TTLiveService.getLiveService()?.openLiveListFactory
}

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activty_feed_test)
    liveListFactory?.let {
        horizontal_list_container_follow.removeAllViews()
        // 2. 配置参数
        val followFeedParams = HorFollowListParams.Builder()
            .backgroundColor(Color.WHITE)
            .build()
         // 3. 获取关注天窗的view,ILiveBlock是View
        followFeedHorizontalListView = it.createHorizontalLiveBlock(thi
s, followFeedParams)
        horizontal_list_container_follow.addView(followFeedHorizontalListView as View)
        // 4. 调用refresh获取数据
        followFeedHorizontalListView?.refresh()
        // 5. 监听列表状态,列表为空是隐藏容器
        followFeedHorizontalListView?.isEmpty()?.observe(this, Observer { isEmpty ->
            when (isEmpty) {
                true -> horizontal_list_container_follow.visibility = View.GONE
                false -> horizontal_list_container_follow.visibility = View.VISIBLE
            }
        })
        // 6. 监听列表状态,接口错误时隐藏容器
        followFeedHorizontalListView?.isError()?.observe(this, Observer { isError -> 
            when (isError) {
                true -> horizontal_list_container_follow.visibility = View.GONE
                false -> horizontal_list_container_follow.visibility = View.VISIBLE
            }
        })
    }
}
参数说明

HorFollowListParams-可配置部分UI

val followFeedParams = HorFollowListParams.Builder()
    .backgroundColor(Color.WHITE) // 关注天窗背景色
    .avatarBorderAnimController(customAnimController) // 关注天窗的头像和头像边框动画
    .liveTagColor(Color.BLACK) // 直播中标签颜色
    .liveTagRadius(ResUtil.dip2px(3)) // 直播中标签圆角
    .build()
诚邀您对本文档易读易用性进行评价
好用
不好用