ios 程序猿Family程序员iOS Developer

使用autoLayout布局ScrollView(内嵌多个Tab

2016-11-22  本文已影响279人  dj_rose

声明:这是去年在CSDN写的文章,时隔一年,旧瓶装新酒--结合新的理解重新梳理一遍。

首先注意ScrollView的自动布局是特殊的,不仅需要drag一些约束来确定其自身的位置,大小(x, y, width, height),还需要在storyboard中确定其ContentSize的大小。

通常来讲

1 ScrollView没有固定的高度、宽度。一般都是与SuperView发生联系(eg:距离父控件上下左右均为零)

2 ScrollView中内容较多时,为了简化布局,采用化整为零的做法,将原本ScrollView中的多个子View放到一个vContent(UIView)中,让这个vContent独自应对外界(ScrollView)的变化,vContent内部的子View只需要实现普通的约束即可(eg:本例中实现的是左右滑动切换至不同的TableView,共三个TableView)

3 在具体设置vContent与其父控件ScrollView的约束时,特别需要注意的是,vContent的Width、Height千万不要与ScrollView发生关系(eg:与ScrollView等高、等宽),通常的做法是在无关的外部找一个参照物,让vContent与其发生Width、Height上的联系。

3.5 本例中,vContent需要包含三个水平方向连续的TableView,因此其宽度为屏幕宽度的三倍。在外部找到一个与屏幕等宽的anchor View,设置如下:

Proportional Width t anchor View (MUtiplier 设置为3)

意思是vContent的宽度等于anchor View的三倍,如果发现vContent变成屏幕宽度的0.3了,切换下双方的约束先后位置试试

更正:上述3-3.5只是一种实现方式,实际上vContent的width、Height可以与ScrollView发生关系,并且因此有了更为简洁的做法。

先说注意点:

由于contentSize的大小是由其subView的约束来决定的,因此

subView的Constriants不能只用位置相关的(top、bottom、leading、traiiling)的约束来设置,这样会造成scrollView无法得知contentSize的大小。

相对简洁的做法:在设置了top、bottom、leading、traiiling约束后,再设置subView的高度等于scrollView的高度,宽度等于scrollView的三倍。

可以理解为:上下左右的约束是为了确定普通的约束关系,高度、宽度的设置是为了设置scrollView的contentSize。

3.5.1 在翻新这篇文章的时候看着自己写的东西试着再实现一次,过程中遇到了一点小问题:尽管已经设置了vContent居父上为0、居左为0、width、height的约束(按道理应该就ok了),然而scrollView的约束还是报错了,错误如下:

scrollable Content Size Ambiguity

报错的意思是可滚动的内容大小不明确->scrollView的contentSize未设置->再设置vContent居父右、父底的约束即可解决。(即要保证vContent对于父scrollView上下左右都要有约束)。

正确设置的约束

4.由于自动布局需要确定ScrollView的ContentSize,所以Content View的高宽一定要是独立于ScrollView存在的,这样才能正确确定ScrollView的Content Size,否则两者的约束之间互相依赖,就无法正确确定其ContentSize

5.如果TableView的顶部总是多出一块区域,上下滑动一下又没了,这样试试:

self.automaticallyAdjustsScrollViewInsets = NO;

6.特别关注ScrollView的Bounces、Bounce Vertically、Bounce Horizontally这三个属性,在ScrollView中嵌套TableView的过程中,你可能会遇到这些家伙带来的麻烦.

原文地址:使用autoLayout布局ScrollView(内嵌多个TableView)的一些小结 - qq_16204911的博客 - 博客频道 - CSDN.NET

上一篇下一篇

猜你喜欢

热点阅读