[Android] Jetpack Compose 프로젝트 생성 + MainActivity 살펴보기

기존 프로젝트와의 차이

build.gradle (:app)

android {
	...
	buildFeatures {
        compose true
  }
}

폴더 구조

/패키지/app/src/main/java/com/pinslog/instagramclone/ui

/패키지/app/src/main/res/values

앱을 만들기 위한 리소스 (컬러, 테마 등) 가 res/values 가 아니라 패키지/ui 에 존재한다.

리소스에 접근하기 위해 xml에 접근하는 것이 아니라 kotlin 코드로 리소스를 생성하고, 접근할 수 있음을 의미한다.

MainActivity

xml 방식

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
}

Jetpack Compose

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            InstagramCloneTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    Greeting("Android")
                }
            }
        }
    }
}

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    InstagramCloneTheme {
        Greeting("Android")
    }
}

ComponentActivity

기존의 방식은 AppCompatActivity를 상속받는다.

하지만 Compose는 ComponentActivity를 상속받고 있다.

무엇이 다를까?

일단 AppCompatActivity의 경로는 androidx.appcompat.app.AppCompatActivity 이다.

ComponentActivity의 경로는 androidx.activity.ComponentActivity 이다.

타고 타고 들어가보면..

여기서부터는 Compose의 ComponentActivity와 같다

기존 방식
AppCompatActivity → FragmentActivity → ComponentActivity → androidx.core.app.ComponentActivity → Activity
Compose
ComponentActivity → androidx.core.app.ComponentActivity → Activity

ComponentActivity

💡 더 높은 수준의 구성 요소를 구성할 수 있는 활동의 기본 클래스입니다.

모든 기능이 이 클래스에 직접 구축되는 대신 최소한의 하위 수준 구성 요소 집합만 포함됩니다. 그런 다음 깊은 활동 클래스 계층 구조나 구성 요소 간의 강력한 결합을 적용하지 않고 필요에 따라 더 높은 수준의 구성 요소를 사용할 수 있습니다.

AppCompatActivity

💡 이전 Android 기기에서 일부 최신 플랫폼 기능을 사용하려는 활동의 기본 클래스입니다.

그럼 AppCompatActivity를 상속하면 어떻게 될까?

아예 import를 할 수 없다.

그 이유는 build.gradle (:app)에 해당 항목이 아예 빠져있기 때문이다.

implementation 'androidx.appcompat:appcompat:1.6.1'

setContent

구성 가능한 함수가 호출되는 활동의 레이아웃을 정의

ComponentActivity가 가지고 있는 메소드이다.

구성 가능한 함수

UI의 일부를 설명하는 Unit을 내보내는 함수

구성 가능한 함수를 정의하려면 @Composable 어노테이션을 붙여주면 된다.

setContent {
    InstagramCloneTheme {
        // A surface container using the 'background' color from the theme
        Surface(
            modifier = Modifier.fillMaxSize(),
            color = MaterialTheme.colorScheme.background
        ) {
            Greeting("Android")
        }
    }
}

setContent는 인자로 구성가능한 함수를 받고 있다.

그래서 InstagramCloneTheme 를 전달할 수 있었다.

Surface

Material surface is the central metaphor in material design. Each surface exists at a given elevation, which influences how that piece of surface visually relates to other surfaces and how that surface is modified by tonal variance. See the other overloads for clickable, selectable, and toggleable surfaces.

최상위의 UI 속성을 선언하는 것으로 보인다…무슨 말인지 이해는 가는데 어떻게 설명해야할지 모르겠다 ㅜㅜ

surface를 사용하지 않고도 각각의 UI 속성을 주면 원하는 디자인을 구현할 수 있겠지만

surface를 사용하는 편이 코드를 더 깔끔하게 만들고, UI 속성 (color, shape, border, elevation)을 사용하고 있다고 명시적으로 나타내기 때문에 사용하는 것을 권장한다고 한다.

Surface 함수를 호출하기 위해서는 마찬가지로 구성가능한 함수를 인자로 전달해야한다.

그리고 위에서 먼저 살펴봤던 것처럼 modifier, shape, color, elevation 을 전달한다.

Surface(
    modifier = Modifier.fillMaxSize(),
    color = MaterialTheme.colorScheme.background
) {
    Greeting("Android")
}

---

공부하며 작성된 글이라 잘못된 정보가 있을 수 있습니다.

말씀해주시면 수정하겠습니다. 감사합니다.

References

아래 글을 참고하여 작성 되었습니다.

Android Compose 튜토리얼  |  Jetpack Compose  |  Android Developers

Compose 레이아웃 기본사항  |  Jetpack Compose  |  Android Developers

 

When should I use Android Jetpack Compose's Surface composable?