chapter 2.3 - 기초 UI - 회원가입 화면 그려보기 (2) : imageview로 그림 띄우고, UI 다듬기 + scaleType 종류

ImageView - 사용자에게 그림 파일을 보여줄 때 사용합니다.

미리 지정되어있는 디자인으로써의 그림을 보여주는 방법으로 사용자가 업로드하는 이미지(프로필 사진 등)를 보여주는 방법과는 다릅니다.

 

프로젝트에 그림 파일을 추가하는 방법

원하는 그림 파일을 다운로드한 후 파일 파일 이름을 변경해야 합니다.

그림 파일의 이름은 영어, 소문자, 숫자, 언더바( _ )로만 구성되어야 합니다.

대문자 사용이 불가능하고 확장자에도 대문자를 사용하면 안 됩니다.

예를 들면 tistory_image.jpg 등으로 지어야 합니다. 여기서 확장자란 이름 맨 뒤에 붙는 'jpg'를 의미합니다.

 

그림 파일을 선택하고 복사(CTRL + C) -> res -> drawable 선택 -> 붙여넣기(CTRL +V) -> (인강을 따라서 하기 때문에) '-v24'가 없는 파일로 선택 -> 파일 이름 확인 

 

 

이렇게 하면 프로젝트에 그림 파일이 추가됩니다. 

 

 

사용하는 속성

src(source) - 어떤 그림 파일을 보여줄 지 결정합니다. 값은 파일 이름으로 자동 완성됩니다. '@drawable/파일 이름'으로 작성합니다.

scaleType - 그림 파일 간의 가로 / 세로 비율이 서로 다를 때 어떻게 대처할지를 정합니다. 종류는 총 8가지가 있습니다. 사진으로 하나씩 비교 설명하겠습니다.

 

원본 사진

(사진은 비교를 위해 실제 크기를 그대로 사용하였습니다.)

 

(아래의 layout_width, layout_height는 설명을 위한 임의의 설정입니다. )

 1) android:scaleType="center" - 이미지 원본 크기와 비율을 유지하며 이미지의 중앙을 layout_width, layout_height 안에 출력합니다. 이때 레이아웃보다 이미지가 크면 레이아웃의 벗어난 이미지는 출력되지 않습니다.

 

 

 

 

<ImageView
android:layout_width="250dp"
android:layout_height="250dp"
android:scaleType="center"
android:src="@drawable/flower"/>

 

 

 

 

 

 

 

2) android:scaleType="centerInside" - 이미지의 가로 / 세로의 길이 중 긴 쪽을 ImageView의 레이아웃에 크기를 맞춰 출력합니다. 이때 원본 이미지 가로 / 세로의 비율은 유지되고 레이아웃에 이미지 외의 빈 공간은 background 속성에 맞춰서 채워줍니다. 

 

 

 

 

<ImageView
android:layout_width="250dp"
android:layout_height="250dp"
android:scaleType="centerInside"
android:src="@drawable/flower" />

 

 

 

 

 

 

 

3) android:scaleType="centerCrop" - 이미지의 가로 / 세로의 길이 중 짧은 쪽을 ImageView의 레이아웃에 크기를 맞춰 출력합니다. 이때 원본 이미지의 가로 / 세로의 비율은 유지되고, 레이아웃 영역에서 벗어난 이미지는 출력되지 않습니다. 자주 사용하는 속성입니다.

 

 

 

 

<ImageView
android:layout_width="250dp"
android:layout_height="250dp"
android:scaleType="centerCrop"
android:src="@drawable/flower" />

 

 

 

 

 

 

 

4) android:scaleType="fitCenter" - 이미지의 가로 / 세오의 길이 중 긴 쪽을 ImageView의 레이아웃에 맞춰 출력합니다. 이때 원본 이미지의 가로 / 세로의 비율은 유지되고 , 레이아웃의 이미지 외의 빈 공간은 background 속성에 맞춰서 채워집니다.  'centerInside'와 비교하면'centerInside'는 원본 이미지가 ImageView의 레이아웃 보다 작으면 이미지의 크기가 유지되지만,  'fitCenter'은 이미지의 크기가 ImageView의 레이아웃에 크기에 따라 변한다는 것입니다.

 

 

 

 

<ImageView
android:layout_width="250dp"
android:layout_height="250dp"
android:scaleType="fitCenter"
android:src="@drawable/flower" />

 

 

 

 

 

 

 

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

 

 

 

 

<ImageView
android:layout_width="250dp"
android:layout_height="250dp"
android:scaleType="fitStart"
android:src="@drawable/flower" />

 

 

 

 

 

 

 

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

 

 

 

 

<ImageView
android:layout_width="250dp"
android:layout_height="250dp"
android:scaleType="fitEnd"
android:src="@drawable/flower" />

 

 

 

 

 

 

 

7) android:scaleType="fitXY" - 가로 / 세로 비율에 상관없이 ImageView의 레이아웃의 각 면에 맞춰서 출력됩니다. 즉, 이미지가 ImageView의 레이아웃보다 크더라도 비율과 상관없이 레이아웃에 맞춰서 잘리는 부분 없이 출력됩니다.

 

 

 

 

<ImageView
android:layout_width="250dp"
android:layout_height="250dp"
android:scaleType="fitXY"
android:src="@drawable/flower" />

 

 

 

 

 

 

 

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

 

 

 

 

<ImageView
android:layout_width="250dp"
android:layout_height="250dp"
android:scaleType="matrix"
android:src="@drawable/flower" />

 

 

 

 

 

 

 

이렇게 8가지 종류의 scaleType을 알아보았습니다.

 

그런데 만약 기본 이미지로 설정하고 싶을 경우에는 다른 코드를 작성할 수 있습니다.

android:src="@mipmap/ic_launcher"

위의 코드로 작성 시에는 위와 같은 이미지로 대체됩니다.