iOS之UI--微博个人详情页

简介:

前言:微博个人详情页,和我常用的的QQ空间的详情页是同样的。要求能够融会贯通,做这一类的界面能够快速上手实现。

动态图效果展示:

直接使用UINavigationBar->UITableViewController,也就是不用通过协议,然后设置数据源datasource = self,delegate = self等。

因为直接使用UITableViewController有一定的局限性,所以使用灵活的控件组合,在UIViewController中使用多个UIView,UIImageView以及UITableView,

它们直接的空间关系如下:

之后我自己从零开始通过UINavigationBar -> UIViewController来实现,然后先仅仅实现了表面上的框架,为什么说是表面的呢?因为下拉TableView的时候UIImageView还没有动态的效果:

接着,因为UITableView的父类是ScrollView,所以一定有父类的方法,通过重写父类的方法获取拖拽偏移量:

-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
 CGFloat h = -scrollView.contentOffset.y;
 
 self.bgHeight.constant = h;
 NSLog(@"%lf",h);
}

然后通过拖线,将storyboard上的背景控件UIImageView对象的高度约束拖拽到控制器代码中,获取其高度约束对象:

@property (weak, nonatomic) IBOutlet NSLayoutConstraint *bgHeight;

然后目前的效果图是:

将背景的填充模式改为:

然后效果是:

进一步设置了ClipsubView属性:

然后接着:

最后接着设置导航条文本内容:

最后的效果就是:

源代码百度云 链接: http://pan.baidu.com/s/1nucCajJ 密码: xyw2 源代码中当然有素材

微博个人详情页(导航控制器注意点)

UITablView的头部视图的宽度,位置都是系统来决定的, 只有高度是由我们自己来决定;
UIView *headerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 0, 200)];
headerView.backgroundColor = [UIColor redColor];

self.tableView.tableHeaderView = headerView;

iOS7之后,只要是导航控制器下的所有UIScrollView顶部都会添加额外的滚动区域.
设置当前控制器不要调整ScrollView的contentInsets
self.automaticallyAdjustsScrollViewInsets = NO;

设置导航条隐藏
但是我们这里导航条隐藏不是直接隐藏的,而是有一个透明度, 根据滚到的位置,设置透明度的.
self.navigationController.navigationBar.hidden = YES;


设置导航条透明度为0
设置导航条透明度为0,没有效果,还是原来的样子.
原因是因为导航条上面那一块并不直接是导航条,它是导航条里面的一个子控件.
所以在这里设置它没有效果,因为系统会生成一个半透明的图片.
self.navigationController.navigationBar.alpha = 0;
所以在这里我们可以考虑给它设置一个半透明的图片.
在这里,有一个模式,必须要传默认UIBarMetricsDefault模式.
在这里发现设为nil的时候,也没有效果,那是因为系统它做了一层判断,
它会判断如果传入的系统图片为空的话,它就会帮你生成一个半透明的图片,设置导航条的背景图片.
[self.navigationController.navigationBar setBackgroundImage:nil forBarMetrics:UIBarMetricsDefault];

那在这里传入一张空的图片,然后就有效果了.
[self.navigationController.navigationBar setBackgroundImage:[[UIImage alloc] init] forBarMetrics:UIBarMetricsDefault];
但是设置完后,发现有一根线,这根线其实是导航条的一个阴影.直接把它清空就行了.
[self.navigationController.navigationBar setShadowImage:[[UIImage alloc] init]];

===想法有些禁锢===

本篇"微博个人详情页"设置头像的View用的额外添加的UIImageView并设置布局约束,然后设置UITableView的内边距向下偏移头像的高度。

而我的想法却是下面截图示意,也就是直接在UITableView上动手了:

===使用UITableViewController关于Header和Footer的的两个细节:===

但是:

注释去掉就没事了。

相关文章
|
iOS开发
iOS开发UI之日期控件的使用(UIDatePicker)
iOS开发UI之日期控件的使用(UIDatePicker)
367 0
|
机器学习/深度学习 安全 测试技术
阿里云EMAS-专家测试服务iOS和Android上百种机型性能、兼容及UI等测试
阿里云EMAS测试专家有着集团内部多个日活过亿规模APP经验,提供EMAS专家测试,客户只需提交测试需求,从用例设计、脚本录制、海量机型测试、整理测试结果、48小时输出专家测试报告均由阿里云EMAS测试专家一站式服务完成。覆盖功能测试、深度兼容测试、性能测试、UI适配测试以及隐私合规检测等,帮助用户以更低成本获得高质量的全面测试能力,可用于APP正式发版前验收,规避手机APP上线前或发版过程中各类隐患。
404 0
阿里云EMAS-专家测试服务iOS和Android上百种机型性能、兼容及UI等测试
|
存储 jenkins 测试技术
iOS UI 自动化测试原理以及在 Trip.com 的应用实践
笔者入职 Trip.com 已满一年,回顾这一年的工作历程,约一半的时间都在做 UI 自动化测试相关内容。从而,笔者更深入地研究了 iOS 平台下的自动化测试技术,目前也在负责部门 App 自动化测试平台的搭建和维护。故想借这篇文章一并将所踩过的坑以及学习到的技术,系统且全面地整理出分享给大家。
330 0
|
iOS开发
iOS开发UI篇 - Quartz 2D简单使用
iOS开发UI篇 - Quartz 2D简单使用
iOS开发UI篇 - Quartz 2D简单使用
|
编解码 安全 Linux
flutter 在windows和linux上运行IOS UI模拟器
之前发视频总是有人留言,我用的什么模拟器,今天给大家说一下 我一般用的是device_preview这个插件,这个插件的闲置是只能做UI上的模拟,并没有真正的运行环境。 近似您的应用程序在另一台设备上的外观和性能。
343 0
|
Web App开发 iOS开发 Windows
在Windows电脑上调试安装在iOS设备上的SAP UI5应用
在Windows电脑上调试安装在iOS设备上的SAP UI5应用
104 0
在Windows电脑上调试安装在iOS设备上的SAP UI5应用
|
iOS开发 C++
iOS子线程更新UI的两种方法
iOS子线程更新UI的两种方法
474 0
|
缓存 运维 监控
如何优化iOS系统上的图文评论UI界面
在我们的社交 APP 上,⽤户的动态由精美的照⽚ 、视频和⽂字组成。对于每张照⽚和视频, 我 们都会展示出完整的标题和五个最新评论。由于⽤户喜欢使⽤标题来讲述照⽚背后的故事, 因此它们通常很⻓ 、很复杂, 并且可能包含超链 接和表情符号。渲染如此复杂的⽂本带来了⼀些问题, 它在滚动时造成性能下降。 即使在 iPhone 12 这样的新设备上, 复杂标题的初始⽂本绘制需要⻓达 50 毫秒, ⽽⽂本展示 需要⻓达 30 毫秒, 渲染速度很慢。⽂本问题还是简单问题, 有时我们需要加载更加复杂的图⽚甚⾄视频。所有这些步骤都发⽣在 UI 线程上, 导致app在⽤户滚动时丢帧。
如何优化iOS系统上的图文评论UI界面
|
存储 数据库 开发者
iOS9系列专题五——全新的联系人与联系人UI框架(二)
iOS9系列专题五——全新的联系人与联系人UI框架
319 0
iOS9系列专题五——全新的联系人与联系人UI框架(二)
|
API iOS开发 开发者
iOS9系列专题五——全新的联系人与联系人UI框架(一)
iOS9系列专题五——全新的联系人与联系人UI框架
182 0