안드로이드 공식 문서, Android Basics in Kotlin 과정을 학습하며 기록하고 및 요약하기 위한 글입니다.
"[학습] Android Basics in Kotlin 과정 소개" > Unit 1: Kotlin 기초 > 기본 레이아웃 구축 단원 중 다음 내용을 요약했습니다.
- 생일 카드 앱 생성 (원문, 원문 최종 업데이트일: 2022.08.27)
- Android 앱에 이미지 추가 (원문, 원문 최종 업데이트일: 2022.08.27)
학습일: 2023.01.05
앱 소개: 이미지와 텍스트가 있는 생일 축하 메세지 앱
사용 요소: ContraintLayout , TextView, ImageVIew
주요 학습 내용
- Layout Editor 소개
- TextView 요소에 텍스트, 글꼴, 여백 등 속성 설정
- 이미지 추가 및 ImageView 사용 방법
- 문자열 리소스 추출 방법
새 프로젝트 만들기
----------------------------------------------------------------------------------------------
- Empty Activity 템플릿 선택
- Name : Happy Birthday
- Language: Kotlin
- Minumum SDK : API 19: Android 4.4 (KitKat)
----------------------------------------------------------------------------------------------
새 프로젝트를 만드는데 익숙하지 않다면 첫 번째 Android 앱 만들기 및 실행하기 문서를 참고하세요.
Layout Editor (레이아웃 편집기)
Layout Editor : 안드로이드 스튜디오가 제공하는 도구로 레이아웃 구성에 도움을 줍니다.
Layout Editor 소개
1. Project 창
2. Palette 창: 레이아웃으로 드래그할 수 있는 View, ViewGroup 목록
3. Component Tree 창: 화면 뷰의 다른 표현으로, 화면의 모든 뷰가 계층 구조로 표시
4. Design 뷰: 앱이 실행될 때 표시될 화면과 유사
5. Blueprint 뷰: 레이아웃의 외곽(윤곽선)만 보여주기에, 레이아웃 겹침등을 확인할 수 있습니다.
6. Attributes 창: 선택한 View의 속성을 제어
그 외. 4~5번 영역 오른쪽 하단 영역: 확대/축소/이동 컨트롤
더 자세한 내용은 사용자 가이드 - Layout Editor로 UI 빌드 문서를 확인하세요.
레이아웃 변경
왼쪽 상단과 오른쪽 하단에 메세지를 크게 표시하도록 레이아웃을 변경합니다.
activity_main.xml 파일을 열고(app > res > layout > activity_main.xml)
Design 탭을 선택하면 Layout Editor가 표시됩니다.
기존 TextView("Hello World!") 삭제
1. 해당 TextView 선택 후 Delete 키
(Component Tree 창 또는 디자인 화면에서 선택할 수 있습니다.)
첫 번째 TextView 추가
TextView 추가 및 text 속성 설정
1. Palette 창에서 TextView 찾기
(Common, Text 카테고리 모두에 있습니다)
2. Palette 창에 있는 TextView를 디자인 화면의 왼쪽 상단 아무곳에나 드래그합니다.
3. Component Tree창에 TextView가 표시됩니다.
(빨간색 느낌표 표시는, ContraintLayout에 Contraint가 없어서 생긴 오류로 다음 단계에서 해결합니다.)
4. Attribute 창 > text : 원하는 축하 메세지로 설정합니다.
(예: Happy Birthday, sosohanya!)
원하는 속성명을 찾으려면, Attribute 창 우측 상단의 돋보기 아이콘을 클릭해 원하는 속성면만 필터링합니다.
Contraint(제약 조건) 추가
5. Attribute 창 > Layout 부분 > Contraint Widget : 정 사각형 뷰에서 설정합니다.
6. 정사각형의 + 를 클릭하여 여백(margin)을 설정합니다. (위쪽, 왼쪽 모두 16 입력)
(설정된 여백의 단위는 dp입니다. - 16dp, dp 단위에 관한 설명은 아래 추가 설명에 있습니다.)
두 번째 TextView 추가
1. 첫 번째 TextView와 동일한 방법으로, 화면 오른쪽 하단 아무곳에나 드래그합니다.
2. Attribute 창 > text : 보내는 사람으로 설정합니다. (예: From Me)
3. Attribute 창 > Layout 부분 > Contraint Widget > 오른쪽, 아래쪽 여백을 16으로 설정합니다.
텍스트에 스타일 추가
두 개의 TextView 모두에 아래와 같은 스타일을 지정합니다.
(각 TextView를 선택 > Attribute 창 > Common Attibute 영역 > textAppearance 속성 펼치기)
- textSize: 36sp
- fontFamily: sans-serif-light (다양한 글꼴을 시도해 보십시오)
- textColor: @color/black (black을 입력하면, 선택박스가 표시되고, 거기서 선택하면 됩니다)
앱 실행
솔루션 코드
https://github.com/google-developer-training/android-basics-kotlin-birthday-card-app-solution
앱에 이미지 추가
프로젝트에 이미지 추가
1. 여기에 접속하여 오른쪽 Download 버튼을 클릭하면 이미지가 표시됩니다.
2. 해당 이미지를 "androidparty.png" 이름으로 저장합니다. (마우스 우클릭 > 다른 이름으로 저장)
3. View > Tool Windows > Resource Manager (또는 Project 창 왼쪽 Resource Manager 탭 선택)
4. Resource Manager 아래 + 를 클릭하고 Import Drawables를 선택
5. 위에서 다운로드한 이미지를 선택하고 OK 클릭
6. Next 클릭. (미리보기가 표시됩니다)
7. Import 클릭
8. Drawable 목록에 이미지가 추가되었습니다.
(이 목록에는 앱의 이미지와 아이콘이 모두 포함됩니다. 이제 앱에서 이 이미지를 사용할 수 있습니다.)
9. 프로젝트 뷰로 전환합니다. (View > Tool Windows > Project 클릭 또는 Project 탭 클릭)
10. app > res > drawable 에 해당 이미지가 있는지 확인합니다.
ImageView 추가
Autoconnection 버튼(툴 바의 자석 모양)이 비활성화 된 상태에서 진행합니다.
Autoconnection 버튼이 활성화 되어있으면, 자동으로 제약조건이 추가됩니다.
(어떻게 제약조건이 추가될지는 어느 위치에 드래그하느냐에 따라 달라지는 듯 합니다.
그래서 그냥 비활성화 상태로 진행합니다.)
1. activity_main.xml 을 엽니다. (app > res > layout > activity_main.xml)
2. Palette 창에 있는 ImageView를 화면으로 드래그합니다. (중앙 부분에, 텍스트에 겹치지 않을 위치로)
Pick a Resource 대화상자가 열립니다.
여기에는 앱에서 사용할 수 있는 이미지 리소스가 모두 나열되고, Drawable 탭에 생일 이미지가 있습니다.
(Drawable 리소스는 화면에 그릴 수 있는 그래픽의 일반적인 개념입니다. 여기에는 이미지, 비트맵, 아이콘, 기타 여러 유형의 리소스가 포함됩니다.)
3. Pick a Resource > Drawable 탭 > 해당 이미지(androidparty.png)를 클릭 후 OK
이미지가 앱에 추가되었지만, 원하지 않는 위치에 있고 화면을 채우지도 않습니다.
ImageView 배치 및 크기 조절
1. ImageView를 드래그합니다. (분홍색 직사각형이 화면의 왼쪽과 오른쪽에 맞춰지도록)
[ Contraint(제약 조건) 추가 ]
2. ImageView 상단 중간의 원을 클릭하여 앱 화면 상단으로 드래그합니다.
3. ImageView 하단 중간의 원을 클릭하여 앱 화면 하단으로 드래그합니다.
4. ImageView 좌측 중간의 원을 클릭하여 앱 화면 좌측으로 드래그합니다.
5. ImageView 우측 중간의 원을 클릭하여 앱 화면 우측으로 드래그합니다.
제약 조건이 정상적으로 지정된 경우, 하얀색으로 표시되던 원이 파란색으로 표시됩니다.
또한 Attribute 창 > Constraint Widget > 여백도 0으로 표시되는 것으로도 확인이 가능합니다.
2~5번 과정에서 ImageView의 가장자리와, 화면의 가장자리가 너무 가까워 드래그가 힘들 경우,
Attribute 창 > Constraint Widget > + 를 클릭하여 여백을 0으로 지정해도 동일한 효과가 나타납니다.
위 이미지에서 모든 여백이 0이고, Constraint의 Start, End, Top, Bottom이 모두 parent 와 연결된 것을 확인할 수 있습니다.
제약 조건이 잘못 지정된 경우 해당 ImageView를 선택하고, 마우스 우클릭 > Clear Constraints of Selection을 선택하면 모든 제약 조건이 삭제됩니다.
이미지가 중앙에 정렬되었지만, 아직 전체 화면을 차지하지는 못합니다.
6. Attribute 창 > Layout 영역 > layout_width : 0dp(match constraint) 로 설정
7. Attribute 창 > Layout 영역 > layout_height: 0dp(match constraint) 로 설정
match constraint : 여백(margin)을 뺀 만큼, parent 영역 크기에 맞춥니다. (여기서 parent는 ContraintLayout)
ImageView의 너비와 높이는 앱 화면과 같아졌지만,
이미지는 ImageView 중앙에 배치되어 여전히 위 아래 공백이 있습니다.
8. Attribute 창 > scaleType: centerCrop
이제 이미지가 전체 화면을 채웁니다. 근데, 메세지가 사라졌습니다.
UI 요소의 순서 바꾸기
1. Componet Tree 창에서 ImageView를 ConstraintLayout 바로 아래로 드래그합니다.
경고 없애기
하드코딩된 문자열 리소스로 변경하기
- 하드코딩된 문자열 : 코드에 직접 작성된 문자열 (예: "Happy Birthday, sosohanya!")
- 하드코딩된 문자열은 재사용과, 다른 언어로의 번역이 힘들어집니다.
- 리소스 파일로 문자열을 추출하여, 해당 문자열 이름으로 문자열을 사용합니다.
TextView의 문자열, 리소스로 추출
"Happy Birthday, sosohanya!" 텍스트가 있는 TextView의 문자열을 추출합니다.
1. Component Tree > TextView 옆에 주황색 삼각형을 클릭합니다. 관련 메세지와 해결방법이 설명된 창이 열립니다.
2. 해당 메세지의 하단에 있는 Fix 버튼을 클릭합니다.
3. Extract Resource 대화상자가 열립니다. 각 TextView의 이름은 다음과 같이 순서대로 지정합니다.
- Resource name: happy_birthday_text (문자열이 앞으로 호출될 이름)
- Resource value: 실제 문자열 자체
4. OK 버튼을 클릭
- text: @string/happy_birthday_text 으로 변경된 것을 확인할 수 있습니다.
- strings.xml(app > res > values > strings.xml) 파일을 확인하면 happy_birthday_text 문자열 리소스가 생성된 것을 확인할 수 있습니다.
"From me" 텍스트가 있는 TextView도 위와 동일하게 추출해줍니다.
(이 텍스트의 Resource name은 "signature_text"로 지정합니다.)
저의 경우 Componet Tree에서 ImageView가 TextView 보다 아래 있으면 경고가 안 보였습니다.
Code 탭에서 직접 추출하는 방법도 있지만, 이 과정에서는 Design탭에서만 작업하도록 설명이 되어있습니다.
우선은 추출한 문자열이 있는 TextView를 상단으로 올려 경고문을 없앤 후 ImageView를 다시 최상단으로 올렸습니다.
앱 접근성 확인
ImageView 옆에 경고 표시가 있습니다. contentDescription 속성이 누락되었다는 경고입니다.
(이 속성은 음성 안내 지원을 위한 속성으로, 접근성에 관한 자세한 내용은 개발자 참조 가이드를 확인하세요.)
하지만, 이번 실습 앱의 이미지는 장식의 목적만 있습니다.
importantForAccessibility 속성을 no로 설정하여 음성 안내 지원에 ImageView를 건너뛰라고 지시할 수 있습니다.
1. ImageView를 선택 > Attributes > importantForAccessibility: no
앱 실행
솔루션 코드
앱 내용에 대한 추가 설명
UI
- 화면에 표시되는 텍스트, 이미지, 버튼 등 여러 유형의 요소들입니다.
- UI를 통해 사용자에게 콘텐츠를 표시하고 사용자는 앱과 상호 작용합니다.
View
- 위 UI의 각 요소들(텍스트, 이미지, 버튼 등 여러 유형의 요소들)을
View라고 합니다. - 앱 화면에 표시되는 대부분의 내용은
View입니다. - 예로, 위에서 사용한
TextView와ImageView가 있습니다.
(TextView: 텍스트를 표시하는 View,ImageView: 이미지를 표시하는 View) View는 화면에 자체적으로 놓일 수 없습니다.View를 구성하려면 컨테이너(ViewGroup)에 배치합니다.
ViewGroup
View객체를 담을 수 있는 컨테이너입니다.- 내부에 있는
View들을 정렬하는 역할을 합니다. - 정렬 또는 레이아웃은 앱이 실행되는 기기의 화면 크기, 가로 세로 비율에 따라 변경될 수 있습니다.
- 레이아웃은 기기가 세로 모드인지, 가로 모드인지에 따라 조정될 수 있습니다.
- 예로, 위에서 사용한
ContraintLayout이 있습니다.
(ContraintLayout은 내부View들을 유연한 방식--상위 레이아웃에 맞춘다거나, 다른View의 하단 또는 우측에 붙인다거나 하는--으로 정렬 가능하게 합니다.)
strings.xml 파일
strings.xml 파일에는 사용자가 앱에서 보는 문자열 목록이 있습니다.
앱 이름도 문자열 리소스에 정의되어 있습니다.
문자열을 모두 한곳에 배치하면 앱의 모든 텍스트를 더 쉽게 번역하고 앱의 다양한 부분에서 문자열을 더 쉽게 재사용할 수 있습니다.
dp 와 sp
dp(density-independent pixels, 밀도 독립형 픽셀)
: 해상도가 다른 화면에서 UI 표시 크기를 유지하기 위한 측정 단위.sp(scalable pixels, 확장 가능한 픽셀)
: 글꼴 크기 측정 단위, 사용자가 설정한 글자 크기에 따라 조절됩니다.
자세한 내용은 가이드 - 다양한 픽셀 밀도 지원 문서를 확인하세요.
끝까지 읽어 주셔서 감사합니다. ^^
'냐냐한 Dev Study > Android' 카테고리의 다른 글
| [학습] 레모네이드 앱 프로젝트 (Android,Kotlin) (4) | 2023.01.10 |
|---|---|
| [학습] 주사위 굴리기 Android 앱 만들기 (Kotlin) (0) | 2023.01.09 |
| [학습] Kotlin으로 Hello World + 생일 축하 메세지 작성 (0) | 2023.01.05 |
| [학습] Android Basics in Kotlin 과정 소개 (0) | 2023.01.04 |
| 안드로이드 간단 시계(날짜/시간) 만들기 (Java) (0) | 2022.12.27 |