自定义UI
“ComPDFKit_Tools” 文件夹包含了可引导快速集成ComPDFKit PDF SDK的UI组件。我们还使用这个UI组件库构建了六个独立的功能程序,分别是Viewer,Annotations,ContentEditor,Forms,DocsEditor 和 DigitalSignature。。此外,我们还开发了一个叫做PDFViewer的程序,它集成了所有以上提到的示例功能供您参考。在本节中,我们会从以下几部分介绍如何使用它:
- "ComPDFKit_Tools" 概述: 展示文件夹结构和对应的功能板块。
- UI 组件:介绍 UI 组件以及如何轻松快速地使用它们。
- 了解更多:包含了各平台独有的代码结构和功能。
"ComPDFKit_Tools"概述
"ComPDFKit_Tools" 中有九个模块: "Common"、"Viewer"、"Annotations"、"ContentEditor"、"Forms"、"DocsEditor"、"DigitalSignature"、"Security" 和 "Watermark"。 如下表所示,每个模块都包含对应 PDF 功能的代码和 UI 组件。
文件夹 | 子文件夹 | 描述 |
---|---|---|
Common | - | 包含 Viewer、Annotations、ContentEditor、Forms 和 DocsEditor 模块的可复用的 UI 组件以及视图控制器。 |
ContextMenu | 包含 PDF 上下文菜单工具类 | |
Viewer | PDFBookmark | 包含实现文档书签列表和页面跳转的 UI 组件以及视图控制器。 |
PDFOutline | 包含实现文档大纲和大纲跳转的 UI 组件以及视图控制器。 | |
PDFSearch | 包含实现文档搜索功能和生成搜索列表的 UI 组件以及视图控制器。 | |
PDFDisplaySettings | 包含实现 PDF 阅读设置 UI 组件 | |
PDFThumbnail | 包含实现文档缩略图的 UI 组件以及视图控制器。 | |
Annotations | PDFAnnotationBar | 包含实现修改注释属性和返回/撤销返回注释的操作的工具栏。 |
PDFAnnatationList | 包含实现注释列表的 UI 组件以及视图控制器。 | |
PDFProperties | 包含实现修改注释属性的属性面板以及视图控制器。 | |
ContentEditor | PDFEditBar | 包含实现文档文字编辑、图片编辑和编辑的 undo、redo 操作的工具栏。 |
PDFProperties | 包含实现文档文字编辑和图片编辑的属性面板,以及 UI 组件。 | |
Forms | PDFFormBar | 包含实现修改文档表格属性和文档的 undo、redo 操作的工具栏。 |
PDFProperties | 包含实现修改文档表格属性的属性面板,以及 UI 组件。 | |
DocsEditor | PDFPageEdit | 包含实现文档页面编辑的 UI 控件。 |
CPDFPageEditToolBar | 实现新页面创建、页面替换、旋转、提取和删除的工具栏。 | |
PDFPageEditInsert | 实现空白页面创建和 PDF 文档页面插入的 UI 组件。 | |
Digital Signatures | CSignatureToolBar | 包括用于创建 Form 签名域、填写数字签名、验证数字签名工具栏 |
Security | CDocumentEncryptionDialog | 包括添加和删除密码以打开文档或设置文件权限的 UI 组件以及视图控制器。 |
Watermark | CWatermarkEditDialog | 包括创建和编辑文字、图片类型水印的 UI 组件以及视图控制器。 |
UI 组件
本节主要介绍 "ComPDFKit_Tools" 的 UI 组件与 API 配置之间的联系,这不仅可以帮助你快速上手 ComPDFKit 默认的 UI,还可以帮助你查看相关的 API 配置。这些 UI 组件可以被使用和修改,以创建你自定义的 UI。
上图展示了各种功能的 UI 组件,这些功能的 UI 组件对应的API会在下表展示:
序号 | 名称 | 功能 | 描述 |
---|---|---|---|
1 | PDFView | CPDFViewCtrl | CPDFViewCtrl 是一个可以嵌入到任何布局中的 ViewGroup。 它封装了一组丰富的交互式文档查看功能。 |
2 | Thumbnails | CPDFThumbnailFragment | 进入文档预览图。 |
3 | Text search | CSearchToolbar | 进入搜索模式。 |
4 | BOTA | CPDFBotaDialogFragment | 进入大纲、书签和注释列表。 |
5 | Mode Switch | CModeSwitchDialogFragment | 功能模式切换。 |
6 | Edit toolbar | CEditToolbar | 修改文本、图片属性和 undo、redo 操作。 |
7 | View setting | CPDFDisplaySettingDialogFragment | 进入文档页面设置。 |
8 | Page edit | CPDFPageEditDialogFragment | 进入文档页面编辑。 |
9 | Document Info | CPDFDocumentInfoDialogFragment | 进入文档信息列表。 |
10 | Annotation toolbar | CAnnotationToolBar | 修改注释属性和 undo、redo 操作。 |
11 | Properties | CStyleDialogFragment | 注释、表单、文本样式属性面板 UI 组件。 |
12 | PageEdit toolbar | CPageEditToolBar | 对页面进行编辑。 |
13 | digital signatures toolbar | CSignatureToolBar | 数字签名工具栏。 |
14 | Customize signature preview | CDigitalSignStylePreviewDialog | 自定义数字签名样式弹窗。 |
15 | sign info | CertDigitalSignInfoDialog | 数字签名信息界面。 |
了解更多
以下将为您介绍 "ComPDFKit_Tools" 模块高频使用的 UI 组件,以便于您快速熟悉常用 API,并快速的进行 API 接入。
Part 1. CPDFViewCtrl
CPDFViewCtrl
是一个可以嵌入到任何布局中的 ViewGroup。 它封装了一组丰富的交互式文档查看功能,以下将以在MainActivity.java
中使用为示例:
- 在 layout 布局中添加
CPDFViewCtrl
。
<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
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);
}
}
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 文件。
// 使用 Uri。
pdfView.openPDF(Uri pdfUri);
// 使用文件路径。
pdfView.openPDF(String filePath);
注: 如果您的 PDF 文件已加密,将会弹出密码输入弹窗,详情请查看CVerifyPasswordDialogFragment
。
Part 2. PDF Properties
对注释、表单等对象进行属性修改是一个常用的功能,"ComPDFKit_Tools" 模块中我们对此类操作进行了封装,请查看一下相关示例。
- 修改默认默认属性
以下代码把高亮注释设置为默认属性为例,向您展示如何设置默认属性值:
// 此示例为不使用属性面板设置默认属性值。
new CStyleManager.Builder()
.setMarkup(CStyleType.ANNOT_HIGHLIGHT, color, colorAlpha)
.init(CPDFViewCtrl, true);
// Set default properties without property panel
CStyleManager.Builder()
.setMarkup(CStyleType.ANNOT_HIGHLIGHT, color, colorAlpha)
.init(pdfViewCtrl, true)
如果您需要使用属性面板来修改全局属性值,例如在CAnnotationToolBar
UI 组件中您选择了高亮注释,点击右侧 Setting 按钮,修改高亮注释的默认值,您可以参考以下示例代码:
//创建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");
//创建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
类中获取到选中的注释。您可以从选中的注释中获取、修改注释属性,以下将以选中高亮注释为例,向您展示如何更改注释属性:
请确保您已拥有编辑注释的权限。
// 您可以设置为ViewMode.ANNOT 或者 ViewMode.ALL 模式,两种模式下都可以对注释进行选中。
pdfView.setViewMode(CPDFReaderView.ViewMode.ANNOT);
请确保已设置setContextMenuShowListener
,您可以使用 "ComPDFKit_Tools" 提供的默认上下文菜单。
pdfView.getCPdfReaderView().setContextMenuShowListener(
new CPDFContextMenuHelper.Builder().defaultHelper()
.create(pdfView));
pdfView.getCPdfReaderView().setContextMenuShowListener(
CPDFContextMenuHelper.Builder().defaultHelper()
.create(pdfView))
点击选中高亮注释后,在CPDFContextMenuHelper
类的getMarkupContentView()
方法中获取到高亮注释对象CPDFBaseAnnotImpl
。
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;
}
}
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
。
pdfView.getCPdfReaderView().setContextMenuShowListener(
new CPDFContextMenuHelper.Builder().defaultHelper()
.create(pdfView));
pdfView.getCPdfReaderView().setContextMenuShowListener(
CPDFContextMenuHelper.Builder().defaultHelper()
.create(pdfView))
- 自定义上下文菜单。接下以高亮注释为例,向您展示如何自定义上下文菜单。
实现 "ComPDFKit_Tools" 模块提供的ContextMenuMarkupProvider
类。
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;
}
}
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()
类自定义更多其他的上下文菜单。
pdfView.getCPdfReaderView().setContextMenuShowListener(
new CPDFContextMenuHelper.Builder()
.setMarkupContentMenu(new CMarkupContextMenuView())
.create(pdfView));
pdfView.getCPdfReaderView().setContextMenuShowListener(
CPDFContextMenuHelper.Builder()
.setMarkupContentMenu(CMarkupContextMenuView())
.create(pdfView))