[Kotlin] 8 - Layouts

사용 Project

• 지난 챕터에서 생성한 HelloWorld 프로젝트 사용
• 또는 Empty Activity로 새 프로젝트 만들어서 사용
  • com.example.helloworld

Code에서 Resource를 참조하는 법

• values* 폴더를 제외한 대부분의 경우 폴더 이름이 리소스 종류가 된다.

• 앱을 실행하고 해당하는 layout을 불러서 사용하는 것

프로젝트 내의 레이아웃

• Wizard를 이용해 Activity를 생성할 경우 함께 자동으로 생성할 수 있으며 직접 파일을 추가해서 만들어도 된다.
• 런타임에 Activity가 로드하여 사용한다.
• res/layout 폴더에 영어 소문자, _, 숫자 만으로 파일이름을 만든다.
• xml 파일로 작성한다.
• schema 및 name space 에 대한 선언을 반드시 해야 한다.
  • 해당 내용이 자바 코드로 컴파일 된다 -> xml 파일 내에 오타가 있으면 안된다.
  • 사용하지 않는 파일이 있어도 개발하는데 문제는 없다 -> 나중에 정리 가능하다.

xml

• 태그(tag, element)와 속성(attribute)을 사용하는 html보다 더 넓은 개념
• 임의로 정의한 태그와 속성을 정의해서 사용한다.
  • Schema: 어떤 태그와 속성을 쓸 수 있으며 어떤 hierarchy를 가지는지에 대한 정의 -> http:// ….
  • Namespace: 특정 태그, 속성의 정의
  • 어떤 Schema에서 왔는지를 알려준다. 태그 이름간의 충돌을 막을 수 있다.
  • (android, app, tools)

 

• html과 달리 태그는 반드시 닫아야 한다. <tag></tag> 또는 <tag/>

한 문서에서 두 개 이상의 스키마를 사용할 수도 있기때문에 Namespace를 붙여서 사용하여야 함 -> xmlns:android

각각의 항목에 대해서 어디서 따왔는지 Namespace를 사용하게 됨

android:layout_width= ..

XML(eXtensible Markup Language)은 HTML과 비슷하게 마크업 언어인데, 태그가 커스텀마이징이 가능하다.

<users>
	<user id="abc" name="ABC">
	</user>
	<user id="bbc" name="Aasdb">
	</user>
</users>

Schema - XML의 문법 규칙

Element 정의

각 Element의 Attributes

내가 어떠한 규칙으로 XML을 작성하고 있는지 Schema에 정의

공통 사항

• 코드와의 연관성
  • 코드 상의 클래스 이름 → Tag
  • 코드 상의 클래스 멤버(property) → Attribute
  • Attribute는 namespace를 정확히 적어준다.
    
    

 

안드로이드 기본 라이브러리에서 제공하는 클래스(android.widget)는 패키지명을 생략하고 불러서 사용해도 된다.

• Activity에서 불러 사용하는 레이아웃 파일의 최상위 항목은 반드시 레이아웃이여야 한다.
  • Layout은 내부에 Layout을 중첩할 수 있다
  • Layout은 내부에 여러 개의 Widget을 가질 수 있다.
• Android SDK에 포함된 Layout, Widget은 Class Name만 적고 사용
  • android.widget.LinearLayout
  • Linear layout, Relative layout, Frame layout, Grid layout 등
• 그 외 Layout, Widget은 package 를 포함하는 Fully-qualified Class Name을 사용
  • androidx.constraintlayout.widget.ConstraintLayout

주요 Hierarchy

안드로이드에서 가장 최상위 클래스는 android.view.View 이다.

View에서는 모든 요소가 “클릭(터치)”이 가능하다.

공통 속성

정렬, 사이즈

• Left/Start, Right/End
  • Widget, Layout의 위치나 정렬을 지정할 때 사용하는 표현
  • Start - 현재 언어의 시작 방향 (한국어, 영어는 Start=Left) , (아랍어 Start=Right)
  • 낮은 minimum SDK를 지정했을 경우 Left/Right 표현을 함께 사용해야 한다.
• android:layout_width, android:layout_height
  • Widget, Layout의 사이즈를 지정하는 필수 속성.
  • match_parent, wrap_content, dp(반응형 사이즈 직접 조절) 사이즈 직접 입력 등의 방법이 있다.

여백

• 주요 설정 항목
  • android:layout_margin: 부모나 다른 widget과의 간격
  • android:padding: 자신의 내부 자식 요소와의 간격
  • 주로 dp로 지정한다.
• Top/Start(Left)/Bottom/End(Right) 각각 지정할 수도 있다.
  • 예) android:paddingTop

식별자

• android:id=”@id/식별자이름”
  • 레이아웃에서 다른 Widget/Layout을 참조할 때
  • Code 에서 해당 Widget/Layout을 사용해야 할 때 사용할 식별자
  • 일반적인 변수 Naming convension을 따르면 편하다.
  • 새 아이디를 부여하려면 @+id/아이디
    아이디 카테고리에 “아이디”를 추가할 거야 라는 코드
    
    
  • 이미 만들어진 아이디를 참조할 때는 @id/아이디
  • xml 파일은 위에서 아래로 해석되므로 줄번호가 아래쪽에 있는 아이디는 @id/아이디 로 참조하지 못한다. 이 경우 @+id/아이디 로 참조해야 한다.

소스 코드에서 사용할 예정인 클래스는 id(식별자)를 지정해주어야 함

<TextView 
EndOf = “@id/textView1”
/>

<TextView
android:id=”@+id/textView1”
/>

• 이런식으로 아직 id가 만들기전인데 순서가 뒤바뀌어 위에서 먼저 불러서 사용했을때 오류가 발생 → 간단한 해결 위에서도 @+id/textView1 로 수정을 해주면 자동으로 매핑해줌

Linear Layout

새 파일 추가

• app/res/layout 폴더에서 우클릭, New > Layout Resource File
• File name : activity_main_linear
• Root element : LinearLayout

• 파일명으로 대문자 사용불가

파일 살펴보기

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" // 필수속성 (vertical or horizontal)
    android:id="@+id/main" // inset을 적용하기 위해 id를 부여함
    android:layout_width="match_parent" 
    android:layout_height="match_parent">

</LinearLayout>

앱에서 새 레이아웃을 사용하도록 수정

• MainActivity.kt 를 다음과 같이 수정 후 앱을 실행하여 빈 화면이 나오는지 확인한다.
  
  

레이아웃에 위젯 추가

• Design 보기에서 드래그 & 드롭으로 추가 후 우측 속성 화면에서 편집.
• 미세한 조정은 Code 또는 Split에서 코드 단위로 수정

• Palette(왼쪽 상단)
  • 분류별로 위젯을 선택

• Component Tree(왼쪽 하단)
  • 현재 배치된 레이아웃, 위젯의 Hierarchy를 보여줌. 화면에서 클릭하기 어려운 항목은 이 화면에서 클릭하고 부모, 자식 관계를 드래그 & 드롭으로 이 화면에서 수정 가능

• Attributes(오른쪽 상단)
  • id, 사이즈 등 현재 선택된 위젯 또는 레이아웃에 대한 속성값들을 입력할 수 있다.

LinearLayout 사용

• activity_main_linear 레이아웃의 id는 “main” orientation은 “vertical”
• Button 네 개 추가 id는 각 각 buttonA, B, C, D
• B와 C는 LinearLayout 안에서 LinearLayout를 생성 후 포함 시켜줌
• 모든 요소의 사이즈는 warp_content

정렬

android:gravity="center" 최상위 LinearLayout을 중앙 배치

Constraint Layout

기본 정보

• 기존 레이아웃들의 불편한 점들을 개선한 레이아웃
• 기본 라이브러리에는 포함되어 있지 않으며 Module의 build.gradle의 dependencies 항목과 libs.versions.toml 다음과 같이 의존성이 추가되어야 사용 가능

• Iguana 이전 버전의 프로젝트는 Module의 build.gradle에 라이브러리 이름과 버전이 함께 기술된다
• 각 View는 상/하/좌/우 (Top, Bottom, Left, Right)에 제약점(Constraint)을 가지며 이 제약점을 부모나 다른 View에 연결하여 자신의 위치를 결정한다.

• 우측 속성 창에서 수평, 수직의 힘의 비율(bias)을 조절할 수 있으며 margin도 설정할 수 있다.

실습

• HelloWorld를 전체 화면의 위쪽 30%위치, 가로는 가운데 정렬되도록 위치를 수정

 

 

TextView의 상대적인 위치 Button 추가

• Hello Wold 문구 하단에 Button을 추가한다.
• Button은 Hello World와 20dp의 간격을 두고 위치하며 가로로는 가운데 정렬한다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.3" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp" # TextView2의 하단에서 20dp 떨어진 위치에 배치
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView2" # textView2 밑에 위치하겠다는 제약조건
        />

</androidx.constraintlayout.widget.ConstraintLayout>

• app:layout_constraintTop_toBottomOf="@+id/textView2": 이 속성은 버튼의 상단을 TextView2의 하단에 위치시키는 제약 조건을 설정합니다. 즉, 버튼은 TextView2의 바로 아래에 위치하게 됩니다.
• android:layout_marginTop="20dp": 이 속성은 버튼의 상단과 그 위에 있는 요소(여기서는 TextView2) 사이의 간격을 설정합니다. 여기서는 20dp로 설정되어 있으므로, 버튼은 TextView2의 하단에서 20dp 떨어진 위치에 배치됩니다.