【初级教程-界面】--简单分栏用户界面(CUI配置)的制作--
foobar2000吧
全部回复
仅看楼主
level 11
伏天 楼主

写在前面:那我就硬着头皮上了...
这儿就不介绍什么是分栏界面,现在主流的配置基本都是分栏界面,其自定义性比默认界面高很多,学习它不一定要自己去搞界面,毕竟大部分吧友和我一样都是小白,没什么计算机语言基础及其他相关能力。不过对它有基本的了解的话,就有利于自己更娴熟地使用大神们的配置,必要时稍微DIY下,换换插件,换换面板什么的。
这里我分享下简易分栏用户界面的制作,鉴于能力有限,所以会讲得很粗浅。
●简易分栏界面从外观上来讲,初看和默认界面很相似,是因为简易的分栏界面不涉及自定义功能按钮,华丽的自定义外观,复杂的面板布局等因素。
●概括地说就是默认界面制作是以面板的交接替换为主,而简易分栏界面是以分栏模式来构建界面外观的。
●分栏界面所用到的主要插件是foo_ui_columns.dll(分栏用户界面)、foo_uie_panel_splitter.dll(面板栈分离器)
下面我就以一个简单的、基础的简易分栏界面来演示下是怎么制作的。相关制作所需材料也会在下面分享。
只看楼主→→
掌握本教程后,将如下图的在我心目中no.1 的配置Mnlt修改或者重置成自己个性的样子将很容易。
---唯一的Mnlt
然后可以将其重制或者大修成如下,连爹妈都不认识...
---------以上是后话,我们先从基本的面板布局开始,转2L
2013年01月10日 09点01分 1
level 11
伏天 楼主

素材下载---包含必要插件的懒人包:[有效] http://pan.baidu.com/share/link?shareid=173289&uk=1376055942
所要做的界面的大概布局,当然实际现场发挥也不错,主要还是一个逻辑顺序的问题,处理好各个分栏的布局。
●下面以下图的简易分栏界面为例,分析下简单的分栏布局。
示例图:图片点击放大
这儿我们以右侧界面来讲解,这两界面布局是差不多的。

2013年01月10日 10点01分 2
这懒人包怎么用?
2013年06月28日 18点06分
回复 Elia_of_war :PSS啊 常用的模版啊
2013年11月08日 13点11分
回复 Elia_of_war :还是感觉pss好用 稳定快速
2013年11月08日 14点11分
回复 Elia_of_war :[汗] 最近我电脑也开始卡了 玩游戏崩溃
2013年11月08日 15点11分
level 11
伏天 楼主

●观察上图界面,其布局主要是左上侧的播放列表标签栏,左中侧的NG歌曲列表,右上侧的各功能标签栏,以及右中侧的功能界面区,还有最下面声道频谱面板。
●打开素材懒人包:文件-参数选项-显示-分栏用户界面-布局,开始布局规划。
●上面样品界面的布局图如下,这儿不细讲了,一是简单,二是自己动手理解比较好。
简单分析下:
● 第一个垂直分离器下有两个次级板块,即水平分离器和底下的声道频谱面板;水平分离器下也有两个次级板块:又一个垂直分离器和标签栈道(这两个是水平布局的,因为是在水平分离器的次目录下),垂直分离器下垂直排布这播放列表标签和NG播放列表(这两个是垂直布局的,因为在垂直分离器的次目录下);同理标签栈下的4个功能面板也是1个标签1个小界面,具体大家自己体会。
● 上面布局先插入垂直分离器是为了让水平分离器下的两个左右布局和底下的声道频谱成上下主布局,然后下层次的水平分离器是为了构造出左右两个功能界面,左边那个界面依靠又一个垂直界面将播放列表标签栏和NG播放列表上下垂直分布,右边那个标签栈则实现了4个功能面板的切换式布局,当然标签里放什么随你自己,上图是放了常用的那4个功能面板。面板排布遵循严格的顺序,通过右键--上下移动--来调整相对位置或者删除、复制面板。
● 然后说下面板的插入:右键即可,如下图。
●偷懒的吧友建议先照着上面布局建一个,建好之后注意点掉个面板右侧项目详细资料里的“显示标题”,如下图。
●差不多要完成基本布局了,自己动手做一遍就能熟练了,接下来是左侧的那个示例界面。
右侧界面完成后,左侧界面在其基础上10秒钟就能完成了:
●左侧界面制作:将水平分离器更改为垂直分离器,然后鼠标拉一下边框,调整下大小就行了
效果如下:

2013年01月10日 10点01分 3
我的显示里为毛没有分栏用户界面啊。。
2013年02月13日 06点02分
回复 So__Big :没有分栏插件[瞌睡]
2013年02月13日 06点02分
有没有这个的打包,我喜欢这个,太赞 了!
2013年04月03日 11点04分
水平分离器,是指说 把面板横着分割吗? 那几个分离器 是什么意思,弄了好久,没弄懂,大神指点一下。
2013年05月29日 09点05分
level 11
伏天 楼主
●供参考之用放出界面懒人包
左侧界面(垂直分布):[有效] http://pan.baidu.com/share/link?shareid=115245&uk=1376055942
右侧界面(水平分布):[有效] http://pan.baidu.com/share/link?shareid=115246&uk=1376055942
以下是补充,
下楼我们开始讲
面板栈分离器
● 然后,如果各位不喜欢NG播放列表上的封面,可右键上面一栏,点掉封面;如果不喜欢NG播放列表上按专辑分组的话,右键那边-参数选项-按下图点掉那个分组就行了
去分组:
●在最后如果想让NG播放列表上歌曲按数字序号来排布的话,如下图
代码:
$num($add(%list_index%,0),2)
效果:也就是无分组模式,序号就是顺序号
初级布局试练完毕,下楼开始重点了。
2013年01月10日 10点01分 4
为什么我没有成功
2013年08月23日 14点08分
回复 siumianga :多试试
2013年08月23日 14点08分
回复 伏天 :和上面说的一样,我用了吧里的zetro,不知道有没有影响
2013年08月23日 14点08分
回复 siumianga :你做了什么改动?
2013年08月23日 15点08分
level 11
伏天 楼主

【面板栈分离器】---本教程核心--掌握基础布局代码
-----本楼是试练-----
面板栈分离器才是CUI配置的主要分栏模式呢- -,面板栈分离器可以更加灵活地对其下的各个面板进行布局划分。这儿我也粗略讲下,还是在上面那界面上操作。
由于上面那界面功能按钮、进度条、音量是置于上方的,鼠标点有点远,所以将其移到中间,便于点击。
这儿采用的方法:在垂直分离器和标签栈之间插入一个面板栈分离器 ,面板栈分离器下插入 按钮、定位条、音量。
效果图及面板布局图:注意是在垂直布局界面上做的,水平那个不适合,因为不好看。
本教程只是举例浅显地举例讲方法,不考虑审美^
^
● 面板插入完成后,点击配置,先放上设置预览图
● 按钮:强制布局,填充,宽度为175,因为左边按钮宽度是175左右的。右侧填充栏里默认是四个5,不取消也行。四个5是上下左右各留出5个单位,现成边缘分隔区或者防止碰壁,这儿设为0吧,紧凑点好。175是宽度,因为是左起第一个,所以左可不设,默认为0.
● 定位条:采用填充模式,因为是第二个了,所以左起178,避开按钮的区域并稍微留点空隙,宽度:
$sub(%_width%,238) 意思是整个宽度减去238个单位,238是因为左边有178,最右侧有音量条的60,这样中间剩下的就全给进度条(定位条)了,这样播放器最大化后也能处于合理的位置。那个2是稍微将进度条下移2个单位(距离上端2个单位),没多大意思,残念而已。
● 音量:依旧采用填充模式,左:$sub(%_width%,60) 意思是离最右侧60处起开始,就是整个宽度差60处。,然后宽度设为60,这样音量条就完全填充在这左起差60到最右侧的60个单位里了。
PS:采用“使用百分比”也能实现,不过效果不好,百分比里,数字就表示百分比了,点掉填充。如:左30,宽度40,就表示,左起总宽度的30%到左起70%的距离为总距离40%的区域。
还有大神们的配置里用到的代码和排版模式要复杂得多,当然还有其他简单的,如:
$add(%_width%,xx) 但应该不常用,不过在某个方面很好用。
----------------代码解释-------------:必看
● 对应的高度不用说就是 $sub(%_height%,xx), $sub(%_width%,xx) 语句 在“左“以及$sub (%_height%,xx) 语句在 “上”里分别表示从面板最右边开始多少单位开始布局和从距离面板最下面多少开始,所谓的最哪边是指该分离器的边缘。
● $sub(%_width%,xx) 语句 在“宽度“以及$sub (%_height%,xx) 语句在 “高度”里分别表示宽度和高度分别为总宽度/高度减去那个XX值,总宽度/高度是指该分离器面板的总值,不是整个播放器。
● 当宽度和高度需要用全部,即全值时,可用 %_width%和 %_height%,或者点上”百分比“,打上100,此时数字都按百分比取值了,”左“和”上“里的数字就不是具体单位数字了,要注意。
● 右侧填充里只能用数字,不可以是负数,不过负数在左侧那边是可以用。上下左右就是4个边缘留多少空隙了 。
● 其他还有更复杂的布局代码,但上面的sub代码一般够用了,add代码类似,如:
$add(%_width%,xx) ,一个减($sub),这个是加,在整体布局时不适用。
----------------------------------------------------
插入面板栈分离器后,全屏下的排版,按钮、进度条、音量也能准确排布了。

-----试练完毕----楼下
讲面板栈分离器整体布局
2013年01月10日 10点01分 5
补一个,目前2.0版本没有宽度设置的功能了,换成了拖动大小+组件/面板lock功能,遇到放大缩小的时候,如果lock不对会出现无法变化的情况,所以设置面板的时候需要提前考虑好放大缩小的时候那些区域是需要灵活变化的。
2023年06月24日 14点06分
level 11
伏天 楼主

随意补充下小东西,本帖永远不会结贴

熟悉布局操作后,前面讲过,全部用用面板栈分离器代替那些垂直、水平分离器。
还有可以尝试下“Elplaylist播放列表”、各种杂七杂八的可视化效果,按钮也可以自定义DIY下各种,面板栈分离器,那些WSH面板倒是很有难度,无力...
自定义菜单按钮
自定义背景色很有用哦,仿透明也是,大家自己试验下。
------补充完毕-----
2013年01月10日 10点01分 7
自定义背景在哪啊,我下的是懒人包垂直分布的那个
2013年01月16日 02点01分
回复 动感一夏 :那个没有,要用面板栈分离器才行,效果也很差。你可以去下那种可以真正自定义的背景的配置
2013年01月16日 07点01分
回复 伏天 :到哪下呢? 求指教
2013年03月01日 12点03分
回复 sunhao320825 :foobar2k吧 精品帖那个 xch4nge mod
2013年03月01日 12点03分
level 1
支持教程 楼主辛苦
2013年01月10日 11点01分 8
level 14
顶上去[顶]
2013年01月10日 13点01分 9
level 12
这个必须顶其啊 正愁没法设置呢 楼主就送来了两个关键的插件 万分感谢
2013年01月14日 15点01分 10
level 7
好贴怎能不顶[顶]
2013年01月14日 16点01分 11
level 2
LZ,求这个的全部F2K文件打包,感激不尽= =
2013年01月15日 15点01分 12
2013年01月15日 15点01分
回复 优君 :早没了,我自己改的配置一般第二天不到就删了...因为自己不会常用。对配置不感冒了...
2013年01月17日 04点01分
还没玩过foobar2000 我也喜欢这个界面
2013年01月17日 12点01分
回复 伏天 :求这个配置
2013年02月06日 08点02分
level 1
先顶,回头再详看。
2013年01月18日 03点01分 13
level 1
马克,
2013年01月27日 13点01分 14
level 11
伏天 楼主
@ls445423536 求精 吧主实习快满月了 做点什么吧
2013年01月27日 16点01分 15
[88]最近好忙啊
2013年01月28日 11点01分
回复 ls445423536 :年终是会忙点,关键是过年还更忙.
2013年01月28日 11点01分
level 7
顶啊,不过自由度不高怎么解决
2013年01月28日 11点01分 18
自由度就是 想换什么就重新布局一个...
2013年01月28日 13点01分
level 5
顶楼主 小白路过 ···
2013年01月28日 12点01分 19
level 1
mark
2013年01月30日 14点01分 20
level 13
学习了,谢谢指导
2013年01月30日 15点01分 21
1 2 3 4 5 尾页