Skip to content

Commit 7322f58

Browse files
riggarooriggaroo
authored
Added FlowLayoutSnippets.kt with examples for Flow Layouts. (android#104)
* Added FlowLayoutSnippets.kt with examples for Flow Layouts. * Fix tag * Apply Spotless * Moved example layouts further up in file * Upgrade FlowLayouts to latest version. * Apply Spotless * Move some snippets into CommonLayoutExamples.kt Upgrade gradle config. * Apply Spotless * More Flow snippets * Apply Spotless * remove duplicate blue color * remove duplicate blue color * Added fractional sizing example * Change to beta version for flow layout changes * Apply Spotless * Disable jetifier and enable configuration cache. --------- Co-authored-by: riggaroo <[email protected]>
1 parent 61c1ecf commit 7322f58

File tree

4 files changed

+829
-12
lines changed

4 files changed

+829
-12
lines changed

Diff for: ‎compose/snippets/src/main/java/com/example/compose/snippets/layouts/CommonLayoutExamples.kt

+155
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
/*
2+
* Copyright 2023 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+
* https://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 com.example.compose.snippets.layouts
18+
19+
import androidx.compose.foundation.background
20+
import androidx.compose.foundation.layout.Arrangement
21+
import androidx.compose.foundation.layout.Column
22+
import androidx.compose.foundation.layout.ExperimentalLayoutApi
23+
import androidx.compose.foundation.layout.Row
24+
import androidx.compose.foundation.layout.Spacer
25+
import androidx.compose.foundation.layout.aspectRatio
26+
import androidx.compose.foundation.layout.fillMaxHeight
27+
import androidx.compose.foundation.layout.fillMaxWidth
28+
import androidx.compose.foundation.layout.height
29+
import androidx.compose.foundation.layout.padding
30+
import androidx.compose.foundation.layout.width
31+
import androidx.compose.foundation.shape.RoundedCornerShape
32+
import androidx.compose.runtime.Composable
33+
import androidx.compose.ui.Alignment
34+
import androidx.compose.ui.Modifier
35+
import androidx.compose.ui.draw.clip
36+
import androidx.compose.ui.tooling.preview.Preview
37+
import androidx.compose.ui.unit.dp
38+
import com.example.compose.snippets.util.MaterialColors
39+
import kotlin.random.Random
40+
41+
/*
42+
* Copyright 2022 The Android Open Source Project
43+
*
44+
* Licensed under the Apache License, Version 2.0 (the "License");
45+
* you may not use this file except in compliance with the License.
46+
* You may obtain a copy of the License at
47+
*
48+
* http://www.apache.org/licenses/LICENSE-2.0
49+
*
50+
* Unless required by applicable law or agreed to in writing, software
51+
* distributed under the License is distributed on an "AS IS" BASIS,
52+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
53+
* See the License for the specific language governing permissions and
54+
* limitations under the License.
55+
*/
56+
@OptIn(ExperimentalLayoutApi::class)
57+
@Composable
58+
@Preview
59+
fun Layout_Graph_Vertical() {
60+
val paddingModifier = Modifier.padding(4.dp)
61+
// [START android_compose_layout_vertical_graph]
62+
Column(
63+
modifier = paddingModifier.fillMaxWidth(),
64+
verticalArrangement = Arrangement.spacedBy(4.dp)
65+
) {
66+
val itemModifier = Modifier
67+
.padding(4.dp)
68+
.height(48.dp)
69+
.clip(RoundedCornerShape(8.dp))
70+
.background(MaterialColors.Blue200)
71+
repeat(7) {
72+
val randomPercentage = Random.nextFloat()
73+
Spacer(
74+
modifier = itemModifier
75+
.fillMaxWidth(randomPercentage)
76+
.align(Alignment.End)
77+
)
78+
}
79+
}
80+
// [END android_compose_layout_vertical_graph]
81+
}
82+
83+
@OptIn(ExperimentalLayoutApi::class)
84+
@Composable
85+
@Preview
86+
fun Layout_Graph_Horizontal() {
87+
val paddingModifier = Modifier.padding(4.dp)
88+
// [START android_compose_layout_horizontal_graph]
89+
Row(
90+
modifier = paddingModifier.height(200.dp),
91+
horizontalArrangement = Arrangement.spacedBy(4.dp)
92+
) {
93+
val itemModifier = Modifier
94+
.padding(4.dp)
95+
.weight(1f)
96+
.clip(RoundedCornerShape(8.dp))
97+
.background(MaterialColors.Blue200)
98+
repeat(7) { index ->
99+
val randomPercentage = Random.nextFloat()
100+
Spacer(
101+
modifier = itemModifier
102+
.align(Alignment.Bottom)
103+
.fillMaxHeight(randomPercentage)
104+
)
105+
}
106+
}
107+
// [END android_compose_layout_horizontal_graph]
108+
}
109+
110+
@Composable
111+
@Preview
112+
fun Layout_StretchAll() {
113+
// [START android_compose_layout_stretch_all]
114+
Row(
115+
modifier = Modifier.padding(4.dp),
116+
horizontalArrangement = Arrangement.spacedBy(4.dp)
117+
) {
118+
val itemModifier = Modifier
119+
.aspectRatio(1f)
120+
.weight(1f)
121+
.clip(RoundedCornerShape(8.dp))
122+
123+
Spacer(modifier = itemModifier.background(MaterialColors.Green200))
124+
Spacer(modifier = itemModifier.background(MaterialColors.Blue200))
125+
Spacer(modifier = itemModifier.background(MaterialColors.Pink200))
126+
Spacer(modifier = itemModifier.background(MaterialColors.Purple200))
127+
}
128+
// [END android_compose_layout_stretch_all]
129+
}
130+
131+
@Composable
132+
@Preview
133+
fun Layout_StretchMiddleItem() {
134+
// [START android_compose_layout_stretch_middle]
135+
Row(
136+
modifier = Modifier
137+
.padding(4.dp)
138+
.height(200.dp),
139+
horizontalArrangement = Arrangement.spacedBy(4.dp)
140+
) {
141+
val itemModifier = Modifier
142+
.fillMaxHeight()
143+
.width(48.dp)
144+
.clip(RoundedCornerShape(8.dp))
145+
146+
Spacer(modifier = itemModifier.background(MaterialColors.Green200))
147+
val middleStretchModifier = Modifier
148+
.fillMaxHeight()
149+
.weight(1f)
150+
.clip(RoundedCornerShape(8.dp))
151+
Spacer(modifier = middleStretchModifier.background(MaterialColors.Blue200))
152+
Spacer(modifier = itemModifier.background(MaterialColors.Pink200))
153+
}
154+
// [END android_compose_layout_stretch_middle]
155+
}

0 commit comments

Comments
 (0)