[모바일 프로그래밍] 6. Layout

Layout

• 어떻게 배치할 것인가
• activity 같은 앱의 유저 인터페이스 구조를 정의
• 레이아웃의 모든 요소는 View 및 ViewGroup 개체의 계층 구조를 사용하여 구축된다.

 

---

 

Layout 5가지

Constraint(제약 레이아웃)	제약조건 설정, 설정 안하면 디폴트 값
Linear(리니어 레이아웃)	방향을 지정하고 차례대로 뷰를 추가
Relative(상대 레이아웃)	규칙을 지정하여 다른 뷰 대비 상대적인 위치
Frame(프레임 레이아웃)	하나에 여러 뷰를 놓고 우선순위를 지정하여 중첩된 뷰를 전환하며 보여줌
Table(테이블 레이아웃)	격자 형태

 

---

 

Constraint Layout(제약 레이아웃)

• 크기나 위치에 제약을 설정
  
  • 최소한 하나 이상의 제약조건을 걸어둔다.
  • 부모 레이아웃에 제약, 주변의 다른 뷰들에 대해 제약, 가이드라인을 통한 제약

 

제약 조건 만들기

• 뷰의 네 방향 앵커 포인트를 상위 레이아웃의 경계 or 동일한 레이아웃 내 다른 뷰의 앵커 포인트에 연결
• 최소 하나의 수직과 수평 앵커 포인트가 필요
• 앵커 포인트 연결 가능한 대상
  
  • 1. 상위 레이아웃의 경계
  • 2. 동일한 레이아웃 내 다른 뷰의 앵커 포인트
  • 3. 가이드라인

 

• 1. 상위 레이아웃의 경계

• 2. 동일한 레이아웃 내 다른 뷰의 앵커 포인트

• Bias는 네 방향을 모두 Constraint 한 다음 설정 가능

• XML 코드에 값: 속성 짝

layout_constraint[SourceView Anchor]_to[TargetView Anchor]of="[TargetView ID]"

• 3. 가이드라인

 

---

 

Linear Layout(리니어 레이아웃)

• 한 방향으로 순차적으로 배열하여 화면 구성

• 자식 View들이 나열되는 방향
• Vertical : 세로 쌓기
• Horizontal : 가로 쌓기

android:orientation="vertical"

 

gravity

• 정렬, 개체가 자체 경계 내에서 X축과 Y축 모두에서 내용 배치 지정

android:layout_gravity	개별 정렬, 상위 컨테이너의 남은 공간 내에 정렬
android:gravity	자식 정렬, 화면에 표시되는 내용을 정렬(TextView: 텍스트, ImageView: 이미지)

• 디폴트 왼쪽 맞춤
• layout_gravity: center 중간 맞춤
• layout_gravity: right 오른쪽 맞춤

• Java 코드 LinearLayout 구현

LinearLayout mainLayout = new LinearLayout(this);    // Layout 오브젝트 생성자 mainLayout.setOrientation(LinearLayout.VERTICAL); LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(    // 파라미터 세팅     LinearLayout.LayoutParams.MATCH_PARENT,     LinearLayout.LayoutParams.WRAP_CONTENT); Button button1 = new Button(this);   // button 오브젝트 생성자 button1.setText("Button 01"); button1.setLayoutParams(params); mainLayout.addView(button1); setContentView(mainLayout);    // View 세팅

left, end(한글)	크기 변경 X, 개체를 컨테이너 왼쪽
right, start(한글)	크기 변경 X, 개체를 컨테이너 오른쪽
top	크기 변경 X, 개체를 컨테이너 시작
bottom	크기 변경 X, 개체를 컨테이너 바닥
center	크기 변경 X, 개체를 가로/세로 컨테이너 중앙
center_horizontal	크기 변경 X, 개체를 컨테이너 가로 중앙
center_vertical	크기 변경 X, 개체를 컨테이너 세로 중앙
clip_horizontal	자식의 왼/오른쪽 가장자리가 컨테이너 경계에 잘림, 수평 중력을 기반 왼쪽 중력: 오른쪽 가장자리 자름 오른쪽 중력: 왼쪽 가장자리 자름 양쪽 가장자리를 자르기 X
clip_vertical	자식의 위/아래쪽 가장자리가  컨테이너 경계에 잘림, 수직 중력을 기반 상단 중력: 하단 가장자리 자름 하단 중력: 상단 가장자리  자름 양쪽 가장자리를 자르기 X
fill	필요한 경우 개채의 가로/세로 늘려 컨테이너 완전히 채우기
fill_ horizontal	필요한 경우 개체의 가로 늘려 컨테이너 완전히 채우기
fill_vertical	필요한 경우 개체의 세로 늘려 컨테이너 완전히 채우기

 

Weight

• 개별 하위 항목에 가중치를 할당
• 뷰가 화면에서 차지하는 공간의 양과 관련하여 뷰에 "중요도" 할당

android:layout_weight

• 동등 분배 1 : 1
• 비동등 분배 1 : 2 : 1

 

---

Relative Layout

• 자식 뷰를 상대적인 위치에 표시
• 형제 요소 기준(예: 다른 보기의 왼쪽 또는 아래) 지정
• RelativeLayout 영역을 기준(예: 아래쪽, 왼쪽 또는 가운데 정렬) 지정

layout_above	지정된 뷰 위에 뷰 배치
layout_below	지정된 뷰 아래에 뷰 배치
layout_toLeftOf	지정된 뷰 왼쪽에 뷰 배치
layout_toRightOf	지정된 뷰 오른쪽에 뷰 배치
layout_alignTop	지정된 뷰 상단에 뷰 상단  맞추기
layout_alignBottom	지정된 뷰 하단에 뷰 하단 맞추기
layout_alignLeft	지정된 뷰 왼쪽에 뷰 왼쪽 맞추기
layout_alignRight	지정된 뷰 오른쪽에 뷰 오른쪽 맞추기
layout_alignBaseline	지정된 뷰 내용의 기준선에 뷰 기준선 맞추기
layout_alignParentTop	상위 컨테이너의 상단에 뷰의 상단 맞추기
layout_alignParentBottom	상위 컨테이너의 하단에 뷰의 하단 맞추기
layout_alignParentLeft	상위 컨테이너의 왼쪽에 뷰의 왼쪽 맞추기
layout_alignParentRight	상위 컨테이너의 오른쪽에 뷰의 오른쪽 맞추기
layout_centerHorizontal	상위 컨테이너의 수평 중앙에 뷰 배치
layout_centerVertical	상위 컨테이너의 수직 중앙에 뷰 배치
layout_centerInParent	상위 컨테이너의 가로/세로 중앙에 뷰 배치