Jetpack Compose - 1

Android Jetpack Compose

1. Surface

2. remember

3. MutableState

4. LazyColumn

5. rememberSaveable

 

코드랩 학습 - https://developer.android.com/codelabs/jetpack-compose-basics

Jetpack Compose basics  |  Android Developers

 

1. Surface

@Composable
private fun Greeting(name: String) {
    Surface(
        color = MaterialTheme.colors.primary,
        modifier = Modifier.padding(vertical = 4.dp, horizontal = 8.dp)
    ) {
        Column(modifier = Modifier.fillMaxWidth().padding(24.dp)) {
            Text(text = "Hello, ")
            Text(text = name)
        }
    }
}

- 요소를 감싸는 컨테이너 역할

- Flutter 의 Container 와 유사한 역할

// Flutter Dart 코드
Card(
  child: Container(
    width: 300,
    padding: const EdgeInsets.only(left: 5),
    child: TextField( ... )
    )
)

 

2. remember

@Composable
fun Greeting() {
    val expanded = remember { mutableStateOf(false) }
    ...
}

- Composable functions 에서 remeber 를 이용하여 변수를 선언하게 되면, inital composition 에 메모리에 단일 객체로 저장이 되고 recompose 단계에서 메모리에 저장된 값을 호출해서 사용한다.

- Composable functions 의 전역 변수 같은 형태라고 생각되며, 이게 필요한 이유가 @Composable functions 은 생명주기가 있기 때문에 필요한 형태이다.

 

3. MutableState

@Composable
fun Greeting() {
    val expanded = remember { mutableStateOf(false) }
    ...
}

- Composable functions 의 상태를 관찰하는 역할을 한다.

- mutablStateOf() 를 이용해서 변수를 변경할 경우에, recompose 단계를 호출해서 새롭게 UI 를 그리게 하는 역할이라고 보면 된다.

- remeber 함수를 같이 사용해야 한다.

- Flutter 의 setState() { .. } 역할과 동일하다.

// Flutter Dart 코드
IconButton(
    icon: Icon(
      _isPwObscure ? Icons.visibility : Icons.visibility_off,
      color: Colors.grey,
    ),
    onPressed: () {
      setState(() {
        _isPwObscure = !_isPwObscure;
      });
    }
)

 

4. LazyColumn

@Composable
private fun Greetings(names: List<String> = List(1000) { "$it" }) {
    LazyColumn(modifier = Modifier.padding(vertical = 4.dp)) {
        items(names) { name ->
            Greeting(name = name)
        }
    }
}

Note: LazyColumn and LazyRow are equivalent to RecyclerView in Android Views.

Note: LazyColumn doesn't recycle its children like RecyclerView. It emits new Composables as you scroll through it and is still performant, as emitting Composables is relatively cheap compared to instantiating Android Views.

- RecycleView 와 같은 View 이지만, item 을 재활용하지 않고 계속 새롭게 만들어낸다. 다만, 그 비용이 싸다.

 

5. rememberSaveable

@Composable
fun MyApp(names: List<String> = listOf("World", "Compose")) {
    var shouldShowOnbording by rememberSaveable { mutableStateOf(true) }

    if (shouldShowOnbording) {
        OnboardingScreen(onContinueClicked = { shouldShowOnbording = false })
    } else {
        Greetings()
    }
}

- remember 는 activity 가 rotate 와 같이 configuration 이 변화되지 않았을때(restarted 가 호출 되지 않았을때)만 메모리에 저장을한다. 그러나 rememberSaveable 은 configuration 이 변화(화면 회전, 다크모드로 변경)되더라도 화면을 유지한다.

- 위 예제의 경우는 OnBoardingScreen 이 한번 떳을 경우에, 화면 회전 등의 configuration 변화가 일어나도 OnBoardingScreen 이 뜨지 않는다.

 

// 6. animateDpAsState

 

 

 

 

 

참고 링크

- https://blog.naver.com/PostView.naver?blogId=wono77&logNo=222575152282 

[요약] A Compose state of mind: Using Jetpack Compose's automatic state observation (Android Dev Summi

- https://www.charlezz.com/?p=45448#:~:text=Jetpack%20Compose%EB%8A%94%20UI%20%EA%B0%9C%EB%B0%9C,%EC%89%AC%EC%9A%B4%20%EC%82%AC%EC%9A%A9%EC%84%B1%EC%9D%84%20%EA%B2%B0%ED%95%A9%ED%95%9C%EB%8B%A4. 

Jetpack Compose basics – Compose 시작하기 | 찰스의 안드로이드

- https://developer.android.com/courses/pathways/compose?authuser=1#codelab-https://developer.android.com/codelabs/jetpack-compose-basics 

Jetpack Compose  |  Android Developers