EditText es uno de los widgets más importantes que se ve en la mayoría de las aplicaciones. Este widget generalmente se usa para obtener los datos de los usuarios. Los usuarios pueden comunicarse directamente con la aplicación usando este widget. Este widget se utiliza para obtener los datos del usuario en forma de números, texto o cualquier otro texto. En este artículo, veremos la implementación del widget EditText en Android usando Jetpack Compose .
Atributos del widget EditText
|
Atributos |
Descripción |
|---|---|
| valor | El valor se usa para obtener el valor ingresado del usuario en el campo de texto. |
| marcador de posición |
si el campo de texto está vacío, estamos mostrando una pista al usuario de lo que tiene que entrar en el campo de texto. |
| Opciones de teclado |
keyboardOptions se usa para agregar mayúsculas en los datos que se ingresan mediante usuario en el campo de texto, también podemos especificar la opción de corrección automática en esto. podemos especificar el tipo de teclado que tenemos que mostrar como (teléfono, texto) y para mostrar acciones que se pueden realizar desde el propio teclado. |
| estilo de texto | para agregar estilo al texto ingresado por el usuario. Se utiliza para agregar familia de fuentes, tamaño de fuente y estilo a nuestro texto. |
| lineas maximas | para agregar líneas máximas para nuestro campo de entrada de texto. |
| Color activo |
el color activo se usa cuando el usuario hace clic en editar texto o el campo de texto está enfocado y introduciendo algunos datos en el campo de texto. |
| linea sola | En esto, tenemos que especificar un valor booleano para evitar mover la entrada del usuario en varias líneas. |
| Color inactivo | El color inactivo se especifica cuando el usuario no está enfocado en nuestro campo de entrada de texto. |
| color de fondo | para especificar el color de fondo para nuestro campo de entrada de texto. |
| líderIcono |
Este método se usa para agregar un ícono principal a nuestro campo de entrada de texto. Con este método también podemos especificar color (tinte) para nuestro icono. |
| Icono de seguimiento |
Este método se usa para agregar un ícono final a nuestro campo de entrada de texto. Con este método también podemos especificar color (tinte) para nuestro icono. |
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 EditText 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.gfgapp
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 text field.
TxtField();
}
}
}
}
}
@Composable
fun TxtField() {
// we are creating a variable for
// getting a value of our text field.
val inputvalue = remember { mutableStateOf(TextFieldValue()) }
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,
)
{
TextField(
// below line is used to get
// value of text field,
value = inputvalue.value,
// below line is used to get value in text field
// on value change in text field.
onValueChange = { inputvalue.value = it },
// below line is used to add placeholder
// for our text field.
placeholder = { Text(text = "Enter user name") },
// modifier is use to add padding
// to our text field.
modifier = Modifier.padding(all = 16.dp).fillMaxWidth(),
// keyboard options is used to modify
// the keyboard for text field.
keyboardOptions = KeyboardOptions(
// below line is use for capitalization
// inside our text field.
capitalization = KeyboardCapitalization.None,
// below line is to enable auto
// correct in our keyboard.
autoCorrect = true,
// below line is used to specify our
// type of keyboard such as text, number, phone.
keyboardType = KeyboardType.Text,
),
// below line is use to specify
// styling for our text field value.
textStyle = TextStyle(color = Color.Black,
// below line is used to add font
// size for our text field
fontSize = TextUnit.Companion.Sp(value = 15),
// below line is use to change font family.
fontFamily = FontFamily.SansSerif),
// below line is use to give
// max lines for our text field.
maxLines = 2,
// active color is use to change
// color when text field is focused.
activeColor = colorResource(id = R.color.purple_200),
// single line boolean is use to avoid
// textfield entering in multiple lines.
singleLine = true,
// inactive color is use to change
// color when text field is not focused.
inactiveColor = Color.Gray,
// below line is use to specify background
// color for our text field.
backgroundColor = Color.LightGray,
// leading icon is use to add icon
// at the start of text field.
leadingIcon = {
// In this method we are specifying
// our leading icon and its color.
Icon(Icons.Filled.AccountCircle, tint = colorResource(id = R.color.purple_200))
},
// trailing icons is use to add
// icon to the end of tet field.
trailingIcon = {
Icon(Icons.Filled.Info, tint = colorResource(id = R.color.purple_200))
},
)
}
}
// @Preview function is use to see preview
// for our composable function in preview section
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
GFGAppTheme {
TxtField()
}
}
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