Smobiler 仿得到APP个人主页

2024-05-14 21:43:20

原型如下：

完整代码参考

https://github.com/comsmobiler/BlogsCode/blob/master/Source/BlogsCode_SmobilerForm/MyForm/dedao.cs

思路

可以将原型按照上图分成2个部分，部分A可以使用label、image、button、imagebutton、fontIcon控件来实现；部分B可以使用Label,Image,Panel,Gridview(或者Listview)实现。

实现

首先添加SmobilerFrom，类名为dedao，将窗体的Layout属性设置Relative，依次拖入两个Panel，panel1用来放置部分A的控件，panel2用来放置部分B的控件。

实现部分A

Panel1.BackColor设置为White,Size设置（0，210）；

在Panel1中拖入Image控件，Name设置backImg，设置Dock为Top，SizeMode设置为Stretch，Size设置（300,86）；

在image1的左上放置一个ImageButton，Name设置returnBtn，ForeColor和IconColor都设置White，ImageDirection设置Left，ImageType设置FontIcon,ResourceID设置“angle-left”，Text设置“返回”；

在image1的右上放置一个ImageButton，Name设置moreBtn，ForeColor和IconColor都设置White，ImageType设置FontIcon,ResourceID设置“ellipsis-h”；

再在panel1中拖入一个Image，Name设置avatarImg，Size设置（50,50）,ResourceID设置“6.png”，BorderRadius设置50，将vatarImg的上半部分和backImg重叠，如图

在拖入Label，Name设置nameLab，Bold设置True，FontSize设置20，Text设置“杜牧”，Size设置（100，20）；

在nameLab下方再放置一个Name为IDLab的Label控件，Text设置“学号：123123123123”；

在IDLab下放置一个FontIcon，Name设置fontIcon1,Size设置（5，5），ResourceID设置“life-ring”，ForeColor设置“OrangeRed”；

在fontIcon1后并排放置一个Label，Name设置“subLab”,Size设置（140，15），FontSize设置10，Text设置“朝代：唐代职业：诗人”

在subLabel下放置一个Panel，Name设置panel4，Layout设置Relative，Direction设置Row，Size设置（290，23）；

在panel4中拖入6个label，Name分别设置为“noteNumLab”、“noteLab”，“idolNumlab”、“idolLab”，“followNumLab”，“followLab”，这六个label的Size都设置（0，0）；noteNumLab、idolNumLab和followNumLab的ForeColor设置“OrangeRed”，剩下三个label的ForeColor设置“DarkGrey”。noteNumLab.Text设置“3”，noteNum.Text设置“笔记”，idolNumLab.Text设置“3342”，idolLabel.Text设置“关注TA的人”，followNumLab.Text设置“3”，followLab.Text设置“TA关注的人”。

实现部分B

panel2.Layout设置Relative，Size设置（0，100），Scrollable设置true

在panel2中拖入Panel，

实现效果图

Smobiler 仿得到APP个人主页相关推荐

Smobiler 仿美柚APP个人主页
原型如下: 完整代码参考 https://github.com/comsmobiler/BlogsCode/blob/master/Source/BlogsCode_SmobilerForm/MyFo ...
Smobiler 仿脉脉APP个人主页
原型如下: 完整代码参考 https://github.com/comsmobiler/BlogsCode/blob/master/Source/BlogsCode_SmobilerForm/MyFo ...
smobiler仿京东app搜索页面
京东app搜索界面如下图所示: 完整代码见git :https://github.com/comsmobiler/BlogsCode/blob/master/Source/BlogsCode_Smob ...
smobiler仿自如app筛选页面
原型图: 完整代码见git : https://github.com/comsmobiler/BlogsCode/blob/master/Source/BlogsCode_SmobilerForm/S ...
前端性能优化实践 | 百度APP个人主页优化
性能是每个前端工程师都应该关注的话题,通用的优化手段已有许多文章和实践,就不再赘述,本篇以百度 App 个人主页为例,聊聊针对业务特点进行的一些性能优化实践.适用于:传统意义的优化手段能用的都用了:打 ...
《iVX 高仿美团APP制作移动端完整项目》03 推介信息及推荐商家分析及制作
点击整个专栏查看其它系列文章 (系列文章更新中-):<iVX 高仿美团APP制作移动端完整项目> 项目界面预览: 一.推荐信息制作推荐信息与之前的标题下推荐信息制作类似: 此时依旧创建一 ...
《iVX 高仿美团APP制作移动端完整项目》02 搜索、搜索提示及类别需求分析思路及制作流程
点击整个专栏查看其它系列文章 (系列文章更新中-):<iVX 高仿美团APP制作移动端完整项目> 项目界面预览: 一.搜索制作在上一节中我们完成了标题头的制作,接下来我们查看如何制作搜索 ...
《iVX 高仿美团APP制作移动端完整项目》01 标题需求分析思路及制作流程
点击整个专栏查看其它系列文章 (系列文章更新中-):<iVX 高仿美团APP制作移动端完整项目> 项目界面预览: 一.创建项目首先打开在线编辑器地址:https://editor.ivx ...
html个人主页_前端性能优化实践之百度App个人主页优化
作者:潘铭 @祝余前言性能是每个前端工程师都应该关注的话题,通用的优化手段已有许多文章和实践,就不再赘述,本篇以百度App个人主页为例,聊聊针对业务特点进行的一些性能优化实践. 适用于:传统意义的 ...
仿Drinkspiration App的menu
做了一個仿Drinkspiration App的menu 不知道Drinkspiration的人可以看這個視頻使用方法請參考demo code裡的readme CurveDemo.zip 转载于: ...

最新文章

热门文章