Layout anchors in a view can be used to autocreate constraints relative to other views. In this tutorial two button will be posiitoned on the main view using layout anchors. This tutorial is made with Xcode 11 and built for iOS 13.

Open Xcode and create a new Single View App.

For product name, use IOSLayoutAnchorTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and choose Next.

Go to the ViewController.swift file and change the viewDidLoad method to

override func viewDidLoad() { super.viewDidLoad() // 1. let firstButton = UIButton(type: .roundedRect) firstButton.setTitle("First", for: .normal) firstButton.sizeToFit() firstButton.backgroundColor = .green firstButton.tintColor = .black firstButton.translatesAutoresizingMaskIntoConstraints = false view.addSubview(firstButton) // 2. firstButton.topAnchor.constraint(equalTo: view.topAnchor, constant: 100).isActive = true firstButton.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 50).isActive = true // 3. let secondButton = UIButton(type: .roundedRect) secondButton.setTitle("Second", for: .normal) secondButton.sizeToFit() secondButton.backgroundColor = .yellow secondButton.tintColor = .black secondButton.translatesAutoresizingMaskIntoConstraints = false view.addSubview(secondButton) // 4. secondButton.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true secondButton.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -100).isActive = true }

an UIButton with a backgroundcolor of green and a title of “First” is added to the main view.

Using the top- and the leading layout anchor the button is positioned 100 point from the top and 5p points to the left of the main view

an UIButton with a backgroundcolor of yellow and a title of “Second” is added to the main view.

Using the bottom- and the centerX layout anchor the button is positioned 100 point from the bottom and at the center of the X axis of the main view.

Build and Run the Project. The 2 buttons are displayed at the correct postion on the main view.

With the introduction of the Adaptive Layout all views use Auto Layout by default. However, when animating views the constraints applied to a view prevents the ability to move this view using animation. In this tutorial the Auto Layout constraints will be updated to enable the view movement. This tutorial is made with Xcode 10 and built for iOS 12.

Open Xcode and create a new Single View App.

For product name, use IOS12AnimateViewsTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and choose Next.

Go to the Storyboard. Drag a View from the Object Library to the main View and in the Attributes Inspector give it a red background color. Select the view and enter the following values in the Size Inspector.

Select the red View and select the Auto Layout Add New Constraints button. Pin the Button to the top and and left. Select the width and height constraints. Select “Add 4 constraints.

Finally, add a Button to the main View and place it below the red View somewhere in the centre. Give it a title of "Move". The storyboard should look like this.

Select the Assistant Editor and make sure the ViewController.swift is visible. Ctrl + drag from the redView to the ViewController class and create the following outlet.

Ctrl + drag from the leading Constraint from the storyboard to the ViewController class and create the following Outlet.

Ctrl + drag from the Move Button from the Storyboard to the ViewController class and create the following Action.

Next, implement the moveButtonPressed Action method

@IBAction func moveButtonPressed(_ sender: Any) { // 1 let newConstraint = NSLayoutConstraint(item: redView, attribute: .leading, relatedBy: .equal, toItem: self.view, attribute: .leading, multiplier: 1.0, constant: self.view.frame.width/2) // 2 UIView.animate(withDuration: 2.0, delay: 0.0, options: .curveEaseOut , animations: { self.view.removeConstraint(self.leadingConstraint) self.view.addConstraint(newConstraint) self.view.layoutIfNeeded() }, completion: nil) // 3 leadingConstraint = newConstraint }

Using the NSLayoutConstraint initializer method, the leading constraint is set to the width of the main view, which puts the red image offscreen.

The view is animated by removing the old and adding the new constraint. The layoutIfNeeded method is used to force the layout before drawing.

The leading Contstraint is set to the new Constraint.

Build and Run the project, click the move button to move the red view offscreen.

Swift: How to Chain Animations for Impressive Visual Effects

my review point is /10

https://youtu.be/xWNv-j75OQ8?t=5m34s   programmatically setting up auto layout (크기 설정하는 방법, 좌우 앵커 설정하는 방법, 글자 크기, 멀티라인 설정)

numberOfLines 프로퍼티 설정 (0)으로 멀티 라인 이 가능해 진다

https://youtu.be/xWNv-j75OQ8?t=10m26s   애니메이션 설명 (addGestureRecognizer)