이전 포스트의 Happy Birthday 프로젝트에 이미지를 추가합니다.
- +(모듈에 리소스 추가) > Import Drawables(드로어블 가져오기)를 클릭합니다.
- 파일 브라우저에서 다운로드한 이미지 파일을 선택한 다음 Open(열기)을 클릭합니다
- Android 스튜디오에 이미지의 미리보기가 표시됩니다. QUALIFIER TYPE(한정자 유형) 드롭다운 목록에서 Density(밀도)를 선택합니다. 이렇게 하는 이유는 이후 섹션에서 알아보겠습니다.
- VALUE(값) 목록에서 No Density(밀도 없음)를 선택합니다.
Android 기기는 다양한 화면 크기(예: 휴대전화, 태블릿, TV)로 제공되며 이러한 화면은 픽셀 크기도 다릅니다. 즉, 한 기기에서는 제곱인치당 160픽셀을 사용하지만 다른 기기에서는 같은 공간에 480픽셀을 사용합니다. 이러한 픽셀 밀도의 차이를 고려하지 않으면 시스템이 이미지를 확대하여 흐릿한 이미지, 메모리를 과도하게 사용하는 큰 이미지 또는 부적절한 크기의 이미지를 얻을 수 있습니다.
https://developer.android.com/training/multiscreen/screendensities?hl=ko
- Next(다음)를 클릭합니다.
- Android 스튜디오에서는 이미지가 배치될 폴더 구조를 보여줍니다. drawable-nodpi 폴더를 확인합니다.
- Import(C)(가져오기(C))를 클릭합니다.
Android 스튜디오는 drawable-nodpi 폴더를 만들고 그 안에 이미지를 배치합니다. Android 스튜디오 프로젝트 뷰에는 리소스 이름이 androidparty.png (nodpi)로 표시됩니다. 컴퓨터 파일 시스템에서는 Android 스튜디오가 drawable-nodpi라는 폴더를 만듭니다.
- app > res > drawable을 클릭하여 이미지가 drawable 폴더에 있는지 확인합니다.
이미지 컴포저블
앱에서 이미지를 표시하려면 표시할 위치가 필요합니다.
구성 가능한 함수 Text 를 사용하여 텍스트를 표시하는 것처럼 구성 가능한 함수 Image를 사용하여 이미지를 표시할 수 있습니다.
Jetpack Compose의 리소스
리소스는 코드에서 사용하는 추가 파일과 정적인 콘텐츠 입니다.
예를 들어 비트맵, 사용자 인터페이스 문자열, 애니메이션 지침 등이 있습니다.
이미지와 문자열 등 애플리케이션 리소스는 독립적인 유지관리가 가능하도록 항상 코드로부터 분리해야 합니다.
Android는 런타임에 현재 구성을 근거로 적절한 리소스를 사용합니다.
예를 들어 화면 크기에 따라 다른 UI 레이아웃을 제공하거나 언어 설정에 따라 다른 문자열을 제공할 수 있습니다.
리소스 그룹화
-
항상 프로젝트의 red/ 디렉터리에 있는 특정 하위 디렉터리에 각 유형의 리소스를 배치해야합니다.
-
이미지 리소스용 : drawable/
-
런처 아이콘용 : mipmap/
-
문자열 리소스용 : values/
-
리소스 유형 개요
https://developer.android.com/guide/topics/resources/available-resources?hl=ko
리소스 액세스
Jetpack Compose는 Android 프로젝트에 정의된 리소스에 액세스할 수 있습니다.
프로젝트의 R 클래스에서 생성된 리소스 ID로 리로스에 액세스할 수 있습니다.
R 클래스는 Android에서 자동으로 생성되는 클래스로, 프로젝트에 있는 모든 리소스의 ID 를 포함합니다.
다음 작업에서 이전 작업에서 추가한 이미지 androidparty.png 파일을 사용합니다.
@Composable
fun GreetingImage(message: String, from: String, modifier: Modifier = Modifier) {
val image = painterResource(R.drawable.androidparty)
}painterResource() 함수는 드로어블 이미지 리소스를 로드하고 리소스 ID(이 경우 R.drawable.androidparty)를 인수로 사용합니다.
- painterResource() 함수를 호출한 후 Image 컴포저블을 추가하고 image를 이름이 지정된 painter 인수로 전달합니다.
@Composable
fun GreetingImage(message: String, from: String, modifier: Modifier = Modifier) {
val image = painterResource(R.drawable.androidparty)
Image(
painter = image,
contentDescription = null
)
}
상자 레이아웃 추가
Box 레이아웃은 COmpose의 표준 레이아웃 요소 중 하나 입니다.
Box 레이아웃을 사용하여 요소를 서로 위에 쌓습니다.
- GreetingImage() 함수에서 다음과 같이 구성 가능한 함수 Image 주위에 구성 가능한 함수 Box를 추가합니다.
- modifier 매개변수를 Box 컴포저블에 전달하는 코드를 추가합니다.
- 구성 가능한 함수 Box의 끝에서 GreetingText() 함수를 호출하고 아래와 같이 생일 메시지와 서명, 수정자를 전달합니다.
@Composable
fun GreetingImage(message: String, from: String, modifier: Modifier = Modifier) {
val image = painterResource(R.drawable.androidparty)
Box(modifier) {
Image(
painter = image,
contentDescription = null
)
Greeting(
message= message,
from = from,
modifier = Modifier.fillMaxSize()
)
}
}- onCreate() 함수에서 GreetingText() 함수 호출을 GreetingImage() 함수 호출로 바꿉니다.
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
enableEdgeToEdge()
setContent {
HappyBirthdayTheme {
Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
GreetingImage(
modifier = Modifier.padding(innerPadding),
message = "Happy Birthday",
from = "From Emma"
)
}
}
}
}
}
불투명도 변경 및 이미지 크기 조정
ContentScale
https://developer.android.com/develop/ui/compose/graphics/images/customize?hl=ko#content-scale
- contentScale.Crop로 설정합니다
Image(
painter = image,
contentDescription = null,
contentScale = ContentScale.Crop
)
불투명도 변경
- Image 컴포저블에 alpha 매개변수를 추가하고 0.5F로 설정합니다.
Image(
painter = image,
contentDescription = null,
contentScale = ContentScale.Crop,
alpha = 0.5F
)
레이아웃 수정자
수정자는 Jetpack Compose Ui 요소를 장식하거나 이 요소에 동작을 추가하는 데 사용됩니다.
예를 들어 행이나 텍스트, 버튼에 배경이나 패딩 동작을 추가할 수 있습니다.
이를 설정하려면 컴포저블이나 레이아웃에서 수정자를 매개변수로 허용해야합니다.
- 예를 들어 이 Text 컴포저블에는 배경 색상을 녹색으로 변경하는 Modifier 인수가 있습니다.
Text(
text = "Hello, World!",
// Solid element background color
modifier = Modifier.background(color = Color.Green)
)이 예시에서 Modifier.background(color = Color.Green)는 텍스트의 배경색을 녹색으로 바꾸는 수정자입니다.
정렬 속성
Row나 Column 같은 레이아웃에서 하위 요소들이 어떻게 배치될지 정할 때도 수정자를 사용합니다.
horizontalArrangement: Row에서 가로 정렬을 설정합니다.
verticalAlignment: Row에서 세로 정렬을 설정합니다.
verticalArrangement: Column에서 세로 정렬을 설정합니다.
horizontalAlignment: Column에서 가로 정렬을 설정합니다
