5_3-手机开播场景-PPT白板

• 1 Feature Overview
• 2 Usage Demo
• 3 Implementation Introduction
  • 3.1 PLVLSDocumentLayout
  • 3.2 PLVLSDocumentControllerLayout

1 Feature Overview

The document (PPT & Whiteboard) module includes features such as whiteboard, PPT display, and pen annotation. The entire interface of the document module is encapsulated within PLVLSDocumentLayout.

2 Usage Demo

To use the document module, simply add the PLVLSDocumentLayout layout to the Activity's layout and call its initialization method.

// PLVLSLiveStreamerActivity.java
private void initView() {
    // 文档布局
    plvlsDocumentLy = (IPLVLSDocumentLayout) findViewById(R.id.plvls_document_ly);
    // 初始化文档布局，传入初始化所需的参数
    plvlsDocumentLy.init(liveRoomDataManager);
}

Additionally, you can set up layout listener callbacks to facilitate communication between different module layouts.

// IPLVLSDocumentLayout 设置监听器方法定义
/**
 * 设置标注工具栏 折起/展开 回调
 */
void setMarkToolOnFoldExpandListener(PLVLSDocumentControllerExpandMenu.OnFoldExpandListener onFoldExpandListener);

/**
 * 设置文档布局区域 全屏/正常 回调
 */
void setOnSwitchFullScreenListener(PLVLSDocumentControllerLayout.OnSwitchFullScreenListener onSwitchFullScreenListener);

3 Implementation Introduction

3.1 PLVLSDocumentLayout

The document layout is a ViewGroup primarily composed of a WebView for displaying the whiteboard and PPT - PLVSDocumentWebView, and a control bar overlaid on the WebView for managing annotation pens and other functions - PLVLSDocumentControllerLayout.

@Override
public void init(IPLVLiveRoomDataManager liveRoomDataManager) {
    // 初始化文档WebView
    initDocumentWebView();
    // 初始化 MVP - Presenter
    initPresenter();
    // 初始化文档控制栏
    initDocumentController();
}

3.2 PLVLSDocumentControllerLayout

The control bar is a skin layout that includes annotation tools, toggling document fullscreen, adding new whiteboards, and navigating between document pages. It does not directly manipulate the WebView of the whiteboard and PPT. Instead, it calls relevant methods provided by the Presenter, which then modifies the document WebView's state. The following code demonstrates how clicking the arrow annotation tool informs the WebView to switch to arrow annotation mode.

// PLVLSDocumentControllerLayout.java
// 箭头工具点击监听
plvlsDocumentMarkToolArrowIv.setOnClickListener(new OnClickListener() {
    @Override
    public void onClick(View v) {
        keepControllerVisible();
        setColorSelectorVisibility(VISIBLE);
        changeMarkToolSelectedType(v);
        // 通过回调让PLVLSDocumentLayout来执行切换
        callbackMarkToolType(PLVMarkToolType.ARROW);
        plvlsDocumentMarkMenu.requestLayout();
    }
});

// PLVLSDocumentLayout.java
// 文档布局中设置，控制栏选择标注工具时回调监听
plvlsDocumentControllerLayout.setOnChangeMarkToolListener(new PLVLSDocumentControllerLayout.OnChangeMarkToolListener() {
    @Override
    public void onChangeMarkTool(@PLVMarkToolType.Range final String markToolType) {
        if (PLVMarkToolType.CLEAR.equals(markToolType)) {
            // 清屏时的处理逻辑
        } else {
            // 其他标注工具的处理逻辑，让Presenter通知WebView变更标注工具
            documentPresenter.changeMarkToolType(markToolType);
        }
    }
});