首页是用户刚打开APP看到的第一个页面，一般界面比较丰富，会有好几块布局不同的内容，比如常见的是顶部是搜索框，中间是广告轮播图，下半部分则是一个新闻或者常用的功能操作菜单，这次我带大家看一下我是如何制作一个首页的：

1. 我们先来看我们的效果图

这个页面可以拆分为三个部分，上部分为绑定账号区，中间部分是数据区，下部分则是工具箱。

我们如何来实现呢？这个界面不建议用ListView去实现，要设计不常用的样式，并且视频数据和直播数据这一块要能切换，过于麻烦，相反，如果用ScrollBox+堆控件的方式，则会比较方便快捷。

1. 我们先确定要用哪些控件
   1. 底层是一个渐变背景图片，需要一个大的Image，
   2. 整体内容需要上下能滚动，所在要放一个ScrollBox，
   3. 顶部绑定账号这里，放个Align为Top的Panel，里面底部放黑色Panel，左边头像Image，中间是显示账号数量的Label，右边是绑定账号的按钮，

• 1. 中间一这块白色区域，先放一个大的Image，显示白色圆角带阴影的矩形，里面是一个PageControl，放两个TabSheet，一个是视频数据，一个是直播数据，在TabSheet中放一个ListView，用来显示功能菜单。

• 1. 最底下这块，和中间那块类似，只是不需要分页了，同样是放一个大的Image显示白色圆角带阴影的矩形，里面放一个Align为Top的Label，再放一个ListView显示功能菜单。

1. 准备条件
   1. 首先，准备好素材图片，都放在icons目录下面，图片需要1x,2x,3x三种分辨率的尺寸：

• 1. 在主窗体放一个SkinTheme组件，设置它的FilePictureSearchPaths,即控件搜索图片的路径，为C:\MyFiles\OrangeUIProduct\TikTok运营\Client\Icons\
  2. 再设置主题色（SkinTheme组件的SkinThemeColor）为#FF04D1B4

1. 新建一个Frame，取名为FrameHome
2. 要实现最底层的背景，放一个Image，取名为imgClient，背景色设置为浅灰色#FFF2F3F4，
   • 1. SelfOwnMaterial.IsTransparent设置为False
     2. SelfOwnMaterial.BackColor.Color设置为#FFF2F3F4
     3. SelfOwnMaterial.BackColor.IsFill设置为True
     4. 如下图所示:
     5. 
   1. 再设置背景图片
      1. imgClient.Properties.Picture.FileName为home_page_background.png，
      2. 图片要能设置拉伸且自适应宽度，按照下图设置：
      3. 
      4. 设置SelfOwnMaterial.DrawPictureParam.IsAutoFit设置为True
      5. SelfOwnMaterial.DrawPictureParam.IsStretch设置为True
   2. 在imgClient的顶部放一个Panel，取名为pnlToolbar，放在顶部，高度设置为0，当程序设置为没有任务栏区域的时候，它会自动填高为任务栏的高度，避免内容被任务栏盖住。
3. 在imgClient中放一个ScrollBox，取名为sbClient，Align设置为Client，再在sbClient里面放一个ScrollBoxContent，取名为sbcContent，用来放内容，Align也设置为Client。账号绑定区域、数据区域、工具箱区域的相关控件都要放在sbcContent里面。
4. 接下来实现上部分账号绑定，放一个Panel，取名为pnlTop，Align设置为Top，高度设置为64
5. 在pnlTop里面放一个Panel，取名为pnlTopBackground，用作圆角黑底的背景，边距Margins设置为Left20、Right20、Top15、Bottom15，Align设置为Client，再设置为None，以便设置如上边距。Anchors设置为[akLeft、akRight]。
   1. 再设置SelfOwnMaterial.BackColor.FillColor.Color设置为黑色Black，设置BackColor.FillColor.Alpha为100，约为40%的透明度，IsFill为True表示填充，IsRound为True，表示使用圆角背景，圆角半径RoundWidth&RoundHeight为-1，如下图所示：
   2. 
   3. 效果如下：
   4. 
6. 再在pnlTop中放一个Image，取名为imgAccountHead，用于显示所绑定账号的头像，设置它的Align为Left，左边距Margins.Left设置为20
   1. 设置它的图片，添加一个SkinImageList组件，取名为imglistDefaultAccount，双击SkinImageList组件弹出编辑器，点击添加空图，再给空图设置图片文件为default_user_head.png，再点击底下的保存按钮。
   2. 
   3. 设置它的Properties.Picture.SkinImageList为上面这个ImageList，设置ImageIndex为0，如下图所示：
   4. 
   5. 设置它的图片绘制参数，SelfOwnMaterial.DrawPictureParam.IsAutoFit为True，IsStretch为True，PictureHorzAlign为phaCenter，PictureVertAlign为pvaCenter，如下图所示：
   6. 
   7. 效果如下：
   8. 
7. 在pnlTop中放一个Label，取名为lblBindAccountCount，用于显示当前绑定了多少个账号了，Align设置为Left，再设置它的标题绘制参数，将SelfOwnMaterial.DrawCaptionParam.FontColor为White，字体垂直居中，即将DrawCaptionParam.FontVertAlign设置为fvaCenter，
   1. 
   2. 效果如下：
   3. 
8. 在pnlTopBackground中加入一个按钮，取名为btnBindAccount，将它的Align设置为Right，边距设置为Top5、Right5、Bottom5
   1. 先在单元中引用公共素材模块单元：EasyServiceCommonMaterialDataMoudle
   2. 这里我们直接使用引用素材，再在引用素材的基础上进行修改，
   3. 将btnBindAccount.RefMaterial设置为主题色按钮：dmEasyServiceCommonMaterial.btnSkinThemeColorMaterial，目前效果如下：
   4. 
   5. 主题色按钮素材主要用在大按钮上面，而且它是圆角矩形，而我们想要的按钮比较小，并且是圆形，所以要做点修改，但是我们不能直接修改这个公共素材，需要先将它复制给按钮自己的素材SelfOwnMaterial中。
   6. 右键按钮，在弹出的菜单中选择“复制RefMaterial给SelfOwnMaterial”即可，
   7. 
   8. 然后我们再修改SelfOwnMaterial，改为圆角背景，将SelfOwnMaterial.BackColor.RoundWidth和RoundHeight为-1，再将字体改小，即把SelfOwnMaterial.DrawCaptionParam.FontSize为12，效果如下：
   9. 
9. 接着我们来实现中间部分，先在sbcContent中放一个Image，取名为imgMiddle，用于显示白色圆角矩形带阴影的背景图片，将它的Align设置为Top，设置图片为white_shadow_more_dark.png，即Properties.Picture.FileName为white_shadow_more_dark.png，效果如下：
   1. 
   2. 因为这个白色背景图片的尺寸为640*667，所以imgMiddle要设置为拉伸，先设置SelfOwnMaterial.DrawPictureParam.IsStretch为True，StretchStyle设置为issSquarePro（九宫格增加拉伸模式），先设置源拉伸边距StretchMargins的Left、Top、Right、Bottom都设置为40，再设置目标填充边距DestDrawStretchMargins的Left、Top、Right、Bottom都设置为20
   3. 
   4. 效果如下：
   5. 
   6. 我们将imgMiddle复制一个出来，取名为imgBottom，用于放工具箱区域的内容
10. 在imgMiddle中放一个PageControl，pcData，Align设置为Client，新建两个分页TabSheet，视频数据页tsVideoData，直播数据页tsLiveStreamData，
    1. 设置pcData的引用素材为dmEasyServiceCommonMaterial.pcOrder_Material，
    2. 
    3. 但是pcOrder_Material这个公共素材会有灰色背景，所以要做些修改，先将引用素材复制给SelfOwnMaterial，将背景色设置为透明即可，并且当前页的标签按钮的底部色块宽度要变小，即SelfOwnMaterial.DrawTabBackColorParam.DrawRectSetting.SizeType为dpstPixel，Width设置为20，PositionHorzType为dpphtCenter，如下图：
    4. 
    5. 效果如下：
    6. 
11. 接下来做视频数据的功能菜单按钮了，用ListView来实现，放一个ListView在tsVideoData中，取名为lvVideoData，Align设置为Client，给它添加相应的Item，为每个Item设置好相应的图标和标题，
    1. 双击ListView，弹出项目编辑器，
    2. 
    3. 再设置列表项样式，将ListView.Properties.DefaultItemStyle为IconTopCenter_CaptionBottomCenterBlack，ListView.Properties.ItemHeight为80，并在单元中用ListItemStyleFrame_IconTopCenter_CaptionBottomCenterBlack单元。
    4. 
    5. 效果如下：
    6. 
    7. 因为这个ListView在ScrollBox中，不需要滑动，我们需要将它的Properties.VertScrollBarShowType设置为sbstNone，
    8. 视频数据和直播数据还需要调整一下，现在这两个分页的标签按钮是平分pcData的宽度的，但是设计图则不是占满的，左右空出一点的。
    9. 
    10. 我们需要设置pcData.Properties.TabSize为100，TabSizeCalcType为tsctFixed，IsTabHeaderCenter为True，
    11. 
12. 接下来做底部的工具箱了，先放一个Label，取名为lblToolbox，放在imgBottom中，Align设置为Top，标题设置为工具箱，字体为20号，字体居中。
13. 将lvVideoData复制一个出来，取名为lvToolbox，放在imgBottom中，给它设置好列表项，
14. 最终效果，设计时：
15. 
16. 运行时：
17. 
18. 就这样，首页就做好了，大家说，用OrangeUI是不是非常的快捷。