Android Studio UI - View

What is View?

• View클래스는 모든 UI 컴포넌트들의 부모 클래스
• View클래스의 속성은 모든 UI컴포넌트들에서 공통적으로 사용 할 수 있다.

 

What is Widget?

• View의 서브 클래스 중에서 화면에 보이는 것들을 말함
• 대표적인 위젯은 TextView, EditText, Button등이 있습니다.

 

실제 자주 사용하는 위젯 속성

 

TextView

id, layout_width, layout_height, background etc

text : 출력할 문자열 지정

textSize : 폰트 크기

textStyle : 텍스트 스타일(normal, bold, italic)

typeface : 텍스트 폰트(normal, sans, serif, monspace)

textColor : 문자열 색상

singleLine : 속성값 true이면 텍스트가 위젯의 폭보다 길 때 강제로 한 줄에 출력

 

EditText

입력이 가능한 Text 창

• TextView의 모든 속성 상속(EditText는TextView의 서브클래스임)
• inputType: 입력 시 허용되는 키보드 타입 설정 및 키보드 행위를 설정 
  • 키보드 타입 설정 값
    • “text”:일반적인 텍스트 키보드
    • “phone”:전화번호 입력 키보드
    • “textEmailAddress”:@문자를 가진 텍스트 키보드
    키보드 행위 설정 값
    • “textCapWords” : 문장의 시작을 대문자로 변환
    • “textAutoCorrect” : 입력된 단어와 유사한 단어를 제시하고 제시된 단어 선택 시,입력된 단어를 대치
    • “textMultiLine”:여러 줄을 입력 받을 수 있음

Button

• Button클래스는 TextView의 서브클래스이므로, TextView의 모든 속성을 사용 할 수 있다.
  • singleLine: 텍스트가 위젯의 폭보다 길 때 강제로 한 줄에 출력
• 버튼 내에 텍스트,아이콘을 표시 할 수 있음
  • 버튼 전체를 이미지로 그리기 위해서는 ImageButton사용

 

ImageButton

대부분의 버튼은 ImageView를 사용

1. ImageView 속성에 Clickable 옵션을 true로 설정

2. 이미지는 normal(아무 상태가 아닐 때) , pressed(클릭되었을 때), disable(클릭불가할 때) 3가지 준비

3. 해상도 처리를 위해 dpi별 (mdpi, hdpi, xhdpi, xxhdpi,  xxxhdpi) 5개 이미지 준비

-> 1개의 버튼에 총 15개의 이미지 필요

 

9-patch 이미지

Image에서 늘어날 수 있는 영역과 원본 크기대로 표시되어야 할 영역을 구분하여, 이미지가 그려질 영역의 크기가 늘어나거나 줄어들더라도 원본이미지 형태를 유지하도록 만들어진 Image를 나인 패치(9-patch)이미지라고 한다.

ImageView

앱 화면에 이미지를 표시하는 용도

 

 기본 사용법

• Layout리소스 XML파일에 ImageView를 추가
• 화면에 표시 할 이미지를 Drawable리소스에 추가
• 화면에 표시 할 이미지(Drawable)리소스 ID를 ImageView의"src"속성에 지정

Drawable리소스에 이미지 추가

• • 이미지 파일의 형식은 .jpg,.png가 가능하나 대부분.png를 사용함(투명도 때문)
  • 이미지 파일을 /res/drawable에 추가한다.
  • 해상도에 따른 다른 크기의 이미지는 별도의 폴더를 생성하고 복사(drawable-xhdpi등..)

Layout리소스 XML과 Kotlin소스 두가지 코드 모두에서 이미지뷰 추가 및 변경 가능

 

ImageView의 영역에 맞게 이미지 확대 또는 축소하는 방법

scaleType 속성 > android:scaleType

1) android:scaleType = "Center"

이미지의 크기와 비율을 유지하며 이미지의 중앙을 ImageView의 중심에 맞춥니다. 이때, ImageView보다 이미지가 클 경우 이미지가 잘릴 수 있습니다.

2) android:scaleType = "centerCrop"

이미지의 비율을 유지하며 가로,세로 중 짧은 쪽을 ImageView에 꽉 차게 출력합니다. 이때도 마찬가지로 ImageView를 벗어나는 부분은 출력되지 않습니다.

3) android:scaleType = "centerInside"

이미지의 가로, 세로 중 긴 쪽을 ImageView의 레이아웃에 맞춰 출력합니다. 이미지의 비율은 유지되며 남는 공간은 background의 색으로 채워집니다. fitCenter와 달리 이미지가 ImageView보다 작을 경우 크기가 유지됩니다.

4) android:scaleType = "fitCenter"

centerInside와 매우 유사합니다. 단, 이미지의 크기가 ImageView보다 작다면 ImageView의 크기에 따라 달라집니다.

5) android:scaleType = "fitStart"

ImageView 안에서 가로, 세로 비율을 유지하며 fit하게 출력됩니다. 단, fitCenter와 다르게 왼쪽 상단을 기준으로 정렬됩니다.

6) android:scaleType = "fitEnd"

감이 오시나요? fitStart와 마찬가지로 가로&세로 비율을 유지하며 fit하게 출력됩니다. 우측 하단을 기준으로 정렬됩니다.

7) android:scaleType = "fitXY"

가로, 세로 비율에 상관 없이 ImageView에 꽉 차게 보여집니다. 이미지가 찌그러진 상태로 보입니다.

8) android:scaleType = "matrix"

이미지의 크기, 비율을 유지하며 ImageView의 좌측상단을 기준으로 정렬됩니다. 이미지가 크다면 ImageView 외의 부분은 출력되지 않습니다.