TextView en Android usando Jetpack Compose

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: 

TextView in Android using Jetpack Compose Output

Publicación traducida automáticamente

Artículo escrito por chaitanyamunje y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *