delphi论坛（delphi 最新版）

今天讲Delphi跨平台开发–入门篇（五），这一篇是整个入门篇的最后一篇，前面四篇介绍了一些程序界面布局的内容，说实话，内容比较简单，其实，有很多编程爱好者在编程时多数情况下是只注重功能实现，而忽视了界面布局。

然而实际情况却是，在大多数有一定规模的软件开发公司内，一般都会有若干名专职的美工人员，尤其是基于移动端的APP开发，专业、美观的程序界面是必不可少的，这也是一个开发团队专业能力的体现。

没有美工是不是就一定无法实现美观的界面？对于Delphi来说，答案显然是否定的。或许没有美工，我们搞不出酷炫的界面，但如果有一个可以参考的APP界面，我们可以很轻松地复刻出一个相似的界面，或许达不到靓丽、酷炫的效果，但达到相对大方、美观、专业还是有希望的（记住最终能做成什么样子还是和个人审美、工作态度有重大关联）。下面，不多啰嗦，开始今天的教程，内容就是：一个人复刻“今日头条”首页程序界面。

“今日头条”的首页我就不截图了，大家在手机上打开“今日头条”APP就能看到，下面是具体步骤：

1、新建一个Multi-Device Application项目，窗体form1上放一个layout1，Align设为Client；form1的Fill–color设为white；Fill–Kind设为Solid；让窗体form1显示白色背景色；

2、在layout1上放置一个layout2，Align设为MostTop，Heightw为50；在layout2上放置Rectangle1，Align先设为client，后设为None；Anchors属性下的4个子属性全部打钩。Fill–Color设为Crimson，Fill–Kind设为Solid；

3、在layout2上放三个Layout组件，layout3的align设为left，height为50；layout4的align设为Client，layout5的align设为right，height为50；

4、在Layout3上放一个Circle1组件，Align为Center，height和width均为48；Fill–Bitmap随意添加一个头像图标（用来替代今日头条左上角的金币图标），Fill–Bitmap–Wrapmode设为TileStretch，Fill–Kind为Bitmap；

添加图标

5、在Layout4上放一个RoundRect1组件，Align为None，Anchors属性下的4个子属性全部打钩选中，用鼠标调整RoundRect1的长度、宽度及位置，只要个人满意就行。设置Fill–Color为white，Fill–Kind为Solid；在RoundRect1上放置一个edit1组件，其Align和Anchors属性与RoundRect1的一样；StyleLookup为transparentedit；调整edit1的长宽和位置，个人满意即可。

6、在Layout5上放一个SpeedButton1组件，Align设为Client，Text设为浏览，替代头条的右上角的发布按键。看一下效果：

设计时的顶端工具蓝

7、接下来做左右滑动的按键区域，具体的可以参考入门篇（四），我这里不做详细说明了，我是用了ScrollBox1，Align为top，在ScrollBox1上放Gridlayou1，在GridLayout1上放8个Speedbutton，ScrollBox1的height为44；GridLayout1的Itemheight为40，Itemwidth为75；具体数值可以根据自己实际情况修改；

可左右滑动按键区域用的的组件

8、接下来放一个GridLayout2组件，Align设为MostBottom，在其上面放5个Button，5个Button的Text属性方别设为：后退、首页、图片、说明、前进，模拟今日头条的底部按键区域；

9、layout1的空白区域，放一个TabControl1组件，Align设为Client；TabPosition设为None。选中TabControl1组件情况下，按鼠标右键在右键菜单点击'Add TTabItem'选项，总共添加三个TabItem页；在TabItem1上添加WebBrowser1，WebBrowser1的Align设为Client；TabItem2上放一个Timage组件，顺手放一张图片（入门篇（一）讲过），TabItem3上随便放些可视化组件，我放了个Tmemo组件，顺手写了几个字（哈哈哈，没难度，不具体介绍了），看一下设计时的Form窗体效果。

显示TabItem2时的窗体效果

为了使我们的APP看起来像个真正的App，这一篇需要写几行代码，具体代码粘贴如下：

procedure TForm1.Button1Click(Sender: TObject); //后退按键的Click事件

begin

webbrowser1.GoBack;

end;

procedure TForm1.Button2Click(Sender: TObject); //首页按键的Click事件

begin

TabControl1.TabIndex:=0;

end;

procedure TForm1.Button3Click(Sender: TObject); //图片按键的Click事件

begin

TabControl1.TabIndex:=1;

end;

procedure TForm1.Button4Click(Sender: TObject); //说明按键的Click事件

begin

TabControl1.TabIndex:=2;

end;

procedure TForm1.Button5Click(Sender: TObject); //前进按键的Click事件

begin

webbrowser1.GoForward;

end;

procedure TForm1.FormResize(Sender: TObject); //主窗体Form1的Resize事件

begin

//用了调整顶部工具栏和底部按键区域的显示

layout5.Width:=form1.Width-layout4.Width-layout3.Width;

GridLayout2.ItemWidth:=trunc(GridLayout2.Width /5);

end;

procedure TForm1.FormShow(Sender: TObject); //主窗体Form1的OnShow事件

begin

SpeedButton2Click(sender);

SpeedButton2.SetFocus;

end;

procedure TForm1.SpeedButton1Click(Sender: TObject); //右上角浏览按键的Click事件

begin

webbrowser1.Navigate(edit1.text);

end;

procedure TForm1.SpeedButton2Click(Sender: TObject); //新闻按键的Click事件

begin

webbrowser1.Navigate('https://news.163.com/');

end;

procedure TForm1.SpeedButton3Click(Sender: TObject); //体育按键的Click事件

begin

webbrowser1.Navigate('https://sports.163.com/');

end;

procedure TForm1.SpeedButton4Click(Sender: TObject); //娱乐按键的Click事件

begin

webbrowser1.Navigate('https://ent.163.com/');

end;

procedure TForm1.SpeedButton5Click(Sender: TObject); //财经按键的Click事件

begin

webbrowser1.Navigate('https://money.163.com/');

end;

procedure TForm1.SpeedButton6Click(Sender: TObject); //股票按键的Click事件

begin

webbrowser1.Navigate('https://money.163.com/stock/');

end;

procedure TForm1.SpeedButton7Click(Sender: TObject); //科技按键的Click事件

begin

webbrowser1.Navigate('https://tech.163.com/');

end;

procedure TForm1.SpeedButton8Click(Sender: TObject); //时尚按键的Click事件

begin

webbrowser1.Navigate('https://fashion.163.com/');

end;

procedure TForm1.SpeedButton9Click(Sender: TObject); //直播按键的Click事件

begin

webbrowser1.Navigate('https://v.163.com/');

end;

好了，可以运行一下看看效果了，我们直接在Android平台上运行：

运行效果图一

直播功能运行效果图

说明页面运行效果

大家看一下，是不是和今日头条的首页有几分相似，当然了，还有很大的提升空间，但那就是每个Delphi开发人员自己想把事情做到多少分的问题了，是追求尽善尽美还是得过且过…

入门篇到此就算是画上句号了，后面将继续推出基础篇，基础篇比入门篇稍难一些，力争每一篇讨论一个技术问题，敬请各位朋友期待。最后，还是希望支持我的朋友们多加关注，转发时请注明出处，本人将十分欣慰！有需要源代码的可以给我留言，谢谢大家！