🔧 PRAKTIJK: Android UI Interactie week 2

Hoe maak je een knop in Jetpack Compose?

Button(
    onClick = { /* actie wanneer geklikt */ },
    enabled = true // optioneel, standaard true
) {
    Text("Klik hier")
}

Hoe beheer je state in een Compose UI?

Gebruik remember en mutableStateOf:

// Importeer deze
import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember

@Composable
fun Counter() {
    var count by remember { mutableStateOf(0) }
    
    Column {
        Text("Count: $count")
        Button(onClick = { count++ }) {
            Text("Increment")
        }
    }
}

Hoe genereer je een random getal in Kotlin?

// Random getal tussen 1 en 6 (inclusief)
val randomNumber = (1..6).random()

// Of met Random klasse
val random = Random.nextInt(1, 7) // 1 t/m 6

Hoe maak je een knop die de UI bijwerkt?

@Composable
fun DiceRoller() {
    var result by remember { mutableStateOf(1) }
    
    Column(
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Image(
            painter = painterResource(id = when(result) {
                1 -> R.drawable.dice_1
                2 -> R.drawable.dice_2
                3 -> R.drawable.dice_3
                4 -> R.drawable.dice_4
                5 -> R.drawable.dice_5
                else -> R.drawable.dice_6
            }),
            contentDescription = "Dice with $result"
        )
        
        Button(onClick = { result = (1..6).random() }) {
            Text("Roll")
        }
    }
}

Wat is een Scaffold in Jetpack Compose?

Een Scaffold is een layout component die een basis app-structuur biedt met slots voor topBar, bottomBar, floatingActionButton, etc.:

Scaffold(
    topBar = {
        TopAppBar(title = { Text("My App") })
    },
    bottomBar = {
        BottomAppBar { /* content */ }
    },
    floatingActionButton = {
        FloatingActionButton(onClick = { /* action */ }) {
            Icon(Icons.Default.Add, contentDescription = "Add")
        }
    }
) { innerPadding ->
    // Main content
    Box(modifier = Modifier.padding(innerPadding)) {
        Text("Content goes here")
    }
}

Hoe toon je een afbeelding in Jetpack Compose?

// Voor een resource in de drawable map
Image(
    painter = painterResource(id = R.drawable.my_image),
    contentDescription = "Image description",
    modifier = Modifier.size(200.dp)
)

// Voor een vector icoon
Image(
    imageVector = Icons.Default.Person,
    contentDescription = "Person icon",
    modifier = Modifier.size(48.dp)
)

Wat is een Spacer in Jetpack Compose?

Een Spacer is een lege composable die ruimte inneemt tussen andere elementen:

Column {
    Text("First text")
    Spacer(modifier = Modifier.height(16.dp))
    Text("Second text")
}

Row {
    Text("Left text")
    Spacer(modifier = Modifier.width(16.dp))
    Text("Right text")
}

Wat is een Modifier in Jetpack Compose?

Een Modifier is een object dat wordt gebruikt om de layout, gedrag, uiterlijk of interactiviteit van een composable te wijzigen:

Text(
    text = "Hello World",
    modifier = Modifier
        .padding(16.dp)
        .background(Color.Gray)
        .clickable { /* action */ }
        .fillMaxWidth()
)

Hoe werkt een Column in Jetpack Compose?

Een Column plaatst elementen verticaal onder elkaar:

Column(
    modifier = Modifier.fillMaxSize(),
    verticalArrangement = Arrangement.Center,
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Text("First item")
    Text("Second item")
    Text("Third item")
}

Hoe werkt een Row in Jetpack Compose?

Een Row plaatst elementen horizontaal naast elkaar:

Row(
    modifier = Modifier.fillMaxWidth(),
    horizontalArrangement = Arrangement.SpaceBetween,
    verticalAlignment = Alignment.CenterVertically
) {
    Text("Left")
    Text("Center")
    Text("Right")
}

Hoe werkt een Box in Jetpack Compose?

Een Box stapelt elementen bovenop elkaar, vergelijkbaar met FrameLayout in de traditionele Android View systeem:

Box(
    modifier = Modifier.size(100.dp),
    contentAlignment = Alignment.Center
) {
    // Achtergrond (onderste laag)
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.Gray)
    )
    
    // Voorgrond (bovenste laag)
    Text("Centered text")
}

Wat is LaunchedEffect in Jetpack Compose?

LaunchedEffect is een composable functie die een coroutine start wanneer het in de compositie komt en annuleert wanneer het de compositie verlaat:

@Composable
fun TimerExample() {
    var seconds by remember { mutableStateOf(0) }
    
    LaunchedEffect(key1 = Unit) {
        while (true) {
            delay(1000)
            seconds++
        }
    }
    
    Text("Seconds elapsed: $seconds")
}

Hoe gebruik je AnimatedVisibility in Jetpack Compose?

AnimatedVisibility is een composable die een animatie toont wanneer de zichtbaarheid van zijn inhoud verandert:

var visible by remember { mutableStateOf(true) }

Column {
    Button(onClick = { visible = !visible }) {
        Text(if (visible) "Hide" else "Show")
    }
    
    AnimatedVisibility(visible = visible) {
        Text("This text will animate in and out")
    }
}

Hoe maak je eenvoudige animaties in Jetpack Compose?

Gebruik animateXxxAsState functies om waarden vloeiend te laten veranderen:

var expanded by remember { mutableStateOf(false) }

val size by animateDpAsState(
    targetValue = if (expanded) 200.dp else 100.dp,
    label = "size"
)

val color by animateColorAsState(
    targetValue = if (expanded) Color.Red else Color.Blue,
    label = "color"
)

Box(
    modifier = Modifier
        .size(size)
        .background(color)
        .clickable { expanded = !expanded }
)

Hoe gebruik je string resources in Jetpack Compose?

Gebruik de stringResource functie:

// In strings.xml
// <string name="greeting">Hello, %1$s!</string>

Text(
    text = stringResource(R.string.greeting, "World")
)

// Of met meerdere parameters
// <string name="welcome">Welcome %1$s, you have %2$d messages</string>

Text(
    text = stringResource(R.string.welcome, userName, messageCount)
)