사용 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 떨어진 위치에 배치됩니다.
사용 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 떨어진 위치에 배치됩니다.
