안드로이드 앱 프로그래밍#2 - 레이아웃(constraint, linear)

오늘은 레이아웃 중에 2가지, constraint 레이아웃과 linear 레이아웃에 대해서 알아보겠다.

 

1. constraint layout

 

constraint layout은 각 위젯들 간의 관계를 설정해줄 수 있는 레이아웃이다.

백문이 불여일견

 

UI에 텍스트뷰 버튼 2개(시작, 시작2) 그리고 버튼 1개(BUTTON)을 constraint 레이아웃에 배치해 보았다.

 

이떄 총 3개의 버튼들 사이에는 관계가 설정되어 있는것이다.

 

첫번쨰 버튼인 "시작"버튼을 보면

 

<Button
1.android:id="@+id/button"
2.android:layout_width="wrap_content"
3.android:layout_height="wrap_content"
4.android:layout_marginStart="72dp"
5.android:layout_marginLeft="72dp"
6.android:layout_marginTop="52dp"
7.android:text="시작"
8.app:backgrountTint="empty"
9.app:iconTint="empty"
10.app:layout_constraintStart_toStartOf="parent"
11.app:layout_constraintTop_toTopOf="parent" />

 

이런 코드가 xml에 있는것인데 여기서 constraint layout의 성질을 잘 파악할 수 있을것같다.(문장 앞 번호는 편의상 붙인것)

 

4,5,6번줄을 보면 UI테두리로부터 몇 dp 떨어져있다는것을 표현해준것이다.

 

실제로 버튼을 드래그하면서 움직여보면 xml 코드에서 dp값이 자동으로 변한다.

 

반대로 xml코드에서 직접 dp값을 설정해주면 design탭에서 버튼의 위치가 변한다.

 

10,11번줄은 버튼의 시작(왼쪽)과 탑(위)이 parent 즉, UI테두리와 연결되어있다는것을 의미한다.

 

이런 constraint layout이 활용도가 높은 이유는 이런 간격이나 이미지뷰,버튼등의 뷰 간의 관계들을 설정해주기 때문에

 

해상도가 달라지는 등 환경이 달라질때도 그 비율이 유지되면서 원하는 위치에 뷰를 위치시킬 수 있다.

 

즉, 비율을 유지하는데 효과적이라고 정리하면 될것같다.

 

 

2. linear layout

 

다음은 리니어 레이아웃 이다.

 

아마 앱공부를 하면서 나는 이 레이아웃을 제일 많으 연습해본것 같다.

 

말 그래도 선형 레이아웃이다. 우리 눈에 선 모양으로 보인다.

 

크게 수직선(vertical)과 평행선(horizontal) 두가지 방식이 있다.

 

이 두 가지 방식은

android:orientation="vertical"

android:orientation="horizontal"

로 구별한다

 

그래서 linear layout은 orientation 설정을 필수로 해줘야한다. 필수사항이다.

 

 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
android:orientation="vertical">

 

이 코드는 보이다시피 수직으로 선형레이아웃을 설정해 준것이다.

 

다음 사진은 이 레이아웃에 버튼 3개를 추가한 UI이다.

 

버튼의 좌우 위치가 중요한게 아니라

 

밑으로 한줄 한줄 띄어 가면서 3개의 버튼이 자리잡은것이 중요하다. 

 

다음으로 orientation을 horizontal로 설정한 UI를 보자

 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
android:orientation="horizontal">

 

이것이 코드고

 

이렇게 된다

 

차이가 보이는가??

 

평행(horizontal)으로 설정했기떄문에 버튼 3개가 위아래로 생기지 않고 양옆으로 배열되는것이다.

 

이것이 리니어 레이아웃의 제일 큰 특징이다. 선형으로 배열된다는것!!!

 

끝!!