duilib仿百度网盘界面

                                  duilib仿百度网盘界面

这一篇我们介绍使用DuiEditor做一个百度网盘的demo界面。

这一个版本中做了重大更新，设计界面使用了窗口分割，分别为设计、代码、上下分割、左右分割。并且设计和代码实现了实时增量更新，以前的版本总是reload、rebuild。喜欢手写的同学有福了。下面的操作，直接输入xml也是一样的。

首先简单分析一下这个界面，这是一个上下布局结构，第一层包括了标题拦、工具栏，第二层为客户区。

1，新建文件，保存为MainFrame.xml，并设置Window大小为1000,700。设置VerticalLayout背景色为白色。

2，选中左边控件树VerticalLayout，依次插入一个HorizontalLayout和TabLayout。顺手给它们取个名字，这只是为了方便我描述，实际应用中根据具体需求决定是否取名。颜色部分，我是开着百度网盘，对照着用拾色器选取的。

3，选中hori_1，插入HorizontalLayout，取名hori_2。 在hori_2中放一个Control，一个Label。Control做图标用，
Label显示百度网盘4个字。增加一个字体，黑体，字体size=20，看起来是比较合适的。

4，选中hori_1，插入HorizontalLayout，取名hori_3。这里要放几个Option切换TabLayout用的。

5，这几个Option可以用Style定义属性。首先菜单编辑 -> Insert Style Node，在属性窗口中设置name=style_option_header，class=Option，点击value右边的小按钮，设置Style属性：width="60" selectedtextcolor="0xFF06A8FF" selectedbordercolor="0xFF06A8FF" group="group_option_header" textcolor="0xFF2D2D2D" bottombordersize="2"。 接着，给刚才添加的5个Option设置style="style_option_header"。通过对比百度网盘界面，选中hori_3，设置属性：inset="0,10,0,10" childpadding="35"。

6，继续往右边走，开始做用户信息部分。选中hori_1，再给它添加一个子控件HorizontalLayout，取名hori_4。看到把左边的Option遮掉了一部分，不用管它，因为等会hori_4需要设置固定宽度。

7，看起来右边剩下这么多控件，只要在hori_4顺势排列过去就行了。中间空格大的地方，用Control占位就行。首先给hori_4设置垂直居中。接着在hori_4中插入一个Control，这个是用户图标，前景图片head_frame.png是一个遮罩层。

8，用户名使用Label，并且设置为自动调整宽度。

9，插入Option做VP钻石图标。

10，插入Control，宽度10。插入Button，这是会员中心按钮。

10，继续插入Control，宽度10。插入2个Button。

12，插入Control做分割符号，然后插入4个按钮，分别为最小化，最大化，恢复大小，关闭。

13，调整hori_4，宽度：width="354" 子控件间距：childpadding="7"。预览效果如下。

14，接下来我们用ChildLayout做页面容器，这个类似于Include。在设计器中ChildLayout使用会更方便一点。新建5个文件，分别为ch_1.xml、ch_2.xml、ch_3.xml、ch_4.xml、ch_5.xml。选中tab_1，插入5个ChildLayout。我的网盘、传输列表、好友分享、功能宝箱、今日热榜，这5个Option设置属性：bindtablayoutname="tab_1"，bindtabindex="x"。x分别为0,1,2,3,4,5。

15，接下来开始编辑ch_1.xml。首先把设计器自动创建的VerticalLayout，在代码编辑中改成HorizontalLayout，取名为h_1，不可与MainFrame.xml中的控件重名，不同文件重名设计器无法提示错误。背景色为白色，适当调整Window的size。

16，h_1中放入两个VerticalLayout。

17，左边的pane按钮全部用Option。先插入第一个Option，最近使用。

18，依次放入其他Option。这几个Option风格一致，可以把几个公用的属性抽出来，定义成Style。

19，下面是广告图片和进度条。先放入一个Control占位。接着插入VerticalLayout作为广告图片的区域，里面再放入一个float属性的Button。

20，左下角的网盘容量部分。

21，现在看起来是有点丑的，想办法调整一下，也就是设置边距。设置v_1的inset="0,0,1,10"，广告图片再嵌套一个VerticalLayout，外层的inset="5,0,5,0"。网盘容量的VerticalLayout也要设置左右边距。

22，左边拦最终效果。

23，未完待续。