Alinear elementos en Jetpack Compose para Android | Operating systems, scripting, PowerShell and security

Android

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 Column como LinearLayout vertical
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Greeting("Android")
        Spacer(modifier = Modifier.height(16.dp))
        Greeting("Compose")
    }
}

@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 Column como LinearLayout vertical

Column(

modifier = Modifier

.fillMaxSize()

.padding(16.dp),

verticalArrangement = Arrangement.Center,

horizontalAlignment = Alignment.CenterHorizontally

) {

Greeting("Android")

Spacer(modifier = Modifier.height(16.dp))

Greeting("Compose")

}

@Composable

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

Text(

text = "Hello $name!",

modifier = modifier

)

}

@Preview(showBackground = true)

@Composable

fun GreetingPreview() {

MyApplicationTheme {

MainContent()

}

En este código:

MainContent: Se ha creado una nueva función MainContent que organiza los elementos en una Column. Esta columna actúa como un LinearLayout vertical, centrando sus elementos vertical y horizontalmente, y añadiendo un espacio (Spacer) entre los dos Greeting.
Greeting: La función Greeting sigue igual, simplemente se utiliza dentro de MainContent para mostrar diferentes mensajes.
GreetingPreview: El preview ahora muestra MainContent en lugar de un solo Greeting, lo que permite ver cómo se verá la interfaz completa.
onCreate: En el método onCreate de MainActivity, se llama a MainContent dentro de Surface para aplicar el tema y el color de fondo.

Alinear elementos en Jetpack Compose para Android (Android)

LIBRO DE POWERSHELL

LO ÚLTIMO

VÍDEOS