duilib仿百度网盘界面

最新推荐文章于 2024-08-08 07:37:45 发布

mmcanyu

最新推荐文章于 2024-08-08 07:37:45 发布

阅读量2.1k

点赞数 3

分类专栏： duilib

本文链接：https://blog.csdn.net/mmcanyu/article/details/108905986

版权

duilib 专栏收录该内容

13 篇文章 20 订阅

订阅专栏

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。