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下载地址:

时间: 2024-10-27 20:02:13

iOS中Xcode使用UIScrollView+AutoLayout轻松实现滚动布局的相关文章

IOS中(Xcode) DEBUG模式(RELEASE模式)控制NSLog输出,NSLog两种不同情况的输出方式

[新年新气象,2016/01/04] 俺们在开发IOS程序过程中,经常需要用到NSLog输出一些信息,甚至有的开发过程,必须在控制台查看输出,有经验的程序员通过控制台输出就能知道整个数据交互的一个流程.但是一个发布的程序,里面带有太多的NSLog输出,肯定对于App性能有所影响,这时候我们可以使用一个宏定义来处理,在开发的时候使用DEBUG模式,在发布的时候使用RELEASE模式.这样,发布的App就不会在程序内部做大量的NSLog输出了

文顶顶 iOS开发UI篇—IOS开发中Xcode的一些使用技巧

iOS开发UI篇—IOS开发中Xcode的一些使用技巧 一.快捷键的使用 经常用到的快捷键如下: 新建 shift + cmd + n     新建项目 cmd + n             新建文件 视图 option + cmd + 回车 打开助理编辑器 cmd + 回车           显示主窗口 cmd + 0             导航窗口 option + cmd + 0    工具窗口 在.m & .h之间切换           control + cmd + 上/下 按

iOS开发UI基础—IOS开发中Xcode的一些使用技巧

iOS开发UI基础-IOS开发中Xcode的一些使用技巧 一.快捷键的使用 经常用到的快捷键如下: 新建 shift + cmd + n     新建项目 cmd + n             新建文件 视图 option + cmd + 回车 打开助理编辑器 cmd + 回车           显示主窗口 cmd + 0             导航窗口 option + cmd + 0    工具窗口 在.m & .h之间切换           control + cmd + 上/下

【三分钟视频教程】iOS开发中 Xcode 报 apple-o linker 错误的#解决方案#

[三分钟视频教程]iOS开发中 Xcode 报 apple-o linker 错误的#解决方案# [三分钟视频教程]iOS开发中 Xcode 报 apple-o linker 错误的#解决方案#,布布扣,bubuko.com

iOS开发 Xcode中的Info.plist字段含义

Info.plist用于向iOS提供关于app,bundle或者framework的一些重要信息.它指定了比如一个应用应该怎样启动,它如何被本地化,应用的名称,要显示的图标,还有更多.Info.plist文件实际上是苹果预定义schema的XML文件. 为了构建一个设备相关的健,你在健的后面要加上~iphone或者~ipad. 常用字段: 1.获取版本信息: NSDictionary*infoDic = [[NSBundle mainBundle] infoDictionary]; NSStri

iOS 在 XCode 6 中的福利:TestFlight

iOS 在 XCode 6 中的福利 太阳火神的美丽人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协议 转载请保留此句:太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS.Android.Html5.Arduino.pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作. 以下来看看源码版本号和构建版本号的区别: Xcode 中 Target -> General ->

IOS中UIScrollView的contentSize、contentOffset和contentInsert属性

IOS中,UIScrollView继承于UIView,扩展了滚动,缩放功能,双协议,其中最常用的UITableview就是继承于该类. UIScrollView中的frame.bounds.contentSize.contentOffset和contentInset属性,这几个属性一直都容易混淆,自己小总结一下: frame是基于superView的坐标系创建的,表示该滚动视图在其父视图中的位置 bounds属性是基于该滚动视图本身的坐标系的,主要用于确定其子视图在该滚动视图上的位置,当boun

IOS中UIScrollView的contentSize、contentOffset和contentInset属性

IOS中,UIScrollView是可以滚动的视图,其中最常用的UITableView就是继承了UIScrollView. 跟所有的view一样,UIScrollView有一个frame属 性,同时,UIScrollView还具有contentSize.contentOffset和contentInset属性.我在学习中,就觉得其中 contentSize和contentOffset相对比较好理解,对contentInset就有点不太好理解.下面具体解释一下. contentSize是UIScr

IOS中的UIScrollView

要引用UIScrollView 首先要遵循UIScrollViewDelegate协议 然后重写 //1.拖拽方法 -(void)scrollViewDidScroll:(UIScrollView *)scrollView; //2.即将开始拖拽的方法 -(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView; //3.拖拽完毕的方法 -(void)scrollViewDidEndDragging:(UIScrolView *)