Skip to content

用户自定义界面

zhongyang219 edited this page Aug 15, 2024 · 15 revisions

从2.74版本开始,MusicPlayer2支持xml格式的用户自定义界面。如果你需要为MusicPlayer2添加自己的界面,请参考本文的说明。

本文档对应 MusicPlayer2 V2.77 版本。

要添加一个自定义界面,首先需要在程序所在目录的skins目录(如果不存在请创建)下创建一个xml文件,文件编码必须为utf8,然后编写xml文件的内容来配置用户界面。

MusicPlayer2会在启动时自动加载skins目录下的xml文件,你可以在菜单“视图”——“切换界面”子菜单中看到用户自定义的界面。

一个典型的用户界面配置文件如下所示:

<root name="测试界面">
  <ui type="big">
    <verticalLayout margin="4">
      <trackInfo height="24"/>
      <horizontalLayout>
        <verticalLayout>
          <albumCover square="true" margin="20" />
          <text type="title" style="scroll" height="24" alignment="center" font_size="10"/>
          <text type="artist" style="scroll" height="24" alignment="center"/>
          <spectrum height="48" width="280" draw_reflex="true"/>
        </verticalLayout>
        <lyrics margin="4"/>
      </horizontalLayout>
      <horizontalLayout margin="4" height="40">
        <button key="repeatMode" width="22" height="22" margin="2"/>
        <button key="previous" width="32" height="32" bigIcon="true" margin="2"/>
        <button key="playPause" width="32" height="32" bigIcon="true" margin="2"/>
        <button key="next" width="32" height="32" bigIcon="true" margin="2"/>
        <progressBar show_play_time="true"/>
      </horizontalLayout>
      <horizontalLayout height="24">
        <text type="format" style="scroll" height="24"/>
        <volume show_text="true" adj_btn_on_top="true" width="56" height="22" margin-left="4"/>
        <button key="favorite" width="22" height="22" margin="2"/>
        <button key="mediaLib" width="22" height="22" margin="2"/>
        <button key="showPlaylist" width="22" height="22" margin="2"/>
      </horizontalLayout>
    </verticalLayout>
  </ui>
  <ui type="narrow">
    <verticalLayout margin="4">
      <trackInfo height="24"/>
      <albumCover square="true" margin="20">
        <verticalLayout>
          <placeHolder/>
          <rectangle height="56" no_corner_radius="true">
            <verticalLayout margin="4">
              <text type="title" height="24" font_size="10"/>
              <text type="artist" height="24"/>
            </verticalLayout>
          </rectangle>
        </verticalLayout>
      </albumCover>
      <spectrum height="48" width="280" draw_reflex="true"/>
      <horizontalLayout margin="4" height="40">
        <button key="repeatMode" width="22" height="22" margin="2"/>
        <button key="previous" width="32" height="32" bigIcon="true" margin="2"/>
        <button key="playPause" width="32" height="32" bigIcon="true" margin="2"/>
        <button key="next" width="32" height="32" bigIcon="true" margin="2"/>
        <progressBar show_play_time="true"/>
      </horizontalLayout>
      <horizontalLayout height="24">
        <text type="format" style="scroll" height="24"/>
        <volume show_text="true" adj_btn_on_top="true" width="56" height="22" margin-left="4"/>
        <button key="favorite" width="22" height="22" margin="2"/>
        <button key="mediaLib" width="22" height="22" margin="2"/>
        <button key="showPlaylist" width="22" height="22" margin="2"/>
      </horizontalLayout>  
    </verticalLayout>
  </ui>
  <ui type="small">
    <verticalLayout margin="4">
      <trackInfo height="20"/>
      <horizontalLayout margin="4">
        <albumCover square="true" margin="4" width="100"/>
        <verticalLayout margin="4">
          <text type="title" style="scroll" height="24" alignment="center" font_size="10"/>
          <text type="artist" style="scroll" height="24" alignment="center"/>
          <spectrum draw_reflex="true" height="38" margin="4"/>
        </verticalLayout>
      </horizontalLayout>
      <horizontalLayout margin="4" height="40">
        <button key="repeatMode" width="22" height="22" margin="2"/>
        <button key="previous" width="32" height="32" bigIcon="true" margin="2"/>
        <button key="playPause" width="32" height="32" bigIcon="true" margin="2"/>
        <button key="next" width="32" height="32" bigIcon="true" margin="2"/>
        <progressBar show_play_time="true"/>
      </horizontalLayout>
      <horizontalLayout height="24">
        <text type="format" style="scroll" height="24"/>
        <volume show_text="true" adj_btn_on_top="true" width="56" height="22" margin-left="4"/>
        <button key="favorite" width="22" height="22" margin="2"/>
        <button key="mediaLib" width="22" height="22" margin="2"/>
        <button key="showPlaylist" width="22" height="22" margin="2"/>
      </horizontalLayout>
    </verticalLayout>
  </ui>
</root>

以上配置文件得到的界面效果如下图所示:(<ui type="big"></ui>节点下的内容)

image-20220129111906421

注意:xml文件中可定制的界面元素不包括窗口顶部的标题栏和窗口底部的状态栏,以及当主菜单“视图”——“使用系统菜单栏”被勾选时窗口右上角的按钮。

可用的xml元素

xml文件中所有可用的元素如下表所示:

元素 说明
root 根节点
ui 界面
verticalLayout 垂直布局
horizontalLayout 水平布局
stackElement 堆叠元素
rectangle 矩形
text 文本
albumCover 专辑封面
spectrum 频谱分析
trackInfo 曲目信息
toolbar 工具条
progressBar 进度条
lyrics 歌词
volume 音量
beatIndicator 节拍指示
placeHolder 占位符
playlist 播放列表
playlistIndicator 播放列表指示
classicalControlBar 经典样式的播放控制栏
element 空白的元素
recentPlayedList 最近播放项目列表
mediaLibItemList 媒体库项目列表
mediaLibFolder 媒体库的文件夹
mediaLibPlaylist 媒体库的播放列表
myFavouriteList 我喜欢的音乐列表
navigationBar 导航栏
allTracksList 所有曲目列表
miniSpectrum 图标大小的频谱分析

元素的公共属性

所有界面元素均可以通过以下属性配置元素的位置。

x, y

x和y属性属于设置元素左上角的位置。

如果元素的父元素是verticalLayout或horizontalLayout,则x和y属性无效。

x和y属性用于设置元素基于整个界面的绝对位置,与父元素的位置无关。

如果要设置元素基于其父元素的相对位置,请使用margin,margin-left,margin-top属性。

width, height

width和height属性用于设置元素的宽度和高度。

如果需要为元素设置固定的宽度或高度,请使用此属性。如果需要使元素的宽度或高度能够自动适应,则不要使用此属性指定元素的宽度或高度。

如果未指定其宽度和高度,则会根据其父元素自动设置宽度和高度:

  • 如果元素的父元素是一个布局元素,则其宽度或高度会根据布局中的其他元素自动计算得到。

  • 如果元素的父元素不是布局元素,则其宽度和高度根据父元素的宽度和高度自动变化。

margin,margin-left, margin-right, margin-top, margin-bottom

这些属性用于设置元素的四个方向的边距。

例如,以下代码设置了一个元素的左、右、上、下边距。

<rectangle margin-left="8" margin-right="8" margin-top="10" margin-bottom="10"/>

margin属性可以为4个方向的边距设置统一值。

<rectangle margin="8"/>

如果元素的父元素是一个layout元素,边距的值是基于其上一个元素的位置。否则,边距的值基于其父元素的位置。

例如在horizontalLayout中,为一个元素的指定了margin-left="8",则该元素的左侧距离上一个元素的右侧的距离为8像素。

每个属性的值都可以是固定的数值或百分比。

例如:

<rectangle x="10" y="10"/>
<rectangle x="20%" y="20%"/>

如果是百分比,那么它的数值是以其父元素为100%时的百分比。

proportion

此属性仅在当前元素的父元素为layout元素时有效。

关于布局元素的说明请参阅[verticalLayout, horizontalLayout 布局](#verticalLayout, horizontalLayout 布局)章节。

此属性用于指定与其他非固定尺寸的兄弟元素分配空闲空间时的比例。在对应布局容器中优先级高于width或height。

例如:

<horizontalLayout width="100">
  <子元素1 width="20"/>
  <子元素2 />
  <子元素3 />
</horizontalLayout>

在上面的代码中,水平布局元素的宽度为100,子元素1的宽度为20,其他两个子元素未指定宽度,则它们将平分剩下的宽度,即子元素2子元素3的宽度都为40。

如果你不希望子元素2子元素3平分剩下的宽度,则可以使用proportion属性来指定它们各自按怎样的比例分配剩下的宽度。如下面的代码所示:

<horizontalLayout width="100">
  <子元素1 width="20"/>
  <子元素2 proportion="1"/>
  <子元素3 proportion="3"/>
</horizontalLayout>

在以上代码中,子元素2子元素3将按1:3的比例来分配剩下的80像素的宽度,即子元素2的宽度为20,子元素3的宽度为60。

max-width, max-height

用于设置元素的最大宽度或最大高度。值可以是固定的数值或百分比。

此属性仅在其父元素为layout元素时有效。

min-width, min-height

用于设置元素的最小宽度或最小高度。值可以是固定的数值或百分比。

此属性仅在其父元素为layout元素时有效。

hide-width, hide-height

值可以是固定的数值或百分比。

用于设置当父元素的宽度/高度小于此值隐藏。

元素属性详细说明

每个元素除了以上公共的属性外,还有各自特有的属性。

root 根节点

root元素是整个xml文件的根节点,整个xml文件有且仅有一个根节点。

name

此界面的名称,会显示到”切换界面“子菜单中。如果未定义此属性,则会使用默认的名称”界面+序号“。

此属性可以通过%(字符串ID)的格式从多语言翻译文件中获取字符串ID对应的字符串。请参照使用字符串资源中的字符串章节查看相关说明。

index

界面的序号,用于设置此界面在“切换界面”子菜单中的顺序。它的值应该至少为3。序号不能与其他界面重复。未定义此属性的界面总是排在后面。

ui 界面

一个xml文件可以包含多个界面,分别为不同大小时切换。

ui元素必须为root节点的子节点。而除此之外的所有元素都必须在ui元素下面。

type

界面的类型,有如值可选:

  • big

    界面宽度和高度大于一定值时的界面。

  • narrow

    界面宽度小于一定值时的界面。

  • small

    界面宽度和高度都小于一定值时的界面。

你可以不为ui元素指定type属性,这样它将作为默认的界面。当你无法用一个默认界面适应所有窗口尺寸时,就应该为不同界面的尺寸编写不同的ui元素,并分别为它们指定type属性。

verticalLayout, horizontalLayout 布局

如果要让界面元素依次摆放到界面中,且不会发生重叠的现象,请使用verticalLayout/horizontalLayout布局元素。使用布局元素可以使你不再需要计算元素的实际位置,你只需要在布局中添加你的元素,并设置元素的宽度/高度/边距等。使用布局元素还可以使用元素的摆放自动适应窗口大小的变化。

如下的代码在布局中添加了若干元素:

<horizontalLayout margin="4" height="40">
  <button key="repeatMode" width="22" height="22" margin="2"/>
  <button key="previous" width="32" height="32" bigIcon="true" margin="2"/>
  <button key="playPause" width="32" height="32" bigIcon="true" margin="2"/>
  <button key="next" width="32" height="32" bigIcon="true" margin="2"/>
  <progressBar show_play_time="true"/>
</horizontalLayout>

以上代码中,在一个水平布局中依次添加了“循环模式”、“上一曲”、“播放/暂停”、“下一曲”按钮,以及一个进度条,效果如下图所示:

image-20220129113506914

注意到以上代码中,4个button元素都指定了宽度,而progressBar元素未指定宽度。在这种情况下,当窗口宽度发生变化时,4个button元素的宽度将保持不变,而progressBar元素的宽度将自动动态地调整,使得horizontalLayout中所有子元素占满horizontalLayout元素的整个宽度。

以上的示例中只有progressBar一个元素未指定宽度,如果有多个元素未指定宽度,则这些未指定宽度的元素将获得相等的宽度,并且都将动态地调整宽度。

可以使用元素的proportion属性指定它与其他元素在父元素中的比例。

注意到以上的示例中,horizontalLayout的高度为40像素,而所有子元素的高度都小于40像素,所有子元素在垂直方向上都会基于horizontalLayout居中显示。

如果未指定子元素的高度,则高度为父元素的高度。

如果为horizontalLayout中的所有元素都指定了宽度,则这些元素将在布局中水平居中显示。如果想让这些元素左对齐或右对齐,可以在后面或前面添加一个不指定宽度的placeHolder元素。

以上规则对于verticalLayout(垂直布局元素)同理。

stackElement 堆叠元素

不同于布局元素,将若干元素作为子元素添加到堆叠元素下面时,这些子元素并不会都显示,同时只会有一个子元素显示,每一个子元素的矩形区域都和stackElement相同。可以通过多种方法切换这些子元素的显示。你也可以将它理解为一个界面切换器,stackElement的每一个子元素就是一个子界面,你可以很方便地切换这些子界面。

可以通过以下方法切换stackElement的子界面:

  • 鼠标点击

    过鼠标点击堆叠元素区域来切换子界面的显示,需要将click_to_switch属性设置为true

  • 鼠标指向

    需要需要将hover_to_switch属性设置为true。当鼠标指向堆叠元素区域时会切换下一个子界面,鼠标指针离开时恢复原来的子界面。

  • 鼠标滚轮

    通过鼠标滚轮来切换子界面 ,需要scroll_to_switch属性设置为true

  • 点击指示器

    通过点击堆叠元素下方的指示器来切换子界面的显示,需要将show_indicator属性设置为true

  • 在界面中添加keyswitchDisplaybutton,通过点击此按钮来切换stackElement的子界面的显示。需要注意的是,如果当前界面中含有多个stackElement,则此按钮只会切换每一个stackElement元素的子界面。

  • 使用导航栏

    关于导航栏的说明请参见“[navigationBar 导航栏](#navigationBar 导航栏)”章节。

stackElement元素的效果如下图所示:

image-20220129130927556

click_to_switch

如果此属性为true,则可以通过鼠标点击堆叠元素区域来切换子界面的显示。

scroll_to_switch

如果为true,则可以通过鼠标滚轮切换显示。

show_indicator

如果此属性为true,则会在堆叠元素下方显示一个由圆点组成的指示器:

image-20220129130927556

高亮的圆点表示当前显示的子界面。点击指示器可以在所有可用子界面之间循环切换。

你也可以在鼠标指向指示器时通过鼠标滚轮来切换子界面。

注意:指示器的显示位置并不在stackElement的矩形区域内,而是在它的下方。因此,建议为stackElement元素设置好下边距margin-button,以防止指示器与下方的其他元素重叠。

hover_to_switch

如果此属性为true,则当鼠标指向堆叠元素区域时会切换下一个子界面,鼠标指针离开时恢复原来的子界面。

indicator_offset

用来设置指示器在垂直方向上的偏移量,单位为像素。

默认为0。如果值为正数,则指示器将向下偏移,值为负数则向上偏移。

rectangle 矩形

一个半透明的矩形,如下图所示:

image-20220129130927556

上图对应的xml代码如下:

<rectangle no_corner_radius="false" min-height="134">
  <horizontalLayout>
    <albumCover square="true" margin="8" width="30%"/>
    <verticalLayout margin="8">
      <text type="title" style="scroll" height="38" font_size="12"/>
      <text type="artist" style="scroll" height="24" font_size="10"/>
      <text type="album" style="scroll" height="24" font_size="10"/>
      <spectrum draw_reflex="true" fixed_width="true" margin-top="8" max-height="80"/>
      <text type="format" style="scroll" height="24"/>
    </verticalLayout>
  </horizontalLayout>
</rectangle>

no_corner_radius

如果为true,则矩形总是为直角;如果为false,则在“选项”——“外观设置”中勾选“使用圆角风格按钮”时,矩形显示为圆角矩形。

默认为false

theme_color

如果为true,则半透明矩形的填充颜色使用主题色。

color_mode

矩形的颜色模式。有如下值可选:

含义
auto 自动适应界面深浅色主题。
dark 深色。
light 浅色。

默认为auto

button 按钮

key

按钮的类型,有如下值可选:

含义
menu 菜单
miniMode 迷你模式
fullScreen 全屏模式
repeatMode 循环模式
settings 设置
equalizer 均衡器
skin 切换界面
info 曲目信息
find 查找
abRepeat AB重复
desktopLyric 显示桌面歌词
lyricTranslate 显示歌词翻译
stop 停止
previous 上一曲
next 下一曲
playPause 播放/暂停
favorite 添加到“我喜欢的音乐”
mediaLib 媒体库
showPlaylist 显示/隐藏播放列表
addToPlaylist 添加到播放列表
switchDisplay 切换界面中stackElement元素的显示。如果界面中有多个stackElement元素,则点击此按钮会切换第一个stackElement元素的显示。
darkLightMode 在深色模式和浅色模式之间切换。
locateTrack 播放列表定位到正在播放的曲目。
karaoke 歌词卡拉OK效果显示
openFolder 打开文件夹
newPlaylist 新建播放列表
playMyFavourite 播放“我喜欢的音乐”
medialibFolderSort 媒体库“文件夹”排序方式
medialibPlaylistSort 媒体库“播放列表”排序方式

注意:

  • 目前不支持在一个界面中放置两个以上相同的按钮。

  • 此属性不可缺少。

bigIcon

如果为false,则图标尺寸为16x16;如果为true,则图标尺寸为20x20。

目前此属性只对“上一曲”、“播放/暂停”、“下一曲”和“停止”按钮有效。

默认为false

show_text

如果为true,则会在图标右侧显示文本,如下图所示。文本内容由key属性决定。此时如果未指定按钮的宽度,那么按钮的宽度会根据文本自适应

image-20240815110013150

font_size

字体大小,仅支持8~16。默认大小为9。

text 文本

text

显示的文本。

此属性可以通过%(字符串ID)的格式从多语言翻译文件中获取字符串ID对应的字符串。请参照使用字符串资源中的字符串章节查看相关说明。

alignment

对齐方式。有以下值可选:

  • left

    左对齐

  • right

    右对齐

  • center

    居中

默认为left

style

文本的样式。有以下值可选:

  • static

    静止的文本

  • scroll

    滚动的文本

  • scroll2

    另一种滚动的文本(只朝一个方向滚动)

默认为static

type

文本的类型。有以下值可选:

  • userDefine

    显示的文本由text属性的值决定。

  • title

    显示歌曲标题。

  • artist

    显示歌曲艺术家。

  • album

    显示歌曲唱片集。

  • artist_title

    显示为“艺术家 - 标题”。

  • artist_album

    显示为“艺术家 - 唱片集。

  • format

    显示歌曲格式。

  • play_time

    播放时间。

  • play_time_and_volume

    显示播放时间。如果正在调整音量,会显示当前音量,一段时间后恢复。

默认为userDefine

font_size

字体大小,仅支持8~16。默认大小为9。

width_follow_text

元素宽度是否跟随文字宽度,即当设定宽度大于文字宽度时收缩到文字宽度。优先级低于元素宽度最值设定。

color_mode

文本的颜色模式。有如下值可选:

含义
auto 自动适应界面深浅色主题。
dark 深色。
light 浅色。

默认为auto

albumCover 专辑封面

square

如果为true,则总是使用正方形的专辑封面。

默认为false

show_info

是否在专辑封面上显示歌曲标题和艺术家。默认为false

spectrum 频谱分析

draw_reflex

是否绘制倒影。

true:绘制倒影;false:不绘制倒影。

默认为false

fixed_width

每个柱形是否使用相同的宽度。如果为true,则频谱分析的宽度将始终保持不变。

默认为false

type

频谱分析的类型(柱形数量),有以下值可选:

  • 64col
  • 32col
  • 16col
  • 8col

默认为64col

alignment

fixed_widthtrue时可以使用此属性设置频谱分析的对齐方式。

有以下值可选:

  • left

    左对齐

  • right

    右对齐

  • center

    居中

当频谱分析区域的宽度大于频谱分析需要的宽度时,此属性可以设置频谱分析在矩形区域中的对齐方式。

当频谱分析区域的宽度小于频谱分析需要的宽度时,频谱分析不能显示所有的柱形,此时不管设置的对齐方式如何,都会优先保证低频部分的柱形显示。

trackInfo 曲目信息

曲目信息(包含播放状态、文件名、歌曲标识、速度)。

font_size

字体大小,仅支持8~16。默认大小为9。

toolbar 工具条

包含若干按钮、音量、节拍指示等元素的工具条。如下图所示:

image-20220129131746148

注意:工具条包含了以下按钮:

repeatMode(循环模式)、settings(设置)、equalizer(均衡器)、skin(切换界面)、miniMode(迷你模式)、info(曲目信息)、find(查找)、darkLightMode、abRepeat(AB重复)、desktopLyric(显示桌面歌词)、lyricTranslate(显示歌词翻译。当show_translate_btn属性为true时)。

因此如果使用toolbar(工具条)元素时,界面中不能再出现以上已经包含在工具栏中的按钮。

show_translate_btn

是否在工具栏上显示“显示歌词翻译”按钮。

true:显示;false:不显示。

默认为false

progressBar 进度条

show_play_time

是否在进度条右边显示播放时间。

true:显示;false:不显示。

默认为false

play_time_both_side

播放时间是否显示在进度条的两侧。仅当show_play_time为true时有效。

默认为false

lyrics 歌词

显示歌词的区域。歌词的显示会自动根据歌词区域的大小切换单行、双行、多行显示模式。

在此区域点击鼠标右键会弹出歌词右键菜单。

no_background

设置为true时将忽略“选项设置”-“外观设置”中“显示歌词背景”的设置,总是不绘制歌词背景。

use_default_font

设置为true时将忽略“选项设置”-“歌词设置”-“窗口歌词”中字体的设置,歌词总是使用默认字体。

font_size

歌词字体大小,use_default_font为true时有效,仅支持8~16。默认大小为9。

show_song_info

设置为true时将忽略“选项设置”-“歌词设置”-“没有歌词时显示歌曲信息”的设置,总是在没有歌词时显示歌曲信息。此外,当最后一句歌词结束后也将显示歌曲信息。

playlist 播放列表

显示播放列表。

item_height

播放列表每一行的高度。

playlistIndicator 播放列表指示

包含当前播放列表/文件夹/媒体库项目指示、一个下拉按钮和菜单按钮。

image-20240815120809872

volume 音量

音量按钮,点击后会弹出音量调节按钮,如下图所示:

image-20220129132503537

show_text

是否在音量图标旁边显示文本。

默认为false

注意:如果需要在音量图标旁边显示文本,元素的宽度建议设置成64像素左右。小于这个值可能会使音量文本显示不全。

adj_btn_on_top

点击音量图标后出现的音量调节按钮是否显示在音量图标的上方。默认显示在音量图标的下方。

true:音量调节按钮显示在音量图标的上方

false:音量调节按钮显示在音量图标的下方

默认为false

beatIndicator 节拍指示

一个由<<<<组成的节拍指示。它仅在播放Midi音乐时才会指示正确的节拍。

placeHolder 占位符

placeHolder元素是一个占位符,它不显示任何东西。

show_when_use_system_titlebar

如果为true,则仅当在“外观设置”-“标题栏”中选择“使用系统标准标题栏”时才显示,当选择“使用自绘标题栏”时隐藏。默认为false。

这个属性可用于避免“使用系统标准标题栏”时,界面右上角的其他元素和右上角的按钮重叠。

由于“使用系统标准标题栏”时,原本显示在标题栏中的按钮将显示在窗口的右上角,如果此区域有其他界面元素的话可能会和右上角的按钮重叠,因此需要一个placeHolder元素用来在此区域留出空白。

效果如下图所示:

image-20240815140509149

对应的xml代码如下所示:

<verticalLayout margin="8">
  <placeHolder show_when_use_system_titlebar="true" height="24"/>
  <navigationBar height="30" icon_type="icon_only" item_space="4" item_list="lyrics,play_queue,recently_played,folder,playlist,my_favourite,artist,album"/>
  <stackElement margin-top="8">
	...
  </stackElement>
</verticalLayout>

其中verticalLayout下有一个placeHolder元素,高度固定为24,并将show_when_use_system_titlebar属性设置为true,这样,该placeHolder元素仅在“使用系统标准标题栏”时(上图右侧图)生效,于是navigationBar上方便空出了24像素的高度,从而避免和右上角的按钮重叠。当“使用系统标准标题栏”时(上图左侧图),右上角的按钮不显示,placeHolder元素不生效,navigationBar上方就没有这24像素的空白。

classicalControlBar 经典样式的播放控制栏

一个由包含进度条,以及停止、上一曲、播放/暂停、下一曲、收藏、媒体库、播放列表按钮的播放控制栏。

image-20240815110656958

当宽度变小时,进度条会移动到按钮上方:

image-20240815141908758

show_switch_display_btn

是否显示“切换界面”按钮。

element 空白元素

element是一个空白的元素,不绘制任何东西,可用于作为其他元素的父节点。

recentPlayedList 最近播放项目列表

显示一个包含最近播放近的文件夹、播放列表和媒体项目的列表,按最近播放时间排序。内容同“选择最近播放项目”对话框(按Ctrl+H打开)。

mediaLibItemList 媒体库项目列表

显示一个媒体库中“艺术家”、“唱片集”等项目的列表。

type

媒体库项目的类型,有以下值可选:

  • artist

    艺术家

  • album

    唱片集

  • genre

    流派

  • year

    年份

  • file_type

    文件类型

  • bitrate

    比特率

  • rating

    分级

myFavouriteList 我喜欢的音乐列表

显示我喜欢的音乐列表。

allTracksList 所有曲目列表

显示所有曲目列表。

navigationBar 导航栏

显示一个导航栏,用于控制一个stackElement的切换。

image-20240814111544005

它将按以下规则查找stackElement:

逐级向上遍历它的父节点,在每个父节点下面查找stackElement,如果未找到,则作用于ui元素下第一个stackElement。

item_list

导航栏中的标签列表,多个标签用半角逗号隔开。标签只能在album_cover,spectrum,lyrics,now_playing,play_queue,recently_played,folder,playlist,artist,album,genre,year,file_type,bitrate,rating,media_lib,my_favourite,all_tracks中选。

每个标签都有对应的图标和文本,标签对应的图标和文本如下表所示:

标签 图标 文本
album_cover image-20240814112904266 专辑封面
spectrum image-20240814112407116 频谱分析
lyrics image-20240814112425339 歌词
now_playing image-20240814112341365 正在播放[注1]
play_queue image-20240814112446667 播放队列
recently_played image-20240814112502546 最近播放
folder image-20240814112515875 文件夹
playlist image-20240814112527506 播放列表
artist image-20240814112612306 艺术家
album image-20240814112709354 唱片集
genre image-20240814112724386 流派
year image-20240814112734476 年份
file_type image-20240814112744957 文件类型
bitrate image-20240814112759646 比特率
rating image-20240814112811800 分级
media_lib image-20240814112940726 媒体库
my_favourite image-20240814112549887 我喜欢的音乐
all_tracks image-20240814112940726 所有曲目

注1:处于非停止状态下时,并且播放内核支持频谱分析显示,正在播放图标将会替换成动态的频谱,效果同miniSpectrum元素。

要确保导航栏能够正确地控制stackElement的切换,必须确保item_list中标签的数量和顺序与对应stackElement下的子元素一致。

icon_type

图标类型,有以下值可选:

  • icon_and_text

    图标和文本

  • icon_only

    仅图标

  • text_only

    仅文本

orientation

导航的排列方式。有以下值可选:

  • horizontal

    水平排列

  • vertical

    垂直排列

item_space

导航栏中项目的间距。

item_height

标签的高度。仅在垂直排列模式下起作用。

font_size

字体大小,仅支持8~16。默认大小为9。

miniSpectrum 图标大小的频谱分析

显示一个图标大小的频谱分析。

image-20240815121106008

列表元素属性

以下元素为列表元素:

  • playlist
  • recentPlayedList
  • mediaLibItemList
  • mediaLibFolder
  • mediaLibPlaylist
  • myFavouriteList
  • allTracksList

它们都具有如下公共的属性:

item_height

列表项目的高度。

font_size

字体大小,仅支持8~16。默认大小为9。

其他说明

使用字符串资源中的字符串

root元素的name属性和text节点的text属性支持从多语言翻译文件中读取字符串(程序所在目录下的language文件夹)。这样可以根据不同语言的设置显示为对应语言的文本。

如果设置的文本中包含形如%(字符串ID)的文本,则程序会将其替换成多语言翻译文件中对应编号的文本。例如设置成%(TXT_UI_NAME_GROOVE_MUSIC_STYLE)(Windows11),ID TXT_UI_NAME_GROOVE_MUSIC_STYLE对应的字符串为Groove音乐风格,则最终得到的字符串是Groove音乐风格(Windows11)

Clone this wiki locally