6가지 Layout 전부 활용하여 Instagram의 화면 구축하기.

Layout

- View 위젯들을 화면에 배치하는 과정에서, 위젯의 위치를 정렬하거나, 연관된 위젯들을 그룹화하는 역할을 수행한다.

 

1. ConstraintLayout 

 평평한 구조를 가진 Layout으로, 구성할때 자식(view)들에 여러 제약(Constraint)을 적용하여 각 뷰의 위치와 크기를 유연하게 조절할 수 있다. view의 연결점과 대상을 어디에 연결하느냐에 따라 위치가 결정된다.

- Margins : 여백

- Centering positioning : 중앙 배치

- Visibility behavior : 가시성에 기반한 동작

- Dimension constraints : 치수 제약

- Chains : 일련 관계(수평 또는 수직 방향으로 나열된 뷰에 대한 그룹화. 배치 스타일 지정)

- Virtual Helpers objects : 가상 지원 객체

의 제약사항을 설정 가능하다.

 

2. LinearLayout 

 단일 열에 수평적으로 혹은 단일 행에 수직적으로 다른 view들을 정렬할 수 있는 layout이다. orientation 속성을 이용하여 Children View의 배치 방향을 바꿀 수 있다. Linear은 '선형'이란 뜻으로 화면을 가로 또는 세로 방향으로 나열할 때 사용하는 Layout이다. Horizontal(수평, 가로)과 vertical(수직, 세로)이 존재하고 LinearLayout의 자식(view 위젯)들은 오직 한 방향으로 배치되며 서로 중첩(overrap)되지 않고 지정한 방향으로 쌓이는(stacked) 형태로 표시한다.

 

※ Layout Weight (가중치 설정 기능)

각 View 위젯들이 차지하는 영역을 dp 등의 고정 치수 단위 뿐만 아니라, 전체 영역 대비 비율의 개념으로 지정할 수 있는 Weight(가중치) 설정 기능을 제공하고 자식 View 위젯의 Weight 값이 크면 클수록, 화면에서 더 많은 영역을 차지하게 됨

3. FrameLayout 

 여러 View 위젯을 자식으로 추가하면 겹쳐진 형태로 표시되며, 가장 최근에 추가된 View 위젯이 가장 상위(on top)에 표시한다. 일반적으로, FrameLayout은 children을 각각 오버래핑하지 않고 각기 다른 화면의 크기를 조절할 수 있는 방법으로 child view들을 구성하기 힘들기 때문에, 단일 child view를 유지하기 위해 사용된다. 하지만 android:layout_gravity 속성을 사용하여, 각 child에 gravity를 배분함으로서 FrameLayout에서 child view들의 위치를 조절하고 FrameLayout에 다수의 children을 추가할 수 있다.

 

4. TableLayout 

 children을 행과 열들로 정렬한다. TableLayout은 TableRow 객체들로 구성되어있다. 각각의 TableRow는 추가될수록 행이 늘어난다. TableLayout의 전체 열(Column) 개수는 TableRow 중 가장 많은 열(Column)의 개수에 맞춰집니다.

5. GridLayout 

 사각형의 grid(격자 무늬를 생각하면 쉽다)안에 children을 위치시키는 layout이다. Grid는 보여지는 구역을 cell들로 나누는 일련의 무한히 얇은 선들로 구성되어있다. N개의 열을 가진 grid는 0부터 N까지를 포함하는 N+1개의 index를 가진다. 어떻게 GridLayout이 설정되었든간에, grid index 0은 container의 leading edge로 고정이 되어 있고, grid index N은 trailing edge로 고정되어 있다.

6. RelativeLayout 

 Relative는 '상대적인'이란 뜻으로 어떤 뷰(view 위젯 뿐만 아니라 parent도 가능)와의 상대적인 위치를 지정하는 Layout이다.

RelativeLayout의 자식(view)들에 상대적 배치 기준을 지정하지 않는다면, RelativeLayout 내부에서 중첩되어 표시한다.

 

6개의 Layout을 활용해서 Instagram 화면 구축해보기

<첫번쨰 실행화면>

•  전체적인 Layout은 FrameLayout으로 FrameLayout은 여러 뷰(View)위젯들 중 하나를 Layout의 전면에 표시할 때 사용한다.
• android:layout_gravity="center" / android:layout_gravity="right|bottom" 명령어로 ImageView와 TextView의 위치를 설정하였다.

 

<두번째 실행화면>

•  전체적인 Layout은 LinearLayout(vertical)이고 안에는 LinearLayout(horizontal), RelativeLayout과 GridLayout을 사용하였다. SearchView밑에 ImageButton 3개는 LinearLayou(horizontal)로 배치하였고, 그 밑 ImageButton 3개는 RelativeLayout으로 설정하였다.
• android:layout_centerHorizontal="true" / android:layout_alignParentRight="true" 명령어를 통해서 배치하였다.

 

•  그 밑에 9개의 ImageButton 들은 GridLayout을 사용하여서 app:columnCount="3" / app:rowCount="3" / app:orientation="horizontal" 명령어를 통해서 설정하였다.

 

<세번째 실행화면>

•  전체적인 Layout은 ConstraintLayout을 사용하였고 인스타그램 피드 사진을 꾸미기 위해서 ImageButton들을 TableLayout에 사용하였다. 각 Button들과 TextView사이에 상대적인 위치를 지정해주기 위해서 layout_constraint[SIDE1]_to[SIDE2]Of 명령어 또는 infer Constraints(마법사 도구)를 활용해서 각 View들을 연결해주었고 TableLayout을 통해서 각각의 ImageButton을 배치시켜주었다. 또한 하단의 BottomNavigationView를 TableLayout에 추가해주었다.