[Android] View / Theme

- View

- UI 의 구성 요소 중 가장 추상화된 개념으로서, 화면에 표시되는 가장 기본적인 요소

 

- ViewGroup

- View 를 상속받으면서 특별히 여러 개의 구성 요소들을 포함하는 View

- ViewGroup 에 포함되어 있는 View 를 가리켜 자식 뷰( Child View ) , ViewGroup 을 부모 뷰( Parent View ) 라고 한다.

 

* View 는 안드로이드의 UI 요소 중 가장 기본이 되는 요소이다.

* ViewGroup 은 다른 여러 View 를 포함시킬 수 있는 특별한 View 이다. ViewGroup 을 사용하면 View 를 그룹화하여 관리할 수 있다.

* 레이아웃은 ViewGroup 의 실제 구현 클래스이며 자식 뷰를 어떻게 배치할지 결정한다. 자주 사용하는 레이아웃에는 LinearLayout, RelativeLayout, ConstraintLayout 등이 있다.

 

 

- AbsoluteLayout 

* AbsoluteLayout 은 자식 뷰를 x, y 좌표로 배치시킨다.

* AbsoluteLayout 은 화면에 해상도가 바뀌면 View 의 상대적인 위치가 바뀌게 된다.

* AbsoluteLayout 은 멀티해상도 지원에 적합하지 못하다.

 

 

- LinearLayout

- 자식 뷰를 선형으로 배치시키는 레이아웃

- 속성

orientation : 자식 뷰들의 배치 방법을 '가로, 세로'로 변경 ( none, horizontal, vertical )

gravity : 객체가 자신의 경계 내에서 X축과 Y축의 내용을 배치하는 방법을 지정 / 자식 뷰의 가로 및 세로 정렬에 영향을 줌

layout_gravity : 구성요소를 셀 그룹에 배치하는 방법 / Vew 자신의 위치를 부모 뷰를 기준으로 정렬하는 속성

layout_margin : 외부 여백

padding : 내부 여백

weight : ViewGroup 전체 크기에서 View 가 갖는 크기의 비중을 설정하는 속성

weightSum : 비중의 합

LinearLayout 은 가로정렬기준일때 layout_width , 세로정렬기준일때 layout_height 속성을 0dp 설정을 권장

 

- 레이아웃 중첩

- layout 안에 또 layout 등을 넣은 것

 

* LinearLayout 은 가로 또는 세로로 뷰를 순차적으로 배치한다.

* LinearLayout 의 배치 기준은 gravity, layout_gravity 속성을 이용하여 변경 가능하다.

* gravity 속성은 뷰 자신의 컨텐츠 또는 자식 뷰들의 배치 기준을 변경한다.

* layout_gravity 속성은 부모 뷰 안에서 뷰 자신의 배치 기준을 변경한다.

* Margin 속성은 뷰가 부모 뷰로부터 떨어진 여백을 설정한다.

* Padding 속성은 자신의 컨텐츠 또는 자식 뷰들이 떨어지는 영역을 설정한다.

* LinearLayout 의 weight 속성을 사용하면 View 의 크기를 비율로 설정할 수 있다.

* LinearLayout 에서 여러 개의 뷰 중 한 개만 weight 속성을 설정하면, weight 를 설정하지 않은 다른 뷰가 그려지고 남은 영역의 전부를 차지하게 된다.

* LinearLayout 에서 정렬 기준( orientation )이 다양한 UI를 만들려면 레이아웃을 중첩해서 사용해야 한다.

 

 

- RelativeLayout

- View 를 '부모 뷰' 또는 '다른 View' 와의 상대적인 위치 관계 기반으로 배치

- 부모 뷰를 기준으로 배치를 하는 것과 부모 뷰가 같은 형제 뷰를 기준으로 배치하는 것으로 나눈다.

 

- 부모 뷰를 기준으로 상대적 위치를 지정하는 속성

layout_alignParentTop : true / 뷰 자신의 상단을 부모 뷰의 상단에 맞춤

layout_alignParentBottom : true / 뷰 자신의 하단을 부모 뷰의 하단에 맞춤

layout_alignParentLeft : true / 뷰 자신의 좌측 끝을 부모 뷰의 좌측 단에 맞춤

layout_alignParentRight : true / 뷰 자신의 우측 끝을 부모 뷰의 우측 단에 맞춤

layout_centerInParent : true / 뷰 자신을 부모 뷰의 내부에 가로, 세로 정중앙으로 배치

layout_centerVertical : true / 뷰 자신을 부모 뷰의 내부에 세로 기준 중앙으로 배치

layout_centerHorizontal : true / 뷰 자신을 부모 뷰의 내부에 가로 기준 중앙으로 배치

layout_alignParentStart : true / 뷰 자신의 시작 위치를 부모 뷰의 시작 위치에 맞춤

layout_alignParentEnd : true / 뷰 자신의 끝을 부모 뷰의 끝 위치를 맞춤

 

- 화면보는 방식

- RTL ( Right To Left ) / LTR ( Left To Right )

- 오른쪽에서 왼쪽 / 왼쪽에서 오른쪽

- alignParentLeft 보다 alignParentStart , alignParentRight 보다 alignParentEnd 를 사용 권장

 

- 형제 뷰끼리 상대적인 위치를 지정하는 속성

layout_above : 지정된 뷰의 하단 기준선에 뷰 자신의 상단 기준선을 맞춰 배치

layout_alignBaseline : 지정된 뷰의 베이스라인에 뷰 자신의 베이스라인 기준선을 맞춤

layout_alignBottom : 지정된 뷰의 하단 기준선에 뷰 자신의 하단 기준선을 맞춰 배치

layout_alignEnd : 지정된 뷰의 끝 기준선에 뷰 자신의 끝 기준선(RTL)을 맞춰 배치

layout_alignLeft : 지정된 뷰의 좌측 기준선에 뷰 자신의 좌측 기준선을 맞춰 배치

layout_alignRight : 지정된 뷰의 우측 기준선에 뷰 자신의 우측 기준선을 맞춰 배치

layout_alignStart : 지정된 뷰의 시작 기준선에 뷰 자신의 시작 기준선(RTL)을 맞춰 배치

layout_alignTop : 지정된 뷰의 시작 기준선에 뷰 자신의 상단 기준선을 맞춰 배치

layout_below : 지정된 뷰의 하단 기준선에 뷰 자신의 상단 기준선을 맞춰 배치

layout_toEndOf : 지정된 뷰 끝 기준선에 뷰 자신의 시작 기준선(RTL)을 맞춰 배치

layout_toLeftOf : 지정된 뷰 좌측 기준선에 뷰 자신의 우측 기준선을 맞춰 배치

layout_toRightOf : 지정된 뷰 우측 기준선에 뷰 자신의 좌측 기준선을 맞춰 배치

layout_toStartOf : 지정된 뷰 시작 기준선에 뷰 자신의 끝 기준선(RTL)을 맞춰 배치

 

* RelativeLayout 은 '부모 뷰' 또는 '형제 뷰' 와의 관계를 지정하여 View 를 배치한다.

* RelativeLayout 의 'align' 관련 속성은 자신의 기준선과 부모 뷰, 형제 뷰의 기준선을 맞추는 것이다.

* RTL ( Right To Left ) 지원이란 국가마다 다른 보기 방식의 지원을 의미한다.

* RTL 지원을 적용하려면 left 대신 start , right 대신 end 를 사용하는 것이 좋다.

* RelativeLayout 을 사용하면 상대적인 관계 지정이 되기 때문에 레이아웃 중첩을 줄일 수 있다.

 

 

- ConstraintLayout

- '제약조건'을 기반으로 View 를 배치하는 레이아웃

- Bias ( 선호도 ) : 제약조건을 지키는 범위 내에서 View 의 위치를 퍼센티지로 제어

- Aspect Ratio

- wrap_content : 컨텐츠의 크기만큼 View의 사이즈가 조정

- match_constraint : 제약조건의 라인과 크기를 일치. 제약조건을 지키는 범위 내에서 최대 크기를 가진다.

- fixed_size : 고정된 사이즈

 

- layout_constraintCircle 속성

- 특정 뷰를 기준으로 View 를 원형으로 배치되도록 하는 기능

 

- 가이드라인 ( Guideline )

- 뷰를 더 쉽게 배치할 수 있도록 '기준선'을 추가하는 것

- layout_constraintGuide_begin : 부모 뷰의 시작 지점으로부터 떨어진 위치를 지정

- layout_constraintGuide_end : 부모 뷰의 끝 지점으로부터 떨어진 위치를 지정

- layout_constraintGuide_percent : 부모 뷰를 기준으로 떨어진 위치를 Percent로 지정

 

- 체인 ( Chain )

- 가로축 또는 세로축을 기준으로 여러 개의 View 를 그룹처럼 관리하게 해 주는 데, 별도로 속성이 존재하는 것이 아니라 2개의 뷰가 서로를 참조하고 있으면 Chain 으로 묶이는 것

- CHAIN_SPREAD : 각 View 들이 동일한 간격으로 펼쳐지게 함.

- CHAIN_SPREAD_INSIDE : CHAIN_SPREAD처럼 펼쳐지지만 View 의 양끝은 펼치지 않음. 여백 X

- CHAIN_PACKED : View 사이에 여백을 두어 펼치지 않고 딱 붙게 함. CHAIN_PACKED 상태에서는 Bias 로 'PACKED'된 뷰의 위치를 조정.

- WEIGHTED CHAIN : 체인으로 묶인 View 의 일부가 'match_constraint' 인 경우 비율로서 크기를 지정

 

* ConstraintLayout 은 레이아웃 편집창에서 사용하는 미리보기만을 위한 속성이 있다.

* ConstraintLayout 은 뷰의 위치를 결정하기 위해 제약 조건을 사용한다.

* 각 뷰는 상/하/좌/우 제약을 의미하는 'constraintTop, constraintBottom, constraintLeft, constraintRight' 속성이 있다.

* 수평 제약과 수직 제약 각각 1개 이상의 제약이 있어야 View 의 위치를 결정할 수 있다.

* 각 뷰의 상/하/좌/우 제약을 다른 뷰 또는 부모 뷰의 면과 연결하면 제약이 지정된다.

* 제약 조건은 마치 RelativeLayout 의 관계와 비슷하며 제약 조건 이후 여백(margin)을 설정할 수 있다.

* 제약 조건이 수평/수직에 대하여 양방향으로 설정된 경우, 두 제약을 동시에 지킬 수 없는 상태가 되는데, 이때 ConstraintLayout 은 선호도(Bias)값을 설정하여, 제약을 지키는 범위 내에서 뷰를 퍼센테이지로 배치할 수 있다.

* Circle 제약은 뷰를 원형으로 배치할 수 있게 한다.

* ConstraintLayout 은 뷰를 쉽게 배치할 수 있도록 돕는 가이드라인을 제공한다. 가이드라인 역시 View 로 취급되며, 방향과 여백으로 위치를 지정하거나 퍼센트로 위치를 지정할 수 있다.

* 뷰의 제약이 서로를 참조하고 있는 형태를 Chain 이라고 한다. Chain 을 활용하면 별도의 레이아웃 없이 View 를 그룹화하여 관리할 수 있다.

* ContraintLayout 은 뷰의 중첩을 줄일 수 있어 UI 성능 향상에 유리하다.

 

 

- 테마( Theme )

- 안드로이드에서는 스타일(style)을 XML 리소스로 분리하여 관리 가능

- colorPrimary ( 주 컬러 ) , colorPrimaryDark ( 어두운 주요 컬러 ) , colorAccent ( 강조 컬러 ) 등 세 가지 요소를 기반으로 UI 를 구성하도록 플랫폼화되어 있음.

- 기본 컴포넌트의 전반적인 요소가 변경됨.

 

- https://material.io/design/color/#

The color system

- app > res > values > colors.xml

- app > res > values > styles.xml

 

- Activity 의 Theme 는 AndroidManifest.xml 파일에서 지정

 

 

 

 

 

 

- 이거는 머.. 너무 줏대없이 써서..

- 실습만이 답이다.