[부스트코스]레이아웃 만들기

오늘은 부스트코스의 안드로이드 강의의 첫번째 부분인 레이아웃만들기를 공부해보았다.

레이아웃에 대해서는 앞의 글을 참고하면 이해하기 수월할 것 같다!

(앞 글 링크 참고: https://minjoo-space.tistory.com/2)

이 강의에서 배우는 레이아웃들의 종류이다.

---

제약 레이아웃(Constraint Layout)

안드로이드 스튜디오에서 새로운 프로젝트를 만들면 먼저 나오는 디폴트 레이아웃

프로젝트 생성 시, 자동으로 만들어진 XML 레이아웃 파일인 activity_main.xml 파일을 열어보면 바깥에 있는 최상위 태그가 ConstraintLayout인걸 확인할 수 있다.

activity_main.xml에서 Design부분에서 button을 만들어서 버튼의 점들을 기준이 되어 제약을 걸 부모 레이아웃에 연결해 주면된다.

연결선은 뷰의 상, 하, 좌, 우에 있는 연결점을 다른 레이아웃이나 위젯의 상,하,좌,우와 연결하여 만들 수 있다.

제약레이아웃에서의 주의할 점

연결선은 그 뷰의 위치를 결정할 만큼 만들어져야 한다는 것!

예)만약 상, 하 연결선을 모두 부모 레이아웃과 연결하여 만들게 되면 그 뷰는 부모 레이아웃의 가운데 지점에 있게 됩니다.

상, 하로 이어진 선의 중간 지점이죠.

상, 하, 좌, 우 모두 부모 레이아웃과 연결하면 어떻게 될까요?

화면의 가운데 부분에 위치하게 됩니다.

---

리니어 레이아웃(Linear Layout)

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical" 
  android:layout_width="match_parent"
  android:layout_height="match_parent"
>

LinearLayout이라고 작성되어있는 부분이 원래는 제약레이아웃이었는데, 다른 종류의 레이아웃을 쓸 경우에 수정하면된다.

*layout_gravity

자신을 포함하고 있는 부모 위젯 레이아웃에서 옵션값에 따라 정렬

이 View의 gravity 속성을 조절하게 되면 View 내부의 content의 위치를 설정하게 된다.

이와 달리 layout_gravity를 설정하게 된다면 View를 감싸고 있는 LinearLayout과 같은 상위 View를 기준으로 했을 때 View의 위치를 설정하게 된다.

---

마진(margin), 패딩(padding)

마진(margin) : 뷰의 테두리선 바깥쪽 공간을 얼마나 띄울 것인지를 지정하는 속성

패딩(padding) : 뷰 안에 들어있는 내용물을 테두리 선과 얼마나 띄울 것인지를 지정하는 속성

                     버튼 안에 들어있는 글자가 테두리선과 너무 붙어있다는 느낌이 든다면 이 속성을 사용해 공간을 띄워줄 수 있다.

---

상대 레이아웃(Relative Layout)

뷰를 담고 있는 부모 레이아웃이나 그 안에 들어있는 다른 뷰들과의 상대적 위치를 이용해 화면을 배치하는 레이아웃

화면의 아래쪽에 버튼을 붙이고 싶다!

=>layout_alignParentBottom = "true"로 설정하는 것만으로 충분

리니어 레이아웃의 경우에는 위에서부터 차례대로 쌓아야 가장 아래쪽까지 배치할 수 있지만 상대 레이아웃은 위에 아무것도 없어도 화면의 가장 아래쪽에 뷰를 붙여둘 수 있다!!

---

***위,아래 버튼을 두고 가운데 버튼이 꽉 차게 만들기

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent" >

<Button
  android:id="@+id/button1"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:text="Button"
  android:layout_alignParentTop="true" />

<Button
  android:id="@+id/button2"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:text="Button"
  android:layout_alignParentBottom="true" />

<Button
  android:id="@+id/button3"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:layout_below="@+id/button1"
  android:layout_above="@+id/button2"
  android:text="Button" />

</RelativeLayout>

<결과>