[Android - Kotlin] Jetpack Compose - 5

민채·2024년 2월 19일

android kotlin

Android - Codelab

목록 보기

5/10

목록 아이콘 추가 및 확장

아래의 코드를 기반으로 만듦!

https://github.com/google-developer-training/basic-android-kotlin-compose-training-woof/tree/starter

펼치기 및 접기 아이콘 추가

build.gradle에 추가

Material Design에서 제공하는 기본 아이콘을 사용할 수 있음

implementation("androidx.compose.material:material-icons-extended")

아이콘 만들기

아이콘을 클릭할 수 있도록 IconButton 컴포저블 사용

@Composable
private fun DogItemButton(
    expanded: Boolean,
    onClick: () -> Unit,
    modifier: Modifier = Modifier
){
	// 해당 아이콘을 클릭할 수 있게 만듦
    IconButton(
        onClick = onClick,
        modifier = modifier
    ) {
        Icon(
            if (expanded) Icons.Filled.ExpandLess else Icons.Filled.ExpandMore,
            contentDescription = stringResource(R.string.expand_button_content_description),
            tint = MaterialTheme.colorScheme.secondary
        )
    }
}

목록 아이템에 아이콘 추가

하나의 아이템을 나타내는 DogItem()에 확장 상태를 저장하는 변수 추가

var expanded by remember { mutableStateOf(false) }

DogItem() 컴포저블의 Row 블록 끝에 있는 DogInformation() 호출 뒤에 DogItemButton()을 추가

DogItemButton(
	expanded = expanded,
	onClick = { /* TODO */ },
)

펼치기 버튼을 정렬하기 위해 DogInformation()과DogItemButton() 사이에 아래의 코드 추가

Spacer(modifier = Modifier.weight(1f))

아래와 같이 정렬

확장했을 때 보여지는 화면 추가

펼치기 아이콘을 클릭해 화면이 확장되었을 때의 화면을 표시하기 위해 컴포저블 추가

@Composable
fun DogHobby(
    @StringRes dogHobby: Int,
    modifier: Modifier = Modifier
) {
    Column(
        modifier = modifier
    ) {
        Text(
            text = stringResource(R.string.about),
            style = MaterialTheme.typography.labelSmall
        )
        Text(
            text = stringResource(dogHobby),
            style = MaterialTheme.typography.bodyLarge
        )
    }
}

Row 뒤에 DogHobby()를 Column의 두 번째 하위 요소로 추가

DogHobby(
	dog.hobbies, modifier = Modifier.padding(
    	start = dimensionResource(R.dimen.padding_medium),
		top = dimensionResource(R.dimen.padding_small),
		bottom = dimensionResource(R.dimen.padding_medium),
      	end = dimensionResource(R.dimen.padding_medium)
	)
)

아이콘 버튼 클릭했을 때의 동작 추가

DogItem() 함수의 DogItemButton() 함수 호출에서 onClick() 람다 표현식을 정의
버튼을 클릭할 때 expanded 값을 true로 변경, 버튼을 다시 클릭하면 false로 다시 변경

DogItemButton(
	expanded = expanded,
    onClick = { expanded = !expanded },
)

DogBoddy() 함수 호출 부분을 if문으로 감싸기

// 확장 상태일 때만 노출
if (expanded) {
	DogHobby(
		dog.hobbies, modifier = Modifier.padding(
        	start = dimensionResource(R.dimen.padding_medium),
        	top = dimensionResource(R.dimen.padding_small),
        	bottom = dimensionResource(R.dimen.padding_medium),
        	end = dimensionResource(R.dimen.padding_medium)
		)
	)
}

DogItemButton() 함수에서 expanded 상태에 따라 imageVector 값을 업데이트하는 if 문을 추가

IconButton(
	onClick = onClick,
    modifier = modifier
) {
	Icon(
		// 추가
        if (expanded) Icons.Filled.ExpandLess else Icons.Filled.ExpandMore,
		contentDescription = stringResource(R.string.expand_button_content_description),
		tint = MaterialTheme.colorScheme.secondary
	)
}

애니메이션 추가

DogItem()에서 Column 레이아웃에 modifier 매개변수를 추가
animateContentSize를 추가해 크기(목록 항목 높이) 변경을 애니메이션 처리
DampingRatioNoBouncy를 사용하여 스프링 애니메이션으로 설정되므로 반동력이 없음
StiffnessMedium 매개변수는 스프링의 강성을 약간 더 높임

Column(
   modifier = Modifier
       .animateContentSize(
           animationSpec = spring(
               dampingRatio = Spring.DampingRatioNoBouncy,
               stiffness = Spring.StiffnessMedium
           )
       )
)