Un interruptor o un botón de cambio en Android es un elemento de la interfaz de usuario que se usa para cambiar entre dos estados al hacer clic. Se puede asumir como un botón booleano con dos valores diferentes. Algunos estados en los que puede encontrar un Switch en su dispositivo Android pueden ser Wi-Fi ON y OFF, Bluetooth ON y OFF, Dark Mode y Light Mode, etc.
En este artículo, le mostraremos cómo puede implementar un Botón de cambio y comprobar su Estado de control en Android utilizando Jetpack Compose . Siga los pasos a continuación una vez que el IDE esté listo.
Implementación paso a paso
Paso 1: crea un nuevo proyecto en Android Studio
Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Al elegir la plantilla, seleccione Actividad de composición vacía . Si no encuentra esta plantilla, intente actualizar Android Studio a la última versión. Demostramos la aplicación en Kotlin , así que asegúrese de seleccionar Kotlin como idioma principal al crear un nuevo proyecto.
Paso 2: trabajar con el archivo MainActivity.kt
Vaya al archivo MainActivity.kt y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity.kt . Se agregan comentarios dentro del código para comprender el código con más detalle.
Kotlin
package com.geeksforgeeks.jcswitch
import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
// Calling the composable function
// to display element and its contents
MainContent()
}
}
}
// Creating a composable
// function to display Top Bar
@Composable
fun MainContent() {
Scaffold(
topBar = { TopAppBar(title = { Text("GFG | Switch", color = Color.White) }, backgroundColor = Color(0xff0f9d58)) },
content = { MyContent() }
)
}
// Creating a composable function to
// create two Images and a spacer between them
// Calling this function as content
// in the above function
@Composable
fun MyContent(){
// Fetching the Local Context
val mContext = LocalContext.current
Column(Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center) {
// Declaring a boolean value for storing checked state
val mCheckedState = remember{ mutableStateOf(false)}
// Creating a Switch, when value changes,
// it updates mCheckedState value
Switch(checked = mCheckedState.value, onCheckedChange = {mCheckedState.value = it})
// Adding a Space of 100dp height
Spacer(modifier = Modifier.height(100.dp))
// Creating a Button to display mCheckedState
// value in a Toast when clicked
Button(onClick = {
Toast.makeText(mContext, mCheckedState.value.toString(), Toast.LENGTH_SHORT).show()
},
colors = ButtonDefaults.buttonColors(backgroundColor = Color(0XFF0F9D58)),
) {
Text("Show Checked State", color = Color.White)
}
}
}
// For displaying preview in
// the Android Studio IDE emulator
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
MainContent()
}
Producción:
Cuando ejecutes la aplicación verás que el Switch es inicialmente falso. Cuando haga clic en el botón, se mostrará un brindis con ‘falso’ escrito. Ahora, cuando hace clic en Cambiar, se vuelve verdadero y si se hace clic en el botón, se mostrará un brindis con ‘verdadero’ escrito. Puede ver que esto sucede en el siguiente video de esta aplicación.
Publicación traducida automáticamente
Artículo escrito por aashaypawar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA