Recommandé
Recommandé
Contenu connexe
Similaire à Manual Layout Revisited
Similaire à Manual Layout Revisited (20)
Plus de gillygize
Dernier
Dernier (20)
Manual Layout Revisited
- 1. ...ifthere'sonethingiOScommunitydoes notlackareattemptstorewriteoreven entirelyreplaceAutoLayout....
- 3. ...
- 5. ...
- 8. ...
- 13. Everyone needs to handle layout.
- 15. Non-engineering factors also matter.
- 19. view1.frame = CGRect(x: 0, y: 100, height: 32, width: 320) view2.frame.origin.x = 0 view2.frame.origin.y = view1.frame.origin.y + view1.frame.size.height + 10 view2.frame.size.width = 100 view2.frame.size.height = view.frame.size.height - view1.frame.size.height - 10 view3.frame.origin.x = view2.center - view2.frame.width / 4 view3.frame.origin.y = view2.frame.origin.y view3.frame.size.width = view2.frame.width / 2 view3.frame.size.height = view2.frame.origin.y view4.frame.origin.x = view3.center - view3.frame.width / 4 view4.frame.origin.y = view3.frame.origin.y view4.frame.size.width = view3.frame.width / 2 view4.frame.size.height = view3.frame.origin.y
- 20. Auto layout made me reconsider how I write manual layout.
- 21. Manual layout operations can be easily consolidated into simple functions.
- 22. Manual Layout Operations — Add convenience methods to simplify code
- 23. Manual Layout Operations — Add convenience methods to simplify code — Apply changes to collections of views at the same time
- 24. Manual Layout Operations — Add convenience methods to simplify code — Apply changes to collections of views at the same time — Arrange a collection of views in a particular order
- 25. Manual Layout Operations — Add convenience methods to simplify code — Apply changes to collections of views at the same time — Arrange a collection of views in a particular order — Resize one view to make a collection fit on the screen
- 26. Creating Convenience Methods These are extensions that simplify reasoning about layout code.
- 27. Creating Convenience Methods extension UIView { var bottom: CGFloat { get { return frame.maxY } set(newValue) { frame.origin.y = newValue - frame.height } } } // ... myView.bottom = 100
- 28. Creating Convenience Methods extension UIView { var bottomRightCorner: CGPoint { get { return CGPoint(x: frame.maxX, y: frame.maxY) } set(newValue) { frame.origin = CGPoint( x: newValue.x - frame.size.width, y: newValue.y - frame.size.height ) } } }
- 29. Demo
- 30. Creating Operations on Collections of Views Applying the methods above to an array of views is a useful way to reduce code.
- 31. Creating Operations on Collections of Views func resize(views: [UIView], withWidth width: CGFloat) { views.forEach { view in view.width = width } }
- 32. Creating Operations on Collections of Views func reposition(views: [UIView], withLeft left: CGFloat) { views.forEach { view in view.left = left } }
- 33. Demo
- 34. Arranging Horizontally or Vertically It is common to arrange views along an axis (consider UIStackView).
- 35. Arranging Horizontally or Vertically func arrangeTopToBottom(views: [UIView]) { guard var currentPosition = views.first?.top else { return } for view in views { view.top = currentPosition currentPosition += view.height } }
- 36. Resizing to Fit On Screen Most of the time,a layout design will fit into two cases: — The layout is not intended to fit on the screen.Usually this type of layout will be placed inside a UIScrollView or one of its subclasses. — The layout is intended to fit on the screen.
- 37. Resizing to Fit On Screen For the second case—in a surprising number of instances—the layout can be achieved by simply resizing a single view so that its height fills whatever space is left by the other views.
- 38. Resizing to Fit On Screen func resize(view: UIView, in views: [UIView], toFitHeight height: CGFloat) { let heightOfViews = views.reduce(CGFloat(0)) { memo, currentView in guard view != currentView else { return memo } var mutableMemo = memo mutableMemo += view.height return mutableMemo } view.height = height - heightOfViews }
- 39. Resizing to Fit On Screen func resize(views:[UIView], toFitHeight height: CGFloat) { views.forEach { view in view.height = height / CGFloat(views.count) } }
- 40. Resizing to Fit On Screen — There are a lot of potential resizing functions. — Resizing also requires considering potential error cases.Can you guarantee that the content will fit?
- 41. Demo
- 42. What about...? — Top or bottom margins
- 43. What about...? — Top or bottom margins — Spacing between the elements
- 44. What about...? — Top or bottom margins — Spacing between the elements — Sizing UILabels or UITextViews to fit their content
- 45. What about...? — Top or bottom margins — Spacing between the elements — Sizing UILabels or UITextViews to fit their content — Aligning to the first or last baseline text
- 46. What about...? — Top or bottom margins — Spacing between the elements — Sizing UILabels or UITextViews to fit their content — Aligning to the first or last baseline text — Sizing UIImageViews to preserve their aspect ratio
- 47. What about...? — Top or bottom margins — Spacing between the elements — Sizing UILabels or UITextViews to fit their content — Aligning to the first or last baseline text — Sizing UIImageViews to preserve their aspect ratio
- 48. What about...? — Top or bottom margins — Spacing between the elements — Sizing UILabels or UITextViews to fit their content — Aligning to the first or last baseline text — Sizing UIImageViews to preserve their aspect ratio — Leading and trailing rather than left and right
- 49. These methods are just an introduction.