[UI] Linear Layout

패스트캠퍼스 강의 정리: [UI] 03~08

[부모 Component]
자식 view 들을 수직이나 수평으로 배치할 수 있는 component 이다.

<XML 코드 작성하는 곳>

activity_main.xml 파일 위치

---

<design tab, code tab 위치>

오른쪽 위

---

<Layout Validation 위치>

오른쪽 상단

코드를 수정하면서 바뀌는 UI를 실시간으로 확인할 수 있다.

---

<LinearLayout>

• LinearLayout 으로 변경
• orientation 속성:  자식 component의 위치를 정함
  • Vertical: 자식 component를 수직으로 나열
  • Horizontal: 자식 component를 수평으로 나열
• gravity 속성: 자식들을 일괄적으로 나열
• weight_sum 속성: 전체의 비율을 의미함 

---

<View Component들의 공통적인 속성>

• layout_width
• layout_height

입력할 수 있는 속성:

1. 숫자: 예) 300dp
2. "match_parent": 부모가 차지하고 있는 영역만큼 차지하겠다. 부모가 없는 최상위 뷰인 경우 핸드폰 디바이스를 의미한다.
3. "wrap_content": 내 내용물을 감쌀 수 있는 크기만큼 차지하겠다.

---

<textview> 속성들

• text: 글씨를 쓸 수 있는 속성
• textColor: 글씨색
• textSize: 글씨 크기
  
  • 픽셀
  • dp: 해상도가 다른 디바이스에서도 동일한 크기로 나타남

• background: 배경색
• layout_gravity: LinearLayout의 자식으로 있을 경우 생기는 속성. 부모 클래스 기준으로 해당 textview의 위치를 정함
• gravity: TextView가 차지하고 있는 영역내에서 가지고 있는 content를 어디로 보낼지 정하는 것 (예. right|center도 가능하다)
• weight: 크기를 비율로 정하고 싶을 때 사용. 차지할 비율을 적는다.

 

만약 동등하게 나누고 싶은 경우:

weight 설정 후, width 나 height는 0dp로 바꿔준다. 0dp로 지정한 부분에 비율이 적용되기 때문.

 

---

모든 속성은 design tab에서 확인할 수 있다.

오른쪽 Attributes

4가지 확인 가능

• Declared Attribute
• Layout
• Common Attributes
• All Attributes

 

---

Linear Layout 실습

아래는 소스코드

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#E91E63">

        </ImageView>

        <ImageView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#FF5722">

        </ImageView>

        <ImageView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#FFC107">

        </ImageView>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#FFEB3B">

        </ImageView>

        <ImageView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#8BC34A">

        </ImageView>

        <ImageView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#4CAF50">

        </ImageView>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#009688">

        </ImageView>

        <ImageView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#3F51B5">

        </ImageView>

        <ImageView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#673AB7">

        </ImageView>

    </LinearLayout>