Compose - 함수 / UI 구성

# Text

// 기본
@Composable
fun SimpleText() {
    Text("Hello World")
}

// strings.xml 활용
@Composable
fun StringResourceText() {
    Text(stringResource(R.string.hello_world))
}

 

// color
@Composable
fun BlueText() {
    Text("Hello World", color = Color.Blue)
}

// fontSize
@Composable
fun BigText() {
    Text("Hello World", fontSize = 30.sp)
}

// fontStyle
@Composable
fun ItalicText() {
    Text("Hello World", fontStyle = FontStyle.Italic)
}

// fontWeight
@Composable
fun BoldText() {
    Text("Hello World", fontWeight = FontWeight.Bold)
}

// fontFamily
@Composable
fun DifferentFonts() {
    Column {
        Text("Hello World", fontFamily = FontFamily.Serif)
        Text("Hello World", fontFamily = FontFamily.SansSerif)
    }
}

 

# TextField(=EditText)

// 기본
@Composable
fun SimpleFilledTextFieldSample() {
    var text by remember { mutableStateOf("Hello") }

    TextField(
        value = text,
        onValueChange = { 
		        text = it 
		    },
        label = { 
		        Text("Label") 
		    }
    )
}

 

# Image

// 이미지 로드
Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description)
)

// 인터넷 이미지 로드
AsyncImage(
    model = "https://example.com/image.jpg",
    contentDescription = "Translated description of what the image contains"
)

 

# Scaffold

- topBar, bottomBar, floatingActionButton을 매개변수로 제공, 빠른 컴포넌트 구성을 지원

@Composable
fun ScaffoldExample() {
	  Scaffold(
        topBar = {
            TopAppBar(
                colors = topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.primary,
                ),
                title = {
                    Text("Top app bar")
                }
            )
        },
        bottomBar = {
            BottomAppBar(
		            ...
            ) {
                Text(
                    modifier = Modifier
                        .fillMaxWidth(),
                    textAlign = TextAlign.Center,
                    text = "Bottom app bar",
                )
            }
        },
        floatingActionButton = {
            FloatingActionButton(
		            onClick = { 
										...
				        }
			      ) {
                Icon(...)
            
        }
        // Compose에서 기본으로 제공하는 padding값
    ) { innerPadding ->
        Column(
            modifier = Modifier
                .padding(innerPadding),
        ) {
            Text(
                modifier = Modifier.padding(8.dp),
                text = ...
            )
        }
    }
}

 

# Button

@Composable
fun FilledButtonExample(onClick: () -> Unit) {
    Button(
        onClick = { 
            onClick() 
        }
    ) {
        Text("Filled")
    }
}

 

# Switch

@Composable
fun SwitchMinimalExample() {
    Switch(
    	// 체크 여부
        checked = checked,
        // checked가 바뀌면 하는 동작 
        onCheckedChange = {
            ...
        }
    )
}

 

# Checkbox

@Composable
fun CheckboxMinimalExample() {
    var checked by remember { mutableStateOf(true) }

    Row(
        verticalAlignment = Alignment.CenterVertically,
    ) {
        Text(
            "Minimal checkbox"
        )
        Checkbox(
            checked = checked,
            onCheckedChange = { 
		            checked = it 
		        },
        )
    }

    Text(
        if (checked) {
            "Checkbox is checked"
		    } else {
            "Checkbox is unchecked"
				}
    )
}

 

# List

- Column, Row를 따라 반복해서 Composable를 사용하여 UI를 표시할 수 있음

@Composable
fun MessageList(messages: List<Message>) {
    Column(...) {
        messages.forEach { message ->
            Text(message)
        }
    }
}

 

# LazyList

- 많은 수의 항목이나 길이를 알 수 없는 항목을 표시해야 하는 경우 모든 항목이 UI에 표시되어 성능 저하

- LazyColumn, LazyRow 등으로 문제 해결

LazyColumn {
    items(messages) { message ->
        MessageRow(message)
    }
}

LazyVerticalGrid(
    columns = GridCells.Adaptive(minSize = 128.dp)
) {
    items(photos) { photo ->
        PhotoItem(photo)
    }
}

 

# Resource

 

1) 기본

// strings.xml
<string name="compose">Jetpack Compose</string>

// compose
Text(
    text = stringResource(R.string.compose)
)

 

2) Formatting

// strings.xml
<string name="congratulate">Happy %1$s %2$d</string>

// compose
Text(
    text = stringResource(R.string.congratulate, "New Year", 2021)
)

 

3) Dimensions

// dimensions.xml
<dimen name="padding_small">8dp</dimen>

// compose
val smallPadding = dimensionResource(R.dimen.padding_small)
Text(
    text = "...",
    modifier = Modifier.padding(smallPadding)
)

 

4) Colors

// colors.xml
<color name="purple_200">#FFBB86FC</color>

// compose
HorizontalDivider(color = colorResource(R.color.purple_200))

 

(참고: https://developer.android.com/develop/ui/compose/components?hl=ko)