Mobile Application Programmingcs4530/media/Lecture 8 - Structured Layout.pdf · UIStackView Auto...
Transcript of Mobile Application Programmingcs4530/media/Lecture 8 - Structured Layout.pdf · UIStackView Auto...
![Page 1: Mobile Application Programmingcs4530/media/Lecture 8 - Structured Layout.pdf · UIStackView Auto Layout UICollectionView Manual. Container View Content View Legend View Property Reference](https://reader034.fdocuments.us/reader034/viewer/2022043000/5f776b29d55e173087452173/html5/thumbnails/1.jpg)
Mobile Application ProgrammingStructured Layout
![Page 2: Mobile Application Programmingcs4530/media/Lecture 8 - Structured Layout.pdf · UIStackView Auto Layout UICollectionView Manual. Container View Content View Legend View Property Reference](https://reader034.fdocuments.us/reader034/viewer/2022043000/5f776b29d55e173087452173/html5/thumbnails/2.jpg)
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
![Page 3: Mobile Application Programmingcs4530/media/Lecture 8 - Structured Layout.pdf · UIStackView Auto Layout UICollectionView Manual. Container View Content View Legend View Property Reference](https://reader034.fdocuments.us/reader034/viewer/2022043000/5f776b29d55e173087452173/html5/thumbnails/3.jpg)
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)
}
![Page 4: Mobile Application Programmingcs4530/media/Lecture 8 - Structured Layout.pdf · UIStackView Auto Layout UICollectionView Manual. Container View Content View Legend View Property Reference](https://reader034.fdocuments.us/reader034/viewer/2022043000/5f776b29d55e173087452173/html5/thumbnails/4.jpg)
Android
http://developer.android.com/guide/topics/ui/declaring-layout.html
Measure Pass and Arrange PassUse provided layouts or define custom ones
![Page 5: Mobile Application Programmingcs4530/media/Lecture 8 - Structured Layout.pdf · UIStackView Auto Layout UICollectionView Manual. Container View Content View Legend View Property Reference](https://reader034.fdocuments.us/reader034/viewer/2022043000/5f776b29d55e173087452173/html5/thumbnails/5.jpg)
iOS Structured Layout
![Page 6: Mobile Application Programmingcs4530/media/Lecture 8 - Structured Layout.pdf · UIStackView Auto Layout UICollectionView Manual. Container View Content View Legend View Property Reference](https://reader034.fdocuments.us/reader034/viewer/2022043000/5f776b29d55e173087452173/html5/thumbnails/6.jpg)
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
![Page 7: Mobile Application Programmingcs4530/media/Lecture 8 - Structured Layout.pdf · UIStackView Auto Layout UICollectionView Manual. Container View Content View Legend View Property Reference](https://reader034.fdocuments.us/reader034/viewer/2022043000/5f776b29d55e173087452173/html5/thumbnails/7.jpg)
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
![Page 8: Mobile Application Programmingcs4530/media/Lecture 8 - Structured Layout.pdf · UIStackView Auto Layout UICollectionView Manual. Container View Content View Legend View Property Reference](https://reader034.fdocuments.us/reader034/viewer/2022043000/5f776b29d55e173087452173/html5/thumbnails/8.jpg)
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
![Page 9: Mobile Application Programmingcs4530/media/Lecture 8 - Structured Layout.pdf · UIStackView Auto Layout UICollectionView Manual. Container View Content View Legend View Property Reference](https://reader034.fdocuments.us/reader034/viewer/2022043000/5f776b29d55e173087452173/html5/thumbnails/9.jpg)
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
![Page 10: Mobile Application Programmingcs4530/media/Lecture 8 - Structured Layout.pdf · UIStackView Auto Layout UICollectionView Manual. Container View Content View Legend View Property Reference](https://reader034.fdocuments.us/reader034/viewer/2022043000/5f776b29d55e173087452173/html5/thumbnails/10.jpg)
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
![Page 11: Mobile Application Programmingcs4530/media/Lecture 8 - Structured Layout.pdf · UIStackView Auto Layout UICollectionView Manual. Container View Content View Legend View Property Reference](https://reader034.fdocuments.us/reader034/viewer/2022043000/5f776b29d55e173087452173/html5/thumbnails/11.jpg)
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
![Page 12: Mobile Application Programmingcs4530/media/Lecture 8 - Structured Layout.pdf · UIStackView Auto Layout UICollectionView Manual. Container View Content View Legend View Property Reference](https://reader034.fdocuments.us/reader034/viewer/2022043000/5f776b29d55e173087452173/html5/thumbnails/12.jpg)
View Hierarchy Debug Tool