行情列表重构 TabBar&NavBar&tableView

一:上海黄金交易所的行情列表处理,由于ios7开始使用半透明以及全屏的效果,导致出了很多bug,对于行情列表的处理,之前是使用的不透明的效果,直接设置 self . edgesForExtendedLayout = UIRectEdgeNone ;但是这样已近跟不上潮流了,所以重写行情列表。
主要参考的app:腾讯的自选股,百度股市通,雪球,这都是比较主流的,大智慧这种UI就做得太渣了。
遇到的问题:
1,下拉刷新(sv)有点小抖动的问题?
解决方法:
停止动画调用在reloadTableView之前。

2,tableView不能全屏扩展的问题?
解决方法:
baseMarketVC 把liteMarketVC加为子vc(使用addChildViewController)。
liteMarketVC把tableView作为第一个view,并且高度一样,这样默认就是全屏扩展了。
这样做对于市场索引表的处理,就必须使用contentInset。
这样处理之后,tableView就全屏扩展了,tabBar的部分也能看到模糊的行情。
但是这样处理有一个缺点:
点击cell进去详情的时候(push),tableView的内容会向下移动49点(tabBar的高度),也就是contentOffset减小了tabBar的高度。
我猜想这是因为push之后,默认的是全屏,所以当前vc调整了tableView的contentOffset(也就是让tableView全屏了)。
注意:发生这种情况的是因为NavBar是不透明的,而TabBar是半透明,如果NavBar也是半透明,不会出现内容下移的问题。
或者NavBar与TabBar都不透明。
打开雪球的app,发现它的行情也表也是这样,push进详情之后,返回的时候内容下移了,然后它也是NavBar是不透明但TabBar半透明。
为了解决这个不算bug的缺陷,有如下的2种解决方法:
(1), 让Nav跟TabBar都是半透明,这样应该算比较好的,但是Nav半透明之后,下拉刷新就出现问题了,inset出现了冲突,需要改bug。
这样做的工作量还是hi不小的,而且百度股市通,自选股,雪球这些app的NavBar都是不透明的,所以此方法丢弃。
(2), 让Nav跟TabBar都是不透明,自选股就是这么做的,而且这样做可以自定义TabBar,可以定制主题,所以选择这种方法。

3,tableView透明与不透明的问题?
如问题2中最后的处理方法,把Nav与TabBar全部设置为不透明是不错的方案,但高斯模糊的半透明才是主流那应该如何实现呢?
可以看到NavBar是不透明的,TabBar半透明。
注意:上证指数view不是使用inset添加的,因为如果使用inset来添加,那么sectionHeader这个view不会跟着内容上移。
所以要解决这种问题就是设置tableView的tableHeaderView属性。同样它也是有tableFooterView属性的。
还有一点:
百度股市通中点击cell进入详情之后,返回的时候tableView的内容并没有下移,看来他们做了处理。
我开始猜测,他们是如何处理的?
从图3可以看到滑块被tabBar盖住了,所以我想是不是把tableView的高度变长49就不会下移了,实验了一下还是同样下移,
所以我又想,他们是不是在push的时候做一个标记,等contentOffset变化之后,把它还原。
然后我在点击cell的时候打了log,发现push前后的offset都没变:
- ( void )tableView:( UITableView *)tableView didSelectRowAtIndexPath:( NSIndexPath *)indexPath {
{
  NSLog ( @"%f" , _tableView . contentOffset . y );  // 306
  [self.navigationControllerpushViewController:vcanimated:YES];   
 NSLog(@"%f",_tableView.contentOffset.y);  // 306
}
并没有变化,那么做标记也不对。 应该是push完之后重新设置了offset。
最终,我想起了一个属性 automaticallyAdjustsScrollViewInsets,原来罪魁祸首就是它。
它默认是yes,这样tableView就是自动的设置inset,所以虽然设置tableView的高度是self.view的高度,但是tableView并没有被tabBar盖住,扩展到最底下,就是因为UIViewController自动的设置了tableView的inset。

这个属性还有一个作用:
        @当我们在一个UIViewController中同时创建2个tableView的时候,如果把它们的frame中的Y坐标设置为一样,你可能会发现它们的位置并没有达到你想要的结果.比如第一tableView个frame(0,0,320,568),另一个也frame(0,0,320,568),结果会发现第二个tableView的第一行数据被导航栏遮挡了,以至于我们不得已把第二个frame改成(0,64,320,568-64),虽然效果变成了我们想要的,但是却不知道这是什么原因.......
其实这一切都是automaticallyAdjustsScrollViewInsets在作怪,我们可以先看一下官方文档中对它的描述:
automaticallyAdjustsScrollViewInsets
Specifies whether or not the view controller should automatically adjust its scroll view insets.
@property(nonatomic, assign) BOOL automaticallyAdjustsScrollViewInsets
Discussion
Default value is YES, which allows the view controller to adjust its scroll view insets in response to the screen areas consumed by the status bar, navigation bar, and toolbar or tab bar. Set toNO if you want to manage scroll view inset adjustments yourself, such as when there is more than one scroll view in the view hierarchy.
哈哈,由此可见,当我们一个界面有多个tableView之类的,要将它设置为NO,完全由自己手动来布局,就不会错乱了

因此,百度股市通的处理方法就是设置 self . automaticallyAdjustsScrollViewInsets = NO ;点击cell进入详情后,返回的时候,内容的offset就不会下移了,还是原始的位置。
设置此属性为NO后,那么tableView就不会自动的设置inset,那么因为tableView的高度是self.view的高度,所以tableView扩展到了全屏,
tableView的最底下到了self.view的最底下,所以就被tabBar盖住了。
这就是为什么百度股市通图3中必须设置底部的inset,并且滑块被盖住了。
解决此问题的方法就是设置inset,设置contentInset的bottom为49,这样内容就不会被tabBar盖住,顺便设置 scrollIndicatorInsets的底部为49,这样滑块也没有被盖住了。问题就解决了。
因此百度股市通的问题就是忘记设置indicator的inset了。
代码:
{
  self . automaticallyAdjustsScrollViewInsets = NO ;
  _tableView . contentInset = UIEdgeInsetsMake ( 0 , 0 , 49 , 0 );
 _tableView.scrollIndicatorInsets=UIEdgeInsetsMake(0,0,49, 0);
}
注意的一个问题就是,如果当前有tableView的vc只是子vc,那么父vc的 automaticallyAdjustsScrollViewInsets也要设置为NO。

总结:
雪球app最搓 ,当Nav不透明TabBar透明的时候,点击cell返回时,tableView的contentOffset变化问题完全没有处理。
百度股市通处理了这个问题,但是indicator没有处理,小bug一个。
自选股选择了都不透明,所以没有这个问题,所以最省心。
但是,无论是做成自选股的风格(问题2),还是做成百度股市通的风格(问题3),都木有问题了。


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值