欢迎大家来到IT世界,在知识的湖畔探索吧!
今天讲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开发人员自己想把事情做到多少分的问题了，是追求尽善尽美还是得过且过…
入门篇到此就算是画上句号了，后面将继续推出基础篇，基础篇比入门篇稍难一些，力争每一篇讨论一个技术问题，敬请各位朋友期待。最后，还是希望支持我的朋友们多加关注，转发时请注明出处，本人将十分欣慰！有需要源代码的可以给我留言，谢谢大家！
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://itzsg.com/40266.html
