Uso de Box en Jetpack Compose para Android | Operating systems, scripting, PowerShell and security

Android, Kotlin

package com.example.myapplication

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.myapplication.ui.theme.MyApplicationTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApplicationTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    MainContent()
                }
            }
        }
    }
}

@Composable
fun MainContent() {
    // Usar Box como FrameLayout
    Box(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp)
    ) {
        // Puedes colocar varios elementos en la misma posición
        Greeting("Android", Modifier.align(Alignment.TopStart))
        Greeting("Compose", Modifier.align(Alignment.BottomEnd))
    }
}

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Text(
        text = "Hello $name!",
        modifier = modifier
    )
}

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    MyApplicationTheme {
        MainContent()
    }
}

package com.example.myapplication

import android.os.Bundle

import androidx.activity.ComponentActivity

import androidx.activity.compose.setContent

import androidx.compose.foundation.layout.*

import androidx.compose.material3.MaterialTheme

import androidx.compose.material3.Surface

import androidx.compose.material3.Text

import androidx.compose.runtime.Composable

import androidx.compose.ui.Modifier

import androidx.compose.ui.tooling.preview.Preview

import androidx.compose.ui.unit.dp

import com.example.myapplication.ui.theme.MyApplicationTheme

class MainActivity : ComponentActivity() {

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContent {

MyApplicationTheme {

// A surface container using the 'background' color from the theme

Surface(

modifier = Modifier.fillMaxSize(),

color = MaterialTheme.colorScheme.background

) {

MainContent()

}

@Composable

fun MainContent() {

// Usar Box como FrameLayout

Box(

modifier = Modifier

.fillMaxSize()

.padding(16.dp)

) {

// Puedes colocar varios elementos en la misma posición

Greeting("Android", Modifier.align(Alignment.TopStart))

Greeting("Compose", Modifier.align(Alignment.BottomEnd))

}

@Composable

fun Greeting(name: String, modifier: Modifier = Modifier) {

Text(

text = "Hello $name!",

modifier = modifier

)

}

@Preview(showBackground = true)

@Composable

fun GreetingPreview() {

MyApplicationTheme {

MainContent()

}

Explicación del código:

MainContent:
- Se utiliza un Box en lugar de un Column o Row. Box permite apilar los elementos uno sobre otro.
- Los elementos dentro de Box se posicionan utilizando el modificador Modifier.align() que toma parámetros como Alignment.TopStart, Alignment.Center, Alignment.BottomEnd, etc.
- En el ejemplo, uno de los Greeting está alineado en la parte superior izquierda y el otro en la parte inferior derecha. Puedes ajustar estas posiciones según tus necesidades.
Greeting:
- La función Greeting permanece igual y recibe un modificador para posicionarse correctamente en Box.
GreetingPreview:
- El preview muestra cómo quedará la interfaz completa utilizando MainContent.
onCreate:
- En el método onCreate, se establece el contenido de la actividad llamando a MainContent dentro de Surface.

Uso de Box en Jetpack Compose para Android (Kotlin, Android)

Explicación del código:

LIBRO DE POWERSHELL

LO ÚLTIMO

VÍDEOS