Android 앱에 이미지 추가 ~5

Image composable 사용하여 앱에 이미지 추가하기

https://github.com/google-developer-training/basic-android-kotlin-compose-birthday-card-app/blob/main/app/src/main/res/drawable-nodpi/androidparty.png

GitHub - google-developer-training/basic-android-kotlin-compose-birthday-card-app

이 링크에서 이미지를 다운받는다.

C: hyeon 에 저장하기

Resource Manager에서 + 한 후 Import Drawables 클릭

Qualifier Type목록에서 Density,

   Value목록에서 no density 클릭

Import 클릭

   -> Android 스튜디오는 drawable-noopi 폴더를 만들고 그 안에 이미지를 배치한다. 

성공적으로 이미지를 가져오면 안드로이드 스튜디오는 Drawable 탭 아래의 목록에 이미지를 추가한다. 

 

4. 이미지 composable 추가

앱에서 이미지를 추가하려면 표시할 위치가 필요하다. 

Text composable을 사용하여 텍스트를 표시하는 것처럼 Image composable을 사용하여 이미지를 표시 가능

 

Jetpack Compose의 리소스

리소스는 코드에서 사용하는 추가 파일과 정적인 콘텐츠이다.

예를 들어 비트맵, 사용자 인터페이스 문자열, 애니메이션 지침 등이 있다.

이미지와 문자열 등 application resource는 독립적인 유지관리를 위해 항상 코드로부터 분리해야한다.

Android는 런타임에 현재 구성을 근거로 적절한 리소스를 사용한다. 

ex) 화면 크기에 따라 다른 UI 레이아웃을 제공하거나 언어 설정에 따라 문자열을 제공한다. 

 

리소스 그룹화

항상 프로젝트의 res/ 디렉터리에 있는 특정 하위 디렉터리에 각 유형의 리소스를 배치해야 한다. 

간단한 프로젝트에서 볼 수 있는 파일 계층 구조의 예

MyProject/
    src/
        MyActivity.kt
    res/
        drawable/
            graphic.png
        mipmap/
            icon.png
        values/
            strings.xml

res/ directory에는 이미지 리소스용 drawable 디렉터리,

런처 아이콘용 mipmap/ 디렉터리,

문자열 리소스용 values/ 디렉터리가 포함된 하위 디렉터리의 모든 리소스가 포함되어 있다. 

 

리소스 엑세스

Jetpack Compose는 Android 프로젝트에 정의된 리소스에 엑세스할 수 있다. 

프로젝트의 R 클래스에서 생성된 리소스 ID로 리소스에 access 할 수 있다.

 

R 클래스는 Android에서 자동으로 생성되는 클래스로, 프로젝트에 있는 모든 리소스의 ID를 포함한다. 

대부분의 경우 리소스 ID는 파일 이름과 동일하다. 

예를 들어 이전 파일 계층 구조의 이미지는 

R.drawable.graphic

로 엑세스 가능

다음 작업을 수행해보자

1. BirthdayGreetingWithImage() 함수에서 val 속성을 선언하고 이름을 image로 지정
2. androidparty 리소스를 전달하여 painterResource() 함수를 호출합니다. 반환된 값을 image에 할당

//Image composable
@Composable
fun BirthdayGreetingWithImage(message: String,from: String) {
    val image = painterResource(R.drawable.androidparty)
    
}

painterResource() 함수는

drawable 이미지 리소스를 로드하고 리소스 ID(여기서는 R.drawable.androidparty) 를 인수로 사용한다. 

3. painterResource() 함수를 호출한 후 Image 컴포저블을 추가하고 image를 이름이 지정된 painter 인수로 전달

Image(
   painter = image
)

 

앱 접근성 확인

사용자에게 표시되는 콘텐츠 설명을 설정하는 대신 이미지의 contentDescription 인수를 null로 설정하여

TalkBack이 Image 컴포저블을 건너뛰도록 할 수 있다.

cf) Talkback: 사용자에게 제공하는 음성피드백, 사용자는 화면을 보지 않고도 기기 사용 가능

 

Image(
   painter = image,
   contentDescription = null
)

Image 컴포저블 미리보기 

 

난 왜 이렇게 뜰까 

5. Box 레이아웃 추가

Compose의 세 가지 기본 표준 레이아웃 요소는 Column, Row, Box 컴포저블이다.

이제 Box 컴포저블에 관해 알아봅시다~

 

Box 레이아웃은 Compose의 표준 레이아웃 요소 중 하나입니다. 

Box 레이아웃을 사용하여 요소를 서로 위에 쌓는다. Box레이아웃을 사용하면 포함된 요소의 특저 정렬도 구성할 수 있다.

1. Image 컴포저블 주위에 Box 컴포저블 추가

@Composable
fun BirthdayGreetingWithImage(message: String,from: String) {
    val image = painterResource(R.drawable.androidparty)
    //Box 레이아웃 추가
    Box {
        
        Image(painter = image, contentDescription = null)
    }

}

2. Box 컴포저블의 끝에서 BirthdayGreetingWithText() 함수를 호출 후  아래와 같이 생일 메시지와 서명을 전달

 

3. 미리보기 확인 

4. 에뮬레이터나 기기에 변경사항이 반영되도록 하려면 onCreate() 함수에서 BirthdayGreetingWithText()함수 호출을  BirthdayGreetingWithImage() 함수로 바꿔주기

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){
                   BirthdayGreetingWithImage(message = "Happy Birthday Sam!", from = "-from Emma")
            }
            }
        }
    }
}