Update Compose Version and Create Chip Row in Compose

This commit is contained in:
LooKeR 2022-03-10 00:12:19 +05:30
parent c8a61a59cd
commit 1126b5f425
3 changed files with 59 additions and 13 deletions

View File

@ -49,7 +49,7 @@ android {
} }
composeOptions { composeOptions {
kotlinCompilerExtensionVersion "1.2.0-alpha01" kotlinCompilerExtensionVersion "1.2.0-alpha05"
} }
buildTypes { buildTypes {
@ -167,13 +167,13 @@ dependencies {
kapt 'androidx.room:room-compiler:2.4.2' kapt 'androidx.room:room-compiler:2.4.2'
// Compose // Compose
implementation "androidx.compose.runtime:runtime:1.2.0-alpha04" implementation "androidx.compose.runtime:runtime:1.2.0-alpha05"
implementation "androidx.compose.ui:ui:1.2.0-alpha04" implementation "androidx.compose.ui:ui:1.2.0-alpha05"
implementation "androidx.compose.ui:ui-tooling:1.2.0-alpha04" implementation "androidx.compose.ui:ui-tooling:1.2.0-alpha05"
implementation "androidx.compose.foundation:foundation:1.2.0-alpha04" implementation "androidx.compose.foundation:foundation:1.2.0-alpha05"
implementation "androidx.compose.runtime:runtime-livedata:1.2.0-alpha04" implementation "androidx.compose.runtime:runtime-livedata:1.2.0-alpha05"
implementation "androidx.compose.material3:material3:1.0.0-alpha06" implementation "androidx.compose.material3:material3:1.0.0-alpha07"
implementation "androidx.compose.material:material:1.2.0-alpha04" implementation "androidx.compose.material:material:1.2.0-alpha05"
implementation "com.google.android.material:compose-theme-adapter:1.1.5" implementation "com.google.android.material:compose-theme-adapter:1.1.5"
} }

View File

@ -1,7 +1,6 @@
package com.looker.droidify.ui.compose.utils package com.looker.droidify.ui.compose.utils
import androidx.compose.animation.* import androidx.compose.animation.*
import androidx.compose.animation.core.animateDpAsState
import androidx.compose.foundation.ExperimentalFoundationApi import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.combinedClickable import androidx.compose.foundation.combinedClickable
import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Box
@ -19,7 +18,6 @@ import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import com.looker.droidify.ui.compose.theme.LocalShapes import com.looker.droidify.ui.compose.theme.LocalShapes
@OptIn(ExperimentalFoundationApi::class) @OptIn(ExperimentalFoundationApi::class)
@ -34,8 +32,9 @@ fun ExpandableCard(
mainContent: @Composable () -> Unit mainContent: @Composable () -> Unit
) { ) {
var expanded by rememberSaveable { mutableStateOf(preExpanded) } var expanded by rememberSaveable { mutableStateOf(preExpanded) }
val cardElevation by animateDpAsState(targetValue = if (expanded) 12.dp else 0.dp) val background by animateColorAsState(
val background by animateColorAsState(targetValue = backgroundColor) targetValue = if (expanded) MaterialTheme.colorScheme.surfaceVariant else backgroundColor
)
Surface( Surface(
modifier = Modifier modifier = Modifier
@ -45,7 +44,6 @@ fun ExpandableCard(
onClick = onClick, onClick = onClick,
onLongClick = { expanded = !expanded } onLongClick = { expanded = !expanded }
), ),
tonalElevation = cardElevation,
color = background color = background
) { ) {
Box(modifier = modifier, contentAlignment = Alignment.CenterStart) { Box(modifier = modifier, contentAlignment = Alignment.CenterStart) {

View File

@ -0,0 +1,48 @@
package com.looker.droidify.ui.compose.utils
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Chip
import androidx.compose.material.ChipColors
import androidx.compose.material.ChipDefaults
import androidx.compose.material.ExperimentalMaterialApi
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.unit.dp
@OptIn(ExperimentalMaterialApi::class)
@Composable
fun ChipRow(
modifier: Modifier = Modifier,
list: List<String>,
chipColors: ChipColors = ChipDefaults.chipColors(
backgroundColor = MaterialTheme.colorScheme.surface,
contentColor = MaterialTheme.colorScheme.primary.copy(alpha = ChipDefaults.ContentOpacity),
),
shapes: Shape = RoundedCornerShape(50),
onClick: (String) -> Unit
) {
LazyRow(
modifier = modifier,
horizontalArrangement = Arrangement.spacedBy(8.dp)
) {
items(list) {
Chip(
shape = shapes,
colors = chipColors,
onClick = { onClick(it) }
) {
Text(
text = it,
style = MaterialTheme.typography.labelLarge,
color = MaterialTheme.colorScheme.primary.copy(alpha = ChipDefaults.ContentOpacity)
)
}
}
}
}