Skip to content

Commit 2a478c4

Browse files
IanGCliftonIanGClifton
authored
Added Compose adaptive layouts snippets (#165)
* Added Compose adaptive layouts snippets * Apply Spotless * Fixed region tags --------- Co-authored-by: Ian G. Clifton <[email protected]>
1 parent af17252 commit 2a478c4

File tree

3 files changed

+207
-0
lines changed

3 files changed

+207
-0
lines changed

‎compose/snippets/build.gradle.kts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,8 @@ dependencies {
9191
implementation(libs.androidx.compose.animation.graphics)
9292

9393
implementation(libs.androidx.compose.material3)
94+
implementation(libs.androidx.compose.material3.adaptive)
95+
implementation(libs.androidx.compose.material3.adaptive.navigation.suite)
9496
implementation(libs.androidx.compose.material)
9597

9698
implementation(libs.androidx.compose.runtime)

‎compose/snippets/src/main/java/com/example/compose/snippets/adaptivelayouts/SampleListDetailPaneScaffold.kt‎

Lines changed: 202 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
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.adaptivelayouts
18+
19+
import androidx.compose.foundation.background
20+
import androidx.compose.foundation.clickable
21+
import androidx.compose.foundation.layout.Column
22+
import androidx.compose.foundation.layout.Spacer
23+
import androidx.compose.foundation.layout.fillMaxSize
24+
import androidx.compose.foundation.layout.padding
25+
import androidx.compose.foundation.layout.size
26+
import androidx.compose.foundation.lazy.LazyColumn
27+
import androidx.compose.material3.Card
28+
import androidx.compose.material3.ListItem
29+
import androidx.compose.material3.Text
30+
import androidx.compose.material3.adaptive.ExperimentalMaterial3AdaptiveApi
31+
import androidx.compose.material3.adaptive.ListDetailPaneScaffold
32+
import androidx.compose.material3.adaptive.ListDetailPaneScaffoldRole
33+
import androidx.compose.material3.adaptive.rememberListDetailPaneScaffoldState
34+
import androidx.compose.runtime.Composable
35+
import androidx.compose.runtime.getValue
36+
import androidx.compose.runtime.mutableStateOf
37+
import androidx.compose.runtime.saveable.rememberSaveable
38+
import androidx.compose.runtime.setValue
39+
import androidx.compose.ui.Modifier
40+
import androidx.compose.ui.graphics.Color
41+
import androidx.compose.ui.tooling.preview.Preview
42+
import androidx.compose.ui.unit.dp
43+
import androidx.compose.ui.unit.sp
44+
45+
@OptIn(ExperimentalMaterial3AdaptiveApi::class)
46+
@Composable
47+
fun SampleListDetailPaneScaffoldParts() {
48+
// [START android_compose_adaptivelayouts_sample_list_detail_pane_scaffold_part02]
49+
val state = rememberListDetailPaneScaffoldState()
50+
// [END android_compose_adaptivelayouts_sample_list_detail_pane_scaffold_part02]
51+
52+
// [START android_compose_adaptivelayouts_sample_list_detail_pane_scaffold_part01]
53+
var selectedItem: MyItem? by rememberSaveable { mutableStateOf(null) }
54+
// [END android_compose_adaptivelayouts_sample_list_detail_pane_scaffold_part01]
55+
56+
// [START android_compose_adaptivelayouts_sample_list_detail_pane_scaffold_part03]
57+
ListDetailPaneScaffold(
58+
scaffoldState = state,
59+
/* ... */
60+
// [START_EXCLUDE]
61+
listPane = {},
62+
detailPane = {},
63+
// [END_EXCLUDE]
64+
)
65+
// [END android_compose_adaptivelayouts_sample_list_detail_pane_scaffold_part03]
66+
67+
// [START android_compose_adaptivelayouts_sample_list_detail_pane_scaffold_part04]
68+
ListDetailPaneScaffold(
69+
scaffoldState = state,
70+
listPane = {
71+
MyList(
72+
onItemClick = { id ->
73+
// Set current item
74+
selectedItem = id
75+
// Switch focus to details pane
76+
state.navigateTo(ListDetailPaneScaffoldRole.Detail)
77+
}
78+
)
79+
},
80+
/* ... */
81+
// [START_EXCLUDE]
82+
detailPane = {},
83+
// [END_EXCLUDE]
84+
)
85+
// [END android_compose_adaptivelayouts_sample_list_detail_pane_scaffold_part04]
86+
87+
// [START android_compose_adaptivelayouts_sample_list_detail_pane_scaffold_part05]
88+
ListDetailPaneScaffold(
89+
scaffoldState = state,
90+
listPane = /* ... */
91+
// [START_EXCLUDE]
92+
{},
93+
// [END_EXCLUDE]
94+
detailPane = {
95+
selectedItem?.let { item ->
96+
MyDetails(item)
97+
}
98+
},
99+
)
100+
// [END android_compose_adaptivelayouts_sample_list_detail_pane_scaffold_part05]
101+
}
102+
103+
@OptIn(ExperimentalMaterial3AdaptiveApi::class)
104+
@Preview
105+
@Composable
106+
fun SampleListDetailPaneScaffoldFull() {
107+
// [START android_compose_adaptivelayouts_sample_list_detail_pane_scaffold_full]
108+
// Create the ListDetailPaneScaffoldState
109+
val state = rememberListDetailPaneScaffoldState()
110+
111+
// Currently selected item
112+
var selectedItem: MyItem? by rememberSaveable { mutableStateOf(null) }
113+
114+
ListDetailPaneScaffold(
115+
scaffoldState = state,
116+
listPane = {
117+
MyList(
118+
onItemClick = { id ->
119+
// Set current item
120+
selectedItem = id
121+
// Display the details pane
122+
state.navigateTo(ListDetailPaneScaffoldRole.Detail)
123+
},
124+
)
125+
},
126+
detailPane = {
127+
// Show the details pane content if selected item is available
128+
selectedItem?.let { item ->
129+
MyDetails(item)
130+
}
131+
},
132+
)
133+
// [END android_compose_adaptivelayouts_sample_list_detail_pane_scaffold_full]
134+
}
135+
136+
@Composable
137+
fun MyList(
138+
onItemClick: (MyItem) -> Unit,
139+
) {
140+
Card {
141+
LazyColumn {
142+
shortStrings.forEachIndexed { id, string ->
143+
item {
144+
ListItem(
145+
modifier = Modifier
146+
.background(Color.Magenta)
147+
.clickable {
148+
onItemClick(MyItem(id))
149+
},
150+
headlineContent = {
151+
Text(
152+
text = string,
153+
)
154+
},
155+
)
156+
}
157+
}
158+
}
159+
}
160+
}
161+
162+
@Composable
163+
fun MyDetails(item: MyItem) {
164+
val text = shortStrings[item.id]
165+
Card {
166+
Column(
167+
Modifier
168+
.fillMaxSize()
169+
.padding(16.dp)
170+
) {
171+
Text(
172+
text = "Details page for $text",
173+
fontSize = 24.sp,
174+
)
175+
Spacer(Modifier.size(16.dp))
176+
Text(
177+
text = "TODO: Add great details here"
178+
)
179+
}
180+
}
181+
}
182+
183+
class MyItem(val id: Int)
184+
185+
val shortStrings = listOf(
186+
"Android",
187+
"Petit four",
188+
"Cupcake",
189+
"Donut",
190+
"Eclair",
191+
"Froyo",
192+
"Gingerbread",
193+
"Honeycomb",
194+
"Ice cream sandwich",
195+
"Jelly bean",
196+
"Kitkat",
197+
"Lollipop",
198+
"Marshmallow",
199+
"Nougat",
200+
"Oreo",
201+
"Pie",
202+
)

‎gradle/libs.versions.toml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ kotlin = "1.8.21"
3232
ksp = "1.8.0-1.0.9"
3333
maps-compose = "3.1.1"
3434
material = "1.11.0-beta01"
35+
material3-adaptive = "1.0.0-alpha01"
3536
# @keep
3637
minSdk = "21"
3738
recyclerview = "1.3.2"
@@ -54,6 +55,8 @@ androidx-compose-foundation-layout = { module = "androidx.compose.foundation:fou
5455
androidx-compose-material = { module = "androidx.compose.material:material" }
5556
androidx-compose-material-iconsExtended = { module = "androidx.compose.material:material-icons-extended" }
5657
androidx-compose-material3 = { module = "androidx.compose.material3:material3" }
58+
androidx-compose-material3-adaptive = { module = "androidx.compose.material3:material3-adaptive", version.ref = "material3-adaptive" }
59+
androidx-compose-material3-adaptive-navigation-suite = { module = "androidx.compose.material3:material3-adaptive-navigation-suite", version.ref = "material3-adaptive" }
5760
androidx-compose-materialWindow = { module = "androidx.compose.material3:material3-window-size-class" }
5861
androidx-compose-runtime = { module = "androidx.compose.runtime:runtime" }
5962
androidx-compose-runtime-livedata = { module = "androidx.compose.runtime:runtime-livedata" }

0 commit comments

Comments
 (0)