本文的主要目的是使用scrollview和tableview,实现下面的图的效果,其中数据都是静态的。Mychannel和all channel两个tap可以自由切换。
http://stackoverflow.com/questions/19561269/autolayout-with-hidden-uiviews
这里面有一个思路需要参考:如果左边没有image view,则通过constant和priority来调整,似的文字往左边顶!
结构分析:
1. 最上面是一个scroll view,允许左右滑动,其中每个卡片都能响应事件,所以这里每一个item都是一个button,用image作为button的背景图
2. 下面是一个大的container UIView,包含了一个标题栏,里面有两个Tap;还有一个是scrollView,左右可以滑动在My Channel和All Channels之间切换,同时也可以直接点击切换
3. 第一个Tap下面添加了一个独立的controller,里面放入了tableview
制作scroll view实现左右滑动
1. 首先要声明scroll view的内容宽度:topScrollView!.contentSize=CGSizeMake(CGFloat(180*4),0)//因为是横向滚动,是四张图片,每张的宽度是180
2. 每一个item是一个button,然后给button加上的背景图片
3. 最后将每一个button作为subview添加到这个scrollerview里面
制作两个Tap View
因为这两个tap可以左右切换,所以放了两个button。
container里面放入scroll view
1. tap下面还放了一个指示左右滚动的滑条
2. 因为放了两个tap,所以整个contentsize是两个container view的宽度
如何将table view添加到scroll view里面
1. scroll view里面放了两个controller,通过tap来切换
2. 如何实现根据文字(description的高度来自适应cell的高度):关键是autolayout
3. 这里我们单独创建了一个view controller,里面放了一个tableview,撑满整个view;其中autolayout最重要的第一点就是tableview的height=top layout
4. 单独设计了tableview cell 的prototype,左边是一个图片,右边是文字+文字
5. cell里面为了实现内容的自适应,根据文字的高度来调整cell的高度,其中图片的大小是固定的(包括宽和高),这里最重要的就是image view和description lable view的距离底部的content view的约束条件都是>=0
如何实现cell的自适应高度还有一点比较重要:预估高度,讲rowHeigh的属性设置为AutomaticDimension
如何添加controller到scroll view里面:
1. 初始化storybaord里面的两个controller
2. 这里需要注意添加addChildViewController:否则点击cell之后 数据源都是消失,答案在爆栈上扎到http://stackoverflow.com/questions/14798516/uitableview-custom-cells-disappearing-content-after-scrolling
scroller view滚动,如何让蓝条跟着滚动
1. animationbar前面讲到了,是放在第一个button下面的一个UIView
2. 要让它随着scroll 一起滚动,其实目的就是为了改变它的frame;这里有一个比例关系,channelscrllview的一个宽度是scrollerview的宽度,以为蓝条这个animation只是在my channel和all channel之间切换,也就是说移动的中心是my channel的中心到all channel的中心之间,也就是100;所以有了上面的一个比例关系
3. 为什么要偏移40,是因为这个animationview的起点是中心靠左位置