🎨레이아웃(Layout)이란?
- 레이아웃 안에 있는 위젯들을 배치하는 틀, 컨테이너 역할
🍧 레이아웃에서 자주 사용되는 속성
orientation: 내부 위젯의 수직/수평 방향을 설정gravity: 내부 위젯의 정렬 방향을 좌측, 우측, 중앙으로 설정padding: 내부 위젯의 여백을 설정layout_weight: 레이아웃이 전체 화면에서 차지하는 공간의 가중값- 여러 개의 레이아웃이 중복될 때 주로 사용
baselineAligned: 내부에 배치할 위젯을 보기 좋게 정렬
레이아웃 종류
Linear Layout(선형 레이아웃)
- 왼쪽 위부터 아래쪽 또는 오른쪽으로 차례로 배치
- 한 쪽 방향으로 차례대로 뷰를 추가하여 화면을 구성
Relative Layout(상대 레이아웃)
- 부모 레이아웃 안에서 상하좌우의 위치를 지정
- 다른 위젯으로부터 상대적인 위치 지정
Table Layout(테이블 레이아웃)
- 위젯을 행과 열의 개수를 지정한 테이블(표) 형태로 배열
Grid Layout(그리드 레이아웃)
- 테이블 레이아웃과 비슷하지만, 행 또는 열을 확장하여 다양하게 배치할 때 더 편리함
Frame Layout(프레임 레이아웃)
- 위젯들을 왼쪽 위에 겹쳐서 배치하여 중복해서 보이는 효과를 냄
ConstraitLayout(제약 레이아웃)
- 제약조건을 사용에 화면을 구성
- 안드로이드 스튜디오의 Default 레이아웃
🎨 Linear Layout(선형 레이아웃)
🍧 orientation 속성
horizontal: 위젯을 수평 방향으로 쌓겠다 (왼쪽에서부터)- 밑의 그림에서는 위젯이 많아서 화면이 넘어가서 스위치 버튼이 보이지 않는다. (초보자가 하는 실수 중 하나)
vertical: 위젯을 수직 방향으로 쌓겠다 (위에서부터)
🍧 gravity 속성
- 레이아웃 내부의 위젯을 어디에 배치할 것인지를 결정
left,right,center,top,bottom등 사용 가능- 2개 조합 가능 (
right|bottom)
🍧 layout_gravity 속성
- 자신의 위치를 부모의 어디쯤에 위치시킬지를 결정
🍪 layout_gravity와 gravity의 차이
layout_gravity: 자신의 위치를 부모(주로 레이아웃)의 어디에 배치할 지 결정, 주로 위젯에 지정gravity: 자신에게 포함된 자식(주로 위젯)을 어디에 배치할 지 결정, 주로 레이아웃에 지정
🍧 baselineAligned 속성
- 크기가 다른 위젯들을 보기 좋게 정렬
- true와 false 값을 가질 수 있음
🧵 중복 리니어레이아웃
- 리니어레이아웃 안에 리니어레이아웃을 생성하는 방식
🍧 layout_weight 속성
- 리니어레이아웃을 여러 개 사용할 경우 각 레이아웃의 크기를 지정할 때 사용
- 주로 전체 화면에 대한 비율(%)로 지정
⚠️ 주의해야하는 경우!
이렇게 만들고자 할 때는
첫번째 레이아웃의 높이를 다음과 같이 설정하면 안 된다.
android:layout_width="match_parent"
android:layout_height="match_parent"
이러면 전체(부모) 레이아웃을 첫번째 레이아웃이 다 차지하기 때문에,
첫번째 레이아웃만 화면에 출력되고
두번째와 세번째 레이아웃은 화면에서 보이지 않는다.
그렇기 때문에
android:layout_width="match_parent"
android:layout_height="wrap_content"
로 바꾸어야 한다.
✍🏻 Java 코드로 리니어레이아웃 생성하기
- 버튼을 클릭하면 토스트 메세지가 출력되는 화면 만들기
public class MainActivity extends AppCompatActivity {
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// setContentView(R.layout.activity_main);
// LinearLayout 변수 선언
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
// LinearLayout 변수의 파라미터에 너비와 높이가 있다.
LinearLayout.LayoutParams.MATCH_PARENT, // width 설정
LinearLayout.LayoutParams.MATCH_PARENT); // height 설정
LinearLayout baseLayout = new LinearLayout(this);
// 위젯을 수직방향(vertical)으로 쌓음
baseLayout.setOrientation(LinearLayout.VERTICAL);
// 배경 색 지정
baseLayout.setBackgroundColor(Color.rgb(0, 255, 0));
// 준비된 리니어레이아웃 변수를 출력한다.
setContentView(baseLayout, params);
// 버튼 변수 생성
Button btn = new Button(this);
btn.setText("버튼입니다");
btn.setBackgroundColor(Color.MAGENTA);
// 준비된 버튼을 레이아웃에 출력 (baseLayout은 앞에서 생성한 리니어레이아웃)
baseLayout.addView(btn);
// 버튼을 클릭했을 때 동작하는 리스너 생성
btn.setOnClickListener(new View.OnClickListener() {
public void onClick(View arg0) {
Toast.makeText(getApplicationContext(), "코드로 생성한 버튼입니다", Toast.LENGTH_SHORT).show();
}
});
}
}
🎨 Relative Layout(상대 레이아웃)
-
위젯의 배치 방법 2가지
-
부모 레이아웃의 상하좌우에 배치
(⚠️ 각 속성값은true혹은false로 지정)
-
다른 위젯을 기준으로 하여 상대적 위치에 배치
(⚠️ 각 속성값에"@+id/기준이_되는_위젯_아이디"를 지정)
-
🎨 테이블 레이아웃 (Table Layout)
- 주로 위젯을 표 형태로 배치할 때 사용함
- 행의 개수 = XML에서
<TableRow/>의 개수 - 열의 개수 = XML에서
<TableRow/>안에 포함된 위젯의 수 - 3행 4열의 테이블레이아웃
🍧 layout_span 속성
- 열을 합쳐서 표시하라는 의미
android:layout_span="2": 현재 셀부터 2개의 셀을 합쳐서 표시
🍧 layout_column 속성
- 지정된 열에 현재 위젯을 표시하라는 의미
- ⭐
android:layout_column="1": 1열부터 채우라는 의미 (열번호;index는 0부터 시작함)
🍧 stretchColumns`속성
- 지정된 열의 너비(폭)을 늘림
🍧 stretchColumns =“*” 속성
- 전체 화면이 꽉 차도록, 각 셀을 같은 크기로 확장
🎨 그리드 레이아웃 (Grid Layout)
- 테이블 레이아웃에서 행 확장을 편리하게 할 수 있는 버전
- 유연한 화면 구성에 적합
- 단, 위젯의 높이 조절이 어려워 전체화면이 채워지지 않을 수 있다.
🍧 <GridLayout/> 자체에 자주 사용되는 속성
rowCount: 행 개수columnCount: 열의 수orientation: 그리드를 수평 방향을 우선할지, 수직 방향을 우선할지를 결정
🍧 내부 위젯에서 자주 사용되는 속성
layout_row: 자신이 위치할 행 번호 (0번부터 시작)layout_column: 자신이 위치할 열 번호 (0번부터 시작)layout_rowSpan: 행을 지정된 수만큼 확장layout_columnSpan: 열을 지정된 수만큼 확장layout_gravity: 주로 fill, fill_vertical, fill_horizontal 등으로 지정 행 또는 열 확장하여 위젯을 확장된 셀에 꽉 채우는 효과를 냄
🎨 프레임 레이아웃 (Frame Layout)
- 단순히 레이아웃 내의 위젯을 왼쪽 상단부터 겹쳐서 출력
- 프레임레이아웃 자체로 사용하기보다는 탭 위젯 등과 혼용해서 사용할 때 유용
🍧 <FrameLayout/>에서 가끔 사용하는 속성
foreground: 프레임레이아웃의 전경 이미지를 지정foregroundGravity: 전경 이미지의 위치를 지정
참고 - 레이아웃의 유연성 속성
