前言
本文可能涉及到一些“专业”的知识，为了不影响阅读，可以先阅读入门篇或者看看我的自制皮肤Glass
如果有按照我的步骤一步一步来，入门篇的最后一定会出现一个“bug”，放一张图回忆回忆：
一个渲染错误的界面
其实这不是bug啦，只是基本操作。其原理是客户端的渲染机制导致的，这里不做过多的讲解。只需要了解：
最底层（最下面）的控件一定要有背景绘制，实际上我们的壁纸就是最底层那层绘制。后来我们加上壁纸的绘制，客户端就表现正常了，就是这个原理。
概览
本文将会主要讲解这些知识点，放张图压压惊：
image.png
主要参考官方文档以及自己的经验。
简单介绍
layout : 控件该在哪里出现
controls : 控件该干些什么
styles : 控件该长什么样
color : 描述样式中的颜色或某些特定的属性值
一个完整的 .layout 文件由上面4部分构成，每个部分都被一对大括号包裹。但这4部分都不是必须的，即使一个部分都没有，只要格式正确（如果有下一篇，会解释这个格式），就会被steam客户端加载。
详细介绍
这里会对上面4部分做详细介绍，包括说明。和相关属性的默认值、可选值怎么使用可以参考入门篇的styles。
需要注意的是，这些属性在某些地方可能有特殊用法（比如下载进度条），在使用特殊用法的地方，v社开发人员都贴心的留下注释了，这里我只关注一般情况。
语法
先了解一下语法，吐槽一下layout文件里边什么格式都有，强迫症快要死了。
1.1 符号不敏感
在变量中对 = 不敏感，下面两段代码的效果一样的，不过我建议使用 =。
color1="0 0 0 255"
color1 "0 0 0 255" // 有空格代替等号是允许的
空格不敏感，在空格用作两个属性之间的间隔、变量名和变量值的连接时，1个空格和100个空格是一样的
// 在变量中
// 下面两种情况效果一样
color1="0 0 0 255"
color1 = "0 0 0 255"
// 下面两种情况效果一样
color1 "0 0 0 255"
color1 "0 0 0 255"
// 在style、control、place、region中，以place为例，其他类似
// 下面两种情况效果一样
place{x=50 y=40 width=max} // 在这里对等号敏感
place{ x = 50 y = 40 width = max }
换行不敏感，找不到合适的语言来描述，放代码自行体会
// 在style、control、place、region中，以place为例，其他类似
// 下面的情况效果一样
place{x=50 y=40 width=max}
place{
x=50 y=40 width=max
}
place
{x=50 y=40 width=max}
place
{
x=50 y=40 width=max
}
1.2 样式
在controls、layout 、styles内部使用
button {
textcolor="0 0 0 255"
bgcolor="255 255 255 0"
padding=10
}
其中button是名称，textcolor和bgcolor是属性"0 0 0 255"和10是属性值
2 style
定义一个样式，供control、place、region 使用。
button {
textcolor="0 0 0 255"
bgcolor="255 255 255 0"
}
注意：所有的属性都不是必须的
2.1 字体相关
| 属性 | 类型 | 默认值 | 预设值 | 说明 |
|---|---|---|---|---|
| font-family | 字符串 | Tahoma | - | 字体名称 |
| font-size | 整数 | - | - | 字体大小，单位像素 |
| font-weight | 整数 | 400 | 0~1000 | 字体粗细。400是标准，700是粗体 |
| font-style | 字符串 | normal | normal（正常），italic（斜体），underline（下划线），strikeout（删除线），uppercase（大写），lowercase（小写），symbol，antialias，dropshadow，outline，rotary，additive | 字体样式，其中一些可以叠加 |
-
字体样式：
- normal（正常）
normal（正常）
- italic（斜体）
italic（斜体）
- underline（下划线）
underline（下划线）
- strikeout（删除线）
strikeout（删除线）
- uppercase（大写）
image.png
- lowercase（小写）
image.png
- symbol（未知）
image.png
- antialias（未知）
image.png
- dropshadow（未知）
image.png
- outline（未知）
image.png
- rotary（未知）
image.png
- additive（未知）
image.png
2.2 颜色相关
| 属性 | 类型 | 说明 |
|---|---|---|
| bgcolor | 字符串或颜色 | 背景色 |
| textcolor | 字符串颜色 | 文字颜色 |
| selectedtextcolor | 字符串颜色 | 选中文字颜色 |
| selectedbgcolor | 字符串颜色 | 选中文字背景色 |
| shadowtextcolor | 字符串颜色 | 在不同的控件中有不同的意义 |
2.3 布局相关
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| padding | 整数 | 0 | 内边距，只是用与类型为Label或Button的control |
| insert | 整数 | "0 0 0 0" | 子控件在控件中如何定位，4个数字分别代表距离左、上、右、下的距离，对bgcolor起作用 |
| minimum-width | 整数 | 0 | 最小宽度，不适用与所有控件 |
| minimum-height | 整数 | 0 | 最小高度，不适用与所有控件 |
- padding（内边距）
padding=30
image.png
假如紫框为定义的控件，绿框+紫框就是实际显然效果的效果，当然颜色还是原来定义的颜色，这里只是方便区分
padding-left=30
padding-top=30
padding-right=30
padding-bottom=30
这段代码和上面那段可以达到一样的效果
- insert
insert="30 30 30 30"
假如绿框是定义的控件，紫框就是加上上面代码后的效果，显示不全的部分会被隐藏
insert-left=30
insert-top=30
insert-right=30
insert-bottom=30
这段代码和上面那段可以达到一样的效果
2.4 image
用图片替代文字，使用于Label和Button控件（控件类型属于control部分内容）
image="graphics/broadcast/icon_close_default"
值为一个图片的相对于皮肤文件夹根目录的相对位置，不要带文件后缀。当然这里的图片指的是tag格式的图片
2.5 render、render_bg（渲染）
这两个属性都是用于渲染的，前者在控件绘制之后开始绘制，后者在控件绘制之前开始绘制，说的通俗一点就是前者是绘制遮罩，后者是绘制背景。
做个比喻方便理解，bgcolor是你的皮肤颜色，render_bg是衣服颜色，textcolor衣服上字的颜色，render是围裙的颜色。
- 注意： render_bg在bgcolor绘制之后绘制，这意味着bgcolor的效果可能被覆盖。
每一个完整的渲染由一组渲染指令完成（一条指令也能完成一个完整的渲染），每条渲染指令可以指定一种渲染方式，包括fill、image、image_tiled、image_scale、image_proportional、gradient、gradient_horizontal、dashedrect。
无论哪种方式渲染都需要至少4个参数，这4个参数实际上是2个坐标，以控件占据的区域为准 (x0,y0)表示左上角，(x1,y1)表示右下角，假设一个控件占据的区域长100，宽70，那么有：
// ==两边代码指定的区域相同
(x0, y0)==(x1-100, y0-70)
(x1, y1)==(x0+100, y0+70)
(x0+20, y0+30)==(x1-80, y1-40)
描述坐标参数时需要遵从先上后下，先左后右的原则：
// 前两个参数为第一个点，后两个参数为第二个点
0="fill(x0, y0, x0, y0+10, red)" // 正确，先上后下
0="fill(x0, y0+10, x0, y0, red)" // 错误，先下后上
0="fill(x0, y0, x0+10, y0, red)" // 正确，先左后右
0="fill(x0+10, y0, x0, y0, red)" // 错误，先右后左
这要求我们在确定渲染区域是要选取左上角和右下角来确定渲染区域，且需要先写左上角在写右下角。
观察上面的指令，每条指令前面都有一个数字先看下官方解释：
The numbers on each line are just an artifact of our common parsing library; it doesn't matter what you put there, and it can all be the same.
大概意思是：每条指令上的数字只是我们公共解析库中的一部分;他们并不重要，甚至完全一样也没问题。
- 注意：这里我特意引用了官方文档，其原因是我在制作皮肤的过程中发现：在某些控件中，将渲染指令中的数字使用一样的，会导致渲染效果达不到预期。当我将数字替换为成不一样的之后。渲染和我预期的一样。
现在来详细解释下这些渲染方式：
- 注意：前4个坐标参数为必须，下表中就不在列举
2.5.1 fill（填充）
-
必要参数
一个颜色，必须是一个定义好的颜色变量 -
例子
0="fill(x0, y0, x0+10, y0, red)" -
说明
单色填充所选区域
2.5.2 dashedrect（虚线框）
-
必要参数
一个颜色，必须是一个定义好的颜色变量 -
例子
0="dashedrect(x0, y0, x0+10, y0, red)" -
说明
绘制具有指定颜色的虚线矩形
2.5.3 gradient_horizontal（纵向渐变填充）
-
必要参数
使用两个颜色渐变填充指定区域，渐变有上到下，第一个颜色为开始渐变，第一个为结束渐变颜色 -
例子
0="gradient_horizontal(x0, y0, x0+10, y0, red, blue)" -
说明
渐变填充区域，方向从上到下
2.5.4 gradient_horizontal（横向渐变填充）
-
必要参数
使用两个颜色渐变填充指定区域，渐变有上到下，第一个颜色为开始渐变，第一个为结束渐变颜色 -
例子
0="gradient_horizontal(x0, y0, x0+10, y0, red, blue)" -
说明
渐变填充区域，方向从左到右
2.5.5 image（图片）
-
必要参数
一个图片的相对于皮肤文件夹根目录的相对位置，不要带文件后缀。当然这里的图片指的是tag格式的图片，与image属性一样 -
例子
0="image(x0, y0, x0+10, y0, graphics/broadcast/icon_close_default)" -
说明
使用图片渲染指定区域，需要注意的是，如果图片的尺寸不渲染区域要大，可能图片会超出指定的渲染区域
2.5.6 image_tiled（图片，拓展）
-
必要参数
同上 -
例子
0="image_tiled(x0, y0, x0+10, y0, graphics/broadcast/icon_close_default)" -
说明
从指定区域的左上角开始，重复渲染该图片，直到铺满整个区域。
假设你现在新建一个文本文档，你的指定你的记事本区域为渲染区域，数字1为渲染的图片，使用使用此渲染方式就是不停的按1，直到整个文档全是1
2.5.7 image_scale（图片，缩放，不等比例）
-
必要参数
同上 -
例子
0="image_scale(x0, y0, x0+10, y0, graphics/broadcast/icon_close_default)" -
说明
缩放图片，铺满整个区域，图片可能会变形
2.5.8 image_proportional
-
必要参数
同上 -
例子
0="image_proportional(x0, y0, x0+10, y0, graphics/broadcast/icon_close_default)" -
说明
缩放图片，铺满整个区域，会等比例缩放，图片不会变形
3 control
control在controls区域内被定义，它赋予控件样式和具体作用
- 注意： 这control部分内容并没有文档作为支撑，绝大部分内容靠我自己脑补的，所以此部分巨大多数情况下我不建议去调整。
// 一个样式
fileimage {
controlname="ImagePanel"
image=resource/icon_file
zpos=1
style="fileimagestyle"
}
其中fileimage为该控件的名称，用在其他地方引用这个控件，{}内的为该控件的属性
3.1 属性
属性|类型|预设值|说明
-|-|-|-|-
controlname|string|Label、URLLabel、ImagePanel、Button、CheckButton、RadioButton|控件类型
style|string|-|styles中定义的样式
恩，没了（逃）
其他的属性，根据属性名大概能猜出来什么意思，但在实际使用中，有时有用，有时又没有用，索性就不说了。
control一般都不去动他，只是用来确定控件使用的style的。
4 layout
4.1 说明
这里的layout并非指.layout文件，而是.layout文件中的layout区域，这个区域是用来确定控件的在客户端上位置的。
在这个区域中有两种确定控件位置的方式：region和place，前者多用于指定包含多个控件的一个区域，后者则用来单独指定某个控件的位置，当然前者用来单独指定一个区域也是完全没有问题的。
place和region命令有很多参数，其中绝大部分都是通用的，并且这些参数全是可选的。
4.2 place和region的属性（参数）简要说明
| 属性 | 类型 | 必须 | 默认值 | 预设值 | 说明 |
|---|---|---|---|---|---|
| control | 字符串 | 否 | - | - | 为该区域指定一个control，可以一次指定多个control |
| region | 字符串 | 否 | - | - | 为该区域指定一个父容器，并且该区域的相对于父级定位 |
| name | 字符串 | 否 | - | - | 为该区域指定一个名称，方便其他区域应用 |
| x | 整数 | 否 | 0 | - | 相对于父容器的绝对定位，原点在父容器的左上角。若没有指定父容器为.layout文件指定的区域 |
| y | 整数 | 否 | 0 | - | 同x，x、y构成一个坐标确定该区域的左上角 |
| width | 整数 | 否 | - | - | 该区域的宽度，单位像素，父容器参考x |
| height | 整数 | 否 | - | - | 该区域的高度，单位像素，父容器参考x |
| start | 字符串 | 否 | - | - | 用来参考定位的其他区域的名称 |
| dir | 字符串 | 否 | right | down、right | 相对于参考区域的方向 |
| align | 字符串 | 否 | top-left | bottom、top、left、right、top-left、top-right | 该区域的对其方式 |
| margin | 整数 | 否 | 0 | - | 该区域的外边距（上下左右），单位像素，可以使用margin-left, margin-right, margin-top, margin-bottom的方式指定单独每一边的边距 |
| padding | 整数 | 否 | 0 | - | 该区域的内边距（上下左右），单位像素，可以使用padding-left, padding-right, padding-top, padding-bottom的方式指定单独每一边的边距 |
| spacing | 整数 | 否 | 0 | - | 区域中控件的间距，单位像素 |
| overflow | 字符串 | 否 | - | allow-horizontal、allow-vertical、allow-both、scroll-horizontal、scroll-vertical、scroll-both | region独有，区域内的内容超出该区域后的处理方式，带有allow及时内容超出，依旧会显示，并且不会改变定义好的样式，带有scroll的内容超出后会为该区域添加一个滚动条 |
4.3 属性详细说明
我会挑出我认为不容易理解的属性，详细说明一下
4.3.1 region、place
layout {
// 区域1
region {
name="aRegion"
width=100
height=200
x=50
y=50
}
// 区域2
place {
region="aRegion"
width=20
height=20
x=50
y=40
}
// 区域3
region {
region="aRegion"
width=50
height=100
}
// 区域4
place {
width=130
height=140
}
}
上面的4个区域，实际上不会有任何显示。只定义了区域，没有定义要展示的内容。
假如每一个区域都是有边框的，他们一定是这样的：
image.png
先看区域1(黑框)：
- 定义了一个名称为aRegion的矩形区域，矩形区域的长为100像素，高为200像素
- 没有指定region属性，默认父容器为.layout控制的区域
- 指定x、y，所以从(50,50)出开始渲染
区域2(绿框)：
- 定义一个20 x 20的区域
- 指定aRegion为父容器
- 指定从(50,40)开始渲染，对于.layout文件就是从(100,90)开始渲染
区域3(红框)：
- 定义一个50 x 100的区域
- 指定aRegion为父容器
- 指定从(0,0)开始渲染，对于.layout文件就是从(50,50)开始渲染
先看区域4(紫框)：
- 定义一个130 x 140的区域
- 没有指定region属性，默认父容器为.layout控制的区域
- 指定x、y，所以从(50,50)出开始渲染
4.3.2 control
// 指定单个control
place {
control=DetailsBorder
y=1
x=1
width=max
height=max
}
// 指定多个control
// 使用逗号隔开
place {
control=welcomedetails,rentaldetails,turnnotifications,friendsdetails,achievementsdetails,dlcdetails,clouddetails,communityfilesdetails,newsdetails,nonsteamdetails,screenshotsdetails
region=detailsbody
spacing=30
dir=down
width=max
margin-left=25
}
指定一个或者多个control使用这个区域
dir
place {
control=welcomedetails,rentaldetails,turnnotifications,friendsdetails,achievementsdetails,dlcdetails,clouddetails,communityfilesdetails,newsdetails,nonsteamdetails,screenshotsdetails
region=detailsbody
spacing=30
dir=down
width=max
margin-left=25
}
在指定多个control时使用dir来指定这些control的排列方式，right水平向右，down垂直向下
spacing
place {
control=welcomedetails,rentaldetails,turnnotifications,friendsdetails,achievementsdetails,dlcdetails,clouddetails,communityfilesdetails,newsdetails,nonsteamdetails,screenshotsdetails
region=detailsbody
spacing=30
dir=down
width=max
margin-left=25
}
在指定多个control时使用dir来指定这些control之间的间隔，单位像素，水平向右
4.3.3 margin(外边距)
layout {
place {
width=100
height=100
x=10
y=40
margin=30
}
}
图：
image.png
图中紫色为最终渲染结果，绿色虚线框仅仅为辅助线，margin为外边距，即外边的边距，只影响实际渲染的位置，不影响内容
margin=10
和
maring-left=10
maring-top=10
maring-right=10
maring-bottom=10
效果相同
4.3.4 padding(外边距)
这部分和style中的margin一样
4.3.5 start
place {
control="change_user_button"
align=left
height=24
}
place {
control="account_name_label"
start="change_user_button"
dir="right"
height=24
margin-left=-4
}
start用来给定一个参考，给出的参考是control不是region，start能和dir联合使用，指定dir为right或者down来让当前布局生成在参考控件的右边或者下面。
设备标识符
这个是用来做适配的，随便找一句
ClientTitle:FrameFocus [!$OSX] {
font-family=basefont
font-size=14
font-weight=400
textcolor="label"
bgcolor="none"
inset="12 6 0 0"
}
ClientTitle:FrameFocus [$OSX] {
font-family=basefont
font-size=15
font-weight=400
textcolor="texthover"
bgcolor="none"
inset="0 6 0 0"
}
第一个适用于非OSX，第二个适用于OSX，其他的基本看到都能明白
结语
祝，各位玩的愉快~
网友评论