[Android 기초] 5. UI 기본 개념 (Layout, Margin, Padding, Gravity, Style, Theme)

 

 

 

 

---

 

1. 레이아웃(Layout)

 

• 레이아웃이란 ViewGroup의 파생 클래스로서, 포함된 View를 정렬하는 기능

 

 

 

 

01. Linear Layout

• 컨테이너에 포함 된 자식 뷰들을 수평 또는 수직으로 일렬 배치하는 레이아웃
• 가장 단순하고 직관적이며 사용빈도가 높음
• Orientation : Vertical(Child를 위에서 아래로), Horizontal(child를 왼쪽에서 오른쪽으로)
• LinearLayout의 자식(Children)으로 배치되는 View위젯들은 오직 한 방향으로만 배치
• 위젯의 크기 (높이 또는 너비) 와 관계없이 한 줄로만 배열
  가로 방향으로 배치 될 때는 가로로 한 줄(onlyonerow), 세로 방향으로 배치될 때는 세로로 한 줄(onlyonecolumn)
• LinearLayout의 자식들은 중첩(overlap)되지 않고,지정한 방향으로 쌓이는(stacked)형태로 표시

 

💡 LayoutWeight

• 자식(Children)들이 배치 될 때, 전체 영역 대비 비율의 개념으로 지정 할 수 있는 Weight(가중치)를 설정 가능
• (예) 전체 크기를 10으로 본다면, 첫 번째 View 위젯은 3, 두 번째 View 위젯은 7의 영역을 차지하도록 만들 수 있음
• android:layout_weight = "3"

 

 

 

 

02. Relative Layout

출처: recipes4dev.titory.com

• 뷰를 서로 간의 위치 관계나 컨테이너와의 위치 관계를 지정하여 배치하는 레이아웃
• 1. 자식(Children) View위젯들이 서로 간의 상대적 배치 관계에 따라 화면에 표시 될 위치가 결정
• (예) B는 A의 오른쪽에 표시 : B toRightOf A
  (예) D를 C의 아래쪽에 표시 : D below C
• 2. View 위젯들을 포함하는 부모(Relative Layout) 자체가 상대적 위치의 기준점으로 사용 될수도 있음
  (예) 자식(Children)들에 '상대적인' 배치 기준을 지정하지 않는다면, RelativeLayout 내부에서 중첩(Overlap)되어 표시
• 사용 예시
  - android:layout_toLeftOf="@id/buttion1"
  - android:layout_alignParentLeft="true"

 

	속성	설명
자식 간 기준	layout_toLeftOf	뷰(View)를 기준 뷰(Anchor View)의 왼쪽(Left)에 배치
	layout_above	뷰(View)를 기준 뷰(Anchor View)의 위(Above)에 배치
	layout_roRightOf	뷰(View)를 기준 뷰(Anchor View)의 오른쪽(Right)에 배치
	layout_below	뷰(View)를 기준 뷰(Anchor View)의 아래(Below)에 배치
	layout_toStartOf	뷰(View)를 기준 뷰(Anchor View)의 시작(Start)에 배치
	layout_toEndOf	뷰(View)를 기준 뷰(Anchor View)의 끝(End)에 배치
	layout_alignLeft	뷰(View)의 왼쪽(Left)을 기준 뷰(View)의 왼쪽(Left)에 맞춤.
	layout_alignTop	뷰(View)의 위(Top)를 기준 뷰(View)의 위(Top)에 맞춤.
	layout_alignRight	뷰(View)의 오른쪽(Right)를 기준 뷰(View)의 오른쪽(Right)에 맞춤.
	layout_alignBottom	뷰(View)의 아래(Bottom)를 기준 뷰(View)의 아래(Bottom)에 맞춤.
	layout_alignBaseline	뷰(View)의 폰트 기준선(Baseline)을 기준 뷰(View)의 폰트 기준선(Baseline)에 맞춤.
부모 기준	layout_alignParentLeft	뷰(View)를 부모(Parent) 영역 내에서 왼쪽(Left)에 배치
	layout_alignParentTop	뷰(View)를 부모(Parent) 영역 내에서 위쪽(Top)에 배치
	layout_alignParentRight	뷰(View)를 부모(Parent) 영역 내에서 오른쪽(Right)에 배치
	layout_alignParentBottom	뷰(View)를 부모(Parent) 영역 내에서 아래쪽(Bottom)에 배치
	layout_centerHorizontal	뷰(View)를 부모(Parent) 영역의 가로 방향 가운데 배치.
	layout_centerVertical	뷰(View)를 부모(Parent) 영역의 세로 방향 가운데 배치.
	layout_centerInParent	뷰(View)를 부모(Parent) 영역의 정 중앙(center)에 배치.
	layout_alignParentStart	뷰(View)를 부모(Parent) 영역의 시작 지점(Start)에 배치.
	layout_alignParentEnd	뷰(View)를 부모(Parent) 영역의 끝 지점(End)에 배치.

 

 

 

 

03. Table Layout

출처: 스파르타코딩클럽

• 표 형식으로 차일드를 배치하는 레이아웃
• 자식(Children) View 위젯들을 테이블(행과 열로 구성)로 나누어 표시
• 표를 구성하는 행의 개수만큼 TableRow를 포함하고, TableRow는 각 행에 포함된 셀(View)을 포함
• 주요 속성
  - stretchColumns: 늘릴 열을 지정
  - "*" : 모든 열을 늘여서 배치
  - "1, 2" : 1열(왼쪽에서 2번째)과 2열(왼쪽에서 3번째)를 늘여서 배치
• TableRow
  - 정해진 규칙에 따라 크기가 결정되므로, layout_width/height를 지정할 필요가 없음
  - layout_height는 항상 wrap_content
  - layout_width는 항상 match_parent

 

 

 

 

 

04. Frame Layout

• 컨테이너에 포함된 뷰들을 전부 좌상단에 배치하는 레이아웃
• 하나의 자식 View위젯만 표시 할 때 사용
  (여러개의 뷰(View) 위젯들을 중첩하고, 그 중 하나를 전면에 표시할 때. 포스트잇 위에 덮는 느낌)
• Frame Layout에 여러 View위젯을 자식으로 추가하면 겹쳐진 형태(Overlap)로 표시되며,
  가장 최근에 추가된 View위젯이 가장 맨 위, 상위 (ontop) 에 표시
  
  

 

 

 

 

05. Constraint Layout

• 제약 조건을 사용해 화면을 구성하는 레이아웃
• 복잡한 레이아웃을 단순한 계층구조를 이용해 표현 할 수 있는 ViewGroup
• 형제 View들과의 관계를 정의해서 레이아웃을 구성하는 건 RelativeLayout과 비슷하지만 보다 유연, 다양
  - RelativeLayout에선 불가능했던 자식 뷰간의 상호 관계 정의 가능
  - 뷰 계층을 간단하게 할 수 있어 유지보수도 좋고 성능도 좋음

 

 

 

차례로 리사이즈 핸들, 사이드 핸들, 베이스라인 핸들

 

 

💡위젯의 크기 설정

• 리사이즈 핸들 (ResizeHandle) 이용하기
  - 위젯을 클릭하면 네 모서리에 핸들이 생겨, 마우스로 드래그하여 크기를 설정
  - 드래그해서 크기를 조절하면 오른쪽 속성창의 layout_width, layout_height 를 입력해서 설정 가능
• 직접 값을 입력하여 설정하기
  - 오른쪽 속성창의 layout_width, layout_height 를 입력해서 설정 가능
• wrap_content : 위젯 내부에 있는 컨텐츠에 딱 맞게 길이 결정
• match_constraint : 너비를 꽉 채우도록 늘어남

 

💡 위젯의 상대 정렬

• 사이드 핸들(SideHandle) 이용하기
  - 위젯을 클릭하면 각 변의 가운데 핸들이 있음
  - 위젯이 다른 위젯 또는 화면의 경계에 대해 어떻게 정렬될지 드래그하여 연결 및 지정 가능
• 우측 속성창에서 정렬값 설정 가능

 

💡 위젯 내 텍스트의 위치로 정렬

• 베이스라인 핸들(BaselineHandle) 이용하기
  - 위젯을 클릭하고 마우스를 가져가면 좌측 하단에 'ab' 라는 베이스라인 아이콘이 있음
  - 클릭하면 위젯의 텍스트 하단에 베이스 라인 핸들이 보임
  - 이 베이스 라인 핸들을 클릭하여 다른 위젯의 텍스트에 연결하면, 텍스트의 하단이 일치하도록 정렬

 

 

💡 Constraint 툴바 사용하기

출처: 스파르타코딩클럽

• 1. Autoconnect
  - 켜두면 위젯을 배치할때 자동으로 이웃한 위젯과 관계를 맺어줌
• 2. Clear All Constraints
  - 모든 관계를 삭제
• 3. Infer constraints
  - 레이아웃내 배치된 모든 위젯을 현재 위치를 기반으로 관계를 맺어줌
• 4. Default Margins
  - 위젯 간의 기본 마진 값을 지정
• 5. Guidelines
  - 수평,수직 가이드라인을 만듦
  - 위젯을 이 가이드라인을 기준으로 정렬 할 수 있음

 

 

💡 속성창

• 1. Margin
  - layout_width가 match_constraint이므로 좌우 여백 8만 있고 남은 전체를 위젯이 차지중
• 2. Aspect Ratio
  - 클릭하면 위젯의 가로 세로비율을 지정
• 3. Wrap Content
  - 부등호 세 개(<<<)로 된 모양은 wrap_content로 지정되어 있음을 나타냄
• 4. Any Size
  - 톱니모양은 최대한의 너비를 차지, match_constraint로 지정되어 있음
• 5. 점선
  - 아무 관계가 없는 경우
• 6. Horizontal Bias
  - 위젯의 좌우측 위치 비율을 지정
  - 드래그해서 바꿀 수 있음

 

 

 

 

 

---

 

 

2. Margin / Padding / Gravity

 

 

출처: 스파르타코딩클럽

 

 

01. Margin

• 뷰와 다른 뷰(컨테이너) 간의 간격
• android:layout_margin="" : 상하좌우로 동일한 마진 설정시에 사용되는 속성
• layout_marginLeft, layout_marginRight, layout_marginTop, layout_marginBottom
  : 4방향의 마진을 각기 다르게 설정 할 때 사용되는 속성

 

 

02. Padding

• 뷰 안의 내부여백
• android:padding="": 상하좌우로 동일한 패딩 설정 시에 사용
• paddingLeft, paddingRight, paddingTop, paddingBottom**
  : 방향의 마진을 각기 다르게 설정 할 때 사용되는 속성**

 

 

03. Gravity

 

• android:gravity="" 로 사용
• gravity: 해당 뷰안의 내용물 위치에 대한 정렬방식을 지정
• layout_gravity: 부모 뷰 안에서 해당 뷰의 정렬 방식 지정
• 가능한 값들 (부모 뷰 안에서 해당 뷰의 정렬 방식 지정만)
  - BOTTOM : ­부모 뷰에서 아래 쪽에 위치시킴
  - CENTER ­: 부모 뷰의 중앙에 위치시킴
  - CENTER_HORIZONTAL : ­부모 뷰의 수평기준으로 중앙에 위치시킴
  - CENTER_VERTICAL : ­부모 뷰의 수직기준으로 중앙에 위치시킴
  - END­ : 부모 뷰에서 텍스트 방향의 끝(한글이나 영어의 경우는 오른쪽)에 위치시킴
  - LEFT : ­부모 뷰에서 왼쪽에 위치시킴
  - RIGHT : ­부모 뷰에서 오른쪽에 위치시킴
  - TOP : ­부모 뷰에서 위쪽에 위치시킴

 

 

---

 

 

3. Style,Theme

 

 

01. Style

위와 같이 styles.xml 파일 수정 후, 레이아웃 xml 파일에서 버튼 안에 style ="@style/BtnStyle" 입력

• View 또는 창의 모양과 형식을 지정하는 속성 모음
• 높이, 패딩, 글꼴 색상, 글꼴크기, 배경색 등의 속성을 지정
• 레이아웃을 지정하는 XML과 별개인 XML리소스에 정의됨
• Android의 스타일은 웹 디자인의 cascading스타일 시트와 유사한 철학을 공유
• 이를 통해 콘텐츠와 디자인을 구분

 

 

02. Theme (테마)

• 개별View 가 아니라 전체 Activity 또는 애플리케이션에 적용되는 스타일
• 스타일이 테마로 적용된 경우, 액티비티 또는 애플리케이션에 포함된 모든 뷰가 자신이 지원하는 스타일 속성을 적용
  (예) 액티비티의 테마와 동일한 CodeFont스타일을 적용한다면,
  해당 액티비티에 포함된 모든 텍스트에 녹색의 고정 폭 글꼴이 적용

 

 

실습

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#540BA6"
    tools:context=".MainActivity">



        <LinearLayout
        android:background="#E4C5FF"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="vertical">

        <Button
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button1"
            />

        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button2"
            android:layout_gravity="center"
            />

        <Button
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button3"
            android:layout_gravity="right"
            />

    </LinearLayout>



        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="#AB78B6"
            android:layout_margin="10dp">


            <Button
                android:id="@+id/button4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button4"
                android:layout_toLeftOf="@id/button5"
                android:layout_marginRight="20dp"
                />

            <Button
                android:id="@+id/button5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button5"
                android:layout_alignParentRight="true"
                />

            <Button
                android:id="@+id/button6"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button6"
                android:layout_below="@id/button4"
                android:layout_marginLeft="10dp"
                />

        </RelativeLayout>




        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:background="#E4C5FF"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:orientation="vertical">

            <Button
                android:id="@+id/button7"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button7"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                />

            <Button
                android:id="@+id/button8"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="Button8"
                app:layout_constraintStart_toEndOf="@id/button7"
                app:layout_constraintTop_toTopOf="@id/button7"
                app:layout_constraintBottom_toBottomOf="@id/button7"
                android:layout_marginLeft="20dp"
                />

            <Button
                android:id="@+id/button9"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="right"
                android:text="Button9"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/button7"
                />


        </androidx.constraintlayout.widget.ConstraintLayout>


<!--    </LinearLayout>-->


</LinearLayout>