De forma predeterminada, los textos componibles no se pueden seleccionar, lo que significa que los usuarios no pueden copiar texto de su aplicación y, para habilitar la selección de texto, debe envolver los elementos de texto en el contenedor de selección. En este artículo, usaremos Jetpack Compose de Android para crear esos chips. A continuación se muestra una imagen de muestra para dar una idea de lo que vamos a construir. Tenga en cuenta que vamos a implementar este proyecto utilizando el lenguaje Kotlin.
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.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.text.selection.DisableSelection
import androidx.compose.foundation.text.selection.SelectionContainer
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.jetpack_playground.ui.theme.Jetpack_playgroundTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
Jetpack_playgroundTheme {
// A surface container using the
// 'background' color from the theme
Surface(color = MaterialTheme.colors.background) {
// call the CustomSelectableText() function
// it is defined below
Column {
CustomSelectableText()
}
}
}
}
}
}
// create a composable function
// for the selectable text.
// Wrap the text inside SelectionContainer()
// in order to make it selectable
@Composable
fun CustomSelectableText() {
SelectionContainer() {
Column() {
Text(
text = "Welcome to Geeks for Geeks,A Computer Science portal for geeks." +
"It contains well written, well thought and well explained computer " +
"science and programming articles, quizzes and ...",
textAlign = TextAlign.Center,
modifier = Modifier
.padding(start = 10.dp, top = 20.dp)
.fillMaxWidth()
)
}
}
}
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
Jetpack_playgroundTheme {
CustomSelectableText()
}
}
Producción: