Android Compose 스터디 기록 02

 

 

Modifier

image size, padding, background, round image, click event 처리 가능

@Composable
fun Greeting(name: String) {
	Text(
		text = "Hello $name!",
		modifier = Modifier.onGloballyPositioned {
			android.util.Log.i("TEMP", "size ${it.size}")
		}
	)
}

onGloballyPositioned를 이용하여 view의 크기를 구할 수 있음

 

 

Slot APIs

사용자 정의 레이아웃을 가져오기 위해 Compose가 도입한 패턴

@Composable
fun MyApplicationTheme(
	content: @Composable () -> Unit
)

매개변수로 Composable을 받아 재사용가능하게 만듦

 

 

Material Components

• Scaffold, TabAppBar 적용

안드로이드 Compose는 Material Components를 기반으로 함

Scaffold: 최상위에 적용, modifier.padding을 적용

→ 포함 : TopAppBar, BottomAppBar, FloatingActionButtom ,Drawer등 적용

Lazy Column을 활용해 RecycerView를 구현할 수 있음

ItemTouchHelper.Callback()을 쉽게 구현하기는 어려움

→ 오픈소스나 Compose in RecyclerView 참고

 

 

Constraint Layout

createRefs()을 이용해 View간의 레이아웃 배치 할 수 있음

Modifier.constrainAs()를 이용해 상호 배치 가능

val (button, text) = createRefs()

Text(
	text = "Text",
	modifier = Modifier.constrainAs(text) {
			top.linkTo(parent.top, margin = 16.dp)
	}
)

Button(
	modifier = Modifier.constrainAs(button) {
			top.linkTo(text.bottom, margin = 16.dp)
			start.linkTo(text.start)
	}
)

 

 

Intrinsic measurements

자식의 measure는 한 번만 측정할 수 있다.

자식의 size를 미리 알도록 만들어 이를 활용할 수 있도록 함

@Composable
fun TwoTexts(modifier: Modifier = Modifier, text1: String, text2: String) {
    Row(modifier = modifier.height(IntrinsicSize.Min) {
        Text(
            modifier = Modifier
                .weight(1f)
                .padding(start = 4.dp)
                .wrapContentWidth(Alignment.Start),
            text = text1
        )

        Divider(color = Color.Black, modifier = Modifier.fillMaxHeight().width(1.dp))
        Text(
            modifier = Modifier
                .weight(1f)
                .padding(end = 4.dp)
                .wrapContentWidth(Alignment.End),
            text = text2
        )
    }
}

 

 

기존 아키텍쳐 :: xml layout과 Activity & Fragment 간 결합도 높음

컴포즈 :: 선언형 ui 모델 및 단방향 데이터 흐름으로 전환

ViewModel 에서 LiveData로 데이터가 Screen에 전달되면 각 Composable로 데이터가 타고타고 내려가 전달받음

 

 

State

:: 시간이 지남에 따라 변경될 수 있는 모든 값

 

 

단방향 데이터 흐름

Activity가 ViewModel에 event를 요청하면

ViewModel 이 Activity로 state를 보냄

 

 

컴포즈 프로그래밍

• 컴포즈 함수는 순서와 관계없이 실행 가능
• 컴포즈는 동시에 실행 가능
• 리컴퍼지션은 변경된 구성 요소만 실행
• 같은 데이터라면 동일한 결과
• 컴포즈 함수는 UI에서 매우 자주 실행될 수 있음

 

ReComposition

:: 데이터가 변경될 때 Compose Tree를 업데이트 하기 위해 동일한 Composable 재실행

Composable은 recomposition을 지원하기 위해 항상 결과가 동일해야 함

 

 

Remember

Stateful -> Remember를 사용해서 내부 State 생성

Stateless -> State를 갖지 않는 Composable

 

 

Stateful

• Remember를 사용해서 내부 State 생성
• 호출하는 쪽에서 State를 관리하지 않음
• 재사용 가능성 적음
• 테스트 어려움

 

 

Stateless

• State를 갖지 않는 Composable
• 재사용에 용이
• State를 호출해야 하는 곳에서 제어

 

State Hoisting 규칙

• State는 State를 사용하는 모든 composable의 최소 공통 상위 항목에서 이용
• State는 최소한 수정 할 수 있는 최고 수준으로 이용
• 동일한 이벤트에 대한 응답으로 두 State가 변경되면 함께 이용