Un degradado de color es un esquema de color que consta de dos o más colores, donde hay una transición de color entre dos colores cualesquiera. En Jetpack Compose, podemos facilitar degradados horizontales, verticales y radiales con la ayuda de bibliotecas integradas. Sin embargo, para cualquiera de estos tres, necesitamos diseñar un programa personalizado. A continuación se muestra una imagen de muestra para tener una idea de lo que vamos a hacer en este artículo.
Entonces, en este artículo, le mostraremos cómo puede crear un degradado de color en ángulo en Android usando Jetpack Compose . Siga los pasos a continuación una vez que el IDE esté listo.
Implementación paso a paso
Paso 1: crea un nuevo proyecto en Android Studio
Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Al elegir la plantilla, seleccione Actividad de composición vacía . Si no encuentra esta plantilla, intente actualizar Android Studio a la última versión. Demostramos la aplicación en Kotlin , así que asegúrese de seleccionar Kotlin como idioma principal al crear un nuevo proyecto.
Paso 2: trabajar con el archivo MainActivity.kt
Vaya al archivo MainActivity.kt y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity.kt . Se agregan comentarios dentro del código para comprender el código con más detalle.
Kotlin
package com.geeksforgeeks.angledgradient
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawBehind
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import java.lang.Math.*
import kotlin.math.pow
import kotlin.math.sqrt
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
// Creating a Simple Scaffold
// Layout for the application
Scaffold(
// Creating a Top Bar
topBar = { TopAppBar(title = { Text("GFG | Angled Background Gradient", color = Color.White) }, backgroundColor = Color(0xff0f9d58)) },
// Creating Content
content = {
// Creating a Column Layout
Column(Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center) {
// Create a Box Modifier and apply the gradient background function
// Colors are set to Red and Green and Angle is set to 45 Degrees clockwise
Box(Modifier.fillMaxSize().gradientBackground(listOf(Color.Red, Color.Green), angle = 45f))
}
}
)
}
}
// Creating a customized function for angled color gradient
private fun Modifier.gradientBackground(colors: List<Color>, angle: Float) = this.then(
Modifier.drawBehind {
// Setting the angle in radians
val angleRad = angle / 180f * PI
// Fractional x
val x = kotlin.math.cos(angleRad).toFloat()
// Fractional y
val y = kotlin.math.sin(angleRad).toFloat()
// Set the Radius and offset as shown below
val radius = sqrt(size.width.pow(2) + size.height.pow(2)) / 2f
val offset = center + Offset(x * radius, y * radius)
// Setting the exact offset
val exactOffset = Offset(
x = kotlin.math.min(offset.x.coerceAtLeast(0f), size.width),
y = size.height - kotlin.math.min(offset.y.coerceAtLeast(0f), size.height)
)
// Draw a rectangle with the above values
drawRect(
brush = Brush.linearGradient(
colors = colors,
start = Offset(size.width, size.height) - exactOffset,
end = exactOffset
),
size = size
)
}
)
}
Producción:
Puede ver que podemos crear un degradado de color en ángulo de 45 grados.
Publicación traducida automáticamente
Artículo escrito por aashaypawar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA