美文网首页ios 知识点
scrollerview和tableview的结合使用

scrollerview和tableview的结合使用

作者: Alex_BlackMamba | 来源:发表于2016-10-23 14:14 被阅读189次

    本文的主要目的是使用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实现左右滑动

    collection View

    1. 首先要声明scroll view的内容宽度:topScrollView!.contentSize=CGSizeMake(CGFloat(180*4),0)//因为是横向滚动,是四张图片,每张的宽度是180

    2. 每一个item是一个button,然后给button加上的背景图片

    3. 最后将每一个button作为subview添加到这个scrollerview里面

    制作两个Tap View

    tap view

    因为这两个tap可以左右切换,所以放了两个button。

    container里面放入scroll view

    animation view & channel scrollview

    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

    self sizing cell

    如何添加controller到scroll view里面:

    1. 初始化storybaord里面的两个controller

    2. 这里需要注意添加addChildViewController:否则点击cell之后 数据源都是消失,答案在爆栈上扎到http://stackoverflow.com/questions/14798516/uitableview-custom-cells-disappearing-content-after-scrolling

    添加controller

    scroller view滚动,如何让蓝条跟着滚动

    animation Bar

    1. animationbar前面讲到了,是放在第一个button下面的一个UIView

    2. 要让它随着scroll 一起滚动,其实目的就是为了改变它的frame;这里有一个比例关系,channelscrllview的一个宽度是scrollerview的宽度,以为蓝条这个animation只是在my channel和all channel之间切换,也就是说移动的中心是my channel的中心到all channel的中心之间,也就是100;所以有了上面的一个比例关系

    3. 为什么要偏移40,是因为这个animationview的起点是中心靠左位置

    相关文章

      网友评论

        本文标题:scrollerview和tableview的结合使用

        本文链接:https://www.haomeiwen.com/subject/ejhkuttx.html