ConstraintLayout - one layout to rule them all

Transcript

1. ConstraintLayout One layout to rule them all Andrew Kelly Google Developer Expert - Android @andrew_ke11y
2. Android Layouts • AbsoluteLayout - places children at exact pixel locations (deprecated) • LinearLayout - orders children vertically or horizontally • RelativeLayout - orders children relative to each other • FrameLayout - orders children based on their z-depth (or order of definition). • TableLayout - orders children into rows/columns
3. Old School Layout
4. ConstraintLayout • Uses Cassowary algorithm, to place children relative to anchor points on other views or the parent layout so that constraints are satisfied. • API 9+ • Current version 1.1.0-beta3 • Android Studio 3.0 - visual layout editor • Maintains a flat hierarchy which allows constraints to be easily modified - animations! • Used by iOS as its AutoLayout layout manager
5. Features • Constraints • Top/Bottom/Start/End - views can be constrained to other views based on a target anchor. e.g. the Start of “this” view is anchored to the End of another view. The top of “this” view is anchored to the top of the parent. • Circle - this view is anchored to another view, but is place a given radius away from the centre, at a given angle. • Chains • Multiple views grouped in a chain, whitespace can be divided equally between views. Chains can have a bias so that the elements are offset from their default position.
6. Features • Guidelines • A virtual object that can be positioned horizontally or vertically and can be used as a constraint anchor. E.g. 16dp/72dp material design key lines • Barriers • A virtual object which can be anchored to the edge of multiple views. e.g. it’ll represent an anchor that is as wide as the widest view linked to the constrained reference ids. • Groups • A virtual group that lets you apply property changes to multiple views at once. Currently only supports visibility.
7. Constraints • Anchors can be placed at the Top, Baseline, Bottom, Start or End of a view. These anchors can be connected to other views, or the parent. • Connecting a view to the Start and End of the parent will centre it horizontally on the screen. • Applying a bias to this constraint lets you offset the view from the centre.
8. Constraints • Circular constraints were added in beta3 • Circular constraints are anchored to the centre point of the 2 views. • The views are constrained based on an angle and a radius.
9. Chains • Chains are defined when there is a 2-way constraint between views. • The head of the chain is the element that chooses what style of chain being defined. • There are several ways you can configure the spacing and bias between the chained views
10. Guidelines • Guidelines are a virtual view that doesn’t appear in the view itself, but is only there to help constrain other views. • Guidelines can be horizontal or vertical. • Guidelines can be a fixed distance from another view e.g. 72dp from parent start. • Or they can be a percentage e.g. 50% from parent start.
11. Barriers • Barriers are another virtual view, they’re not visible in the final layout, but can be used to constrain one view against many views. • e.g. The body text here is constrained to be to the right of the 2 labels Warehouse and Hospital. • If those labels were to change size (e.g. language=DE), the words would be different lengths, so constraining against only one would cause layout problems.
12. Groups • Groups are the final virtual view that you can create, the great things about groups is that there defined not by wrapping the children that make up the group. They form a group based on id attributes. • This means you still maintain a flat hierarchy. It also means a view can be inside multiple groups. • As mentioned earlier only visibility can be changed via a group currently.
13. Aspect ratios • Previously you may have created your own RelativeLayout that performs some aspect ratio measurements so that child views are constrained to 16:9 or 4:3. • Later Google released a PercentageLayout - deprecated in API 26. • Now you can specify a ratio on any view that is a child of a ConstraintLayout. <ImageView android:layout_width="0dp" android:layout_height="0dp" app:layout_constraintDimensionRatio="H,16:9" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintTop_toTopOf="parent"/>
14. Code
15. ConstraintSet
16. ConstraintSet • ConstraintSet allows you to apply a new set of constraints to a given layout. • The TransitionManager framework will then animate these changes. • Constraint changes can be defined in XML or in code.
17. Animations • When you have a flat hierarchy you can move views around very easily. • ConstraintSets allow you to define the start and end positions of an animation (a bit like keyframes), and the TransitionManager framework will animate between the 2 states.
18. Animations • This even works if you’re currently animating the constraints when the transition starts. • Here we’re animating the movement of planets using circular positioning. When we click on the sun icon we animate to a set of static details.
19. Code
20. Final thoughts • Yes, you can use the visual editor to layout views, but once you grasp the concepts, XML is probably easier. • One gotcha, is that the visual editor will add “editor” constraints to your XML, so the layout looks fine in the IDE but awful on a device. • I prefer to use the XML view in Android Studio to define the constraints, but use the preview window side-by-side to check the visual output. • Don’t use match_parent for ANY view, instead use 0dp, which is now know as “match constraints”.
21. A Better CardView • CardView is part of the design library to bring a Google Now inspired card style to your app. • CardView extends FrameLayout • This means you need to include a child Layout in most cases to layout multiple child views. • Copy the class, maintain the same package name but change FrameLayout to ConstraintLayout • All the power of ConstraintLayout, but wrapped in a nice CardView look and feel.
22. Resources • Official Documentation • https://developer.android.com/training/ constraint-layout/index.html • https://developer.android.com/reference/ android/support/constraint/ ConstraintLayout.html • https://codelabs.developers.google.com/ codelabs/constraint-layout/index.html#0
23. Resources • Other resources • https://constraintlayout.com • https://blog.stylingandroid.com/category/layouts/ constraintlayout/ • https://www.youtube.com/watch?v=rzmB3UxxhaA • Mastering ConstraintLayout - Rebecca Franks • https://medium.com/devnibbles/constraintlayout- circular-positioning-9489b11cb0e5
24. Questions? Bilue is hiring in Melbourne and Sydney send your CVs to jobs@bilue.com.au