Compose Basic Codelab Unit 1 링크
Compose Camp Unit 1 Repository

---

Compose 예시

우선 Compose 코드는 어떤 구성을 갖고 있을까요?

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

@Composable
fun Greeting(name: String) {
   Surface(color = Color.Magenta) {
       Text(text = "Hello $name!")
   }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
   GreetingCardTheme {
       Greeting("Meghan")
   }
}

위의 코드를 Android Studio에서 작성하고, 우측 상단 Split을 누르면 Preview 화면을 동시에 볼 수 있습니다.
작성한 코드와 Preview 화면은 다음과 같아요!

Compose 관련 코딩 컨벤션 및 특징

Compose 함수의 특징

• UI 일부를 설명합니다.
• 아무것도 반환하지 않습니다.
• 몇 개의 입력을 받아서 화면에 표시되는 내용을 생성합니다.
• 여러 UI 요소를 내보낼 수도 있습니다.

Compose 함수의 이름

• 첫 글자는 대문자로 표기한다.
• 함수 이름은 명사여야 한다.
  • 동사 / 동사구 ❌ : DrawTextField()
  • 명사화된 전치사 ❌ : TextFieldWithLink
  • 형용사 ❌ : Bright()
  • 부사 ❌ : Outside()
  • 형용사+명사는 ⭕ : RoundIcon()
• 함수 앞에 @Composable 주석을 추가한다.
  • Compose 컴파일러에게 이 함수가 데이터를 UI로 변환함을 알리기 위함.

Preview

• @Preview로 미리보기가 가능하다.

@Preview
@Composable
fun DefaultPreview() {
   GreetingCardTheme {
       Greeting("Meghan")
   }
}

• Preview에 매개변수를 전달할 수 있다.

@Preview(showBackground = true)	// 배경화면 미리보기


@Preview(
	name = "My Preview",    // Preview에 제목 지정
    showSystemUi = true     // 시스템UI (휴대전화 화면)을 포함한 미리보기
)

Composable

Text

Text(
	text = message,					// 표시할 메시지
    fontSize = 36.sp,				// 글씨 크기
    fontWeight = FontWeight.Bold,	
    modifier = Modifier
    	.fillMaxWidth()
        .wrapContentWidth(Alignment.CenterHorizontally)
        .padding(start = 16.dp, top = 16.dp)
)

Image

• Image 파일을 Resource Manager을 사용하여 import하기 (설명 링크)

Image(
	painter = painterResource(id = R.drawable.androidparty),
    contentDescription = null,       	// (접근성 관련) 컨텐츠에 대한 설명
    modifier = Modifier
		.fillMaxHeight()
        .fillMaxWidth(),
    contentScale = ContentScale.Crop	// 이미지 scale type
)

다양한 이미지 scale type 종류들을 사진으로 잘 정리해둔 링크를 발견해서 함께 첨부합니다! (여기~)

+) Modifier

• Compose UI 구성요소들을 꾸미거나, 행동을 추가하기 위한 요소들의 모임

modifier = Modifier
	// 높이 및 너비 관련
	.width(100.dp) 			
    .height(100.dp)
    .fillMaxWidth(1f)	//  전체 대비 채우는 비율 (1f가 기본)
    .fillMaxHeight()
    .fillMaxSize()
    // 여유 공간
    .padding(15.dp)		// 상하좌우 15dp 여백
    					// start,end,top,bottom 이나 horizontal, vertical 값을 줄 수 있음
    					// margin을 주는 방법 -> 항목들 사이에 Spacer 추가하기
    // 배경 및 모양
    .background(
    	color = Color.Blue,					// 배경색
        shape = RoundedCornerShape(12.dp)	// 모양
    )
                   

위 코드의 참고 출처 및 그 외의 다양한 Modifier 활용을 보고자 한다면 -> 링크로 !

Spacer

• 요소들 사이 배치, margin을 주는 역할

Text( /* ... */ )
Spacer(Modifier.size(padding))
Row() { /* ... */ }

표준 레이아웃

Row

• 하위 요소들을 화면에 수직으로 배치
• LinearLayout(orientation = vertical)

Row {
	Text("First")
    Text("Second")
}

Column

• 하위 요소들을 화면에 수평으로 배치
• LinearLayout(orientation = horizontal)

Column(
	modifier = Modifier
) {
	Text("First")
    Text("Second")
}

Box

• 위젯을 다른 화면의 위에 배치
• 하나의 박스 만들고, 안에 요소들을 배치 가능 (하나는 왼쪽 위에, 하나는 오른쪽 아래에 놓는다던가..)