Jetpack Compose es un nuevo conjunto de herramientas proporcionado por Google. Esto es útil para diseñar hermosos diseños de interfaz de usuario. Android TextView es una vista simple en Android que se utiliza para mostrar texto dentro de nuestra aplicación. En este artículo, veremos la implementación de TextView en Android usando Jetpack Compose.
Atributos del widget TextView
Atributos |
Descripción |
---|---|
texto | para establecer el texto que tenemos que mostrar dentro de nuestro TextView. |
estilo | para cambiar el estilo de TextView en Android. |
color | para cambiar el color de TextView. |
tamaño de fuente | para cambiar el tamaño de fuente de nuestro texto. |
fuentePeso | para establecer el peso de nuestra fuente, es decir. extra audaz, oscuro y muchos más |
Estilo de fuente | para establecer el estilo de fuente en cursiva. |
Familia tipográfica | para cambiar la familia tipográfica de nuestro texto. |
espaciado de letras | para establecer el espacio entre las letras de nuestro TextView. |
antecedentes | para establecer el color de fondo para nuestro TextView. |
sombra | para agregar sombra a nuestro TextView. |
texto alineado | para cambiar la alineación de nuestro TextView. |
modificador | el modificador se usa para agregar relleno a nuestro TextView. |
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: agregar TextView en 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
package com.example.edittext import android.os.Bundle import androidx.appcompat.app.AppCompatActivity import androidx.compose.foundation.layout.* import androidx.compose.material.MaterialTheme import androidx.compose.material.Surface import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.Shadow import androidx.compose.ui.platform.setContent import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.font.FontFamily import androidx.compose.ui.text.font.FontStyle import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.TextUnit import com.example.edittext.ui.EditTextTheme class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { EditTextTheme { // A surface container using the // 'background' color from the theme Surface( // to add background color for our screen. color = MaterialTheme.colors.background, ) { // here we are calling our Composable // function inside setContent method. TextView() } } } } } // below is the Composable function // which we have created for our TextView. @Composable fun TextView() { Column( // we are using column to align // our textview 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, ) { // TextView widget. androidx.compose.foundation.Text( // below line is for displaying // text in our text view. text = "Geeks for Geeks", // below line is used to add // style to our text view. style = TextStyle( // color is used to provide green // color to our text view. color = Color.Green, // font size to change the // size of our text view. fontSize = TextUnit.Sp(30), // font weight to bold such as light bold, // extra bold to our text view. fontWeight = FontWeight.Black, // font style is i=use to change style // of our text view to italic and normal. fontStyle = FontStyle.Italic, // font family is use to change // our font family to cursive. fontFamily = FontFamily.Cursive, // letter spacing i use to // provide between letters. letterSpacing = TextUnit.Companion.Sp(2), // background is use to specify background // color to our text view. background = Color.White, // shadow to make our // text view elevated. shadow = Shadow(color = Color.Gray), // textALign to align our text view // to center position. textAlign = TextAlign.Center, ), // modifier is use to give // padding to our text view. modifier = Modifier.padding(all = Dp(20.0F)) ) } } // @Preview function is use to see preview // for our composable function in preview section. @Preview @Composable fun DefaultPreview() { MaterialTheme { // we are passing our composable // function to display its preview. TextView() } }
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