0.13

集成面板

集成面板可以将多个模块整合进一个面板中,用多个模块为一个内容提供多样的显示形态和交互体验。

术语约定

TODO

功能特性

  • 对齐网格(Align Grid)

将视窗(Viewport)划分为N行M列的网格,在开启吸附功能后,在(x,y)坐标位置打开的集成面板会自动寻找最靠近的网格,并将最终打开的坐标位置设置为网格的中心的坐标位置(x', y')。

配置说明

<?xml version="1.0" encoding="utf-8"?>
<MyConfig version="1.0">
  <!-- UI 
      visible: 预加载完成后是否显示
      slot: ui根节点在主Canvas中的挂载路径
    -->
  <UI visible="true" slot="[root]"/>
  <!-- 远程过程调用
      address: 地址
    -->
  <GRPC address="https://localhost:19000"/>
  <!-- 交融检测
      mode: 模式,可选值为 circular, rectangle
  -->
  <!-- 样式列表
      name: 名称
      Style.AlignGrid: 对齐网格,将屏幕划分为n行xm列的网格,可控制面板吸附在最近的网格的中心位置
      Style.AlignGrid.visible: 是否可见
      Style.AlignGrid.row: 行数
      Style.AlignGrid.column: 列数
      Style.AlignGrid.stickH: 水平吸附
      Style.AlignGrid.stickV: 垂直吸附
      Style.TitleBarBackground: 首页标题栏背景
      Style.TitleBarBackground.image: 位于theme文件夹中的图片
      Style.TitleBarBackground.color: 图片的叠加颜色
      Style.TitleBarBackground.Border: 图片的九宫格边界
      Style.PanelBackground: 首页面板背景
      Style.PanelBackground.image: 位于theme文件夹中的图片
      Style.PanelBackground.color: 图片的叠加颜色
      Style.PanelBackground.Border: 图片的九宫格边界
      Style.LikeBackground: 点赞背景
      Style.LikeBackground.image: 位于theme文件夹中的图片
      Style.LikeBackground.color: 图片的叠加颜色
      Style.LikeBackground.Border: 图片的九宫格边界
      Style.TopicBackground: 标语背景
      Style.TopicBackground.image: 位于theme文件夹中的图片
      Style.TopicBackground.color: 图片的叠加颜色
      Style.TopicBackground.Border: 图片的九宫格边界
      Style.DescriptionBackground: 描述背景
      Style.DescriptionBackground.image: 位于theme文件夹中的图片
      Style.DescriptionBackground.color: 图片的叠加颜色
      Style.DescriptionBackground.Border: 图片的九宫格边界
      Style.TabBar: 标签栏
      Style.TabBar.space:  标签间的间隔
      Style.TabBar.Background: 标签栏背景
      Style.TabBar.TabButtons:  标签按钮列表
      Style.TabBar.TabButton.contentKey:  对应content的meta.json的kvS中的键,如果存在则显示。“_”表示不与content对应,始终显示。
      Style.CoverPicture.fitmode: 匹配模式,可选值为(none:使用原图大小,zoomout:比容器大时缩小为容器大小,zoomin:比容器小时放大为容器大小,zoom:同时使用zoomin和zoomout)
    -->
  <Styles>
    <Style name="rectangle" width="880" height="740">
      <AlignGrid row="1" column="1" stickH="true" stickV="true"/>
      <TitleBarBackground image="rectangle_titlebar_bg.png" color="#3333334C">
        <Border top="56" bottom="56" left="56" right="56"/>
      </TitleBarBackground>
      <PanelBackground image="rectangle_panel_bg.png" color="#272930CC">
        <Border top="56" bottom="56" left="56" right="56"/>
      </PanelBackground>
      <LikeBackground image="rectangle_button.png" color="#5B656F46">
        <Border top="16" bottom="16" left="16" right="16"/>
      </LikeBackground>
      <TopicBackground image="rectangle_button.png" color="#5B656F46">
        <Border top="16" bottom="16" left="16" right="16"/>
        <SwitchIcon image=""/>
      </TopicBackground>
      <DescriptionBackground image="rectangle_button.png" color="#5B656F46">
        <Border top="16" bottom="16" left="16" right="16"/>
      </DescriptionBackground>
      <TopicSwitchIcon image="rectangle_icon_switch.png" />
      <DescriptionSwitchIcon image="rectangle_icon_switch.png"/>
      <LikedIcon image="rectangle_icon_liked.png">
        <Anchor horizontal="left" vertical="center" marginH="12" marginV="0" width="20" height="20"/>
      </LikedIcon>
      <UnlikedIcon image="rectangle_icon_unliked.png">
        <Anchor horizontal="left" vertical="center" marginH="12" marginV="0" width="20" height="20"/>
      </UnlikedIcon>
      <SizeRange descriptionMaxHeight="110"/>
      <ImageToolBox image="rectangle_button.png" color="#5B656F88">
        <Border top="16" bottom="16" left="16" right="16"/>
        <Anchor horizontal="right" vertical="bottom" marginH="36" marginV="24" height="48"/>
        <ZoomInButton image="rectangle_imagetoolbox_zoomin.png" color="#FFFFFFFF">
          <Anchor height="36" width="36"/>
        </ZoomInButton>
        <ZoomOutButton image="rectangle_imagetoolbox_zoomout.png" color="#FFFFFFFF">
          <Anchor height="36" width="36"/>
        </ZoomOutButton>
        <BackButton image="rectangle_imagetoolbox_back.png" color="#FFFFFFFF">
          <Anchor height="36" width="36"/>
        </BackButton>
      </ImageToolBox>
      <PageSlots>
        <PageSlot page="media">
          <InlaySubject message="/XTC/MediaCenter/Inlay">
            <Parameters>
              <Parameter key="uid" value="{{uid}}" type="_"/>
              <Parameter key="style" value="default" type="string"/>
              <Parameter key="slot" value="{{page_slot}}" type="_"/>
            </Parameters>
          </InlaySubject>
          <RefreshSubject message="/XTC/MediaCenter/Refresh">
            <Parameters>
              <Parameter key="uid" value="{{uid}}" type="_"/>
              <Parameter key="source" value="assloud://" type="string"/>
              <Parameter key="uri" value="{{uri}}" type="_"/>
            </Parameters>
          </RefreshSubject>
        </PageSlot>
      </PageSlots>
      <TabBar space="24">
        <Background image="rectangle_tabbar_bg.png" color="#272930A0">
          <Border top="56" bottom="56" left="56" right="56"/>
        </Background>
        <CloseButton image="rectangle_tab_close.png" color="#FFFFFFFF">
          <Anchor width="44" height="44"/>
          <Subjects>
            <Subject message="/XTC/IntegrationBoard/DirectClose">
              <Parameters>
                <Parameter key="uid" value="{{uid}}" type="_"/>
                <Parameter key="delay" value="0" type="float"/>
              </Parameters>
            </Subject>
          </Subjects>
        </CloseButton>
        <TabButtons>
          <TabButton name="__home__" contentKey="_"
                     uncheckedIcon="rectangle_tab_profile_unchecked.png" uncheckedWidth="44" uncheckedHeight="44"
                     checkedIcon="rectangle_tab_profile_checked.png" checkedWidth="96" checkedHeight="44">
            <Subjects>
              <Subject message="/XTC/IntegrationBoard/ActivatePage">
                <Parameters>
                  <Parameter key="uid" value="{{uid}}" type="_"/>
                  <Parameter key="page" value="__home__" type="string"/>
                </Parameters>
              </Subject>
            </Subjects>
          </TabButton>
          <TabButton name="dossier" contentKey="dossier"
                     uncheckedIcon="rectangle_tab_dossier_unchecked.png" uncheckedWidth="44" uncheckedHeight="44"
                     checkedIcon="rectangle_tab_dossier_checked.png" checkedWidth="96" checkedHeight="44">
            <Subjects>
              <Subject message="/XTC/IntegrationBoard/ActivatePage">
                <Parameters>
                  <Parameter key="uid" value="{{uid}}" type="_"/>
                  <Parameter key="page" value="dossier" type="string"/>
                </Parameters>
              </Subject>
            </Subjects>
          </TabButton>
          <TabButton name="media" contentKey="MediaCenter"
                     uncheckedIcon="rectangle_tab_media_unchecked.png" uncheckedWidth="44" uncheckedHeight="44"
                     checkedIcon="rectangle_tab_media_checked.png" checkedWidth="96" checkedHeight="44">
            <Subjects>
              <Subject message="/XTC/IntegrationBoard/ActivatePage">
                <Parameters>
                  <Parameter key="uid" value="{{uid}}" type="_"/>
                  <Parameter key="page" value="media" type="string"/>
                </Parameters>
              </Subject>
            </Subjects>
          </TabButton>
          <TabButton name="search" contentKey="_"
                     uncheckedIcon="rectangle_tab_search_unchecked.png" uncheckedWidth="44" uncheckedHeight="44"
                     checkedIcon="rectangle_tab_search_checked.png" checkedWidth="96" checkedHeight="44">
            <Subjects>
              <Subject message="/XTC/IntegrationBoard/ActivatePage">
                <Parameters>
                  <Parameter key="uid" value="{{uid}}" type="_"/>
                  <Parameter key="page" value="search" type="string"/>
                </Parameters>
              </Subject>
            </Subjects>
          </TabButton>
        </TabButtons>
      </TabBar>
      <CoverPicture fitmode="zoom"/>
    </Style>
  </Styles>
  <!-- 预创建的实例列表
      uid: 实例的唯一ID
      style: 使用的样式名
    -->
  <Instances>
    <Instance uid="default" style="rectangle"/>
  </Instances>
  <!-- 预加载 -->
  <Preload>
    <!-- 消息订阅的主题
          message: 消息
          Parameter.key: 参数的键
          Parameter.value: 参数的值
          Parameter.type: 参数的类型,支持的类型为string,int,float,bool
        -->
    <Subjects>
      <Subject message="/XTC/IntegrationBoard/Open">
        <Parameters>
          <Parameter key="uid" value="default" type="string"/>
          <Parameter key="source" value="assloud://" type="string"/>
          <Parameter key="uri" value="XTC.IntegrationBoard/1" type="string"/>
          <Parameter key="delay" value="0" type="float"/>
        </Parameters>
      </Subject>
    </Subjects>
  </Preload>
</MyConfig>

消息订阅

  • /XTC/IntegrationBoard/ActivatePage

此消息将激活一个标签,打开对应的页面

参数
类型
说明

uid

string

准备创建的实例的uid

page

string

要打开的页面的名称,对应TabButton.name

  • /XTC/IntegrationBoard/DirectOpen

此消息将首先创建一个集成面板,然后刷新内容并显示,最后对齐到网格。

参数
类型
说明

uid

string

准备创建的实例的uid

style

string

准备创建的实例的样式

source

string

内容的源类型,可选项为assloud://

uri

string

内容在源中的访问地址

delay

float

延时打开的时间,单位为秒

position_x

float

打开的位置的x坐标

position_y

float

打开的位置的y坐标

  • /XTC/IntegrationBoard/DirectClose

此消息将关闭并销毁一个集成面板

参数
类型
说明

uid

string

准备创建的实例的uid

delay

float

延时关闭的时间,单位为秒

依赖插件

oelMVCS

更新日志

0.9.0

  • 新增:

支持视频循环,对应配置为:

<VideoLoop mode="none" visible="false"/>

Last updated