mobile application programmingcs4530/media/lecture 8 - structured layout.pdf · uistackview auto...

Mobile Application ProgrammingStructured Layout

Container View

Content View

Legend

View Property

ReferenceDelegate

View Controller

Window

Root View

Collection ViewHeader View Footer View

TitleAdd Button TitleItemItem Item Refresh

Content Label Detail LabelIcon

TextImage Text

View Controller

Primary Concern: Layout

Primary Concern: Content

Containers & Content

Manual Layout - Rect Divide

1

2

3

override func layoutSubviews() { var r: CGRect = bounds

(_wheelView.frame, r) = r.divided(atDistance: r.height * 0.7, from: CGRectEdge.MinYEdge) (_brightnessView.frame, r) = r.divided(atDistance: r.height * 0.333, from: CGRectEdge.MinYEdge) (_opacityView.frame, _compareView.frame) = r.divided(atDistance: r.height * 0.5, from: CGRectEdge.MinYEdge)

}

Android

http://developer.android.com/guide/topics/ui/declaring-layout.html

Measure Pass and Arrange PassUse provided layouts or define custom ones

iOS Structured Layout

Container View

Content View

Legend

View Property

ReferenceDelegate

View Controller

Window

Root View

Collection ViewHeader View Footer View

TitleAdd Button TitleItemItem Item Refresh

Content Label Detail LabelIcon

TextImage Text

View Controller

Implementation

Container View

Content View

Legend

View Property

ReferenceDelegate

View Controller

Window

Root View

Collection ViewHeader View Footer View

TitleAdd Button TitleItemItem Item Refresh

Content Label Detail LabelIcon

TextImage Text

View Controller

Implementation

UIStackView

Container View

Content View

Legend

View Property

ReferenceDelegate

View Controller

Window

Root View

Collection ViewHeader View Footer View

TitleAdd Button TitleItemItem Item Refresh

Content Label Detail LabelIcon

TextImage Text

View Controller

Implementation

UIStackView

Auto Layout

Container View

Content View

Legend

View Property

ReferenceDelegate

View Controller

Window

Root View

Collection ViewHeader View Footer View

TitleAdd Button TitleItemItem Item Refresh

Content Label Detail LabelIcon

TextImage Text

View Controller

Implementation

UIStackView

ManualAuto Layout

Container View

Content View

Legend

View Property

ReferenceDelegate

View Controller

Window

Root View

Collection ViewHeader View Footer View

TitleAdd Button TitleItemItem Item Refresh

Content Label Detail LabelIcon

TextImage Text

View Controller

Implementation

UIStackView

UICollectionView ManualAuto Layout

Container View

Content View

Legend

View Property

ReferenceDelegate

View Controller

Window

Root View

Collection ViewHeader View Footer View

TitleAdd Button TitleItemItem Item Refresh

Content Label Detail LabelIcon

TextImage Text

View Controller

Implementation

UIStackView

UICollectionView ManualAuto Layout

Auto Layout

View Hierarchy Debug Tool