Getting started with Compose

class MainActivity : ComponentActivity() {
		override fun onCreate(savedInstanceState: Bundle?)
{
				super.onCreate(savedInstanceState)
				setContent {
					ComposeCodeLabWeek2Theme {
						Surface(color = ...) {
							Greeting("Android")
						}
				}
			}
	}
}

SetContent 안에

XML 대신 레이아웃을 구성할 Composable 함수가 들어갈수 있습니다.

Modifier

modifier는 UI 요소에 상위 layout 내에서 layout, 표시 또는 동작하는 법들을 알려준다

예를 들어 padding Modifier는 요소 주위에 패딩을 적용 한다

@Composable
private fun Greeting(name: String) {
    Surface(color = MaterialTheme.colors.primary) { // surface는 백그라운드 색을 지정함
        Text(text = "Hello $name!", modifier = Modifier.padding(24.dp))
    }
}

기존 수정 하기전

padding 값 넣은 후

Reusing composables

UI에 많은 구성 요소를 추가 할수록 함수가 커져서 나중에 가독성에 영향을 줄수가 있다.

재사용이 가능한 작은 구성 요소들을 만들어서 각각 화면의 작은 부분들을 담당 해서 독립적으로 편집할 수 있다.

@Composable 어노테이션을 추가하여 함수를 분리하거나 독립적으로 편집이 가능 하다. 마치 xml에서 <include>를 사용했던 것 처럼 말이다.