博客> UITableViewCell布局心得和热门APP界面分析
UITableViewCell布局心得和热门APP界面分析
2017-10-19 03:50 评论:0 阅读:1178 yujieace
ios UITableView UI UITableViewCell

做了一些项目,用得比较多的还是UITableView,布局相当强大和自由。 显示简单的重复数据是比较基础的使用方法,还可以用它布局整个界面。 举个栗子 同程旅游,布局很复杂,我们分析一下。我用的是iPad版本的。所以界面会比较宽。 这里还要顺便介绍一个神器Reveal,任何app的UI都无所遁形。 首先是主页:  index.png

除了导航栏和底部的TabBar以外的地方都是UITableView(高能反应) 来看分析:  mainTable.png  1.png

可见UI元素非常多 但仍然躲不过Reveal的法眼  屏幕快照 2016-06-28 上午11.31.30.png

从这张图可以看到是用UITableView的布局。同时UITableView的底部还有一张图片来实现刷新时的背景图片。

进一步分析,来看第一部分的滚动广告,也是很多App喜欢用的,广告是一个UITableViewCell,当然这个已经被同程的工程师们自定义过了。可以看到广告的滚动是通过UIScrollview来实现的,每个广告图片都是一个UIImageView,点击的话估计是通过Tap手势来完成的。  屏幕快照 2016-06-28 上午11.34.50.png

继续来看下景点的推荐  屏幕快照 2016-06-28 上午11.38.00.png

同样可以看到,每个景点推荐都是两个View,承载在Cell中,每个view定义了布局和相关的控件。 实现了规整的布局。

刚开始看这个App的时候呢,比较感兴趣的是中间的那个悬浮的view。刚开始以为用的是header view来实现的,但实际分析却发现,这貌似就是UITableview的一个子视图。子视图内部用的是另个强大的布局控件UICollectionView。  屏幕快照 2016-06-28 下午12.43.47.png

 屏幕快照 2016-06-28 下午12.40.53.png

接下来说说心得: 1、尽量用代码布局,而不是storyboard,代码可以实现很好的复用,虽然我知道直接拖控件很爽(早期我也是拖控件党,后来转向了大部分storyboard+少量代码布局,到现在是少量storyboard+大量代码布局)。

2、使用AutoLayout,尽量不要用frame手动计算,AutoLayout推荐使用Masonry,其他的PureLayout根据自己的需求也可以使用。

4、通过集成UITableViewCell的形式去布局,而不是在Table DataSource里面去王UITableViewCell里面添加subview,这是为了更好的封装和复用。

5、对于每一种不同的cell,封装成不同的类,并在TableView中注册,以实现重用,提高性能。

6、圆角对于帧数真的是杀手,建议对图片不要直接设置layer.Cornerradius,如果你跟美工关系不错,那让美工裁剪好圆角,如果美工不干,那只能通过代码裁剪圆角来显示了。尽量减少圆角数量。

7、drawRect要适当利用,比如圆角或者图片的绘制,可以在drawRect中绘制,还有就是简单图形的绘制,可以使用CoreGraphics来绘制,减少图片的使用,也可以让简单图形更清晰。

8、线条的绘制,在同程的app中,用的是UIImageview来作为分割线的。我比较喜欢通过绘制的方式来实现。但用view或者imageview也无不可。

9、封装、封装、再封装,对于复杂界面。各个组件封装我觉得还蛮重要的。为了后期维护方便,我一般对于viewcontroller的代码控制在500行以内,大部分在200行以内。

10、category虽然不应该放在这儿说,但对于想要扩展tableview的功能的同学来说,还是可以说一下的,category可以实现非常强大的功能扩展,如果你想为你的控件加上属性,那么你可以试试runtime的对象关联,demo如下:

objc_setAssociatedObject(self, @"BackButton", back,OBJC_ASSOCIATION_RETAIN);

objc_getAssociatedObject(self, @"BackButton");

通过实现getter和setter方法来完成对相应属性的访问,外部访问时可以直接访问getter和setter方法,也可以通过KVC来访问, [object valueForKey:@"keyName"]; 有奇效哦,突破了category只能加方法不能加属性的缺陷(也算不上缺陷)

第一次写技术博客,如有不当之处,敬请指出。

收藏
3
sina weixin mail 回到顶部