[Week1] Codelab - part2

텍스트 업데이트

onCreate() 함수는 이 앱의 진입점이며 다른 함수를 호출하여 사용자 인터페이스를 빌드합니다. Kotlin 프로그램에서는 main() 함수가 Kotlin 컴파일러가 시작되는 코드의 특정 위치입니다. Android 앱에서는 onCreate() 함수가 이 역할을 합니다.

onCreate() 함수 내 setContent() 함수는 구성 가능한 함수를 통해 레이아웃을 정의하는 데 사용됩니다. @Composable 주석으로 표시된 모든 함수는 setContent() 함수 또는 다른 구성 가능한 함수에서 호출할 수 있습니다. 주석은 Jetpack Compose에서 이 함수가 UI를 생성하는 데 사용된다고 Kotlin 컴파일러에 알립니다.

 

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

@Composable
fun Greeting(name: String) {
   Text(text = "Hi, my name is $name!")
}

• @Composable 함수 이름은 대문자로 표기됩니다.
• 함수 앞에 @Composable 주석을 추가합니다.
• @Composable 함수는 아무것도 반환할 수 없습니다.

 

DefaultPreview() 함수는 전체 앱을 빌드하지 않고도 앱이 어떻게 표시되는지 확인할 수 있는 멋진 기능입니다. 미리보기 함수가 되려면 @Preview 주석을 추가해야 합니다.

@Preview 주석이 showBackground라는 매개변수를 사용하는 것을 확인할 수 있습니다. showBackground가 true로 설정되면 앱 미리보기에 배경이 추가됩니다.

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

 

배경 색상 변경

소개의 배경 색상을 다르게 설정하려면 텍스트를 Surface로 둘러싸야 합니다. Surface는 배경 색상이나 테두리와 같은 모양을 개발자가 변경할 수 있는 UI 섹션을 나타내는 컨테이너입니다. (배경 색상이 있고 다른 컴포저블을 포함할 수 있는 컴포저블)

1. Surface로 텍스트를 둘러싸려면 텍스트 줄을 강조표시하고 Windows의 경우 Alt+Enter, Mac의 경우 Option+Enter를 누른 후 Surround with widget을 선택합니다.
2. Surround with Container를 선택합니다.
3. Box를 삭제하고 대신 Surface()를 입력합니다.
4. Surface 컨테이너에 color 매개변수가 있으므로 Color로 설정합니다.

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

 

패딩 추가

Modifier는 컴포저블을 강화하거나 장식하는 데 사용됩니다. 사용할 수 있는 한 가지 수정자는 padding 수정자이며 이는 요소 주위에 공백을 적용합니다. 여기서는 텍스트 주위에 공백을 추가합니다. Modifier.padding() 함수를 사용하여 실행합니다.

@Composable
fun Greeting(name: String) {
   Surface(color = Color.Magenta) {
       Text(text = "Hi, my name is $name!", modifier = Modifier.padding(24.dp))
   }
}

 

전체 코드

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.padding
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.myapplication.ui.theme.GreetingCardTheme

class MainActivity : ComponentActivity() {
   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContent {
           GreetingCardTheme {
               // A surface container that uses the 'background' color from the theme
               Surface(color = MaterialTheme.colors.background) {
                   Greeting("Android")
               }
           }
       }
   }
}

@Composable
fun Greeting(name: String) {
   Surface(color = Color.Magenta) {
       Text(text = "Hi, my name is $name!", modifier = Modifier.padding(24.dp))
   }
}

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

 

요약

• 새 프로젝트를 만들려면 Android 스튜디오를 열고 New Project > Empty Compose Activity > Next를 클릭하여 프로젝트 이름을 입력한 다음 설정을 구성합니다.
• 앱이 어떻게 표시되는지 확인하려면 Preview 창을 사용합니다.
• 구성 가능한 함수는 일반 함수와 비슷하지만 몇 가지 차이점이 있습니다. 함수 이름은 대문자로 표기되며 함수 앞에 @Composable 주석을 추가하고 @Composable 함수는 아무것도 반환할 수 없습니다.
• Modifier는 컴포저블을 강화하거나 장식하는 데 사용됩니다.

 

USB 디버깅 사용 방법

Android 스튜디오가 Android 기기와 통신하게 하려면 기기의 개발자 옵션 설정에서 USB 디버깅을 사용 설정해야 합니다.

개발자 옵션을 표시하고 USB 디버깅을 사용 설정하려면 다음 단계를 따르세요.

1. Android 기기에서 설정 > 휴대전화 정보를 탭합니다.
2. 빌드 번호를 일곱 번 탭합니다.
3. 메시지가 표시되면 기기 비밀번호 또는 PIN을 입력합니다. '개발자가 되셨습니다.'라는 메시지가 표시되면 성공한 것입니다.
4. '설정'으로 돌아간 다음 시스템 > 개발자 옵션을 탭합니다.
5. 개발자 옵션이 표시되지 않으면 고급 옵션을 탭합니다.
6. 개발자 옵션을 탭한 다음 USB 디버깅 전환을 탭하여 사용 설정합니다.

Android 스튜디오에 기기를 연결하는 두 가지 방법은 케이블이나 Wi-Fi를 통하는 것입니다.

 

퀴즈

1. IDE는 무엇의 약자인가요?
   -> Integrated Development Environment