Skip to content

面板布局

Jump to bottom
ESLyric edited this page Apr 23, 2022 · 12 revisions

面板布局

当前ESLyric面板布局处于开发过程中，内容可能随时更改

ESLyric支持自定义歌词面板元素布局。

布局文件

ESLyric使用XML作为布局文件格式。
布局由元素组成，不同的元素支持的属性不同。

通用属性

属性 值 说明
name 任意值 元素的名称
anchor left top right bottom
hstretch vstretch hcenter vcenter
center stretch 		锚点
left 以左侧元素或父元素左侧为锚点
top以上侧元素或父元素上侧为锚点
right以右侧元素或父元素右侧为锚点
bottom以下侧元素或父元素下侧为锚点
hstretch以左右侧元素或父元素左右侧为锚点
vstretch以上下侧元素或父元素上下侧为锚点
hcenter水平居中，左边距偏移
vcenter垂直居中，上边距偏移
center居中，左/上边距偏移
stretch以四侧为描点
margin l l,t l,t,r,b 边距
l 边距为相同值
l,t 左右边距为l,上下边距为t
l,t,r,b分别设置左，上，右，下边距
width 数值或百分比数值，如80或80% 宽度，百分比表示时为占用父元素宽度百分比
height 数值或百分比数值，如80或80% 高度，百分比表示时为占用元素高度百分比
min-width 数值 最小宽度
min-height 数值 最小高度
options 数值异或组合 元素设置
1 当指定最小宽/高度而当前元素小于其值时，隐藏元素
2 当超出父元素范围时隐藏
4 当元素类型不存在时隐藏，如为封面类型元素，当封面不存在时将隐藏，见元素一节类型说明
8 当无子元素时隐藏
16 元素宽高保持相同

元素

<element>用于定义元素:

属性 值 说明
type container lyric text albumart 元素类型
container 容器类型元素
lyric 歌词元素
text 文本元素
albumart 封面元素


container元素
container用于包含子元素类型，相当于DUI中的分离器。

属性 值 说明
layout stack 默认，支持左右或上下排布元素
orientation vertical horizonal 排布方向，默认为vertical
justify start middle end 对齐元素


lyric 元素
lyric 用于显示歌词。

属性 值 说明
text-align left center right 歌词行对齐方式，默认为面板设置值，此处设置后面板设置对齐方式将无效。


text 元素
text 用于显示文本。

属性 值 说明
caption 任意值，支持格式标题 文本内容
text-align left center right 文本对齐方式，默认为center
text-color #rrggbb rgb(rr,gg,bb) 文本颜色，如#112233 rgb(11,22,33)。 默认为面板设置值
font-size 数值 文本字体点数大小。默认为面板设置值
nowrap 0 1 是否换行，默认为0
line-space 数值 行间距，默认为面板设置值


albumart 元素
albumart 用于显示封面。
暂无特有属性。

<panel> 元素是特殊的根元素，为container类型，其不必使用element标签进行定义。

布局示例

<panel layout="stack" name="Example" orientation="horizonal">
    <element type="container" width="40%" anchor="vstretch" min-width="130" options="8">
        <element type="albumart" width="120" height="120" options="4"/>
    </element>
    <element type="container" anchor="stretch">
        <element type="text" caption="标题: %title%" font-size="16" text-color="#f00000" height="30" width="100%"/>
        <element type="text" caption="[艺术家: %artist%]" font-size="12" text-color="#00f0f0" height="40" width="100%" options="4"/>
        <element type="lyric" text-align="left" anchor="stretch"/>
    </element>
</panel>
Clone this wiki locally