浅谈iOS社交类个人主页界面的布局解析

时间:2024-04-05 13:15:29

最近在做一款社交类的应用app“金脉+”(欢迎诸位下载使用,点评),社交类的应用难免都会有个人主页的介绍展示界面,本应用经过产品部和设计部的最终确定如下界面:

浅谈iOS社交类个人主页界面的布局解析

浅谈iOS社交类个人主页界面的布局解析

浅谈iOS社交类个人主页界面的布局解析


实现功能及效果:导航栏根据滚动显示背景色,概览动态人脉菜单栏滑动到顶部保持不变,概览分支总体包含模块:供需、工作经历、个人介绍、个人荣誉、标签、个人相册、好友评价等,动态分支只有动态模块,人脉分支又包含:人脉咖啡、ta的人脉、拜访记录,点击菜单栏切换不同的分支,要有加载请求数据过程,上拉加载,下拉刷新等功能。



首先个人主页总体框架使用的是UITableView,在数据处理上创建一个UserModel来接收用户的基本信息,再创建3个array分别接收好友评价、动态、拜访记录数据。


布局开始:

1.导航栏需要自定义一个view,在scrollview的Delegate回调方法中,控制背景颜色和按钮的替换方法,以及个人资料背景图片的缩放;

2.然后是个人资料部分,当切换不同分支的时候,个人信息部分保持不变,这部分view布局放在tableHeaderView中,可以使用代码布局,也可以在nib中布局添加约束,我这里把概览动态人脉菜单栏也放在headerview中。

3.概览分支包含不同的模块,每个模块又可能含有多个数据,这就需要创建多个section,每个section可有可无sectionheaderview,而且sectionheaderview随着列表一起滑动,所以tableview的类型type是group,但是菜单栏滑动到顶部的时候需要定住不动,所以我这里又在self.view中添加了一个菜单view,当列表滑到顶部的时候,控制显示这个菜单view。

4.接下来是对每个section进行布局,不仅需要headerview,还需要footerview和cell的创建,根据模块不同可以来展示。

5.动态和人脉分支类似概览模块。