Skip to content

自定义UI

“ComPDFKit_Tools” 文件夹包含了可引导快速集成ComPDFKit PDF SDK的UI组件。我们还使用这个UI组件库构建了六个独立的功能程序,分别是ViewerAnnotationsContentEditorFormsDocsEditorDigitalSignature。。此外,我们还开发了一个叫做PDFViewer的程序,它集成了所有以上提到的示例功能供您参考。在本节中,我们会从以下几部分介绍如何使用它:

  1. "ComPDFKit_Tools" 概述: 展示文件夹结构和对应的功能板块。
  2. UI 组件:介绍 UI 组件以及如何轻松快速地使用它们。
  3. 了解更多:包含了各平台独有的代码结构和功能。

"ComPDFKit_Tools"概述

"ComPDFKit_Tools" 中有九个模块: "Common""Viewer""Annotations""ContentEditor""Forms""DocsEditor""DigitalSignature""Security""Watermark"。 如下表所示,每个模块都包含对应 PDF 功能的代码和 UI 组件。

文件夹子文件夹描述
Common-包含 Viewer、Annotations、ContentEditor、Forms 和 DocsEditor 模块的可复用的 UI 组件以及视图控制器。
ContextMenu包含 PDF 上下文菜单工具类
ViewerPDFBookmark包含实现文档书签列表和页面跳转的 UI 组件以及视图控制器。
PDFOutline包含实现文档大纲和大纲跳转的 UI 组件以及视图控制器。
PDFSearch包含实现文档搜索功能和生成搜索列表的 UI 组件以及视图控制器。
PDFDisplaySettings包含实现 PDF 阅读设置 UI 组件
PDFThumbnail包含实现文档缩略图的 UI 组件以及视图控制器。
AnnotationsPDFAnnotationBar包含实现修改注释属性和返回/撤销返回注释的操作的工具栏。
PDFAnnatationList包含实现注释列表的 UI 组件以及视图控制器。
PDFProperties包含实现修改注释属性的属性面板以及视图控制器。
ContentEditorPDFEditBar包含实现文档文字编辑、图片编辑和编辑的 undo、redo 操作的工具栏。
PDFProperties包含实现文档文字编辑和图片编辑的属性面板,以及 UI 组件。
FormsPDFFormBar包含实现修改文档表格属性和文档的 undo、redo 操作的工具栏。
PDFProperties包含实现修改文档表格属性的属性面板,以及 UI 组件。
DocsEditorPDFPageEdit包含实现文档页面编辑的 UI 控件。
CPDFPageEditToolBar实现新页面创建、页面替换、旋转、提取和删除的工具栏。
PDFPageEditInsert实现空白页面创建和 PDF 文档页面插入的 UI 组件。
Digital SignaturesCSignatureToolBar包括用于创建 Form 签名域、填写数字签名、验证数字签名工具栏
SecurityCDocumentEncryptionDialog包括添加和删除密码以打开文档或设置文件权限的 UI 组件以及视图控制器。
WatermarkCWatermarkEditDialog包括创建和编辑文字、图片类型水印的 UI 组件以及视图控制器。

UI 组件

本节主要介绍 "ComPDFKit_Tools" 的 UI 组件与 API 配置之间的联系,这不仅可以帮助你快速上手 ComPDFKit 默认的 UI,还可以帮助你查看相关的 API 配置。这些 UI 组件可以被使用和修改,以创建你自定义的 UI。

2.5.2-22.5.2-2

2.5.2-3

上图展示了各种功能的 UI 组件,这些功能的 UI 组件对应的API会在下表展示:

序号名称功能描述
1PDFViewCPDFViewCtrlCPDFViewCtrl是一个可以嵌入到任何布局中的 ViewGroup。 它封装了一组丰富的交互式文档查看功能。
2ThumbnailsCPDFThumbnailFragment进入文档预览图。
3Text searchCSearchToolbar进入搜索模式。
4BOTACPDFBotaDialogFragment进入大纲、书签和注释列表。
5Mode SwitchCModeSwitchDialogFragment功能模式切换。
6Edit toolbarCEditToolbar修改文本、图片属性和 undo、redo 操作。
7View settingCPDFDisplaySettingDialogFragment进入文档页面设置。
8Page editCPDFPageEditDialogFragment进入文档页面编辑。
9Document InfoCPDFDocumentInfoDialogFragment进入文档信息列表。
10Annotation toolbarCAnnotationToolBar修改注释属性和 undo、redo 操作。
11PropertiesCStyleDialogFragment注释、表单、文本样式属性面板 UI 组件。
12PageEdit toolbarCPageEditToolBar对页面进行编辑。
13digital signatures toolbarCSignatureToolBar数字签名工具栏。
14Customize signature previewCDigitalSignStylePreviewDialog自定义数字签名样式弹窗。
15sign infoCertDigitalSignInfoDialog数字签名信息界面。

了解更多

以下将为您介绍 "ComPDFKit_Tools" 模块高频使用的 UI 组件,以便于您快速熟悉常用 API,并快速的进行 API 接入。

Part 1. CPDFViewCtrl

CPDFViewCtrl是一个可以嵌入到任何布局中的 ViewGroup。 它封装了一组丰富的交互式文档查看功能,以下将以在MainActivity.java中使用为示例:

  • 在 layout 布局中添加CPDFViewCtrl
xml
    <com.compdfkit.tools.common.views.pdfview.CPDFViewCtrl
        android:id="@+id/pdf_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:tools_enable_page_indicator="true"
        app:tools_enable_slider_bar="true"
        app:tools_page_indicator_margin_bottom="20dp"
        app:tools_slider_bar_icon="@drawable/tools_ic_pdf_slider_bar"
        app:tools_slider_bar_position="right" />
  • 获取CPDFViewCtrl
java
public class CMainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.pdf_sample_activity);
        CPDFViewCtrl pdfView = findViewById(R.id.pdf_view);
    }
}
kotlin
class CMainActivity : AppCompatActivity() {
    override fun onCreate(@Nullable savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.pdf_sample_activity)
        val pdfView: CPDFViewCtrl = findViewById(R.id.pdf_view)
    }
}
  • 您可以通过 Uri 或文件路径来加载需要显示的 PDF 文件。
java
// 使用 Uri。
pdfView.openPDF(Uri pdfUri);
// 使用文件路径。     
pdfView.openPDF(String filePath);

注: 如果您的 PDF 文件已加密,将会弹出密码输入弹窗,详情请查看CVerifyPasswordDialogFragment

Part 2. PDF Properties

对注释、表单等对象进行属性修改是一个常用的功能,"ComPDFKit_Tools" 模块中我们对此类操作进行了封装,请查看一下相关示例。

  • 修改默认默认属性

以下代码把高亮注释设置为默认属性为例,向您展示如何设置默认属性值:

java
// 此示例为不使用属性面板设置默认属性值。
new CStyleManager.Builder()
  .setMarkup(CStyleType.ANNOT_HIGHLIGHT, color, colorAlpha)
  .init(CPDFViewCtrl, true);
kotlin
// Set default properties without property panel
CStyleManager.Builder()
.setMarkup(CStyleType.ANNOT_HIGHLIGHT, color, colorAlpha)
.init(pdfViewCtrl, true)

如果您需要使用属性面板来修改全局属性值,例如在CAnnotationToolBar UI 组件中您选择了高亮注释,点击右侧 Setting 按钮,修改高亮注释的默认值,您可以参考以下示例代码:

modify highlight annotation

java
//创建CStyleManager管理类。
CStyleManager styleManager = new CStyleManager(pdfView);
// 获取当前高亮属性。
CAnnotStyle style = styleManager.getStyle(CStyleType.ANNOT_HIGHLIGHT);
// 创建Style弹窗。
CStyleDialogFragment dialogFragment = CStyleDialogFragment.newInstance(style);
// 设置属性面板弹窗数据监听,当调整颜色、透明度后会在此方法中进行修改全局属性值。
styleManager.setAnnotStyleFragmentListener(dialogFragment);
dialogFragment.show(fragmentManager, "annotStyleDialogFragment");
kotlin
//创建CStyleManager管理类。
val styleManager = CStyleManager(pdfView)
// 获取当前高亮属性。
val style: CAnnotStyle = styleManager.getStyle(CStyleType.ANNOT_HIGHLIGHT)
// 创建Style弹窗。
val dialogFragment = CStyleDialogFragment.newInstance(style)
// 设置属性面板弹窗数据监听,当调整颜色、透明度后会在此方法中进行修改全局属性值。
styleManager.setAnnotStyleFragmentListener(dialogFragment)
dialogFragment.show(fragmentManager, "annotStyleDialogFragment")

注: 关于从 ComPDFKit SDK 中获取、设置属性值,您可以参考CGlobalStyleProvider.java类中updateStyle()getStyle()方法

  • 修改当前选中的注释或表单的属性

当您选中一个注释时,您可以在CPDFContextMenuHelper.java类中获取到选中的注释。您可以从选中的注释中获取、修改注释属性,以下将以选中高亮注释为例,向您展示如何更改注释属性:

请确保您已拥有编辑注释的权限。

java
// 您可以设置为ViewMode.ANNOT 或者 ViewMode.ALL 模式,两种模式下都可以对注释进行选中。
pdfView.setViewMode(CPDFReaderView.ViewMode.ANNOT);

请确保已设置setContextMenuShowListener,您可以使用 "ComPDFKit_Tools" 提供的默认上下文菜单。

java
pdfView.getCPdfReaderView().setContextMenuShowListener(
  new CPDFContextMenuHelper.Builder().defaultHelper()
  .create(pdfView));
kotlin
pdfView.getCPdfReaderView().setContextMenuShowListener(
  CPDFContextMenuHelper.Builder().defaultHelper()
  .create(pdfView))

点击选中高亮注释后,在CPDFContextMenuHelper类的getMarkupContentView()方法中获取到高亮注释对象CPDFBaseAnnotImpl

java
public class CPDFContextMenuHelper extends CPDFContextMenuShowHelper {
    //...
    @Override
    public View getMarkupContentView(CPDFPageView cpdfPageView, CPDFBaseAnnotImpl cpdfBaseAnnot, LayoutInflater layoutInflater) {
      	// 请注意getMarkupContentView包含高亮、下划线、删除线、波浪线注释。
        ContextMenuView menuView = new ContextMenuView(readerView.getContext());
        menuView.addItem(R.string.tools_context_menu_properties, v -> {
            // 创建属性管理类。
            CStyleManager styleManager = new CStyleManager(cpdfBaseAnnot, cpdfPageView);
            // 获取高亮注释所有属性。
            CAnnotStyle annotStyle = styleManager.getStyle(CStyleType.ANNOT_HIGHLIGHT);
            // 创建属性弹窗面板。
            CStyleDialogFragment styleDialogFragment = CStyleDialogFragment.newInstance(annotStyle);
            // 管理类添加属性面板监听。
            styleManager.setAnnotStyleFragmentListener(styleDialogFragment);
            // 当属性面板弹出时,使CPDFReaderView偏移,保持选中的注释出现在弹窗上方。
            styleManager.setDialogHeightCallback(styleDialogFragment, readerView);
            styleDialogFragment.show(((FragmentActivity) readerView.getContext()).getSupportFragmentManager(), "noteEditDialog");
            dismissContextMenu();
        });
        return menuView;
    }
}
kotlin
class CPDFContextMenuHelper(readerView: CPDFReaderView) : CPDFContextMenuShowHelper(readerView) {
    //...
    override fun getMarkupContentView(cpdfPageView: CPDFPageView, cpdfBaseAnnot: CPDFBaseAnnotImpl<*>?, layoutInflater: LayoutInflater): View {
        // 请注意getMarkupContentView包含高亮、下划线、删除线、波浪线注释。
        val menuView = ContextMenuView(readerView.context)
        menuView.addItem(R.string.tools_context_menu_properties) { v: View? ->
            // 创建属性管理类。
            val styleManager = CStyleManager(cpdfBaseAnnot, cpdfPageView)
            // 获取高亮注释所有属性。
            val annotStyle = styleManager.getStyle(CStyleType.ANNOT_HIGHLIGHT)
            // 创建属性弹窗面板。
            val styleDialogFragment = CStyleDialogFragment.newInstance(annotStyle)
            // 管理类添加属性面板监听。
            styleManager.setAnnotStyleFragmentListener(styleDialogFragment)
            // 当属性面板弹出时,使CPDFReaderView偏移,保持选中的注释出现在弹窗上方。
            styleManager.setDialogHeightCallback(styleDialogFragment, readerView)
            styleDialogFragment.show((readerView.context as FragmentActivity).supportFragmentManager, "noteEditDialog")
            dismissContextMenu()
        }
        return menuView
    }
}

注:

  • 您可以查看CSelectedAnnotStyleProvider类了解如何使用ComPDFKit SDK设置、获取选中的注释、表单属性值。

  • 无论您需要修改哪一种属性,都可以通过CStyleDialogFragment属性面板以及CStyleManager类进行操作。

Part 3. CPDFContextMenuHelper

"ComPDFKit_Tools" 模块中为您提供CPDFContextMenuHelper工具类,通过此工具类,您可以非常便捷地为注释等内容自定义上下文菜单,当然我们也为您提供了默认的上下文菜单类。以下为您展示使用方法:

  • 使用默认提供的CPDFContextMenuHelper
java
pdfView.getCPdfReaderView().setContextMenuShowListener(
  new CPDFContextMenuHelper.Builder().defaultHelper()
  .create(pdfView));
kotlin
pdfView.getCPdfReaderView().setContextMenuShowListener(
  CPDFContextMenuHelper.Builder().defaultHelper()
  .create(pdfView))
  • 自定义上下文菜单。接下以高亮注释为例,向您展示如何自定义上下文菜单。

实现 "ComPDFKit_Tools" 模块提供的ContextMenuMarkupProvider类。

java
public class CMarkupContextMenuView implements ContextMenuMarkupProvider {

  @Override
  public View createMarkupContentView(CPDFContextMenuHelper helper, CPDFPageView pageView, CPDFMarkupAnnotImpl markupAnnotImpl) {
    ContextMenuView menuView = new ContextMenuView(helper.getReaderView().getContext());
    // 增加属性按钮。
    menuView.addItem(R.string.tools_context_menu_properties, v -> {
      CStyleManager styleManager = new CStyleManager(markupAnnotImpl, pageView);
      CAnnotStyle annotStyle = styleManager.getStyle(CStyleType.ANNOT_HIGHLIGHT);
      CStyleDialogFragment styleDialogFragment = CStyleDialogFragment.newInstance(annotStyle);
      styleManager.setAnnotStyleFragmentListener(styleDialogFragment);
      styleManager.setDialogHeightCallback(styleDialogFragment, helper.getReaderView());
      if (helper.getReaderView().getContext() instanceof FragmentActivity) {
        styleDialogFragment.show(((FragmentActivity) helper.getReaderView().getContext()).getSupportFragmentManager(), "noteEditDialog");
      }
      helper.dismissContextMenu();
    });
    // 增加便签按钮。
    menuView.addItem(R.string.tools_annot_note, v -> {
      CPDFAnnotationManager annotationManager = new CPDFAnnotationManager();
      annotationManager.editNote(helper.getReaderView(), pageView, markupAnnotImpl.onGetAnnotation());
      helper.dismissContextMenu();
    });
    // 增加删除注释按钮。
    menuView.addItem(R.string.tools_delete, v -> {
      pageView.deleteAnnotation(markupAnnotImpl);
      helper.dismissContextMenu();
    });
    return menuView;
  }
}
kotlin
class CMarkupContextMenuView : ContextMenuMarkupProvider {
  override fun createMarkupContentView(helper: CPDFContextMenuHelper, pageView: CPDFPageView, markupAnnotImpl: CPDFMarkupAnnotImpl): View {
    val menuView = ContextMenuView(helper.readerView.context)
    // 增加属性按钮。
    menuView.addItem(R.string.tools_context_menu_properties) {
      val styleManager = CStyleManager(markupAnnotImpl, pageView)
      val annotStyle = styleManager.getStyle(CStyleType.ANNOT_HIGHLIGHT)
      val styleDialogFragment = CStyleDialogFragment.newInstance(annotStyle)
      styleManager.setAnnotStyleFragmentListener(styleDialogFragment)
      styleManager.setDialogHeightCallback(styleDialogFragment, helper.readerView)
      if (helper.readerView.context is FragmentActivity) {
        styleDialogFragment.show((helper.readerView.context as FragmentActivity).supportFragmentManager, "noteEditDialog")
      }
      helper.dismissContextMenu()
    }
    // 增加便签按钮。
    menuView.addItem(R.string.tools_annot_note) {
      val annotationManager = CPDFAnnotationManager()
      annotationManager.editNote(helper.readerView, pageView, markupAnnotImpl.onGetAnnotation())
      helper.dismissContextMenu()
    }
    // 增加删除注释按钮。
    menuView.addItem(R.string.tools_delete) {
      pageView.deleteAnnotation(markupAnnotImpl)
      helper.dismissContextMenu()
    }
    return menuView
  }
}

应用自定义的高亮注释上下文菜单,您也可以查阅CPDFContextMenuHelper.Builder()类自定义更多其他的上下文菜单。

java
pdfView.getCPdfReaderView().setContextMenuShowListener(
  new CPDFContextMenuHelper.Builder()
  .setMarkupContentMenu(new CMarkupContextMenuView())
  .create(pdfView));
kotlin
pdfView.getCPdfReaderView().setContextMenuShowListener(
  CPDFContextMenuHelper.Builder()
  .setMarkupContentMenu(CMarkupContextMenuView())
  .create(pdfView))