Формы в Jetpack составляют AndroidAndroid

Форум для тех, кто программирует под Android
Ответить
Anonymous
 Формы в Jetpack составляют Android

Сообщение Anonymous »

Я пытаюсь создать в Jetpack Compose собственную карточку определенной формы. Я хочу, чтобы карточка напоминала определенную форму (как показано на изображении ниже) с закругленными углами и произвольным контуром.
Я начал с кода ниже, но не уверен как настроить кривые и форму, чтобы они точно соответствовали изображению. Вот изображение формы целевой карты:
Изображение
Как сделать фон похожим на картинку?
Вот мой код, я пробовал, но не смог добиться подобной формы.
@Composable
fun CustomCard(
modifier: Modifier = Modifier,
content: @Composable () -> Unit,
) {
val radius = with(LocalDensity.current) { 19.dp.toPx() }
val cornerRadiusDp = 80.dp
val cornerRadius = with(LocalDensity.current) { cornerRadiusDp.toPx() }

val padding = 10.dp

// Create a custom shape
val shape = remember {
GenericShape { size, _ ->
val width = size.width
val height = size.height

moveTo(0f, radius)
quadraticTo(0f, 0f, radius, 0f)
lineTo(width - cornerRadius - radius, 0f)
quadraticTo(width - cornerRadius, 0f, width - cornerRadius, radius)

quadraticTo(width - 1.1f*cornerRadius, 1.1f*cornerRadius, width - radius, cornerRadius)

quadraticTo(width, cornerRadius, width, cornerRadius + radius)

lineTo(width, height - radius)
quadraticTo(width, height, width - radius, height)

lineTo(radius, height)
quadraticTo(0f, height, 0f, height - radius)

lineTo(0f, radius)
}
}

Box(modifier = modifier) {
Card(
modifier = Modifier.fillMaxSize(),
shape = shape,
colors = CardDefaults.cardColors(
containerColor = Color(0xFFBFE8FB)
)
) {
content()
}

Box(
modifier = Modifier
.size(cornerRadiusDp - padding)
.align(Alignment.TopEnd)
.background(
color = Color.Blue,
shape = CircleShape
)
){
Text(
text = "1",
color = Color.White,
modifier = Modifier.align(Alignment.Center)
)
}
}
}

@Preview
@Composable
fun ContextCardPreview() {
Column(modifier = Modifier.background(Color.Red)){
Box(
modifier = Modifier.fillMaxSize(),
contentAlignment = Alignment.Center
) {
CustomCard(modifier = Modifier
.width(200.dp)
.height(180.dp)
) {

val price = buildAnnotatedString {
withStyle(SpanStyle(color = Color.Green)) { append("$") }
append("0.00")
}

val labelStyle = remember {
TextStyle(fontSize = 18.sp, fontWeight = FontWeight.Light)
}

val priceStyle = remember {
TextStyle(fontSize = 18.sp, fontWeight = FontWeight.Bold)
}

Column(
modifier = Modifier.padding(10.dp)
) {
Text(text = "Text", fontSize = 18.sp)
//Text(text = price, style = priceStyle)

Spacer(modifier = Modifier.weight(0.8f))

Text(text = "Text", style = labelStyle)

Spacer(modifier = Modifier.weight(0.5f))
Text(text = price, style = priceStyle)
Spacer(modifier = Modifier.weight(0.04f))
}
}
}

}
}


Подробнее здесь: https://stackoverflow.com/questions/790 ... se-android
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Android»