Mihai Popa | f4b6020 | 2019-07-05 18:53:39 +0100 | [diff] [blame] | 1 | /* |
| 2 | * Copyright 2019 The Android Open Source Project |
| 3 | * |
| 4 | * Licensed under the Apache License, Version 2.0 (the "License"); |
| 5 | * you may not use this file except in compliance with the License. |
| 6 | * You may obtain a copy of the License at |
| 7 | * |
| 8 | * http://www.apache.org/licenses/LICENSE-2.0 |
| 9 | * |
| 10 | * Unless required by applicable law or agreed to in writing, software |
| 11 | * distributed under the License is distributed on an "AS IS" BASIS, |
| 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| 13 | * See the License for the specific language governing permissions and |
| 14 | * limitations under the License. |
| 15 | */ |
| 16 | |
| 17 | package androidx.ui.layout.samples |
| 18 | |
| 19 | import androidx.annotation.Sampled |
| 20 | import androidx.compose.Composable |
Mihai Popa | f4b6020 | 2019-07-05 18:53:39 +0100 | [diff] [blame] | 21 | import androidx.ui.core.Text |
Matvei Malkov | 59bac36 | 2020-02-13 20:23:13 +0000 | [diff] [blame] | 22 | import androidx.ui.foundation.Box |
Mihai Popa | f4b6020 | 2019-07-05 18:53:39 +0100 | [diff] [blame] | 23 | import androidx.ui.graphics.Color |
Mihai Popa | f4b6020 | 2019-07-05 18:53:39 +0100 | [diff] [blame] | 24 | import androidx.ui.layout.Column |
Matvei Malkov | 59bac36 | 2020-02-13 20:23:13 +0000 | [diff] [blame] | 25 | import androidx.ui.layout.LayoutAspectRatio |
Adam Powell | 31c1ebd | 2020-01-09 09:48:24 -0800 | [diff] [blame] | 26 | import androidx.ui.layout.LayoutHeight |
Anastasia Soboleva | d70e670 | 2019-12-16 13:53:41 +0000 | [diff] [blame] | 27 | import androidx.ui.layout.LayoutSize |
Adam Powell | 31c1ebd | 2020-01-09 09:48:24 -0800 | [diff] [blame] | 28 | import androidx.ui.layout.LayoutWidth |
Mihai Popa | f4b6020 | 2019-07-05 18:53:39 +0100 | [diff] [blame] | 29 | import androidx.ui.layout.MaxIntrinsicHeight |
| 30 | import androidx.ui.layout.MaxIntrinsicWidth |
| 31 | import androidx.ui.layout.MinIntrinsicHeight |
| 32 | import androidx.ui.layout.MinIntrinsicWidth |
Anastasia Soboleva | 8736575 | 2019-12-03 18:13:45 +0000 | [diff] [blame] | 33 | import androidx.ui.layout.Row |
Anastasia Soboleva | 5c77fc5 | 2020-03-05 16:50:34 +0000 | [diff] [blame] | 34 | import androidx.ui.layout.Stack |
George Mount | 842c8c1 | 2020-01-08 16:03:42 -0800 | [diff] [blame] | 35 | import androidx.ui.unit.dp |
Mihai Popa | f4b6020 | 2019-07-05 18:53:39 +0100 | [diff] [blame] | 36 | |
| 37 | /** |
Matvei Malkov | 59bac36 | 2020-02-13 20:23:13 +0000 | [diff] [blame] | 38 | * Builds a layout containing three [Box] having the same width as the widest one. |
Mihai Popa | f4b6020 | 2019-07-05 18:53:39 +0100 | [diff] [blame] | 39 | * |
| 40 | * Here [MinIntrinsicWidth] is adding a speculative width measurement pass for the [Column], |
| 41 | * whose minimum intrinsic width will correspond to the preferred width of the largest |
Matvei Malkov | 59bac36 | 2020-02-13 20:23:13 +0000 | [diff] [blame] | 42 | * [Box]. Then [MinIntrinsicWidth] will measure the [Column] with tight width, the same |
Mihai Popa | 600ccf5 | 2020-03-03 14:18:37 +0000 | [diff] [blame] | 43 | * as the premeasured minimum intrinsic width, which due to [LayoutWidth.Fill] will force |
Matvei Malkov | 59bac36 | 2020-02-13 20:23:13 +0000 | [diff] [blame] | 44 | * the [Box]'s to use the same width. |
Mihai Popa | f4b6020 | 2019-07-05 18:53:39 +0100 | [diff] [blame] | 45 | */ |
| 46 | @Sampled |
| 47 | @Composable |
| 48 | fun SameWidthBoxes() { |
Anastasia Soboleva | 5c77fc5 | 2020-03-05 16:50:34 +0000 | [diff] [blame] | 49 | Stack { |
Mihai Popa | f4b6020 | 2019-07-05 18:53:39 +0100 | [diff] [blame] | 50 | MinIntrinsicWidth { |
Adam Powell | 31c1ebd | 2020-01-09 09:48:24 -0800 | [diff] [blame] | 51 | Column(LayoutHeight.Fill) { |
Matvei Malkov | 59bac36 | 2020-02-13 20:23:13 +0000 | [diff] [blame] | 52 | Box( |
| 53 | modifier = LayoutWidth.Fill + LayoutSize(20.dp, 10.dp), |
| 54 | backgroundColor = Color.Gray |
| 55 | ) |
| 56 | Box( |
| 57 | modifier = LayoutWidth.Fill + LayoutSize(30.dp, 10.dp), |
| 58 | backgroundColor = Color.Blue |
| 59 | ) |
| 60 | Box( |
| 61 | modifier = LayoutWidth.Fill + LayoutSize(10.dp, 10.dp), |
| 62 | backgroundColor = Color.Magenta |
| 63 | ) |
Mihai Popa | f4b6020 | 2019-07-05 18:53:39 +0100 | [diff] [blame] | 64 | } |
| 65 | } |
| 66 | } |
| 67 | } |
| 68 | |
Anastasia Soboleva | 8736575 | 2019-12-03 18:13:45 +0000 | [diff] [blame] | 69 | /** |
Mihai Popa | f4b6020 | 2019-07-05 18:53:39 +0100 | [diff] [blame] | 70 | * Builds a layout containing two pieces of text separated by a divider, where the divider |
| 71 | * is sized according to the height of the longest text. |
| 72 | * |
Anastasia Soboleva | 8736575 | 2019-12-03 18:13:45 +0000 | [diff] [blame] | 73 | * Here [MinIntrinsicHeight] is adding a speculative height measurement pass for the [Row], |
Mihai Popa | f4b6020 | 2019-07-05 18:53:39 +0100 | [diff] [blame] | 74 | * whose minimum intrinsic height will correspond to the height of the largest [Text]. Then |
Anastasia Soboleva | 8736575 | 2019-12-03 18:13:45 +0000 | [diff] [blame] | 75 | * [MinIntrinsicHeight] will measure the [Row] with tight height, the same as the premeasured |
Mihai Popa | 600ccf5 | 2020-03-03 14:18:37 +0000 | [diff] [blame] | 76 | * minimum intrinsic height, which due to [LayoutHeight.Fill] will force the [Text]s and |
Mihai Popa | f4b6020 | 2019-07-05 18:53:39 +0100 | [diff] [blame] | 77 | * the divider to use the same height. |
| 78 | */ |
| 79 | @Sampled |
| 80 | @Composable |
| 81 | fun MatchParentDividerForText() { |
Anastasia Soboleva | 5c77fc5 | 2020-03-05 16:50:34 +0000 | [diff] [blame] | 82 | Stack { |
Mihai Popa | f4b6020 | 2019-07-05 18:53:39 +0100 | [diff] [blame] | 83 | MinIntrinsicHeight { |
Anastasia Soboleva | 8736575 | 2019-12-03 18:13:45 +0000 | [diff] [blame] | 84 | Row { |
| 85 | Text( |
| 86 | text = "This is a really short text", |
Adam Powell | 31c1ebd | 2020-01-09 09:48:24 -0800 | [diff] [blame] | 87 | modifier = LayoutFlexible(1f) + LayoutHeight.Fill |
Anastasia Soboleva | 8736575 | 2019-12-03 18:13:45 +0000 | [diff] [blame] | 88 | ) |
Matvei Malkov | 59bac36 | 2020-02-13 20:23:13 +0000 | [diff] [blame] | 89 | Box(LayoutWidth(1.dp) + LayoutHeight.Fill, backgroundColor = Color.Black) |
Anastasia Soboleva | 8736575 | 2019-12-03 18:13:45 +0000 | [diff] [blame] | 90 | Text( |
| 91 | text = "This is a much much much much much much much much much much" + |
| 92 | " much much much much much much longer text", |
Adam Powell | 31c1ebd | 2020-01-09 09:48:24 -0800 | [diff] [blame] | 93 | modifier = LayoutFlexible(1f) + LayoutHeight.Fill |
Anastasia Soboleva | 8736575 | 2019-12-03 18:13:45 +0000 | [diff] [blame] | 94 | ) |
Mihai Popa | f4b6020 | 2019-07-05 18:53:39 +0100 | [diff] [blame] | 95 | } |
| 96 | } |
| 97 | } |
| 98 | } |
| 99 | |
| 100 | /** |
| 101 | * Builds a layout containing three [Text] boxes having the same width as the widest one. |
| 102 | * |
| 103 | * Here [MaxIntrinsicWidth] is adding a speculative width measurement pass for the [Column], |
| 104 | * whose maximum intrinsic width will correspond to the preferred width of the largest |
Matvei Malkov | 59bac36 | 2020-02-13 20:23:13 +0000 | [diff] [blame] | 105 | * [Box]. Then [MaxIntrinsicWidth] will measure the [Column] with tight width, the same |
Mihai Popa | 600ccf5 | 2020-03-03 14:18:37 +0000 | [diff] [blame] | 106 | * as the premeasured maximum intrinsic width, which due to [LayoutWidth.Fill] modifiers will |
Matvei Malkov | 59bac36 | 2020-02-13 20:23:13 +0000 | [diff] [blame] | 107 | * force the [Box]s to use the same width. |
Mihai Popa | f4b6020 | 2019-07-05 18:53:39 +0100 | [diff] [blame] | 108 | */ |
| 109 | @Sampled |
| 110 | @Composable |
| 111 | fun SameWidthTextBoxes() { |
Anastasia Soboleva | 5c77fc5 | 2020-03-05 16:50:34 +0000 | [diff] [blame] | 112 | Stack { |
Mihai Popa | f4b6020 | 2019-07-05 18:53:39 +0100 | [diff] [blame] | 113 | MaxIntrinsicWidth { |
Adam Powell | 31c1ebd | 2020-01-09 09:48:24 -0800 | [diff] [blame] | 114 | Column(LayoutHeight.Fill) { |
Matvei Malkov | 59bac36 | 2020-02-13 20:23:13 +0000 | [diff] [blame] | 115 | Box(LayoutWidth.Fill, backgroundColor = Color.Gray) { |
Mihai Popa | f4b6020 | 2019-07-05 18:53:39 +0100 | [diff] [blame] | 116 | Text("Short text") |
| 117 | } |
Matvei Malkov | 59bac36 | 2020-02-13 20:23:13 +0000 | [diff] [blame] | 118 | Box(LayoutWidth.Fill, backgroundColor = Color.Blue) { |
Mihai Popa | f4b6020 | 2019-07-05 18:53:39 +0100 | [diff] [blame] | 119 | Text("Extremely long text giving the width of its siblings") |
| 120 | } |
Matvei Malkov | 59bac36 | 2020-02-13 20:23:13 +0000 | [diff] [blame] | 121 | Box(LayoutWidth.Fill, backgroundColor = Color.Magenta) { |
Mihai Popa | f4b6020 | 2019-07-05 18:53:39 +0100 | [diff] [blame] | 122 | Text("Medium length text") |
| 123 | } |
| 124 | } |
| 125 | } |
| 126 | } |
| 127 | } |
| 128 | |
Anastasia Soboleva | 8736575 | 2019-12-03 18:13:45 +0000 | [diff] [blame] | 129 | /** |
| 130 | * Builds a layout containing two [LayoutAspectRatio]s separated by a divider, where the divider |
| 131 | * is sized according to the height of the taller [LayoutAspectRatio]. |
Mihai Popa | f4b6020 | 2019-07-05 18:53:39 +0100 | [diff] [blame] | 132 | * |
Anastasia Soboleva | 8736575 | 2019-12-03 18:13:45 +0000 | [diff] [blame] | 133 | * Here [MaxIntrinsicHeight] is adding a speculative height measurement pass for the [Row], whose |
| 134 | * maximum intrinsic height will correspond to the height of the taller [LayoutAspectRatio]. Then |
| 135 | * [MaxIntrinsicHeight] will measure the [Row] with tight height, the same as the premeasured |
Mihai Popa | 600ccf5 | 2020-03-03 14:18:37 +0000 | [diff] [blame] | 136 | * maximum intrinsic height, which due to [LayoutHeight.Fill] modifier will force the |
Anastasia Soboleva | 8736575 | 2019-12-03 18:13:45 +0000 | [diff] [blame] | 137 | * [LayoutAspectRatio]s and the divider to use the same height. |
Mihai Popa | f4b6020 | 2019-07-05 18:53:39 +0100 | [diff] [blame] | 138 | */ |
| 139 | @Sampled |
| 140 | @Composable |
| 141 | fun MatchParentDividerForAspectRatio() { |
Anastasia Soboleva | 5c77fc5 | 2020-03-05 16:50:34 +0000 | [diff] [blame] | 142 | Stack { |
Mihai Popa | f4b6020 | 2019-07-05 18:53:39 +0100 | [diff] [blame] | 143 | MaxIntrinsicHeight { |
Anastasia Soboleva | 8736575 | 2019-12-03 18:13:45 +0000 | [diff] [blame] | 144 | Row { |
Adam Powell | 31c1ebd | 2020-01-09 09:48:24 -0800 | [diff] [blame] | 145 | val modifier = LayoutHeight.Fill + LayoutFlexible(1f) |
Matvei Malkov | 59bac36 | 2020-02-13 20:23:13 +0000 | [diff] [blame] | 146 | Box(modifier + LayoutAspectRatio(2f), backgroundColor = Color.Gray) |
| 147 | Box(LayoutWidth(1.dp) + LayoutHeight.Fill, backgroundColor = Color.Black) |
| 148 | Box(modifier + LayoutAspectRatio(1f), backgroundColor = Color.Blue) |
Mihai Popa | f4b6020 | 2019-07-05 18:53:39 +0100 | [diff] [blame] | 149 | } |
| 150 | } |
| 151 | } |
| 152 | } |