Uso de Box con Modifier.offset en Jetpack Compose para Android (simular RelativeLayout) | 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.Alignment
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.IntOffset
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.tooling.preview.Preview
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 para simular RelativeLayout
    Box(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp)
    ) {
        // Greeting alineado al centro del Box
        Greeting("Android", Modifier.align(Alignment.Center))

        // Greeting alineado al centro del Box pero desplazado hacia abajo
        Greeting("Compose", Modifier
            .align(Alignment.Center)
            .offset(y = 50.dp)
        )

        // Greeting alineado a la esquina inferior derecha
        Greeting("Bottom Right", Modifier
            .align(Alignment.BottomEnd)
            .padding(16.dp)
        )
    }
}

@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.Alignment

import androidx.compose.ui.unit.dp

import androidx.compose.ui.unit.IntOffset

import androidx.compose.ui.geometry.Offset

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

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 para simular RelativeLayout

Box(

modifier = Modifier

.fillMaxSize()

.padding(16.dp)

) {

// Greeting alineado al centro del Box

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

// Greeting alineado al centro del Box pero desplazado hacia abajo

Greeting("Compose", Modifier

.align(Alignment.Center)

.offset(y = 50.dp)

)

// Greeting alineado a la esquina inferior derecha

Greeting("Bottom Right", Modifier

.align(Alignment.BottomEnd)

.padding(16.dp)

)

}

@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:
- Utiliza un Box para contener los elementos y simular el comportamiento de RelativeLayout.
- Se coloca el primer Greeting en el centro del Box usando Modifier.align(Alignment.Center).
- El segundo Greeting está alineado en el centro pero desplazado hacia abajo usando Modifier.offset(y = 50.dp).
- El tercer Greeting está alineado en la esquina inferior derecha con Modifier.align(Alignment.BottomEnd) y se le aplica un padding para separarlo de los bordes.
Greeting:
- La función Greeting sigue siendo simple, mostrando un texto y aceptando un modificador para ajustar su posición.
GreetingPreview:
- El preview muestra cómo se vería la interfaz completa con MainContent.
onCreate:
- En el método onCreate, el contenido de la actividad se establece llamando a MainContent dentro de Surface.

Uso de Box con Modifier.offset en Jetpack Compose para Android (simular RelativeLayout) (Kotlin, Android)

Explicación del código:

LIBRO DE POWERSHELL

LO ÚLTIMO

VÍDEOS