Android

Jetpack Compose - 안드로이드 스튜디오 코알라 2024.01.02

dev-note-404 2024. 9. 11. 15:09
728x90
반응형

안드로이드 업데이트 하면서 바뀌면서 원래도 하나도 몰랐지만, 이제 껄떡거리지도 못할 정도로 많이 바뀜ㅜㅜ

 

그렇지만 나에게는 chapgpt(챗지)가 있다. 예전에 키오스크 들어가는 웹뷰 만들면서 하나도 도움을 받지 못했던거는 안비밀...

 

챗지한테 물어보니 

 

Android Studio에서 새 프로젝트를 처음 만들면, 기본적으로 activity_main.xml 파일이 생성되지만, 최근에는 Jetpack Compose 같은 최신 UI 툴킷을 사용하는 경우 XML 레이아웃 파일이 없을 수 있습니다. Android Studio가 Jetpack Compose를 사용하는 프로젝트로 설정되었을 가능성이 큽니다.

두 가지 상황에 맞는 해결책을 설명하겠습니다:

1. Jetpack Compose 프로젝트일 경우

Jetpack Compose를 사용한다면, XML 파일 대신 코드를 통해 UI를 구성합니다. 이 경우, XML 파일을 찾을 수 없으며 UI를 Kotlin 코드로 작성해야 합니다.

Compose에서 Image 사용 예시

Compose에서 이미지를 사용하려면 Image 컴포넌트를 활용합니다.

 

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp

@Composable
fun KoalaImage() {
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        Image(
            painter = painterResource(id = R.drawable.koala_image),
            contentDescription = "코알라 이미지",
            contentScale = ContentScale.Crop, // 이미지를 어떻게 맞출지 결정
            modifier = Modifier.size(200.dp) // 이미지 크기 설정
        )
    }
}

 

  • painterResource: 이미지를 불러오는 함수입니다. 이미지는 res/drawable에 추가되어야 합니다.
  • contentScale: 이미지를 어떻게 배치할지 결정합니다. Crop, Fit, FillBounds 등 다양한 옵션이 있습니다.
  • Modifier.size(): 이미지의 크기를 설정할 수 있습니다.

Compose에서 이미지 추가 절차

  1. res/drawable 폴더에 코알라 이미지를 추가합니다.
  2. Compose 코드를 사용해 이미지를 표시합니다.

2. 기존 XML 기반 프로젝트일 경우

만약 Jetpack Compose를 사용하고 싶지 않고 XML 기반으로 작업하고 싶은 경우, 새로 XML 파일을 만들어 사용할 수 있습니다.

XML 레이아웃 파일을 수동으로 추가하는 방법

  1. 파일 생성: res/layout 폴더에서 마우스 오른쪽 버튼을 클릭하고 New > Layout Resource File을 선택합니다.
  2. 파일 이름: 파일 이름을 activity_main.xml로 지정하고 OK를 누릅니다.
  3. 레이아웃 작성: XML 파일에서 레이아웃을 작성합니다.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center">

    <ImageView
        android:id="@+id/koalaImage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/koala_image"
        android:contentDescription="코알라 이미지"
        android:scaleType="centerCrop" />

</LinearLayout>

3. Compose와 XML 혼용 사용 (선택 사항)

Compose와 XML을 함께 사용할 수도 있습니다. 이 경우 XML 기반의 기존 레이아웃과 Compose 컴포넌트를 결합할 수 있습니다. XML을 사용하고 싶지 않다면 Compose만 사용하는 것도 가능합니다.

필요에 따라 프로젝트 설정을 확인하거나, 어떤 방식으로 UI를 구성할지 선택해 사용하면 됩니다.

라고 대답해주더라... 한번 해보겠다...

그냥 이미지 넣는것은 쉬웠으나...

for 문 쳐서 여러개 넣고 싶은데 쉽지 않다...

다음에 올려본다... 17+1

 

728x90
반응형