iOS ScrollView实现自动布局的方法（适用Swift 3.0 ）

前言

众所周知我们大家在开发中，可能会有一些页面显示的元素很多，可能会超出一个屏幕，但也不适合用 TableView 或者 CollectionView，此时我们一般会用 ScrollView，那么就会出现自动布局的问题。下面话不多说了，来一起看看详细的介绍吧。

实现方式

纯代码

  • 特点编码繁琐：需要手写控件
  • 安全：只要正确地设置约束或者 frame、contentSize，一般不会出现滚动问题

示例

lazy var scrollView: UIScrollView = {
 let obj = UIScrollView(frame: CGRect(x: 0, y: 0, width: .screenW, height: self.screenH))
 return obj
}()
override func viewDidLoad() {
 super.viewDidLoad()
 view.addSubview(scrollView)
 let subViewH: CGFloat = 400
 let topView = UIView(frame: CGRect(x: 0, y: 0, width: enW, height: subViewH))
 topView.backgroundColor = UIColor.red
 scrollView.addSubview(topView)
 let bottomView = UIView(frame: CGRect(x: 0, y: subViewH, h: screenW, height: subViewH))
 bottomView.backgroundColor = UIColor.purple
 scrollView.addSubview(bottomView)
 scrollView.contentSize = CGSize(width: screenW, height: iewH * 2)
}

效果图

Storyboard + 内部View

特点

  • 搭建界面简单
  • 直观
  • 需要占位视图

页面结构如图

可能出现的问题

  • ScrollView 中直接添加子元素，报错：Has ambiguous scrollable content height
  • ScrollView 内容超出屏幕仍不能滚动

实现滚动的代码

override func viewDidLayoutSubviews() {
 super.viewDidLayoutSubviews()
 let statusBarH: CGFloat = 20
 // 如果没有导航栏，就返回状态栏的高度
 let navH = gationController?.navigationBar.frame.maxY ?? statusBarH
 let deltaH = (screenH - navH) - bottomView.frame.maxY
 placeholderViewBottomConstraint.constant = deltaH
}

效果图

Storyboard + 外部View

特点

  • 搭建界面简单
  • 直观
  • 不需要占位视图，不需要对 ScrollView 的布局做特殊处理
  • 需要处理外部视图的 frame（如果没有用户交互，可以忽略）

页面结构如图

可能出现的问题

  • ScrollView 中直接添加子元素，报错：Has ambiguous scrollable content height
  • 当内容超出屏幕高度时，必须得设置 ContainerView 的 frame，否则不能滚动或者超出屏幕部分不接受事件

实现滚动的代码

override func viewDidLoad() {
 super.viewDidLoad()
 scrollView.addSubview(containerView)
}
override func viewDidLayoutSubviews() {
 super.viewDidLayoutSubviews()
 var f = containerView.frame
 f.size.width = screenW
 // 这句代码很重要，处理超出屏幕无法响应事件问题
 f.size.height = bottomView.frame.maxY
 containerView.frame = f
 scrollView.contentSize = CGSize(width: screenW, height: omView.frame.maxY)
}

效果图

总结

ScrollView 不能滚动的原因

  • contentSize 小于自身 frame 的尺寸
  • isScrollEnabled 属性，不过它默认就是 true，默认无需设置
  • ScrollView 或者其父元素无法交互，此时我们需要检查 isUserInteractionEnabled 属性是否为 true

ScrollView 一直支持滚动

默认情况下，当 ScrollView 里的元素不足一个屏幕高度时，不能滚动，如需滚动（弹簧效果），需要设置 alwaysBounceVertical 属性为 true（水平方向亦如此）

关于 ScrollView 布局的选择

纯代码布局

如果是纯代码布局，只能用方式一。老老实实、一行一行代码实现布局，虽然代码繁杂，但是坑少。（现在仍有不少公司是这样编程的）

界面布局

推荐方式三，这样 ScrollView 和 其子元素分离，可以简化很多约束问题，更直观

以上代码，适用于 Swift 3.0 语法。

好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • iOS中UIScrollView嵌套UITableView的实践教程

    iOS中UIScrollView嵌套UITableView的实践教程

    前言 最近因为工作项目中需要用到UIScrollView嵌套UItableView嵌套交互问题,顺便网上搜了下的demo,发现实现的效果并不是很理想,滑动偶尔会有延迟现象,所以自己想了个办法,顺便把自己实现写了个demo分享出来,一起来看看吧. 实现过程 最底部放置的为一个UIScrollView,设置ScrollView的contentSize属性,使可以发生横向滚动,同时隐藏横向滚动条,设置代理为当前控制器本身.然后,在最底部的UIScrollView上放置2个UITableView,因为只

  • ios scrollview嵌套tableview同向滑动的示例

    ios scrollview嵌套tableview同向滑动的示例

    我讨论的问题是嵌套同向滑动,能避免尽量避免.最好用一个tableview实现.一个tableview不够用了再嵌套,适用复杂场景. 首先我说下不适用的,免得大家浪费时间. 1.不适用上下拉刷新加载更多的页面. 2.不适用点击cell获取点击事件的页面,可以加入button点击获取事件. 官方文档说尽量不要进行两个竖直或两个水平方向滑动的视图嵌套.因为这个时候机器不知道用户要让哪个滑动,但在我们这个神奇的国度,项目中经常出现这样的需求,产品经理总爱这样做,andriod那边是比较容易实现的,ios

  • iOS实现scrollview上拉显示Navbar下拉隐藏功能详解

    iOS实现scrollview上拉显示Navbar下拉隐藏功能详解

    本文主要介绍的是关于iOS中scrollview上拉显示Navbar下拉隐藏的相关内容,分享出来供大家参考学习,下面来看看详细的介绍: 动画效果: 关于下拉隐藏Nabbar,上拉显示,有三种方式:推崇第一种,但是做的还是没简书.知乎那样流畅,第一种是对navbar做了平移,第二种,第三种都是隐藏.. 方法如下: 第一种,和第二种处理时机一样,但是效果更好,并没有处理Navbar 的隐藏. -(void)scrollViewWillBeginDragging:(UIScrollView *)scr

  • IOS中无限滚动Scrollview效果

    本文实例讲了IOS无限滚动效果,分享给大家供大家参考,具体内容如下 滑动到当前位置时候才去请求,本地有内容则直接显示(以来SDWebImage,UIView+Ext) HZScrollView.h #import <UIKit/UIKit.h> typedef void(^HZReturnBlock)(NSInteger index,CGFloat offset); typedef NS_ENUM(NSUInteger, HZScrollViewPageControllPosition) {

  • iOS scrollview实现三屏复用循环广告

    循环广告我们在开发中已经是熟得不能再熟了,今天整理这篇scrollview三屏复用广告. 原理使用scrollview里的三个imageview分别去加载不同的图片,用少量的资源来显示大量或不确定的广告数量,不然如果用普通方法实现广告,难道10个广告用12个scrollview的contentsize去做,岂不是太浪费资源了 代码如下,实现所有数量的循环广告,当广告只有一个时,仅采用单图显示,>=2个广告时,自动采用三屏复用 这里添加图片的方式是通过网络请求,更新服务器上的广告,如果仅使用本地广

  • iOS ScrollView实现自动布局的方法（适用Swift 3.0 ）

    前言 众所周知我们大家在开发中,可能会有一些页面显示的元素很多,可能会超出一个屏幕,但也不适合用 TableView 或者 CollectionView,此时我们一般会用 ScrollView,那么就会出现自动布局的问题.下面话不多说了,来一起看看详细的介绍吧. 实现方式 纯代码 特点编码繁琐:需要手写控件 安全:只要正确地设置约束或者 frame.contentSize,一般不会出现滚动问题 示例 lazy var scrollView: UIScrollView = { let obj =

  • 解决IOS开发空字符串的方法

    解决IOS开发空字符串的方法 实例代码: -(Boolean) isEmptyOrNull:(NSString *) str { if (!str) { // null object return true; }else if(str == Null){ return true; }else if([str isKindOfClass:[NSNull class]]){ return true; }else { NSString *trimedString = [str stringByTrim

  • Android开发控制ScrollView滑动速度的方法

    本文实例讲述了Android开发控制ScrollView滑动速度的方法.分享给大家供大家参考,具体如下: 前言 由于各个Android平板触摸屏的材质不一样,滑动效果会有一些区别,有的比较灵敏,有的比较迟钝,这里就遇到了要求控制滑动速度的需求... 正文 翻阅查找ScrollView的文档并搜索了一下没有发现直接设置的属性和方法,这里通过继承来达到这一目的. /** * 快/慢滑动ScrollView * @author 农民伯伯 * */ public class SlowScrollView

  • IOS初始化控制器的实现方法总结

    IOS初始化控制器的实现方法总结 一.ViewControllViewController方法 #import "AppDelegate.h" #import "ViewController.h" @interface AppDelegate () @property(nonatomic,strong) ViewController *viewController; @end @implementation AppDelegate - (BOOL)applicati

  • iOS获取手机通讯录方式方法（最新）

    最近学习了iOS获取手机通讯录方式方法,现在分享给大家.希望此文章对各位有所帮助. 一.iOS 9 以前的通讯录框架 AddressBookUI框架:提供了联系人列表界面.联系人详情界面.添加联系人界面等,一般用于选择联系人. AddressBook 框架:纯 C 语言的 API,仅仅是获得联系人数据.没有提供 UI 界面展示,需要自己搭建联系人展示界面. 二. iOS 9 以后最新通讯录框架 ContactsUI 框架:拥有 AddressBookUI 框架的所有功能,使用起来更加的面向对象.

  • IOS 中弹框的实现方法整理

    IOS 中弹框的实现方法整理

    IOS 中弹框的实现方法整理 #define iOS8Later ([UIDevice currentDevice].systemVersion.doubleValue >= 8.0) ios 8以前的弹框 @interface RootViewController ()<UIAlertViewDelegate> @end UIAlertView * alert = [[UIAlertView alloc] initWithTitle:@"登陆失败" message:

  • IOS 中KVC的使用方法实例详解

    IOS 中KVC的使用方法实例详解 KVC是Key Value Coding的缩写,意思是键值编码.在iOS中,提供了一种方法通过使用属性的名称(也就是Key)来间接访问对象的属性方法.说的有的拗口,实际上就是通过类定义我们可以看到类的各种属性,那么使用属性的名称我们就能访问到类实例化后的对象的这个属性值. 这个方法可以不通过getter/setter方法来访问对象的属性.因为一个类的成员变量如果没有提供getter/setter的话,外界就失去了对这个变量的访问渠道.而KVC则提供了一种访问的

  • Swift 3.0将UILabel数字颜色设置为红色的方法

    实现需求 这篇文章源于群友的一个问题:如何把『注:此商品只能整件(12的倍数发货),已选1袋,还差11袋』这段文字中的数字使用红色在 UILabel 中显示? 实现思路 我们可以使用UILabel 的 attribute string 属性,通过正则表达式匹配获取数字的范围,然后添加对应的 attribute. 实现代码 下面是实现代码,使用 swift 3.0 编写: //根据正则表达式改变文字颜色 func changeTextChange(regex: String, text: Stri

  • JS判断Android、iOS或浏览器的多种方法(四种方法)

    第一种:通过判断浏览器的userAgent,用正则来判断是否是ios和Android客户端. 代码如下: <script type="text/javascript"> var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端 var isiOS = !!u.match(/\(i[^;]+;( U;)?

随机推荐