集合视图

键盘中除了单独的按键外，还可以使用集合显示一组数据。比如常见的「符号列表」。

集合视图使用 type 关键字来指定，常见的集合视图类型有：

symbols：纵向符号列表，纵向显示一列数据。
classifiedSymbols：一级分类符号列表，纵向显示一列数据，点击后当前界面中的二级分类符号会显示其子类符号。
subClassifiedSymbols：二级分类符号列表，纵向显示数据。作为 classifiedSymbols 的子类符号显示。
horizontalSymbols：横向符号列表，横向显示一列数据。
horizontalCandidates：横向显示一列候选字。仅在 horizontalCandidatesLayout 横向候选字栏布局中有效。
verticalCandidates：纵向显示候选字。仅在 verticalCandidatesLayout 纵向候选字栏布局中有效。

配置示例：

1
categoryCollection:
2
  type: classifiedSymbols

集合视图的分类

纵向符号列表

纵向符号列表用于纵向显示一组数据，如数字键盘中左侧的符号列表：

bzQh2Y

配置示例：

1
numericCollection:
2
  # 集合视图类型
3
  type: symbols
4
  # 声明集合视图的尺寸，与按键尺寸定义相同
5
  size:
6
    height: 3/4
7
  # 定义集合视图的内边距
8
  insets: { top: 6, bottom: 6 }
9
  # 定义集合视图的背景样式
10
  backgroundStyle: systemButtonBackgroundStyle
11
  # 定义集合视图中每个单元格的文本样式
12
  cellStyle: collectionCellStyle
13
  # 定义集合视图的数据源
14
  dataSource: symbols
15

16
symbols:
17
  - "+"
18
  - "*"
19
  - "-"
20
  - "/"
21
  - "()"
22
  - "."
23
  - "@"
24
  - ","
25
  - "#"
26
  - ":"
27
  - "_"
28
  - "="
29
  - "?"
30
  - "￥"
31

32
collectionCellStyle:
33
  insets: { left: 4, right: 4 }
34
  backgroundStyle: collectionCellBackgroundStyle
35
  foregroundStyle: collectionCellForegroundStyle
36

37
collectionCellBackgroundStyle:
38
  buttonStyleType: fileImage
39
  highlightImage:
40
    file: anjian
41
    image: image1
42

43
collectionCellForegroundStyle:
44
  buttonStyleType: text
45
  normalColor: 575757
46
  highlightColor: 000000
47
  fontSize: 18
48
  fontWeight: bold

type：必选，表示集合视图的类型。符号列表使用 symbols
size：必选，表示集合视图的尺寸。与键盘按键尺寸的定义相同
insets：可选，表示集合视图的内边距。注意：当滚动时，如果出现内容超过背景时，请调整内边距的值来修复此问题
backgroundStyle：可选，表示集合视图的背景样式。与按键背景样式自定义相同
cellStyle：必选，表示集合视图中单元格的样式。与按键样式自定义相同

分类符号列表

分类符号列表有一级分类和二级分类两种类型：

classifiedSymbols：一级分类符号列表用于显示一组一级分类符号，点击后会在当前界面中显示其子类符号
subClassifiedSymbols：二级分类符号列表用于显示一组二级分类符号，作为一级分类符号的子类符号显示

注意：两者应该同时使用。

kqZN6A

一级分类列表配置示例：

1
categoryCollection:
2
  # 注意 type 的值
3
  type: classifiedSymbols
4
  size:
5
    width: 60/375
6
  insets: { left: 4, right: 4, top: 4, bottom: 4 }
7
  backgroundStyle: systemButtonBackgroundStyle
8
  dataSource: category
9
  cellStyle: collectionCellStyle
10

11
collectionCellStyle:
12
  backgroundStyle: collectionCellBackgroundStyle
13
  foregroundStyle: collectionCellForegroundStyle
14

15
collectionCellBackgroundStyle:
16
  buttonStyleType: fileImage
17
  highlightImage:
18
    file: anjian
19
    image: image11
20

21
collectionCellForegroundStyle:
22
  buttonStyleType: text
23
  normalColor: 000000
24
  badgeNormalColor: 575757
25
  badgeHighlightColor: 575757
26
  fontSize: 18
27
  fontWeight: bold
28

29

30
category:
31
  [
32
    "常用",
33
    "中文",
34
    "英文",
35
    ...
36
  ]
37
常用:
38
  - "，"
39
  ...
40
中文:
41
  - "《》"
42
  ...
43
英文:
44
  - ","
45
  ...
46
...

一级分类列表配置与符号列表配置类似，只是 type 的值不同。

二级分类列表配置示例：

1
descriptionCollection:
2
  type: subClassifiedSymbols
3
  size:
4
    width: 315/375
5
  insets: { left: 4, right: 4, top: 4, bottom: 4 }
6
  backgroundStyle: systemButtonBackgroundStyle
7
  cellStyle: collectionCellStyle

二级分类列表与一级分类列表和符号列表配置类似，只是 type 的值不同，且没有 dataSource 属性。

因为二级分类列表的数据是由一级分类列表决定的，所以不需要 dataSource 属性。

横向符号列表

横向符号列表用于横向显示一组数据，如可滑动的工具栏区域。

48MEVu

配置示例：

1
horizontalNumberSymbols:
2
  type: horizontalSymbols
3
  size:
4
    width: 2/3
5
  maxColumns: 10
6
  contentRightToLeft: true
7
  insets: { left: 3, right: 3 }
8
  backgroundStyle: alphabeticBackgroundStyle
9
  dataSource: horizontalSymbolsDataSource
10
  cellStyle: collectionCellStyle
11

12
collectionCellStyle:
13
  backgroundStyle: collectionCellBackgroundStyle
14
  foregroundStyle: collectionCellForegroundStyle
15

16
collectionCellBackgroundStyle:
17
  buttonStyleType: fileImage
18
  highlightImage:
19
    file: anjian
20
    image: image11
21

22
collectionCellForegroundStyle:
23
  buttonStyleType: text
24
  normalColor: 000000
25
  badgeNormalColor: 575757
26
  badgeHighlightColor: 575757
27
  fontSize: 18
28
  fontWeight: bold
29

30
horizontalSymbolsDataSource:
31
  - 1
32
  - 2
33
  - 3
34
  - 4
35
  - 5
36
  - 6
37
  - 7
38
  - 8
39
  - 9
40
  - 0

type：必选，表示集合视图的类型。横向符号列表使用 horizontalSymbols
size：必选，表示集合视图的尺寸。与键盘按键尺寸的定义相同
maxColumns：可选，表示集合视图的最大列数，默认值为 5

注意：只有当数据源中数据超过此数值后，列表才能滑动，少于或等于此数值时，视图无法滑动
contentRightToLeft：可选，表示集合视图内容是否从右向左显示，默认为 false
insets：可选，表示集合视图的内边距

注意：当滚动时，如果出现内容超过背景时，请调整内边距的值来修复此问题
backgroundStyle：可选，表示集合视图的背景样式。与按键背景样式自定义相同
cellStyle：必选，表示集合视图中单元格的样式。与按键样式自定义相同

注意：cellStyle 中的 foregroundStyle 样式只能配置字符串样式引用，且只能使用 text 类型
dataSource：必选，表示集合视图的数据源。数据源是一个数组，数组中的每一项表示集合视图中的一个单元格

横向候选字列表

横向候选字列表用于横向显示一组候选字。

mqsNoy

配置示例：

1
horizontalCandidates:
2
  type: horizontalCandidates
3
  size:
4
    width: 2/3
5
  insets: { left: 3, right: 3 }
6
  backgroundStyle: systemButtonBackgroundStyle
7
  candidateStyle: candidateStyle
8

9
candidateStyle:
10
  insets: { left: 3, right: 3 }
11
  highlightBackgroundColor: ffffff
12
  preferredBackgroundColor: ffffff
13
  preferredIndexColor: 000000
14
  preferredTextColor: 000000
15
  preferredCommentColor: 000000
16
  indexColor: 000000
17
  textColor: 000000
18
  commentColor: 000000
19
  indexFontSize: 18
20
  textFontSize: 18
21
  commentFontSize: 18

type：必选，表示集合视图的类型。横向候选字列表使用 horizontalCandidates
size：可选，表示集合视图的尺寸。与键盘按键尺寸的定义相同
insets：可选，表示集合视图的内边距

注意：当滚动时，如果出现内容超过背景时，请调整内边距的值来修复此问题
backgroundStyle：可选，表示集合视图的背景样式。与按键背景样式自定义相同
candidateStyle：必选，表示单个候选字的样式

在 candidateStyle 引用的样式中，不必使用 buttonStyleType 属性。

insets：可选，表示候选字的内边距。可以通过此值缩小背景色的范围
highlightBackgroundColor：可选，表示候选字被选中时的背景色
preferredBackgroundColor：可选，表示首选候选字的背景色
preferredIndexColor：可选，表示首选候选字的索引颜色
preferredTextColor：可选，表示首选候选字的文本颜色
preferredCommentColor：可选，表示首选候选字的 comment 信息颜色
indexColor：可选，表示非首选候选字的索引颜色
textColor：可选，表示非首选候选字的文本颜色
commentColor：可选，表示非首选候选字的 comment 信息颜色
indexFontSize：可选，表示候选字索引的字体大小
textFontSize：可选，表示候选字文本的字体大小
commentFontSize：可选，表示候选字 comment 信息的字体大小

纵向候选字列表

纵向候选字列表用于纵向显示一组候选字。

YAh0z4

配置示例：

1
verticalCandidates:
2
  type: verticalCandidates
3
  maxRows: 4
4
  separatorColor: '#33338888'
5
  backgroundStyle: alphabeticBackgroundStyle
6
  candidateStyle: verticalCandidateCellStyle
7

8
verticalCandidateCellStyle:
9
  highlightBackgroundColor: ffffff
10
  preferredBackgroundColor: ffffff
11
  preferredIndexColor: 1a73e9
12
  preferredTextColor: 1a73e9
13
  preferredCommentColor: 1a73e9
14
  indexColor: 000000
15
  textColor: 000000
16
  commentColor: 000000
17
  indexFontSize: 16
18
  textFontSize: 16
19
  commentFontSize: 16
20
  bottomRowHeight: 50

type：必选，表示集合视图的类型。纵向候选字列表使用 verticalCandidates
maxRows：可选，表示集合视图的最大行数，默认值为 5
separatorColor：可选，表示候选字之间的分割线颜色
backgroundStyle：可选，表示集合视图的背景样式。与按键背景样式自定义相同
candidateStyle：必选，表示单个候选字的样式 candidateStyle 样式的定义与横向候选字列表的 candidateStyle 样式定义相同。

数据源

集合视图的数据源是一个数组，数组中的每一项表示集合视图中的一个单元格。

数组中的元素类型支持以下几种方式定义：

直接使用字符串或数字表示单元格内容

1
horizontalSymbolsDataSource:
2
  - 1
3
  - "a"
4
  ...

此时显示内容也为输出内容，且会直接输出，不会发送给 RIME 引擎。

显示与输出分开定义

1
horizontalSymbolsDataSource:
2
  - { label: '1', value: "a" }
3
  - { label: '2', value: "b" }
4
  ...

此时 label 表示显示内容，value 表示直接输出内容，输出内容不会发送给 RIME 引擎。

使用 action 定义单元格行为

1
horizontalSymbolsDataSource:
2
  - { label: '1', action: tab }
3
  ...

此时 label 表示显示内容，action 表示点击单元格的行为。行为配置与按键的 action 配置相同。

数据源显示样式

默认情况下，数据源的显示都是以字符串形式显示的。由集合视图的 cellStyle 样式中的 foregroundStyle 样式决定。

如果需要自定义显示样式，可以在数据源中使用 styleName 属性，定义每个单元格的显示样式。

1
horizontalSymbolsDataSource:
2
  - { label: '1', action: tab, styleName: 'leftArrowButton'}
3
leftArrowButton:
4
  backgroundStyle: alphabeticBackgroundStyle
5
  foregroundStyle:
6
    - leftArrowButtonForegroundStyle

引用样式的定义与按键样式定义相同。