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

很多新手朋友遇到过这个情况,自己开发的APP在Windows上运行的好好的,接口能正常调用,图片能正常下载,用WebBrowser网页也能正常访问,怎么到了Android手机下面,突然接口不能访问了,图片也下载不了,网页也打不开了,比如:

Screenshot_2022-05-03-06-42-06-948_com.embarcader Screenshot_2022-05-03-06-10-46-018_com.embarcader

是不是Delphi开发的APP不行?

这你就错怪Delphi了,这全都是因为Android系统默认禁止了不安全的HTTP访问,如上面网页无法打开那张截图,提示说是因为:net::ERR_CLEARTEXT_NOT_PERMITTED,那我们用谷歌摆渡一下:

我们点击第一个发布在stackoverflow上的帖子,看看有没有解决方案

第一个回复说是在Android 9的设备上,明文传输默认被禁止(HTTP就是明文传输),如果需要允许,则需要在AndroidManifest.xml中的application节点上加入android:usesCleartextTraffic这个属性,值为”true”。

在Delphi中如何配置呢?我们打开工程根目录下面的AndroidManifest.template.xml文件,找到application节点,加入android:usesCleartextTraffic=”true”即可。

你再运行试试,是不是解决了。