안드로이드 기본 위젯 - 이미지뷰 (ImageView), 이미지버튼 (ImageButton)

이미지뷰 (ImageView)

본 글은 Do it! 안드로이드 앱 프로그래밍을 참고하여 작성되었습니다.

이미지뷰는 앞선 글들에서 자주 보아왔다시피 이미지를 화면에 표시하기 위해 사용하는 가장 간단한 기본 위젯이다. 자신이 보여주길 원하는 이미지를 직접 로딩하기 위해서는 /res/drawable 폴더 밑에 이미지 파일을 복사하여 넣은 후 Recourses에서 가져와서 사용할 수도 있고, 이 파일을 직접 자바코드로 로딩하여 비트맵으로 만든 후 설정할 수도 있다.

이미지뷰에서 사용하는 속성

android:src
원본 이미지를 지정한다. 이미지 뷰의 경우 src를 통해 원본 이미지를 지정하지 않을 경우 표시할 영역을 구분할 수 없으므로 반드시 설정해주어야 한다. TextView에서 text와 같은 역할이다.

android:maxWidth, android:maxHeight
이미지가 표현되는 최대 크기를 설정한다. 화면에 원본 크기 그대로 보여주지 않고 최대 크기를 제한하여 보여준다. 원본이미지가 너무 클 경우에 사용하면 편리하다.

android:tint
보여주고 싶은 이미지 위에 추가적으로 다른 색상을 덮어씌울 때 설정한다. 다른 속성에서 사용하는 색상 정보와 마찬가지로 #AARRGGBB의 포맷으로 적용한다. 이미지의 느낌이나 색감을 다르게 주고 싶을때 유용히 사용할 수 있다.

scaleType
이미지를 확대/축소할 때 어떤 방식으로 보여줄 것인지 설정한다. XY고정, 가운데 자르기, 가운데 확대 등의 여러 가지 고정 값이 미리 정의되어 있으므로 필요에 따라 적절하게 적용하면 된다.

이미지뷰에서 사용하는 이미지

안드로이드는 PNG포맷의 이미지를 사용하길 권장하지만 필요에 따라서는 jpg등의 여러 포맷을 사용할 수 있다.

앞서 설명했던대로 이미지를 사용하기 위해서는 /res/drawable폴더에 사용하고자 하는 이미지를 추가해야 하는데, 서로다른 해상도의 화면에 이미지를 달리 보여주기 위한 방법도 존재한다.
기본적으로 생성되는 drawable 폴더 외에 drawable-xhdpi, drawable-hdpi, drawable-mdpi, drawable-ldpi의 폴더를 생성하면 각각의 폴더는 초 고해상도, 고해상도, 중간해상도, 저해상도 화면에서 보여줄 이미지 파일들을 저장하기 위해 사용된다.

이미지버튼 (ImageButton)

이미지 버튼은 일반 버튼과 다르게 이미지 파일로 버튼을 구성하고 싶을때 사용한다. 다른 여러가지는 Button위젯과 동일하며 android:background 속성을 통해 사용하고자 하는 이미지를 지정하면 된다.

이미지뷰 예제

역시나 XML 코드만을 활용하여 사용하는 이미지뷰 예제를 첨부한다. 레이아웃은 android:orientation=vertical이 적용된 LinearLayout을 사용하였다.

<!--XML 예제 코드-->
<EditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:inputType="textCapWords"
    android:hint="아무거나 입력해보세요"/>
<ImageButton
    android:layout_width="200dp"
    android:layout_height="100dp"
    android:layout_gravity="center"
    android:background="@drawable/dessert"
    android:contentDescription="이미지버튼" />
<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:textSize="20sp"
    android:text="위는 이미지 버튼, 아래는 이미지뷰"
    />
<ImageView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:background="@drawable/penguin"
    android:contentDescription="펭귄이지용"
    />