안드로이드 이미지뷰 기본 사용법. (Android ImageView)

1. 안드로이드 ImageView

구글 플레이 앱 스토어(https://play.google.com/store/apps)에 등록된 수 많은 안드로이드 앱의 UI 화면을 보면, 대부분의 요소들이 텍스트와 이미지로 구성되어 있습니다. 텍스트를 표시하기 위해서는 기본적으로 TextView 위젯을 사용하며, [텍스트뷰 기본 사용법]에서 TextView의 기본적인 사용법에 대한 내용을 확인할 수 있습니다. 그렇다면 이미지는 어떻게 표시할 수 있을까요?

이름 그대로, 텍스트를 TextView에 표시했듯이, 이미지는 ImageView를 사용하여 표시할 수 있습니다.

또한 ImageView 클래스는 TextView와 마찬가지로 android.view.View 클래스로부터 상속되었기 때문에, View 클래스에서 제공하는 기능과 속성을 그대로 사용할 수 있습니다.

그럼, 지금부터 ImageView의 기본적인 사용법에 대해 살펴보도록 하겠습니다.

2. ImageView 기본 사용법.

ImageView를 사용하여 이미지를 화면에 표시하는 절차는 TextView의 사용 방법만큼이나 간단합니다. Layout 리소스 XML 파일에 ImageView를 추가하고, 화면에 표시할 이미지(Drawable) 리소스 ID를 ImageView의 "src" 속성에 지정하기만 하면 됩니다. 하지만 먼저, 화면에 표시할 이미지를 Drawable 리소스에 추가해야 겠죠.

2.1 Drawable 리소스에 이미지 추가.

ImageView에 표시할 수 있는 이미지 파일의 종류는 여러 가지가 있지만, png 또는 jpg 형식의 파일이 가장 많이 사용됩니다. 특히, png 형식의 파일을 사용할 경우, png 파일 자체에 포함된 투명도(alpha) 값을 활용하여 다양한 이미지 표시 효과를 낼 수 있습니다.

이미지 파일(png, jpg)을 Drawable 리소스에 추가하기 위해서는 현재 작업 중인 프로젝트의 소스 아래 "/res/drawable/" 디렉토리에 이미지 파일을 복사하면 됩니다. 현재 프로젝트 및 "drawable" 경로의 정확한 위치를 확인하려면, "Project 도구"의 모드를 "Project"로 변경하면 됩니다. (기본 모드는 "Android" 모드입니다.)

[방법 1] "/res/drawable"의 경로 확인하여 이미지 추가.

윈도우 탐색기(MacOS 파인더)를 사용하여 해당 위치에 이미지 파일을 복사하면, 안드로이드 스튜디오가 자동으로 이미지 파일을 프로젝트에 포함시킨 다음, "/res/drawable/"에 표시해 줍니다.

음, 위의 방법이 조금 번거롭게 느껴지시죠? 조금 더 간단하게 할 수 있는 방법이 있습니다.
프로젝트의 "/app/res/drawable"에서 마우스 오른쪽 버튼을 눌러 팝업 메뉴를 실행한 다음, Show In Explorer(MacOS에서는 Reveal in Finder) 메뉴를 실행합니다. 그러면 윈도우 탐색기(MacOS 파인더)에서 "/res/" 경로의 내용을 확인할 수 있습니다.

[방법 2] "[Show In Explorer]"(MacOS에서는 "Reveal in Finder") 메뉴를 통해 실행하기

하지만 위의 두 가지 방법보다 훨씬 간단한 방법이 있습니다. 그것은 바로 안드로이드 스튜디오의 "Project 도구" 윈도우를 시스템의 윈도우 탐색기(MacOS 파인더) 처럼 사용하여 파일을 직접 복사하는 것입니다.

즉, 윈도우 탐색기(MacOS 파인더)에서 파일을 복사(Ctrl+C or Command+C)한 다음, 안드로이드 스튜디오 "Project 도구" 윈도우의 "/res/drawable"에 붙여넣기(Ctrl+V or Command+V)해버리는 것입니다. 그럼 이미지 파일이 자동으로 해당 디렉토리에 복사되고 "/res/drawable/"에 표시됩니다.

[방법 3] 윈도우 탐색기(MacOS 파인더)에서 복사 & 붙여넣기.

이미지 파일을 프로젝트에 추가할 때 파일 이름 규칙에 주의해야 합니다. 추가된 이미지 파일은 프로젝트 소스에서 참조될 때, 이미지 파일의 확장자를 제외한 이름이 ID로 사용됩니다. 만약 "img_01.png"이라는 파일을 추가한다면, 리소스 XML에서는 "@drawable/img_01", 자바 코드에서는 "R.drawable.img_01"로 참조되는 것이죠.

그러므로 파일 이름에 한글이나 특수 문자가 포함되어서는 안됩니다. 아니, 파일 이름을 기초로 한(file-based resource name) 리소스 이름 규칙에는 소문자, 숫자, '_' 문자만 사용할 수 있습니다. 그리고 파일 이름의 시작은 소문자 또는 '_'로만 시작할 수 있습니다.

File-based resource names must contain only lowercase a-z, 0-9, or underscore.

다음은 리소스 파일 이름의 몇 가지 예를 든 것입니다.

"아이콘.png" - (X) : 파일 이름에 한글이 포함될 수 없습니다.
"ABC.png" - (X) : 파일 이름에 대문자가 포함될 수 없습니다.
"2image.png" - (X) : 파일 이름이 숫자(2)로 시작할 수 없습니다.
"_2_icon" - (O) : '_'로 시작하는 이름은 적합합니다.
"my_logo4.png" - (O) : 규칙에 적합한 파일 이름입니다.

2.2 Layout 리소스 XML에 ImageView 추가 및 이미지 표시

위에서 추가한 이미지 파일을 화면에 표시하기 위해, ImageView를 Layout 리소스 XML 파일에 추가합니다. 그리고 "src" 속성에 이미지(Drawable)의 리소스 ID를 지정합니다.

  * android:src - ImageView에 표시될 Drawable 지정.
        > "@drawable/XXX"의 형식으로 Drawable 리소스 지정 가능.
        > 컬러 값 사용 가능. (#rgb, #argb, #rrggbb, #aarrggbb 등의 형식)

[STEP-1] "activity_main.xml" - Layout 리소스 XML 파일에 ImageView 추가 및 "src" 속성 지정.

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView1"
        android:src="@drawable/android_icon"/>

2.3 Java 소스에서 ImageView의 이미지 변경

Layout 리소스 XML이 아닌, 자바 소스에서 ImageView에 출력되는 이미지를 변경하려면, ImageView의 id를 이용하여 참조를 획득한 다음, setImageResource() 함수를 호출하면 됩니다. 물론, 변경하고자 하는 이미지 또한 "/res/drawable" 디렉토리에 복사되어 있어야 합니다. (아래 코드의 예제. "/res/drawable/google_logo.png")

[STEP-2] "MainActivity.java" - Java 소스에서 ImageView의 이미지 설정.

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // ... 코드 계속
        ImageView imageView1 = (ImageView) findViewById(R.id.imageView1) ;
        imageView1.setImageResource(R.drawable.google_logo) ;
    }
}

2.4 ImageView에 이미지가 아닌 컬러 표시

ImageView에 반드시 이미지 리소스(.png, .jpg)만 표시할 수 있는 것은 아닙니다. "src" 속성에 컬러 값을 지정하여 ImageView 영역 전체에 색을 칠할 수도 있습니다. 단, 자체 크기를 가지는 이미지와는 다르게, 컬러 값을 사용할 때는 ImageView가 화면에 표시될 수 있도록 ImageView의 크기를 직접 지정해야 합니다. (즉, layout_width, layout_height를 둘 다 wrap_content로 사용하면 ImageView가 화면에 표시되지 않습니다.)

[STEP-3] "activity_main.xml" - ImageView에 색상 표시하기.

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="30dp"
            android:src="#FF0000"/>

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="30dp"
            android:src="#00FF00"/>

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="30dp"
            android:src="#0000FF"/>

    </LinearLayout>

ImageView의 색상 표시 기능을 응용하면, View 위젯 간 구분 선을 그리는 효과를 낼 수 있습니다.

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:gravity="center_horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="30sp"
            android:text="TEXT1" />

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="2dp"
            android:src="#000000"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="30sp"
            android:text="TEXT2" />

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="2dp"
            android:src="#000000"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="30sp"
            android:text="TEXT3" />

    </LinearLayout>

3. 참고.

• ImageView에 대한 자세한 도움말.
  • [안드로이드 개발 참조문서 ImageView 항목] 내용을 참고하세요.