Jetpack Compose es un nuevo conjunto de herramientas proporcionado por Google. Esto es útil para diseñar hermosos diseños de interfaz de usuario. Un botón es un componente de la interfaz de usuario en Android que se utiliza para navegar entre diferentes pantallas. Con la ayuda de un botón, el usuario puede interactuar con su aplicación y realizar múltiples acciones dentro de su aplicación. En este artículo, veremos la implementación de botones en Android usando Jetpack compose.
Atributos del widget de botón
Atributo |
Descripción |
---|---|
al hacer clic | Para realizar una acción cuando el usuario hace clic en su botón. |
modificador | este parámetro se usa para agregar relleno a nuestro botón. |
activado | para habilitar o deshabilitar su botón. |
borde | este parámetro se usa para agregar un trazo de borde a nuestro botón. |
forma | este parámetro se usa para agregar forma a nuestro botón. |
Texto() | este parámetro se utilizará para agregar texto que se mostrará en su botón. |
Implementación paso a paso
Paso 1: Crear un Nuevo Proyecto.
Para crear un nuevo proyecto en la versión Canary de Android Studio, consulte Cómo crear un nuevo proyecto en la versión Canary de Android Studio con Jetpack Compose .
Paso 2: trabajar con el archivo MainActivity.kt
Vaya a la aplicación > java > el nombre del paquete de su aplicación y abra el archivo MainActivity.kt . Dentro de ese archivo, agregue el siguiente código. Se agregan comentarios dentro del código para comprender el código con más detalle.
Kotlin
import android.graphics.drawable.shapes.Shape import android.media.Image import android.os.Bundle import android.widget.Toast import androidx.appcompat.app.AppCompatActivity import androidx.compose.foundation.BorderStroke import androidx.compose.foundation.Image import androidx.compose.foundation.Text import androidx.compose.foundation.layout.* import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.text.KeyboardOptions import androidx.compose.material.* import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.AccountCircle import androidx.compose.material.icons.filled.Info import androidx.compose.material.icons.filled.Phone import androidx.compose.runtime.* import androidx.compose.runtime.savedinstancestate.savedInstanceState import androidx.compose.ui.Alignment import androidx.compose.ui.layout.ContentScale import androidx.compose.ui.platform.setContent import androidx.compose.ui.res.imageResource import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import com.example.gfgapp.ui.GFGAppTheme import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.SolidColor import androidx.compose.ui.platform.ContextAmbient import androidx.compose.ui.res.colorResource import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.font.FontFamily import androidx.compose.ui.text.input.* import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.TextUnit class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { GFGAppTheme { // A surface container using the 'background' // color from the theme Surface(color = MaterialTheme.colors.background) { // at below line we are calling // our function for button. MyButton(); } } } } } // @Preview function is use to see preview // for our composable function in preview section. @Preview(showBackground = true) @Composable fun DefaultPreview() { GFGAppTheme { // we are passing our composable // function to display its preview. MyButton(); } } @Composable fun MyButton() { Column( // we are using column to align our // imageview to center of the screen. modifier = Modifier.fillMaxWidth().fillMaxHeight(), // below line is used for specifying // vertical arrangement. verticalArrangement = Arrangement.Center, // below line is used for specifying // horizontal arrangement. horizontalAlignment = Alignment.CenterHorizontally, ) { // below line is use to get // the context for our app. val context = ContextAmbient.current // below line is use to create a button. Button( // below line is use to add onclick // parameter for our button onclick onClick = { // when user is clicking the button // we are displaying a toast message. Toast.makeText(context, "Welcome to Geeks for Geeks", Toast.LENGTH_LONG).show() }, // in below line we are using modifier // which is use to add padding to our button modifier = Modifier.padding(all = Dp(10F)), // below line is use to set or // button as enable or disable. enabled = true, // below line is use to // add border to our button. border = BorderStroke(width = 1.dp, brush = SolidColor(Color.Blue)), // below line is use to add shape for our button. shape = MaterialTheme.shapes.medium, ) // below line is use to // add text on our button { Text(text = "Geeks for Geeks", color = Color.White) } } }
Producción:
Publicación traducida automáticamente
Artículo escrito por chaitanyamunje y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA