iOS中Xcode使用UIScrollView+AutoLayout轻松实现滚动布局

对于一些屏幕尺寸比较小的手机,或者内容很长,一屏幕显示不了的情况,我们通常可以用手指往上滑的方法浏览底部内容,如果不是用ListView或者UITableView去实现的话,我们就需要自己实现滚动布局。

Android实现

在Android平台上,用XML文件很容易实现滚动布局,需要注意的是,ScrollView的下面只允许一个根视图,譬如如下代码:

<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>
</ScrollView>

简单分析一下,ScrollView的下面有一个LinearLayout,当然不允许有其他的布局或者控件跟LinearLayout并列,你可以随意在这个LinearLayout里加控件,是不是很简单。

iOS实现

注意

回到iOS,当然我们也可以用代码的方式动态生成,对于习惯使用AutoLayout的我来说,觉得后者比较直观而且可以很方便的进行各屏幕适配。但是在使用AutoLayout+UIScrollView的时候,发现很多坑,并没有预想的简单。

这里就不再一一列出碰到的坑了,直接上干货,首先,我们得看官方的说明:

the scrollable size of a uiscrollview is computed automatically based upon the constraints of its subviews. in order to fully define the scrollable content width and height , there needs to be constraints touching all edges (leading ,trailing ,top, and bottom) of the scroll view.

简单解释一下就是:UIScrollView的可滚动尺寸是根据它的子视图来决定的,为了计算可滚动的宽度和高度,需要约束 4个角落(左上右下)。

看到这里,感觉跟Android的就不太一样了,Android的只需要通过ScrollView中子视图的高度就可以动态算出可滚动区域,而这里还需要约束底部。其实有点不好理解,仔细想一想,其实这是很严谨的。

好了,下面我们开始布局:

1、布局UIScrollView

拖入UIScrollView,设置约束,让ScrollView紧贴屏幕,如下图:

这里写图片描述

2、布局UIScrollView的根视图

我们直接往UIScrollView里拖入UIView,命名为ContentView,让ContentView作为UIScrollView的根视图,而且是唯一的根视图,其他的控件一律加入这个ContentView里。看到这里,其实是跟Android很像很像了。

回过头来,在拖入UIView(ContentView)之后,可以看到出现了红色的错误,有强迫症的同学看到这里肯定会慌的,好吧,我们来消除这个错误。

设置ContentView的约束,上下左右也都是0,如下图:

这里写图片描述

再加上4个约束之后,依然有红色错误,提示少约束。看到这里,其实是很纳闷儿的,我都设置好约束了,为啥还提示少。

解释一下:UIScrollView的大小是根据它的子视图来决定的,而刚才我们设置了ContentView相对于UIScrollView的约束。就相当于,要知道x的值首先需要知道y的值,现在是 要知道y的值必须知道x的值,陷入了矛盾之中。

不怕,我们有解决办法,让ContentView的大小暂时等于屏幕的大小,注意,这是暂时的,因为我们的内容随时可能超过屏幕高度。为了消除这个红点,我们也认了,按住control键,从ContentView拖线到View(Scroll View的父视图),点击Equal Widths和Equal Heights,如下图:

这里写图片描述

可以看到,这样设置之后,红色变成了黄色,心情一下就好了,再更新一下,什么色都没了。

3、往ContentView里加入第一个控件

我们现在开始尝试往ContentView里加入控件来模拟滚动,首先,拖入一个UILabel控件,并设置 左右上的约束(10, 10,10),如下图:

这里写图片描述

同时可随意输入点文本作为此Label的内容,并设置行数为0,如下图:

这里写图片描述

到这里,我们也可以继续加入各种控件,为了简单,我们这里直接加入最后一个控件。

4、往ContentView里加入最后一个控件

作为最后一个控件,我们可以让它距离我们刚才加的第一个控件大一点,尽量让它超出屏幕,好模拟可以滚动的效果。

拖入UIView,设置一个背景色,方便我们看到,之后我们来添加约束,
左:0, 上:900,右:0,高度200,如下图:

这里写图片描述

设置好之后,可能觉得这就完事了,可以出现滚动了,是这样的么? 我们在模拟器上运行试试,就在iPhone4S上瞅瞅效果吧。

运行之后,很遗憾,不能看到我们刚才添加的最后一个控件,这是为什么呢? 还记得ScrollView的滚动区域是根据子视图来决定的么?在这里,ContentView是作为ScrollView唯一的子视图,而ContentView的高度我们设置了约束,是等于ScrollView的父视图的,也就是屏幕的高。这样一想,当然就不会出现滚动条了。

那么,我们如何来配置,才能出现滚动效果呢? 我们继续下面的最后步骤。

5、给ContentView的最后一个控件添加底部约束

在这里,我们设置其底部约束为10,如下图:

这里写图片描述

设置好了之后,可以看到红色错误又出现了。我们点进入看一下,原来是提示约束冲突了。如下图:

这里写图片描述

为什么会出现这种情况呢?我们刚才说了,ContentView的高度是等于屏幕高的,但是现在却不一样了,是Label的高度+900+100+10,这肯定会冲突。

那么,如何解决这种冲突呢? 我们只需要删除ContentView.hegith = height即可。

点击红色圆点,选中“ContentView.hegith = height”,点击Delete。
如下图:

这里写图片描述

删除之后,出现了黄色圆点,我们更新一下,现在世界又清净了。
这次能否达到效果呢?我们直接运行,很好,这次往下能顺利看到最后一个View,如下图:

这里写图片描述

到这里,我们已经顺利的实现了UIScrollView+AutoLayout来实现滚动布局。

总结

总结一下,关键的地方有两个:

  1. UIScrollView的直接子视图最好就一个
  2. ContentView中的最后一个控件一定要设置其底部约束

最后附上DEMO下载地址:

发布了21 篇原创文章 · 获赞 7 · 访问量 12万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览