Android 앱에 이미지 추가 6~

6. 이미지 컴포저블의 위치 지정 및 크기 조정

이미지를 전체 화면 크기로 조정하여 앱을 꾸며보자! 이를 위해 Modifier 및 ContentScale 매개변수를 사용한다.  

수정자

수정자는 Jetpack Compose UI요소를 장식하거나 이 요소에 동작을 추가하는 데 사용된다.

예를 들어 행이나 텍스트, 버튼에 배경이나 패딩, 동작을 추가할 수 있다. 이를 설장하려면 컴포저블이 수정자를 매개변수로 허용해야 한다.

예를 들어 Text 컴포저블에는 배경 색상을 녹색으로 변경하는 Modifier 인수가 았다.

Text(
    text = "Hello, World!",
    // Solid element background color
    modifier = Modifier.background(color = Color.Green)
)

 이제 Image 컴포저블에 Modifier 인수를 추가해보자

컴포저블의 높이가 사용 가능한 최대 높이로 설정된다. 

1. BirthdayGreetingWithImage() 함수에서 Image 컴포저블에 modifier라는 또 다른 이름의 인수를 추가하고 Modifier.fillMaxHeight() 값을 제공한다.

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

        Image(
            painter = image, 
            contentDescription = null,
            modifier = Modifier.fillMaxHeight()
        )
        BirthdayGreetingWithText(message = message, from = from)
    }

}

Android 스튜디오에서 메시지가 표시되면

androidx.compose.foundation.layout.fillMaxHeight 함수를 가져온다.

 2.  .fillMaxWidth() 함수를 수정자에 추가한다.   

한번에 둘 이상의 수정자를 사용해야 하는 경우 다음과 같이 수정자 호출을 함께 연결할 수 있다.

Android 스튜디오에서 메시지가 표시되면 

androidx.compose.foundation.layout.fillMaxWidth 함수를 가져온다.

 

콘텐츠 조정

이제 이미지 크기를 조절하는 방법을 나타내는 이미지의 배율 유형을 조정하여 전체 화면이 되도록 해야 한다.

여러 ContentScale 유형을 사용한다. ContentScale.Crop 매개변수 배율을 사용한다.

이는 이미지의 너비와 높이가 다음 이미지와 같이 상응하는 화면의 크기와 같거나 크도록 가로 세로 비율을 유지하기 위해 이미지의 크기를 균일하게 조정한다. 

 

Image(
    painter = image,
    contentDescription = null,
    modifier = Modifier
        .fillMaxHeight()
        .fillMaxWidth(),
    contentScale = ContentScale.Crop
)

1. Image에 ContentScale 인수 추가하기

2.Android 스튜디오에서 메시지가 표시되면 androidx.compose.ui.layout.ContentScale 속성을 가져온다.

 

이미지 미리보기

7. 텍스트 정렬 및 패딩 추가

이제 문자 메시지에 패딩을 추가하고 메시지를 정렬하여 앱을 더 아름답게 만든다.

@Composable
fun BirthdayGreetingWithText(message: String, from: String) {
    Column{
        Text(
            text = message,
            fontSize = 32.sp,
            modifier = Modifier
                .fillMaxWidth()
                .wrapContentWidth(Alignment.Start)
        )
        Text(
            text = from,
            fontSize = 24.sp
        )
    }

1. Text 컴포저블인 생일메시지를 찾는다. 

2. Modifier.fillMaxWidth() 값을 할당한다. -> 컴포저블의 너비가 사용 가능한 최대 너비로 설정된다.

3. .wrapContentWidth()를 Modifier 에 연결한다. -> 사용가능한 화면 너비(또는 상위 너비) 에 컴포저블이 래핑되고 정렬된다.

4. .wrapContentWidth() 함수에 Alignment.Start 인수를 전달한다. -> Text 컴포저블 또는 하위 요소가 화면의 시작 부분 또는 상위 요소에 맞춰서 정렬된다. 

 

compose.ui 패키지에서 androidx.compose.ui.Alignment 속성을 가져온다.

 

패딩

UI요소는 콘텐츠 주위로 래핑된다. 너무 비좁게 래핑되지 않도록 각 면의 패딩 값을 지정할 수 있다.

패딩은 수정자(modifier)로 사용되므로 모든 컴포저블에 적용할 수 있다. 컴포저블의 각 면의 경우 padding 수정자는 패딩 값을 정의하는 선택적 인수를 사용한다. 

1. Modifier에 .padding() 함수호출을 연결하고 16.dp로 설정된 start라는 인수와 16.dp라고 설정된 top이라는 인수를 전달한다. 

Text(
   text = message,
   fontSize = 36.sp,
   modifier = Modifier
       .fillMaxWidth()
       .wrapContentWidth(Alignment.Start)
       .padding(start = 16.dp, top = 16.dp)
)

import androidx.compose.ui.unit.dp

2. Android 스튜디오에서 이러한 패키지를 자동으로 가져오지 않으면 수동으로 가져온다.

androidx.compose.foundation.layout.padding

3. 확인

 

4. 마찬가지로 서명을 화면 끝 부분에 맞춰서 정렬한다. 또한 시작과 끝 부분에 패딩 16.dp를 추가한다. 

8. 적절한 코드 사례 채택

번역

앱을 작성할 때는 특정 시점에 다르언어로 번역될 수 있음을 기억해야한다.

String 데이터 유형은 " Happy Birthday, Sam!" 과 같은 일련의 문자이다. 하드 코딩 문자열은 앱 코드에 직접 작성된 문자열이다. 하드 코딩 문자열로 인해 앱을 다른 언어로 번역하기가 더 어렵고 앱의 다른 위치에서 문자열을 재사용하기가 더 힘들다. 문자열을 리소스 파일로 추출하여 이러한 문제를 해결 가능하다. 

코드에서 문자열을 하드코딩하는 대신 문자열을 파일에 넣고 문자열 리소스의 이름을 지정한 후 문자열을 사용할 때마다 이름을 사용한다. 이름은 문자열을 변경하거나 다른 언어로 번역하더라도 동일하게 유지됩니다.

1. MainActivity.kt 파일에서 onCreate() 함수로 스크롤합니다. 생일 축하 메시지 Happy Birthday Sam! 문자열을 선택합
2.  화면 왼쪽에 있는 전구를 클릭한다.
3. Extract string resource를 선택합니다.

이제 하드코딩 문자열이 stringResource() 함수로 대체된다.

Content {
            HappyBirthdayTheme {
                // A surface container using the 'background' color from the theme
                Surface(color = MaterialTheme.colors.background){
                   BirthdayGreetingWithImage(message = getString(R.string.happy_birthday_text), from = "-from Emma")
            }
            }

7. Project 창에서 app > res> values > strings.xml 경로의 strings.xml을 열면 Android 스튜디오에 happy_birthday_text 라는 문자열 리소스가 생성된 것을 확인할 수 있다.

8. 동일한 단계에 따라 Text 컴포저블의 텍스트를 추출한다. 

@Preview(showBackground = true)
@Composable
fun BirthdayCardPreview() {
    HappyBirthdayTheme {
        BirthdayGreetingWithImage(message = "Happy Birthday Sam!", stringResource(R.string.signature_text))
    }
}