[Android] 기본 위젯 사용 예제 3: image view & image button

이름에서 알 수 있듯, image view 는 이미지를 화면 상에 나타낼 때 사용하며 image button으로 이미지를 버튼으로 사용할 수 있다.

 

image view, button에서 사용하는 이미지는 일반적으로 app/res/drawable 폴더 안에 저장하며, 화면에 해상도에 따라 다음과 같이 폴더를 지정하여 저장하면 안드로이드에서 알아서 해당 해상도에 맞는 로딩 방식을 사용한다.

해상도	폴더 이름
초고해상도	/app/res/drawable-xhdpi, /app/res/drawable-xxhdpi, /app/res/drawable-xxxhdpi
고해상도	/app/res/drawable-hdpi
중간 해상도	/app/res/drawable-mdpi
저해상도	/app/res/drawable-ldpi

 

바로 간단하게 예제를 확인해보자

 

◎layout.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" android:layout_width="match_parent"
              android:layout_height="match_parent" android:orientation="vertical">

    <ImageButton
            android:layout_width="400dp"
            android:layout_height="400dp" app:srcCompat="@drawable/img1" android:id="@+id/imageButton"
            android:maxHeight="50dp"
            android:maxWidth="50dp"
            android:scaleType="fitXY"
            android:onClick="onImg1Click"
            />
    <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content" app:srcCompat="@drawable/img2" android:id="@+id/imageView"/>
</LinearLayout>

ImageButton 태그 내부에 있는 scale type 속성은 레이아웃의 크기에 이미지를 어떤 식으로 맞춰서 넣을 지를 정해주는 속성이며, 그 종류는 아래와 같다.

 

1. android:scaleType="center" : 이미지 원본 크기와 비율을 유지하며 이미지의 중앙을 layout_width, layout_height 안에 출력한다. 이 때 레이아웃보다 이미지가 크면 레이아웃의 벗어난 이미지는 출력되지 않은다. 레이아웃보다 이미지가 작으면 이미지를 center 정렬 한다.

 

2. android:scaleType="centerCrop" : 이미지의 가로/세로의 길이 중 짧은 쪽을 ImageView의 레이아웃에 꽉 차게  크기를 맞춰서 출력한다. 이 때 원본 이미지 가로/세로의 비율은 유지되고 레이아웃 영역에서 벗어난 이미지는 출력되지 않는다.

 

3. android:scaleType="centerInside" : 이미지의 가로/세로의 길이 중 긴 쪽을 ImageView의 레이아웃에 맞춰서 출력한다. 이 때 원본 이미지의 가로/세로의 비율은 유지되고 레이아웃에 이미지외 빈공간은 background 속성의 color로 채워진다. fitCenter와 다른점은 원본 이미지가 ImageView이 레이아웃보다 작다면, 이미지의 크기가 유지 된다는 것이다.

 

4. android:scaleType="fitCenter" : 이미지의 가로/세로의 길이 중 긴 쪽을 ImageView의 레이아웃에 맞춰서 출력하다. 이 때 원본 이미지의 가로/세로의 비율은 유지되고 레이아웃에 이미지외 빈공간은 background 속성의 color로 채워진다. centerInside와 다른점은 이미지의 크기가 ImageView의 레이아웃에 크기에 따라 변한다는 것이다.

 

5. android:scaleType="fiStart" : ImageView 레이아웃 안에서 이미지의 가로/세로 비율을 유지하며 출력되지만 ImageView의 레이아웃의 왼쪽 상단을 기준으로 정렬된다.

 

6. android:scaleType="fitEnd" : ImageView 레이아웃 안에서 이미지의 가로/세로 비율을 유지하며 출력되지만 ImageView의 레이아웃의 오른쪽 하단을 기준으로 정렬된다.

 

7. android:scaleType="fitXY" : 가로/세로 비율에 상관없이 ImageView의 레이아웃의 각 면에 꽉 차게 출력된다.

 

8. android:scaleType="matrix" : 이미지 원본의 크기와 비율을 유지하며 이미지 원본대로 왼쪽 상단을 기준으로 출력된다. 이미지가 ImageView의 레이아웃 보다 크다면 나머지 이미지는 출력되지 않는다.

 

◎MainActivity.java

package com.example.text_widget_ex_1;

import android.view.View;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.button);
    }

    public void onImg1Click(View view) {
        Toast.makeText(this,"뭉치 좋ㅡ아", Toast.LENGTH_LONG).show();
    }
}