얼렁뚱땅
[UI] Linear Layout 본문
패스트캠퍼스 강의 정리: [UI] 03~08
[부모 Component]
자식 view 들을 수직이나 수평으로 배치할 수 있는 component 이다.
<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
입력할 수 있는 속성:
- 숫자: 예) 300dp
- "match_parent": 부모가 차지하고 있는 영역만큼 차지하겠다. 부모가 없는 최상위 뷰인 경우 핸드폰 디바이스를 의미한다.
- "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에서 확인할 수 있다.
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>
'Android 앱 개발' 카테고리의 다른 글
[UI] Image View (0) | 2020.12.24 |
---|---|
[UI] Scroll View (0) | 2020.12.24 |
[UI] Padding, Margin (0) | 2020.12.24 |
[UI] Frame Layout (0) | 2020.12.24 |
[UI] Relative Layout (0) | 2020.12.24 |