기본 레이아웃 만들기

3. 텍스트 컴포저블로 간단한 앱 빌드

1. 시작하기 전에

Jetpack Compose를 사용하여 화면에 생일 축하 메시지를 표시하는 간단한 android 앱을 빌드합니다.

3. Happy Birthday 앱 설정

Empth Compose Activity 템플릿으로 Happy Birthday 앱을 만들면 Android 스튜디오에서는 화면에 표시되는

Hello Android! 메시지를 비롯하여 기본 Android 앱의 리소스를 설정한다. 

 

       사용자 인터페이스(UI)란?

앱에서 사용자 인터페이스란 화면에 표시되는 텍스트, 이미지, 버튼, 기타 여러 유형의 요소 및 화면에 표시되는 방식

즉, 앱이 콘텐츠를 사용자에게 표시하는 방식이자 사용자가 앱과 상호작용하는 방식이다.

이러한 각각의 요소를 UI 구성요소라고 한다. 

앱 화면에 표시되는 대부분의 내용은 UI 요소이다.

UI요소는 상호작용이 가능한 요소(EX. 클릭가능한 버튼, 편집 가능한 입력란) 가 될 수도 있고 장식용 이미지가 될 수도 있다

 

4. Jetpack Compose란? 

Jetpack Compose는 Android UI를 빌드하기 위해 사용하는 최신 툴킷이다. 

Compose는 적은 양의 코드, 강력한 도구 및 직관적인 Kotlin 기능으로 Android에서 UI개발을 간소화하고 가속한다.

Compose 사용 시 데이터를 받아서 UI요소를 내보내느 함수 , 구성 가능한 함수(composable function)라는 함수 집합을 정의하며 UI를 빌드할 수 있다.

 

구성 가능한 함수 composable function

구성 가능한 함수는 Compose에서 UI의 기본 빌드 블록이다. 

  구성 가능한 함수의 특징

     - UI 일부를 설명한다

     - 아무것도 반환하지 않는다. 

     - 몇 개의 입력을 받아서 화면에 표시되는 내용을 생성한다.

     - 여러 UI 요소를 내보낼 수도 있다.

주석

 주석은 코드에 추가 정보를 첨부하는 방법이다. Jetpack Compose 컴파일러와 같은 도구 및 다르개발자가 앱의 코드를 이해하는 데 도움이 된다.

 

주석은 @문자를 이름의 접두사로 추가하여 적용된다. where? 주석 처리하고 있는 선언의 시작 부분에

@Composable

 

// Example code, do not copy it over

@Json
val imgSrcUrl: String

@Volatile
private var INSTANCE: AppDatabase? = null

매개 변수가 있는 주석

주석은 매개 변수를 받을 수 있다. 매개 변수는 주석을 처리하는 도구에 추가 정보를 제공한다. 

매개 변수가 없는 주석

배경을 미리 보여주는 주석

미리보기 제목으로 주석 달기

여러 매개변수를 주석에 전달

구성 가능한 함수의 예

구성 가능한 함수는 @Composable 주석으로 주석 처리 된다.  모든 구성 가능한 함수에는 이 주석이 있어야 한다.

이 주석을 통해 이 함수가 데이터를 UI로 변환하게 되어 있다는 것을 Compose 컴파일러에게 알린다.

cf) 컴파일러: 작성한 코드를 한 줄씩 보고 컴퓨터가 이해할 수 있는 기계어로 변화하는 특수 프로그램

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

 

전달된 매개변수 name을 사용하여 화면에 텍스트 요소를 렌더링하는 구성가능한 함수의 예

참고사항

 - 구성 가능한 함수는 매개변수를 허용하여 앱 로직이 UI를 설명하거나 수정할 수 있게 해줍니다.

위의 경우 UI요소가 String을 허용하므로 사용자에게 이름을 인사할 수 있다.

- 함수는 아무것도 반환하지 않는다. UI를 내보내는 구성 가능한 함수는 UI 요소를 구성하는 대신 원하는 화면 상태ㅡㄹ 기술하므로 반환할 내용이 없다.. 즉, 구성 가능한 함수는 UI를 기술하지만 UI를 구성하거나 만들지 않으므로 반환할 항목이 없다.

 

코드에 있는 구성 가능한 함수 확인

@Preview(showBackground = true)
@Composable
fun BirthdayCardPreview() {
    HappyBirthdayTheme {
        Greeting("Android")
    }
}

 구성 가능한 함수 BirthdayCardPreview() 

 

구성 가능한 함수는 다른 구성 가능한 함수를 호출할 수 있다. 

이 코드 스니펫에서 미리보기 함수는 구성 가능한 함수 Greeting() 을 호출하고 있다. 

 

코드 스니펫 ???

자동완성 기능?? 무슨 말이지 ?? 

 

구성 가능한 함수 이름 

아무것도 반환하지 않으면서 @Composable 주석을 달고 있는 구성 가능한 함수는 파스컬 표기법을 사용하여 이름 지정

파스칼 표기법: 복합어에서 각 단어의 첫 글자를 대문자로 표기하는 명명 규칙파스칼 표기법과 카멜 표기법 의 차이 파스칼 표기법은 모든 단어를 대문자로 표기카멜 표기법은 첫 번째 단어는 대문자로 표기 x

 

Compose함수 이름의 특징

 

5. Android 스튜디오의 Design 창

구성 가능한 함수는 함수를 미리 볼 수 있도록 매개 변수의 기본값을 제공해야한다. 

Greeting() 함수를 직접 미리 볼 수 는 없다. 대신 적절한 매개변수를 사용하여 Greeting()함수를 호출하는 다른 함수를 추가해야한다. 여기서는 BirthdayCardPreview()이다 .

@Preview(showBackground = true)
@Composable
fun BirthdayCardPreview() {
   BirthdayCardTheme {
       Greeting("Android")
   }
}

@Preview(showBackground = true)
@Composable
fun BirthdayCardPreview() {
    HappyBirthdayTheme {
        Greeting("James")
    }
}

 

6. 새 텍스트 요소 추가 

package com.example.happybirthday

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
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.tooling.preview.Preview
import com.example.happybirthday.ui.theme.HappyBirthdayTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            HappyBirthdayTheme {
                // A surface container using the 'background' color from the theme
                Surface(color = MaterialTheme.colors.background){
            }
            }
        }
    }
}

@Composable
fun BirthdayGreetingWithText(message: String) {
    Text(text = message)
    // 텍스트 메시지를 이름이 지정된 인수로 전달하는 Text() 컴포저블 추가
}
@Preview(showBackground = true)
@Composable
fun BirthdayCardPreview() {
    HappyBirthdayTheme {
        BirthdayGreetingWithText(message = "Happy Birthday Sam!")
    }
}

7. 글꼴 크기 변경

 

확장 가능한 픽셀 (SP)는 글꼴 크기의 측정 단위

Android 앱의 UI 요소는 두 가지 측정 단위를 사용

1) DP : density independent pixel : 레이아웃에 사용

2) SP : scalable pixels : DP단위와 크기가 동일하지만, 사용자가 휴대전화 설정에서 선택한 선호하는 텍스트 크기에 따라 크기가 조절된다. 

 

 

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
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.tooling.preview.Preview
import androidx.compose.ui.unit.sp
import com.example.happybirthday.ui.theme.HappyBirthdayTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            HappyBirthdayTheme {
                // A surface container using the 'background' color from the theme
                Surface(color = MaterialTheme.colors.background){
            }
            }
        }
    }
}

@Composable
fun BirthdayGreetingWithText(message: String) {
    Text(
        text = message,
        fontSize = 36.sp
    )
    // 텍스트 메시지를 이름이 지정된 인수로 전달하는 Text() 컴포저블 추가
}
@Preview(showBackground = true)
@Composable
fun BirthdayCardPreview() {
    HappyBirthdayTheme {
        BirthdayGreetingWithText(message = "Happy Birthday Sam!")
    }
}

 

8. 다른 텍스트 요소 추가

이름으로 카드에 서명하는 작업을 해보자

수정 한 부분

@Composable
fun BirthdayGreetingWithText(message: String, from: String) {
    Text(
        text = message,
        fontSize = 32.sp,
    )
    Text(
        text = from,
        fontSize = 24.sp
    )
    // 텍스트 메시지를 이름이 지정된 인수로 전달하는 Text() 컴포저블 추가
}

Text 추가할 때 위에 있는 기존의 Text 부분에 from을 추가하는 것이 아니라, 새로 Text()를 만들어서  추가하는 것이다. 

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
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.tooling.preview.Preview
import androidx.compose.ui.unit.sp
import com.example.happybirthday.ui.theme.HappyBirthdayTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            HappyBirthdayTheme {
                // A surface container using the 'background' color from the theme
                Surface(color = MaterialTheme.colors.background){
            }
            }
        }
    }
}

@Composable
fun BirthdayGreetingWithText(message: String, from: String) {
    Text(
        text = message,
        fontSize = 32.sp,
    )
    Text(
        text = from,
        fontSize = 24.sp
    )
    // 텍스트 메시지를 이름이 지정된 인수로 전달하는 Text() 컴포저블 추가
}
@Preview(showBackground = true)
@Composable
fun BirthdayCardPreview() {
    HappyBirthdayTheme {
        BirthdayGreetingWithText(message = "Happy Birthday Sam!", "- from Emma")
    }
}

 

9. 행과 열에 텍스트 요소 정렬

UI 계층 구조는 포함에 기반한다.

즉, 한 구성 요소는 하나 이상의 구성요소를 포함할 수 있으며 상위 요소 및 하위 요소라는 용어가 사용되는 경우도 있다.

context는 상위 UI요소가 하위 UI요소를 포함하는 것이며, 이 하위 UI요소는 하위 UI요소를 차례로 포함할 수 있다.

Compose의 세 가지 기본 표준 레이아웃 요소

1) column composable

2) row composable

3) box composable

 

column, row, boxsms composable 콘텐츠를 인수로 사용하는 composable function이므로 이러한 레이아웃 요소 내에 항목을 배치 할 수 있다. 

 

@Composable
fun BirthdayGreetingWithText(message: String, from: String) {
    Row {
        Text("First column")
        Text("Second column")
    }
    // 텍스트 메시지를 이름이 지정된 인수로 전달하는 Text() 컴포저블 추가
}

이 부분만 수정해주고 refresh & build 해주었다.

후행 람다 문법 -> 아직 잘 모르겠어 

Row에 괄호 대신 중괄호가 사용되었다. 이를 후행 람다 문법이라고 한다.

일단 compose 문법에 익숙해지기! 

Kotlin은 마지막 매개변수가 함수일 때 함수를 매개변수로 함수에 전달하는 특수한 문법을 제공한다.

함수를 이러한 매개변수로 전달하려면 후행 람다 문법을 사용하면 된다. 

함수를 괄호안에 함수 이름과 함께 넣는 대신 함수 이름 뒤에 괄호를 넣는다. 

Row()의 마지막 매개 변수는 하위  UI요소를 내보내는 함수인 content 매개변수이다.

Row(
    content = {
        Text("Some text")
        Text("Some more text")
        Text("Last text")
    }
)

content 매개 변수는 함수 서명의 마지막 매개변수이며 람다 표현식으로 값을 전달한다.

따라서 content 매개변수와 괄호를 삭제 가능 ??

Row {
    Text("Some text")
    Text("Some more text")
    Text("Last text")
}

하나의 행에 텍스트 요소 정렬

텍스트 요소가 겹치는 것을 방지하기 위해 앱의 텍스트 요소를 한 행에 정렬

@Composable
fun BirthdayGreetingWithText(message: String, from: String) {
    Row{
        Text(
            text = message,
            fontSize = 32.sp,
        )
        Text(
            text = from,
            fontSize = 24.sp
        )
    }
    // 텍스트 메시지를 이름이 지정된 인수로 전달하는 Text() 컴포저블 추가
}

로 수정해준다.

두 개의 텍스트요소가 있는 열을 표시하도록 텍스트 요소 주위에 Row composable을 추가한다. 

 

이제 겹치는 부분은 없다. 하지만 서명할 공간이 충분치 않다. 

텍스트 요소를 하나의 열에 정렬해보자

 

하나의 열에 텍스트 요소 정렬

위 코드에서 Row를 Column으로 바꾸면 된다.

@Composable
fun BirthdayGreetingWithText(message: String, from: String) {
   Column {
       Text(
           text = message,
           fontSize = 36.sp,
       )
       Text(
           text = from,
           fontSize = 24.sp,
       )
   }
}

10. 기기에 표시하기

함수로 스크롤하기 가 뭘 하라는 걸까요 ??

어 또 궁금한 게  xml 말고 jetpack compose으로 하잖아요

근데 xml으로 공부를 할 떄는 항상 empty activity를 만들어 줬는데 

compose로 하니깐 empty compose activity를 만들라고 하더라구요???

jetpack compose를 사용할려면 항상 empty compose activity로 생성해줘야하는건가요? 

 

요약

1) Jetpack Compose는 Android UI를 빌드하기 위해 사용하는 최신 도구 키드이다.

Jetpack Compose는 더 적은 수의 코드, 강력한 도구, 직관적인 Kotlin API로 Android 에서의 UI개발을 간소화 & 가속화

2) 앱의 사용자 인터페이스 (UI)는 화면에 표시되는 텍스트, 이미지, 버튼, 기타 여러 유형의 요소이다.

3) 구성 가능한 함수 composable 함수는 Compose의 기본 구성 요소이다. 구성 가능한 함수는 UI의 일부를 설명하는 함수이다.

4) 구성 가능한 함수는 @Composable 주석으로 주석처리된다. 이 주석은 이 함수가 데이터를 UI로 변환한다는 것을 Compose 컴파일러에 알려준다

5) Compose의 세 가지 표준 레이아웃 요소는 Column, Row, Box 이다

이러한 요소는 컴포저블 콘텐츠를 사용하는 구성 가능한 함수이므로 내부에 항목을 배치할 수 있다.

Row 내의  각 하위 요소는 가로로 나란히 배치된다.