본문 바로가기
TIL/Android

[Android] 이미지 뷰(ImageView), 이미지 버튼(ImageButton)

by 왁왁s 2022. 10. 5.

이미지 뷰(ImageView)란?

이미지 뷰는 아이콘과 같은 이미지들을 간단히 표시하는 데 사용되며,

TextView 클래스를 확장한 것으로, 이미지를 표시할 수 있는 TextView라고 생각하면 된다.

 

 

속성 설정 메소드 설명
android:src setImageResource(int) 이미지 소스 설정
android:tint setColorFilter(int, PorterDuff, mode) 이미지 배경 색상 설정
android:maxHeight setMaxHeight(int) 이미지 뷰의 최대 높이 설정
android:maxWidth setMaxWidth(int) 이미지 뷰의 최대 너비 설정
android:adjustViewBounds setAdjustViewBounds(boolean) drawable의 종횡비를 유지하기 위해 이미지 뷰의 가로, 세로를 조정
android:cropToPadding   true이면 패딩 안에 맞추어서 이미지를 자름.

 


 

이미지 뷰(ImageView) 만들기

1. 이미지를 다운 받는다. 

=> 안드로이드가 지원하는 이미지의 형식은 gif, png, jpg이다.

 

2. 이미지를 app/src/main/res/Drawable 폴더에 마우스로 끌어올리거나, 복사+붙여넣기를 한다.

=> 이미지 파일을 폴더에 복사만 하면 안드로이드 스튜디오가 자동적으로 리소스 ID를 생성한다.

 

3. drawable 폴더로 이동하면 아래와 같은 창이 뜬다. OK를 누른다.

=> res 이름은 소문자이어야 하며, 밑줄( _ )은 사용 가능하다. 

 

 

이미지뷰 적용하기 예제

activity_main.xml 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/icon"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:adjustViewBounds="true"
        android:src="@drawable/google_android"
        />
</LinearLayout>

 


 

activity_main.xml 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/imageMonariza"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/monariza"
        />
</LinearLayout>

 

 

이미지 버튼(ImageButton) 만들기

안드로이드에서 이미지로 버튼을 만드는 경우가 많다.

가장 간편한 방법은 activity_main.xml 파일에서 <ImageButton> 태그를 사용하는 방법이다.

 

아래와 같이 이미지를 버튼처럼 사용할 수 있다.

 

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:src="@drawable/play" />
</LinearLayout>

댓글