Mobile Programming - 3 Rows, Column and Basic Sizing
- 2. 2
- 3. Compose layout basics Jetpack Compose makes it much easier to design and build your app's UI. Compose transforms state into UI elements, via: 1. Composition of elements 2. Layout of elements 3. Drawing of elements 3
- 4. Jetpack Compose Layout Structure 4 The Jetpack Compose implementation of the layout system has two main goals: • High performance • Ability to easily write custom layouts
- 5. Composable functions are the basic building block of Compose. A composable function is a function emitting Unit that describes some part of your UI. The function takes some input and generates what's shown on the screen. Basics of Composable functions 5
- 6. A Composable function might emit several UI elements. However, if you don't provide guidance on how they should be arranged, Compose might arrange the elements in a way you don't like. Basics of Composable functions (Cont.) 6
- 7. Compose layout basics A Composable function might emit several UI elements. However, if you don't provide guidance on how they should be arranged, Compose might arrange the elements in a way you don't like. For example, this code generates two text elements: 7
- 8. Compose layout basics (Cont.) Without guidance on how you want them arranged, Compose stacks the text elements on top of each other, making them unreadable: Compose provides a collection of ready-to-use layouts to help you arrange your UI elements, and makes it easy to define your own, more-specialized layouts. 8
- 9. Column Layout 9 In many cases, you can just use Compose's standard layout elements. Use Column to place items vertically on the screen.
- 10. Here is the result of using column on two text elements: You can see the difference from the previous one, where the two text elements are placed vertically apart Column Layout (Cont.) 10
- 11. Row Layout Similarly, use Row to place items horizontally on the screen. Both Column and Row support configuring the alignment of the elements they contain. 11
- 12. Row Layout (Cont.) Here is the result of using row on two text elements: You can see the difference from the previous one, where the two text elements are placed horizontally apart 12
- 13. Box Layout 13 Use Box to put elements on top of another. Box also supports configuring specific alignment of the elements it contains.
- 14. Here is the result of using box on two elements: You can see the difference from the previous one, where the two elements are placed in a stack Box Layout (Cont.) 14
- 15. Combination of Column, Row, and Box 15 Often these building blocks are all you need. You can write your own composable function to combine these layouts into a more elaborate layout that suits your app.
- 16. Children Position To set children's position within a Row, set the horizontalArrangement and verticalAlignment arguments. For a Column, set the verticalArrangement and horizontalAlignment arguments: 16
- 17. Children Position (Cont.) Here is the result of using children’s position on two elements: You can see the difference from the previous one, where the two elements are placed align right 17