Android Jetpack Farbverlauf erstellen

Lesezeit: 2 Minuten

Ist es möglich, mit Jetpack Compose einen Farbverlauf über ein Bild zu zeichnen, das gezeichnet werden kann?

fun HeroCover() {
    Column {
        val image = +imageResource(R.drawable.edge_of_tomorrow_poster)
        Container(modifier = Height(440.dp) wraps Expanded) {
            Clip(shape = RoundedCornerShape(8.dp)) {
                DrawImage(image = image)
            }
        }
    }
}

Ich möchte einen durchscheinenden Farbverlauf über dem Bild zeichnen.

  • Könnten Sie bitte ein Bild der erforderlichen Ausgabe bereitstellen.

    – Rajnish suryavanshi

    19. Dezember 2019 um 6:52 Uhr

  • stackoverflow.com/a/65697832/14004870 Verweisen Sie auf diese Antwort. Ich hoffe, sie hilft Ihnen.

    Benutzer14004870

    28. Oktober 2021 um 15:19 Uhr

Benutzeravatar von Luis Fer Garcia
Luis Fer García

Versuche dies:

Box(
    modifier = Modifier
        .background(
            brush = Brush.verticalGradient(
                colors = listOf(
                    MaterialTheme.colors.primary,
                    MaterialTheme.colors.primaryVariant
                )
            )
        )
) {
    Content()
}

  • Dadurch wird das Problem gelöst und die neuesten API-Änderungen von Compose nach BETA erfüllt

    – AouledIssa

    29. Oktober 2021 um 12:32 Uhr

  • Perfekter Code in Jetpack Compose!

    – Hossein Badrnezhad

    27. Juni um 14:13 Uhr

Benutzeravatar von Vinay Gaba
Vinay Gaba

Hier ist ein Beispiel dafür, wie ein LinearGradientShader in Compose für ein Paint-Objekt verwendet wird. Ich kann mir vorstellen, dass Sie etwas Ähnliches verwenden könnten, um zu bekommen, was Sie wollen

https://gist.github.com/lelandrichardson/35b2743e1acd5d672f963f92aca57d4a#file-shimmer-kt-L83

Aktualisieren: Hier ist eine andere Möglichkeit, über die ich in kotlin lang slack-Kanälen gestolpert bin –

Box(
    modifier = Modifier
        .preferredSize(500.dp, 500.dp)
        .drawBackground(
            HorizontalGradient(
                0.0f to Color.Red,
                0.5f to Color.Green,
                1.0f to Color.Blue,
                startX = Px.Zero,
                endX = 500.dp.toPx()
            )
        )
)

Quelle: https://kotlinlang.slack.com/archives/CJLTWPH7S/p1590430288092800

  • Ich kann die Funktion toPx() nicht finden

    – David Ibrahim

    29. November 2020 um 9:05 Uhr

  • zum toPx() Methode finden Sie unter http://stackoverflow.com/a/65921800/75579

    – Ich bin ein Froschdrache

    10. März 2021 um 14:04 Uhr

  • Veraltet, die Antwort von Luis ist einfacher und funktioniert einfach.

    – Rocknow

    22. Juli 2021 um 9:05 Uhr

Hier ist ein vom Jetsnack-Beispielcode inspirierter Weg: Ersetzen Sie transparent & darkChocolate durch Ihre eigenen Farben.

@Composable
fun GradientView(modifier: Modifier = Modifier) {
    Box(modifier = modifier.verticalGradientBackground(listOf(transparent, darkChocolate)))
}

fun Modifier.verticalGradientBackground(
        colors: List<Color>
) = drawWithCache {
    val gradient = VerticalGradient(startY = 0.0f, endY = size.width, colors = colors)
    onDraw {
        drawRect(brush = gradient)
    }
}

1431950cookie-checkAndroid Jetpack Farbverlauf erstellen

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy