Posted onJune 11th, 2014
Ok, I’ll admit. I’ve been seriously struggling with AutoLayout ever since it’s been introduced. I understand the concept, and I LOVE the idea of it, but when I actually do it, it almost never behaves as it does in my head.
So when I had a chance to go talk to an actual Apple Engineer about AutoLayout last week at WWDC, I made sure to go. I thought of my most painful experience using AutoLayout recently – when I was making a login screen with username and password fields on
a ScrollView (so it scrolls up when the keyboard comes up) – and had the Apple engineer walk me through the example.
Here is whatwe made:
This is just two input fields centered on a ScrollView. You can see the AutoLayout at work here – the two input fields are centered correctly both on a 4s and a 5s device.
This “simple” solution took the Apple Engineer 40 minutes to solve! However, several senior engineers I know said that they’ve never been able to get AutoLayout working quite righton a ScrollView, so 40 minutes is actually not bad!
Here are the key tricks to getting AutoLayout to work on a ScrollView:
One View
The ScrollView should have only ONE child view. This is forced in Android, so I should have made the connection, but I just didn’t think of it – it’s too easy to put the two input text
fields right onto the ScrollView, especially in Interface Builder.
Here is what the View Hierarchy should actually look like:
Again, make sure to put all your fields and custom views inside the one child view of the ScrollView!
Equal Widths
I’m going to start with the constraints from the outside (on the main view) in (to the stuff inside the ContentView).
The obvious starting point is to bind the ScrollView to the View – just select the ScrollView from the view hierarchy, and add the following constraints:
The key to getting the constraints to work properly however, is adding anEqual Width constraint between the main View and the ContentView. The ScrollView adjusts to the size of the content
inside of it, so setting the ContentView to the Width of the ScrollView leaves the width of the ContentView ambiguous.
To create the Equal Width Constraint between the ContentView and the View, select the ContentView on the view hierarchy and Control + Drag to the View – you should get a pop-up that gives you the “Equal Widths” option:
Your constraints between the main View, ScrollView, and ContentView should look like this:
Content Insets
The constraints between the ScrollView and the ContentView are surprisingly straight forward – just bind the ContentView to the ScrollView (make sure the constant to the bottom layout guide is 0):
The constraints between the ContentView and ScrollView are now as follows with all constants set at 0:
If your storyboard is like mine, you might notice that the actual ContentView is not the full heightof the main view or the ScrollView:
However, we do want to make sure the ContentView is centered when it’s rendered on a device. To do that we need to write some code to property set the Content Insets in the ViewController:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
import
UIKit
class
ViewController: UIViewController {
@IBOutlet
var
scrollView : UIScrollView
@IBOutlet
var
contentView : UIView
override func viewDidLoad() {
super .viewDidLoad()
}
override func viewDidLayoutSubviews()
{
let
scrollViewBounds = scrollView.bounds
let
containerViewBounds = contentView.bounds
var
scrollViewInsets = UIEdgeInsetsZero
scrollViewInsets.top = scrollViewBounds.size.height/2.0;
scrollViewInsets.top -= contentView.bounds.size.height/2.0;
scrollViewInsets.bottom = scrollViewBounds.size.height/2.0
scrollViewInsets.bottom -= contentView.bounds.size.height/2.0;
scrollViewInsets.bottom += 1
scrollView.contentInset = scrollViewInsets
}
}
|
Once you add the proper constraints into the ContentView (see next step), your final result will look like this:
The ugly colors are meant to differentiate the ScrollView (green) from the ContentView (red). Again, in the storyboard, the ContentView is at the top of the ScrollView, but with our content insets set in code, it now becomes centered.
Centering Multiple Views
The final step is to add AutoLayout to the ContentView. This is the same as adding layout normally to any view, so I won’t go into much detail here.
The one thing I did learn that I’d like to share (although now it seems obvious) is how to center the two text fields in the view. Previously, I put the two text fields into a container view, and centered the container view in the parent view. However, that
is not necessary.
Instead, you can center each text field horizontally in container (so they’re now centered and on top of each other), and then add a constant of 25 to one (so it’s moved up 25 pixels from the center), and add a constant of -25 to the other (so it’s moved
down 25 pixels from the center).
This will leave you with a space of 50 pixels between the two text fields, but the space exactly in between them will be the center of the view.
Do you have any other AutoLayout tips? I’m always looking to learn more and improve, so please let me know in the comments!
You can view thesource
code on Github here.
分享到:
相关推荐
使用纯代码编写的iOS中UIScrollView用autolayout布局适配不同屏幕
本程序主要实现的功能是使用VFL语言实现屏幕适配,纯代码的方式,Autolayout实现屏幕适配
网络图片下载,用UIScrollView,使用AutoLayout方式布局 因自己的App需求, 要用到UIScrollView 来show一组网络下载的图片. 看了下网上大家的开源代码,都是用frame 方式把尺寸写死. 感觉没有用Autolayout方式灵活. ...
ios开发纯代码实现autolayout和sizeclasses初探-project
How To Make a Custom Control: AutoLayoutDemo: 先进的自动布局工具箱: 细数AutoLayout以来UIView和UIViewController新增的相关API: 自动布局(autolayout)环境下图片编辑器的实现: iOS界面开发的大一统: How can ...
框架搭建,json解析,autolayout自动布局纯代码
支持Cell和Tableview高度自适应,Label和ScrollView内容自适应,致力于做最简单易用的AutoLayout库。) 图示demo为 “SDAutoLayout实现的对scrollview多种形式的自动布局以及contentsize自适应(带动画效果)” ...
CPAutoLayout CPAutoLayout 是一种基于位置的 ... [view mas_makeConstraints: ^(MASConstraintMaker *make) { // edge to edge match make. top . equalTo (self. view . mas_top ); make. right . equalTo (self.
UIScrollView autolayout on a storyboard 的一个demo
UIScrollView 和 Autolayout 与 iOS8 和 Swift。 'UIScrollView and Autolayout with iOS8 and Swift'教程的回购。 ( )
对iOS里AutoLayout的深入理解和剖析
storyboard中对Scroll view添加约束,代码改变label的text,scroll view的Content size自动改变
代码实现的AutoLayout,简单的使用了VFL。
纯IB在Scrollview中Autolayout,不需要任何代码
1、cell直接设置九宫格 2、cell嵌套UICollectionView设置九宫格
Through deep exploration and copious code examples, you’ll learn how to create views, manipulate view controllers, and add features from iOS frameworks. Create, arrange, draw, layer, and animate ...
Get your hands dirty with Autolayout and size classes and know how to work with them. Chapter 5, Working with UITableView, covers one of the most important components in iOS that all iOS developers ...
iOS Autolayout PDF Ebook
ios6 新功能 AutoLayout的使用,一共4个例子,解决不同设备的UI定位问题
胜达 Gedatsu提供有关AutoLayout错误控制台日志的可读格式 抽象 在运行时,Gedatsu挂钩了控制台日志,并将其格式化为易于阅读的有关AutoLayout模糊约束的内容... 例如) $ carthage bootstrap --platform iOS 。 githu