[안드로이드 스튜디오 강좌 #13] 기본 위젯 공부하기 : ImageView, ImageButton

이전 글에 이어서 진행합니다.

[안드로이드 스튜디오 강좌 #13] 기본 위젯 공부하기 :  TextView

[안드로이드 스튜디오 강좌 #13] 기본 위젯 공부하기 :  Button

[안드로이드 스튜디오 강좌 #13] 기본 위젯 공부하기 :  EditText

 

 

! 목표

안드로이드에서 이미지를 넣을 수 있는 ImageView와 이미지에 버튼 기능이 있는 ImageButton들을 공부해보자

 

 

이미지뷰

이미지뷰와 이미지 버튼은 이미지를 화면에 표시하는 가장 간단한 위젯이다. 이미지 뷰와 버튼의 차이는 버튼의 기능 유무 이외에는 없으므로 이미지뷰를 기준으로 설명하겠다.

 

이미지뷰에 이미지를 나타내려면 먼저 /app/res/drawable 폴더에 저장한 이미지 파일을 복하사여 넣은 후 src 속성 값을 @drawable/이미지_파일명

으로 지정하면 된다.

 

이때, 이미지 파일명은 확장자를 제외하고 작성해야만 한다. 이런 방법을 '이미지 리소스 지정 방식' 이라 한다.

 

 

1.이미지뷰의 대표적인 속성

 

1) src

src 속성은 원본 이미지를 설정한다.

이미지뷰는 내용물(이미지)가 지정되지 않으면 이미지뷰의 크기를 확인할 수 없다. 그러므로 반드시 설정되야 되는 속성이다.

이미지의 확장자는 JPG, PNG 확장자이다.

 

2) maxWidth, maxHeight

maxWidth, maxHeight는 이미지가 표시되는 최대 폭, 높이를 설정한다. 이 속성들을 설정하지 않으면 원본이미지가 그대로 나타난다.

 

3) tint

tint 속성은 이미지뷰에 보이는 이미지 색상을 설정할 수 있다. "#AARRGGBB" 포맷으로 적용가능하다.

 

4) scaleType

scaleType 속성은 이미지뷰의 크기에 맞게 원본 이미지를 줄이거나, 늘려 보여줄 때 사용한다.

참고 해상도에 따라 이미지를 로딩하게 하기

안드로이드는 화면 해상도에 따라 다른 크기의 이미지를 로딩할 수 있다.

해당 디렉토리에 이미지를 넣으면 해상도가 자동 적용 된다.

 

-초고해상도 /app/res/drawable-xhdpi

-고해상도 /app/res/drawable-hdpi

-중간해상도/app/res/drawable-mdpi

-저해상도 /app/res/drawable-idpi

이 디렉토리들은 직접 생성 해주어야된다.

 

 

 

 

 

2.실습

/app/res/layout 폴더 안에 image.xml 파일을 생성하고 팔레트에서 이미지뷰, 이미지 버튼을 가져오거나,

하단 XML 코드를 입력해보자

 

 

가지고 오고 싶은 이미지를 해당_프로젝트\app\src\main\res\drawable 에 넣어 불러들여 오거나, 그냥 있는 이미지를 불러 들어와도 된다.

 

-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">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="247dp"
        android:layout_height="357dp"
        android:layout_weight="1"
        app:srcCompat="@drawable/cat" />

    <ImageButton
        android:id="@+id/imageButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        app:srcCompat="@drawable/ic_launcher_background" />
</LinearLayout>

이미지뷰는 이미지를 나타낼 수 있다.

이미지 버튼은 버튼과 같이 Onclick 메소드를 이용해서 클릭 이벤트를 지정할 수 있다.

 

실행시켜서 확인해 보면,

위에는 이미지 뷰로 고양이 이미지를 불러들였고, 밑에는 이미지버튼을 이용해서 이미지를 불러들였다.

이미지 버튼은 일반적인 버튼과 다르게 눌린 상태와 눌리지 않은 상태가 표시되지 않는다.

Selector를 만들어 사용하면 된다. 후에 Selector에 관한 글을 올리겠다.

 

 

 

 

 

## 이 글은 Do it 안드로이드 앱 프로그래밍을 참고해서 작성되었습니다.

도서에는 더 자세하고 알기 쉽게 설명이 되어 있어 도서를 참고하면서 공부하는 것을 추천드립니다.

도서 정보 : http://www.yes24.com/Product/Goods/15789466

Do it! 안드로이드 앱 프로그래밍

유투브 강의 : https://www.youtube.com/watch?v=nN4xnEcnjE8