Jetpack Compose란..?

UI 개발을 간소화하기 위해 설계된 최신 툴킷이며 반응형 프로그래밍 모델을 Kotlin 프로그래밍 언어의 간결함 및 사용 편의성과

결합한 방식입니다.

선언적인 접근 방식으로 데이터를 UI 계층 구조로 변환하는 일련의 함수를 호출하여 UI를 설명합니다.

기존 데이터가 변경되면 프레임워크가 이러한 함수를 자동으로 다시 실행하여 UI 계층 구조를 업데이트 합니다.

 

 

정확히는 모르겠지만.. 데이터가 변경된다면 빠르게 적용하여 UI에 반영된다는 내용같고 선언을 통해서 간결하면서도

사용에 편의성까지 갖춘다는 내용 같습니다.

역시 예제가 있어야 좀 더 빨리 이해가 갈 것 같습니다.

 

 

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

 

기본 프로젝트 실행시 다음과 같이 나오게 되는데, ComponentActivity를 상속해야 Composable을 사용할 수 있습니다.

ComponentActivity가 AppCompatActivity보다 상위 액티비티라 하니 마음 편하게 ComponentActivity를 상속하여

개발하면 좋을 것 같습니다.

 

여기서 궁금한 점이 하나 생길 것 입니다.  Modifer?? 무엇일까..??

'Modifier'는 Jetpack Composedptj UI 요소의 레이아웃, 동작, 모양 등을 수정하고 조작하는데 사용되는 객체입니다.

'Modifier'는 체인처럼 연결할 수 있어서 여러 수정자를 순차적으로 적용할 수 있습니다.

 

▷ 'Modifier' 주요 역할

1. 크기 조정 및 배치: UI 요소의 크기와 위치를 조정할 수 있습니다.

2. 그래픽 효과: 배경, 테두리, 그림자 등을 추가할 수 있습니다.

3. 입력 처리: 클릭, 스크롤, 드래그 등 사용자의 입력 이벤트를 처리할 수 있습니다.

4. 레이아웃 간 조정: 요소 간의 간격을 조정하거나 정렬할 수 있습니다.

 

※ 크기 및 배치

Text(
	text = "Hello!",
    modifier = Modifier
    	.fillMaxWidth() // 가로 전체를 채움
        .padding(16.dp) // 모든 방향이 16dp 패딩값 추가
)

 

※ 그래픽 효과

Box(
	modifier = Modifier
    	.size(100.dp)  // 크기를 100x100 dp로 설정
        .background(Color.Red)  // 빨간색 배경 설정 
)

 

※  입력처리 

Box(
	modifier = Modifier
    	.size(100.dp)
        .background(Color.Red)
        .clickable {
        	// 클릭이 발생했을때 동작처리
        }
)

 

※  Modifier의 체이닝

- 'Modifier'는 체이닝을 통해 여러 속성을 한 번에 적용할 수 있습니다.

Box(
	modifier = Modifier
    	.size(100.dp) // 크기를 100x100 dp로 설정
        .background(Color.Blue) // 파란색 배경 설정
        .border(2.dp, Color.Black) // 검은색 테두리 추가 
        .padding(8.dp). // 모든 방향에 8dp 패딩 추가
)

 

'Modifier'의 기본 제공 함수

• fillMaxSize(), fillMaxWidth(), fillMaxHeight(): 요소를 부모의 최대 크기만큼 채움
• padding(): 요소의 안쪽 여백 설정
• background(): 배경 색상이나 배경 이미지 설정
• border(): 테두리 설정
• clickable(), draggable(), scrollable() : 입력 이벤트 처리
• align(): 부모 내에서 요소의 정렬 설정
• offset(): 요소의 위치를 특성 오프셋만큼 이동

사용자 정의 'Modifier'

: 사용자가 직접 'Modifier'를 정의할 수 있습니다.  예를 들어, 특정 크기를 설정하는 커스텀 'Modifer' 입니다.

fun Modifier.customSizeModifier(width: Dp, height: Dp) = this.then(
	Modifier.size(width, height)
)

Box(
	modifier = Modifier
    	.customSizeModifier(100.dp, 100.dp)
        .background(Color.Green)
)

 

▶ onCreate 메서드 

setContent를 호출하여 컴포저블 UI를 설정합니다.   설정한 내용은 Theme 설정으로 'Surface' 컴포저블을 사용하여 

화면 전체를 채우는 배경을 설정하였고, 'Greeting' 컴포저블을 호출하여 "Hello Android" 를 텍스트로 표시합니다.

 

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

 

@Composable 어노테이션으로 표시된 함수는 Jetpack Compose에서 사용할 수 있도록 UI 구성 요소로 정의할 수 있습니다.

다음 Greeting 함수는 @Composable 어노테이션을 통해 내부적인 text라는 값을 변경할 수 있으며, modifier를 사용할 수 있도록

정의할 수 있습니다.

 

▶ GreetingPreview() 함수

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    HnK_Native_ProjTheme {
        Greeting("Android")
    }
}

 

이 함수 또한 @Composable를 사용하였기 때문에 내부 UI를 데이터로 접근해서 변경할 수 있고 속성을 둘 수 있고 다양하게

관리할 수 있습니다.

@Preview라는 어노테이션을 주면서 디자인 상 Preview에서도 볼 수 있게하며 Preview로 보일 때에도 showBackground = true로

주면서 배경을 표시한 상태로 프리뷰를 렌더링하도록 진행합니다.

 

 

지금까지 Jetpack Compose에 관한 내용과 Modifier의 역할 그리고 실제 @Composable 활용한 기본 예제까지 확인했습니다.

다음 내용에서는 이를 토대로 이벤트도 발생시켜보고 간단한 UI 형태도 구성해보겠습니다.   감사합니다.