layered

4. 뷰(View) 본문

카테고리 없음

4. 뷰(View)

스윗푸들 2023. 4. 13. 11:23

개념


- 화면에 있는 모든 구성 요소들(버튼, 텍스트 등등)

- 직사각형의 영역을 차지한다

- 그리기 및 이벤트 처리를 담당

- 다른 뷰를 상속해서 속성을 그대로 사용할 수 있다

   ex) TextView -> Button

         텍스트 뷰 하나 가져다놓고 태그만 슬쩍 바꾸면 버튼이 된다

 

TextView와 Button의 관계

 

뷰 그룹(View Group)


- 뷰들을 하나로 묶은 것

- 뷰 클래스를 상속했기 때문에 역시 뷰처럼 다룰 수 있다

- 뷰와 뷰 그룹의 관계는 여러 디자인 패턴 중 컴포지트 패턴으로, 뛰어난 확장성을 가진다

  컴포지트 패턴(Composite Pattern): 객체들을 트리 구조로 묶은 것

 

상속 관계

 

위젯과 레이아웃


뷰와 뷰 그룹의 역할을 구분하기 위해 뷰의 종류에 따라 이름을 붙인다

 

- 위젯(Widget): 일반적인 컨트롤의 역할을 하는 

- 레이아웃(Layout): 내부에 뷰들을 포함하면서 그 뷰들을 배치하는 뷰 그룹

  레이아웃 내에 레이아웃을 넣을 수 있다(뷰의 속성!)

 

간단하게 말하면 위젯이나 레이아웃이나 모두 뷰이다! 뷰를 상속했으니까.

하지만 상속의 갈래가 다르다. 위젯은 뷰에서 바로 갈라져 나온 거고, 레이아웃은 그 사이에 뷰 그룹을 한 번 거친다.

 

이런 느낌!

 

뷰의 속성


뷰들은 태그와 속성으로 구성된다.

다음과 같이 XML 코드를 보면

 

 

- 속성들은 공백이나 줄 바꿈으로 구분된다

- 속성 앞에 붙은 android:는 안드로이드의 기본 API에서 정의한 속성이라는 의미이다

- 그 외의 단어는 외부 라이브러리나 사용자 정의 속성이라고 보면 된다.

 

layout_width, layout_height

- 가로, 세로를 정하는 속성

- 모든 뷰들은 크기를 가져야 하므로 필수 속성이다

- 세 가지의 옵션을 줄 수 있다

  1) wrap_content: 내용에 맞춤

  2) match_parent: 뷰가 포함된 뷰 그룹에 맞춤

  3) 숫자: *단위를 꼭 적어야 함

 

단위 단위 표현 설명
px 픽셀 일반적인 픽셀
dp, dip 밀도 독립적 픽셀(density independent pixel) 160dpi 화면을 기준으로 한 픽셀(= 비율)
sp, sip 축척 독립적 픽셀(scale independent pixel) 글꼴을 기준으로 한 픽셀

 

보통 위젯에는 dp를, 글자에는 sp를 쓰는 것이 원칙인데 그냥 일괄적으로 dp를 쓰는 것이 권장되기도 한다. sp는 시스템의 사용자 설정에 영향을 받기 때문이다.

 

속성이 적용되는 방식과 필수 여부는 레이아웃에 따라 달라진다. 예를 들면 이렇다.

- 새로운 프로젝트를 만들 때의 기본 레이아웃인 ConstraintLayout은 그 이름처럼 배치가 제한되어 있으므로 match_parent 옵션을 지원하지 않는다. 대신 match_constraint를 지원한다.

- LinearLayout은 orientation 속성이 필수이다.

 

뷰의 영역


 

뷰의 영역은 세 가지 부분으로 나눌 수 있다.

 

1 내용(뷰의 크기를 결정하는 wrap_content의 기준이 되는 부분)

2 테두리와 내용 간의 거리: padding

3 다른 뷰와의 거리: margin

 

좀 더 간단하게 말하자면 테두리를 기준으로 안쪽과 바깥쪽 공간으로 나뉜다고 할 수 있다.

 

어떤 뷰에 내용이 있다면 그 내용이 뷰의 전부를 차지하지는 않을 테니 padding이 나온 거고, 다른 뷰들과의 거리를 보장하기 위해서 margin이 나온 것 같다!

 

눈으로 보는 화면에서 차지하는 만큼만 그 뷰의 영역인 줄 알았는데, 마진으로 다른 뷰와의 거리를 설정하는 것이 사실은 그 뷰의 크기(정확하게는 바깥쪽 공간)를 늘리는 것이었다. 물론 테두리 안쪽 뷰의 고유한 영역은 변하지 않는다.

 

결국 뷰들을 좀 떨어뜨리겠다고 margin을 늘리다가 아예 뷰가 밀려나는 이유는 크기가 커지니 여유 공간이 없어서 그런 것이다.

 

속성


속성 XML 예시
id 뷰의 식별자(이름)
android:id="@+id/button1"
padding 테두리와 내용 간 거리
paddingStart, paddingEnd 등 한쪽만 지정하는 것도 가능
android:paddingTop="20dp"
layout_margin 테두리와 다른 뷰와의 거리
android:layout_marginLeft="30dp"
layout_width 뷰의 가로 길이(마진 미포함)
match_parent, wrap_content, 숫자(dp 권장)
android:layout_width="60dp"
layout_height 뷰의 세로 길이
android:layout_height="wrap_content"
background 색 또는 이미지 설정
#ARGB 또는 @drawble/파일 이름
android:background="#8F5D99B1"
android:background="@drawble/image"
layout_gravity 레이아웃의 여유 공간 내에서 뷰를 정렬
지정한 방향으로 끌어당기는 느낌
여러 방향 지정 가능
android:layout_gravity="top|left"
gravity 뷰 내에서 글자를 정렬
android:gravity="bottom|right"
추가 중!    

 

https://developer.android.com/reference/android/view/View