이 페이지는 Cloud Translation API를 통해 번역되었습니다.

Android Kotlin 기초 02.1: Layout Editor를 사용한 선형 레이아웃

이 Codelab은 Android Kotlin 기초 과정의 일부입니다. Codelab을 순서대로 진행하면 이 과정의 학습 효과를 극대화할 수 있습니다. 모든 과정 Codelab은 Android Kotlin 기본사항 Codelab 방문 페이지에 나열되어 있습니다.

기본 요건

Kotlin으로 기본 Android 앱 만들기
에뮬레이터 또는 기기에서 Android 앱을 실행합니다.
LinearLayout의 기본사항
LinearLayout 및 TextView을 사용하는 간단한 앱 만들기

학습할 내용

View 및 ViewGroup을 사용하는 방법
LinearLayout.을 사용하여 Activity에서 뷰를 정렬하는 방법
스크롤 가능한 콘텐츠를 표시하기 위해 ScrollView를 사용하는 방법
View의 공개 상태를 변경하는 방법
문자열 및 측정기준 리소스를 만들고 사용하는 방법
Android 스튜디오의 Layout Editor를 사용하여 선형 레이아웃을 만드는 방법

실습할 내용

AboutMe 앱을 만듭니다.
레이아웃에 TextView를 추가하여 이름을 표시합니다.
ImageView. 추가
스크롤 가능한 텍스트를 표시하는 ScrollView 추가

AboutMe 앱에서 나에 관한 재미있는 사실을 보여주거나 친구, 가족 구성원 또는 반려동물을 위해 앱을 맞춤설정할 수 있습니다. 이 앱은 이름, 완료 버튼, 별 이미지, 스크롤 가능한 텍스트를 표시합니다.

이 작업에서는 AboutMe Android 스튜디오 프로젝트를 만듭니다.

Android 스튜디오가 아직 열려 있지 않다면 Android 스튜디오를 엽니다.
Android 스튜디오에서 이미 프로젝트가 열려 있다면 File > New > New Project를 선택합니다.
프로젝트가 아직 열려 있지 않은 경우 Welcome to Android Studio 대화상자에서 + Start a new Android Studio project를 선택합니다.
Create New Project 대화상자의 Phone and Tablet 탭에서 Empty Activity 템플릿을 선택합니다. 다음을 클릭합니다.
다음 Create New Project 대화상자에서 다음 매개변수를 설정하고 Finish를 클릭합니다.

속성	값
애플리케이션 이름	AboutMe
회사 이름 Android	`com.android.example.AboutMe` (또는 자체 도메인)
위치 저장	기본 위치를 그대로 두거나 원하는 디렉터리로 변경합니다.
언어	Kotlin
최소 API 수준	API 19: Android 4.4 (KitKat)
이 프로젝트는 인스턴트 앱을 지원합니다.	이 체크박스는 선택 해제된 상태로 둡니다.
AndroidX 아티팩트 사용	이 체크박스를 선택합니다.

Android 스튜디오에서 프로젝트 파일을 생성하는 데 잠시 시간이 걸립니다.

앱을 실행합니다. 빈 화면에 'Hello World' 문자열이 표시됩니다.

Empty Activity 템플릿은 단일 빈 활동 Mainactivity.kt를 만듭니다. 템플릿은 activity_main.xml이라는 레이아웃 파일도 만듭니다. 레이아웃 파일의 루트 ViewGroup은 ConstraintLayout이며 콘텐츠는 단일 TextView입니다.

이 작업에서는 생성된 루트 ViewGroup을 LinearLayout로 변경합니다. UI 요소를 세로로 정렬합니다.

그룹 보기

ViewGroup는 다른 뷰와 뷰 그룹인 하위 뷰를 포함할 수 있는 뷰입니다. 레이아웃을 구성하는 뷰는 뷰 그룹을 루트로 하는 뷰 계층 구조로 구성됩니다.

LinearLayout 뷰 그룹에서 UI 요소는 가로 또는 세로로 정렬됩니다.

LinearLayout 뷰 그룹을 사용하도록 루트 레이아웃을 변경합니다.

프로젝트 > Android 창을 선택합니다. app/res/layout 폴더에서 activity_main.xml 파일을 엽니다.
텍스트 탭을 선택하고 루트 뷰 그룹을 ConstraintLayout에서 LinearLayout로 변경합니다.
TextView를 제거합니다. LinearLayout 요소에서 android:orientation 속성을 추가하고 vertical로 설정합니다.

최적화 전

<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:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".MainActivity">

   <TextView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Hello World!"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintLeft_toLeftOf="parent"
       app:layout_constraintRight_toRightOf="parent"
       app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

변경 후:

<LinearLayout
       xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:tools="http://schemas.android.com/tools"
       xmlns:app="http://schemas.android.com/apk/res-auto"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:orientation="vertical"
       tools:context=".MainActivity">

</LinearLayout>

Layout Editor는 Android 스튜디오 내의 시각적 디자인 도구입니다. 앱의 레이아웃을 빌드하기 위해 XML 코드를 직접 작성하는 대신 Layout Editor를 사용하여 UI 요소를 디자인 편집기로 드래그할 수 있습니다.

Layout Editor를 보려면 Design 탭을 클릭합니다. 아래 스크린샷은 레이아웃 편집기의 일부를 보여줍니다.

디자인 편집기: 디자인 뷰, 청사진 뷰 또는 두 뷰 모두에서 화면 레이아웃을 시각적으로 표시합니다. 디자인 편집기는 레이아웃 편집기의 기본 부분입니다.

툴바: 디자인 편집기에서 레이아웃의 모양을 구성하고 일부 레이아웃 속성을 변경하는 버튼을 제공합니다. 예를 들어 디자인 편집기에서 레이아웃의 표시를 변경하려면 디자인 화면 선택 드롭다운 메뉴를 사용합니다.

디자인을 사용하여 레이아웃의 실제 미리보기를 확인합니다.
각 뷰의 윤곽선만 표시하려면 Blueprint를 사용합니다.
Design + Blueprint를 사용하여 두 디스플레이를 나란히 표시합니다.

Palette: 레이아웃 또는 Component Tree 창으로 드래그할 수 있는 뷰와 뷰 그룹의 목록을 제공합니다.

Attributes: 현재 선택된 뷰 또는 뷰 그룹의 속성을 표시합니다. 전체 속성 목록과 자주 사용되는 속성 간에 전환하려면 창 상단의 아이콘을 사용합니다.

구성요소 트리: 레이아웃 계층 구조를 뷰 트리로 표시합니다. Component Tree는 디자인 편집기에서 선택할 수 없는 작거나 숨겨져 있거나 겹치는 뷰가 있는 경우에 유용합니다.

1단계: TextView 추가

res/layout/activity_main.xml 파일이 아직 열려 있지 않으면 엽니다.
텍스트 탭 으로 전환하여 코드를 검사합니다. 코드에는 LinearLayout가 루트 뷰 그룹으로 있습니다. (그룹 보기 는 다른 보기를 포함하는 보기입니다.)

LinearLayout에는 필수 속성 layout_height, layout_width, orientation가 있으며 기본적으로 vertical입니다.
디자인 탭으로 전환하여 레이아웃 편집기를 엽니다.

Palette 창에서 디자인 편집기로 텍스트 뷰를 드래그합니다.
구성요소 트리 창을 확인합니다. 새 텍스트 뷰는 LinearLayout인 상위 뷰 그룹의 하위 요소로 배치됩니다.
속성 창이 열려 있지 않은 경우 엽니다. (창을 열려면 디자인 편집기에서 새로 추가된 TextView을 더블클릭하세요.)
속성 창에서 다음 속성을 설정합니다.

속성	값
ID	`name_text`
텍스트	이름으로 설정합니다. 텍스트 필드 중 하나에 렌치 아이콘이 표시되어 `tools` 네임스페이스용임을 나타냅니다. 렌치가 없는 것은 `android` 네임스페이스용입니다. 원하는 text 필드입니다.)
textAppearance > textSize	`20sp`
textAppearance > textColor	`@android:color/black`
textAppearance > textAlignment	가운데

2단계: 문자열 리소스 만들기

Component Tree에서 TextView, 옆에 경고 아이콘 이 표시됩니다. 경고 텍스트를 보려면 아래 스크린샷에 표시된 대로 아이콘을 클릭하거나 아이콘 위로 마우스를 가져갑니다.

경고를 해결하려면 문자열 리소스를 만드세요.

속성 창에서 이름으로 설정한 텍스트 속성 옆에 있는 점 3개를 클릭합니다. 리소스 편집기가 열립니다.
Resources 대화상자에서 Add new resource > New string Value를 선택합니다.
New String Value Resource 대화상자에서 Resource name 필드를 name로 설정합니다. 리소스 값 필드를 자체 이름으로 설정합니다. 확인을 클릭합니다. 경고가 사라진 것을 확인할 수 있습니다.
res/values/strings.xml 파일을 열고 새로 생성된 문자열 리소스 name를 찾습니다.

<string name="name">Aleks Haecky</string>

3단계: 측정기준 리소스 만들기

리소스 편집기를 사용하여 리소스를 추가했습니다. XML 코드 편집기에서 리소스를 추출하여 새 리소스를 만들 수도 있습니다.

activity_main.xml 파일에서 Text 탭으로 전환합니다.
textSize 줄에서 번호 (20sp)를 클릭하고 Alt+Enter (Mac의 경우 Option+Enter)를 입력합니다. 팝업 메뉴에서 Extract dimension resource(측정기준 리소스 추출)를 선택합니다.
Extract Resource 대화상자의 Resource name 필드에 text_size를 입력합니다. 확인을 클릭합니다.
res/values/dimens.xml 파일을 열어 다음과 같이 생성된 코드를 확인합니다.

<dimen name="text_size">20sp</dimen>

MainActivity.kt 파일을 열고 onCreate() 함수 끝에서 다음 코드를 찾습니다.

setContentView(R.layout.activity_main)

setContentView() 함수는 레이아웃 파일을 Activity와 연결합니다. 지정된 레이아웃 리소스 파일은 R.layout.activity_main입니다.

R은 리소스에 대한 참조입니다. 앱의 모든 리소스 정의가 포함된 자동 생성 클래스입니다.
layout.activity_main은 리소스가 activity_main이라는 이름의 레이아웃임을 나타냅니다.

앱을 실행합니다. 이름이 포함된 TextView가 표시됩니다.

앱 화면을 보면 이름이 화면 상단에 밀려 있으므로 이제 패딩과 여백을 추가합니다.

패딩과 여백 비교

패딩은 뷰 또는 요소의 경계 내에 있는 공간입니다. 아래 그림과 같이 뷰의 가장자리와 뷰의 콘텐츠 사이의 공간입니다.

뷰의 크기에는 패딩이 포함됩니다. 일반적으로 사용되는 패딩 속성은 다음과 같습니다.

android:padding는 뷰의 네 모서리에 대한 패딩을 지정합니다.
android:paddingTop은 상단 가장자리의 패딩을 지정합니다.
android:paddingBottom은 하단 가장자리의 패딩을 지정합니다.
android:paddingStart은 뷰의 '시작' 가장자리의 패딩을 지정합니다.
android:paddingEnd는 뷰의 '끝' 가장자리의 패딩을 지정합니다.
android:paddingLeft은 왼쪽 가장자리의 패딩을 지정합니다.
android:paddingRight은 오른쪽 가장자리의 패딩을 지정합니다.

여백은 뷰의 테두리 외부에 추가된 공간입니다. 위 그림과 같이 뷰의 가장자리에서 상위 요소까지의 공간입니다. 일반적으로 사용되는 여백 속성은 다음과 같습니다.

android:layout_margin는 뷰의 네 면 모두에 여백을 지정합니다.
android:layout_marginBottom은 이 뷰의 하단 바깥쪽의 공간을 지정합니다.
android:layout_marginStart은 이 뷰의 '시작' 측면 외부의 공간을 지정합니다.
android:layout_marginEnd은 이 뷰의 끝에 있는 공간을 지정합니다.
android:layout_marginLeft은 이 뷰의 왼쪽에 있는 공간을 지정합니다.
android:layout_marginRight는 이 뷰의 오른쪽에 있는 공간을 지정합니다.

오른쪽/왼쪽과 시작/종료의 차이

'오른쪽'과 '왼쪽'은 앱이 왼쪽에서 오른쪽 (LTR) 흐름을 사용하는지 오른쪽에서 왼쪽 (RTL) 흐름을 사용하는지에 관계없이 항상 화면의 오른쪽과 왼쪽을 나타냅니다. '시작'과 '종료'는 항상 흐름의 시작과 끝을 나타냅니다.

LTR 흐름의 경우 start = left, end=right입니다.
RTL 흐름의 경우 start=right, end=left입니다.

앱이 API 수준 17 (Android 4.2) 이상을 타겟팅하는 경우:

'left' 및 'right' 대신 'start' 및 'end'를 사용합니다.
예를 들어 android:layout_marginLeft은 RTL 언어를 지원하기 위해 android:layout_marginStart이 되어야 합니다.

앱이 Android 4.2 미만의 버전과 호환되도록 하려면, 즉 앱의 targetSdkVersion 또는 minSdkVersion이 16 이하인 경우 다음을 실행하세요.

'left' 및 'right' 외에 'start' 및 'end'를 추가합니다.
예를 들어 android:paddingLeft와 android:paddingStart을 모두 사용합니다.

1단계: 패딩 추가

이름과 name 텍스트 뷰의 상단 가장자리 사이에 간격을 두려면 상단 패딩을 추가합니다.

Design 탭에서 activity_main.xml 파일을 엽니다.
Component Tree 또는 디자인 편집기에서 텍스트 뷰를 클릭하여 Attributes 창을 엽니다.
속성 창 상단에서 이중 화살표 아이콘 을 클릭하여 사용 가능한 모든 속성을 확인합니다.
패딩을 검색하고 펼친 다음 상단 속성 옆에 있는 점 3개 ...를 클릭합니다. Resources 대화상자가 나타납니다.
Resources 대화상자에서 Add new resource > New dimen Value를 선택합니다.
새 측정기준 값 리소스 대화상자에서 값이 8dp인 small_padding라는 새 dimen 리소스를 만듭니다.

dp 약어는 밀도 독립을 의미합니다. 밀도가 서로 다른 화면에서 UI 요소가 동일한 크기로 표시되도록 하려면 dp를 측정 단위로 사용하세요. 텍스트 크기를 지정할 때는 항상 sp (확장 가능 픽셀)를 사용하세요.
확인을 클릭합니다.

2단계: 여백 추가

name 텍스트 뷰를 상위 요소의 가장자리에서 멀리 이동하려면 상단 여백을 추가합니다.

속성 창에서 'margin'을 검색하여 Layout_Margin을 찾습니다.
Layout_Margin을 펼치고 top 속성 옆에 있는 점 3개 ...을 클릭합니다.
layout_margin이라는 새 dimen 리소스를 만들고 16dp로 만듭니다. OK를 클릭합니다.

3단계: 글꼴 추가

name 텍스트 뷰의 모양을 개선하려면 Android Roboto 글꼴을 사용하세요. 이 글꼴은 지원 라이브러리의 일부이며 글꼴을 리소스로 추가합니다.

속성 창에서 'fontFamily'를 검색합니다.
fontFamily 필드에서 드롭다운 화살표를 클릭하고, 목록 맨 아래로 스크롤한 다음 More Fonts를 선택합니다.
Resources 대화상자에서 rob를 검색하고 Roboto를 선택합니다. 미리보기 목록에서 일반을 선택합니다.
Add font to project(프로젝트에 글꼴 추가) 라디오 버튼을 선택합니다.
확인을 클릭합니다.

이제 res 폴더에 roboto.ttf 글꼴 파일이 포함된 font 폴더가 있습니다. @font/roboto 속성이 TextView에 추가됩니다.

4단계: 스타일 추출

스타일은 뷰의 모양과 형식을 지정하는 속성의 모음입니다. 스타일에는 글꼴 색상, 글꼴 크기, 배경 색상, 패딩, 여백 및 기타 일반적인 속성이 포함될 수 있습니다.

name 텍스트 뷰의 서식을 스타일로 추출하고 앱에서 원하는 수의 뷰에 스타일을 재사용할 수 있습니다. 스타일을 재사용하면 뷰가 여러 개인 경우 앱의 디자인이 일관되게 유지됩니다. 스타일을 사용하면 이러한 공통 속성을 한곳에 유지할 수도 있습니다.

구성요소 트리에서 TextView를 마우스 오른쪽 버튼으로 클릭하고 리팩터링 > 스타일 추출을 선택합니다.
Android 스타일 추출 대화상자에서 layout_width 체크박스, layout_height 체크박스, textAlignment 체크박스를 선택 취소합니다. 이러한 속성은 일반적으로 뷰마다 다르므로 스타일의 일부가 되지 않도록 해야 합니다.
스타일 이름 필드에 NameStyle를 입력합니다.
확인을 클릭합니다.
스타일도 리소스이므로 스타일은 styles.xml 파일의 res/values/ 폴더에 저장됩니다. styles.xml를 열고 NameStyle 스타일의 생성된 코드를 살펴봅니다. 코드는 다음과 유사합니다.

<style name="NameStyle">
   <item name="android:layout_marginTop">@dimen/layout_margin</item>
   <item name="android:fontFamily">@font/roboto</item>
   <item name="android:paddingTop">@dimen/small_padding</item>
   <item name="android:textColor">@android:color/black</item>
   <item name="android:textSize">@dimen/text_size</item>
</style>

activity_main.xml을 열고 Text 탭으로 전환합니다. 생성된 스타일이 텍스트 뷰에서 style="@style/NameStyle"로 사용되고 있습니다.
앱을 실행하고 글꼴과 TextView 주변의 패딩이 변경되었는지 확인합니다.

대부분의 실제 Android 앱은 이미지를 표시하고, 텍스트를 표시하고, 텍스트 또는 클릭 이벤트 형식으로 사용자로부터 입력을 수락하는 뷰의 조합으로 구성됩니다. 이 작업에서는 이미지를 표시하는 뷰를 추가합니다.

ImageView는 이미지 리소스를 표시하는 뷰입니다. 예를 들어 ImageView는 PNG, JPG, GIF 또는 WebP 파일과 같은 Bitmap 리소스를 표시하거나 벡터 드로잉과 같은 Drawable 리소스를 표시할 수 있습니다.

샘플 아이콘, 아바타, 배경 등 Android와 함께 제공되는 이미지 리소스가 있습니다. 이러한 리소스 중 하나를 앱에 추가합니다.

디자인 탭에 레이아웃 파일을 표시한 다음 팔레트 창에서 ImageView를 구성요소 트리의 name_text 아래로 드래그합니다. 리소스 대화상자가 열립니다.
아직 선택하지 않았다면 Drawable을 선택합니다.
android를 펼치고 스크롤하여 btn_star_big_on을 선택합니다. 노란색 별 입니다.
확인을 클릭합니다.

별 이미지가 이름 아래 레이아웃에 추가됩니다. 세로 LinearLayout가 있으므로 추가하는 뷰는 세로로 정렬됩니다.
텍스트 탭으로 전환하고 생성된 ImageView 코드를 확인합니다. 너비가 match_parent로 설정되어 있으므로 뷰는 상위 요소만큼 넓어집니다. 높이가 wrap_content로 설정되어 있으므로 뷰의 높이는 콘텐츠의 높이와 같습니다. ImageView는 btn_star_big_on 드로어블을 참조합니다.

<ImageView
   android:id="@+id/imageView"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   app:srcCompat="@android:drawable/btn_star_big_on" />

ImageView의 id 이름을 바꾸려면 "@+id/imageView"을 마우스 오른쪽 버튼으로 클릭하고 Refactor > Rename을 선택합니다.
이름 바꾸기 대화상자에서 id을 @+id/star_image로 설정합니다. 리팩터링을 클릭합니다.

디자인 탭의 구성요소 트리에서 star_image 옆에 있는 경고 아이콘 를 클릭합니다. 이 경고는 contentDescription가 누락되었기 때문에 표시됩니다. contentDescription는 스크린 리더가 사용자에게 이미지를 설명하는 데 사용됩니다.
속성 창에서 contentDescription 속성 옆에 있는 점 3개 ...를 클릭합니다. 리소스 대화상자가 열립니다.
Resources 대화상자에서 Add new resource > New string Value를 선택합니다. 리소스 이름 필드를 yellow_star로 설정하고, 리소스 값 필드를 Yellow star로 설정합니다. 확인을 클릭합니다.
속성 창을 사용하여 yellow_star에 16dp (@dimen/layout_margin)의 상단 여백을 추가하여 별 이미지를 이름과 분리합니다.
앱을 실행합니다. 앱의 UI에 이름과 별 이미지가 표시됩니다.

ScrollView은 내부에 배치된 뷰 계층 구조를 스크롤할 수 있는 뷰 그룹입니다. 스크롤 뷰에는 단 하나의 다른 뷰 또는 뷰 그룹만 하위 요소로 포함할 수 있습니다. 하위 뷰는 일반적으로 LinearLayout입니다. LinearLayout 내에서 다른 뷰를 추가할 수 있습니다.

다음 이미지는 여러 다른 뷰가 포함된 LinearLayout가 포함된 ScrollView의 예를 보여줍니다.

이 스크롤 뷰에는 다른 뷰가 여러 개 포함된 선형 레이아웃이 포함되어 있습니다.

이 작업에서는 사용자가 간략한 약력을 표시하는 텍스트 뷰를 스크롤할 수 있는 ScrollView을 추가합니다. 하나의 뷰만 스크롤 가능하게 만드는 경우 이 작업에서와 같이 ScrollView에 뷰를 직접 넣으면 됩니다.

이 ScrollView에는 단일 TextView가 포함되어 있습니다.

1단계: TextView가 포함된 ScrollView 추가

Design 탭에서 activity_main.xml 파일을 엽니다.
디자인 편집기 또는 Component Tree로 스크롤 뷰를 드래그하여 레이아웃으로 드래그합니다. 별 이미지 아래에 스크롤 뷰를 배치합니다.
텍스트 탭으로 전환하여 생성된 코드를 검사합니다.

// Auto generated code
<ScrollView
   android:layout_width="match_parent"
   android:layout_height="match_parent">

   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:orientation="vertical" />
</ScrollView>

ScrollView의 높이와 너비가 상위 요소와 일치합니다. name_text 텍스트 뷰와 star_image 이미지 뷰가 콘텐츠를 표시하는 데 충분한 세로 공간을 사용하면 Android 시스템은 ScrollView를 배치하여 화면의 나머지 사용 가능한 공간을 채웁니다.

ScrollView에 id를 추가하고 bio_scroll이라고 호출합니다. ScrollView에 id를 추가하면 Android 시스템에 뷰 핸들이 제공되므로 사용자가 기기를 회전할 때 시스템에서 스크롤 위치를 유지합니다.
ScrollView 내에서 LinearLayout 코드를 삭제합니다. 앱에는 스크롤 가능한 뷰(TextView)가 하나만 있기 때문입니다.
팔레트에서 TextView를 구성요소 트리로 드래그합니다. TextView를 bio_scroll 아래에 bio_scroll의 하위 요소로 배치합니다.
새 텍스트 뷰의 id를 bio_text로 설정합니다.
이제 새 텍스트 뷰의 스타일을 추가합니다. 속성 창에서 style 속성 옆에 있는 점 3개 ...를 클릭하여 리소스 대화상자를 엽니다.
리소스 대화상자에서 NameStyle를 검색합니다. 목록에서 NameStyle를 선택하고 확인을 클릭합니다. 이제 텍스트 뷰에서 이전 작업에서 만든 NameStyle 스타일을 사용합니다.

2단계: 새 TextView에 약력 추가

strings.xml를 열고 bio이라는 문자열 리소스를 만들어 자신에 관한 긴 텍스트나 원하는 내용을 입력합니다.

다음은 샘플 약력입니다.

<string name="bio">Hi, my name is Aleks.
\n\nI love fish.
\n\nThe kind that is alive and swims around in an aquarium or river, or a lake, and definitely the ocean.
\nFun fact is that I have several aquariums and also a river.
\n\nI like eating fish, too. Raw fish. Grilled fish. Smoked fish. Poached fish - not so much.
\nAnd sometimes I even go fishing.
\nAnd even less sometimes, I actually catch something.
\n\nOnce, when I was camping in Canada, and very hungry, I even caught a large salmon with my hands.
\n\nI\'ll be happy to teach you how to make your own aquarium.
\nYou should ask someone else about fishing, though.\n\n</string>

bio_text 텍스트 뷰에서 text 속성 값을 내 약력이 포함된 bio 문자열 리소스로 설정합니다.
bio_text 텍스트를 더 쉽게 읽을 수 있도록 줄 사이에 간격을 추가합니다. lineSpacingMultiplier 속성을 사용하고 1.2 값을 지정합니다.

디자인 편집기에서 bio 텍스트가 화면의 측면 가장자리까지 이어지는 것을 확인하세요. 이 문제를 해결하려면 루트 LinearLayout에 왼쪽, 시작, 오른쪽, 끝 패딩 속성을 추가하면 됩니다. 텍스트가 하단까지 바로 이어지면 텍스트를 스크롤할 수 있다는 신호를 사용자에게 전달하므로 하단 패딩을 추가할 필요가 없습니다.
루트 LinearLayout에 시작 및 종료 패딩 16dp를 추가합니다.
Text 탭으로 전환하고, 치수 리소스를 추출하고, layout_padding로 이름을 지정합니다.

앱을 실행하고 텍스트를 스크롤합니다.

축하합니다.

처음부터 완전한 앱을 만들었습니다. 멋지네요.

Android 스튜디오 프로젝트: AboutMe

ScrollView 내에서 TextView 위에 ImageView를 추가합니다. 앱을 실행하면 이 이미지는 별과 달리 텍스트가 위로 스크롤될 때 뷰에서 스크롤됩니다.

도움말: 스크롤 뷰에는 하나의 하위 뷰만 있을 수 있습니다. 스크롤 가능한 두 뷰인 ImageView와 TextView를 LinearLayout로 래핑해야 합니다.

ViewGroup는 다른 뷰를 포함할 수 있는 뷰입니다. LinearLayout과 ScrollView은 뷰 그룹입니다.
LinearLayout은 하위 뷰를 가로 또는 세로로 정렬하는 뷰 그룹입니다.
긴 텍스트나 이미지 모음과 같이 화면에 콘텐츠를 표시해야 하는 경우 ScrollView를 사용합니다. 스크롤 뷰에는 하나의 하위 뷰만 포함할 수 있습니다. 뷰를 두 개 이상 스크롤하려면 ScrollView에 LinearLayout과 같은 ViewGroup을 추가하고 스크롤할 뷰를 해당 ViewGroup 내부에 배치합니다.
Layout Editor는 Android 스튜디오 내의 시각적 디자인 편집기입니다. Layout Editor를 사용하여 UI 요소를 레이아웃으로 드래그하여 앱의 레이아웃을 빌드할 수 있습니다.
스타일은 뷰의 모양을 지정하는 속성의 모음입니다. 예를 들어 스타일은 글꼴 색상, 글꼴 크기, 배경색, 패딩, 여백을 지정할 수 있습니다.
뷰의 모든 서식을 추출하여 스타일로 수집할 수 있습니다. 앱의 디자인을 일관되게 유지하려면 다른 뷰의 스타일을 재사용하세요.

Udacity 과정:

Kotlin을 사용하여 Android 앱 개발

Android 개발자 문서:

이 섹션에는 강사가 진행하는 과정의 일부로 이 Codelab을 진행하는 학생에게 출제할 수 있는 과제가 나열되어 있습니다. 다음 작업은 강사가 결정합니다.

필요한 경우 과제를 할당합니다.
과제 제출 방법을 학생에게 알립니다.
과제를 채점합니다.

강사는 이러한 추천을 원하는 만큼 사용할 수 있으며 적절하다고 생각되는 다른 과제를 출제해도 됩니다.

이 Codelab을 직접 진행하는 경우 이러한 과제를 자유롭게 사용하여 배운 내용을 테스트해 보세요.

질문에 답하세요

질문 1

다음 중 뷰 그룹은 무엇인가요?

▢ EditText

▢ LinearLayout

▢ TextView

▢ Button

질문 2

다음 중 잘못된 뷰 계층 구조는 무엇인가요?

▢ LinearLayout > TextView, TextView, ImageView

▢ ScrollView > LinearLayout > TextView, Button, Button, ScrollView > TextView

▢ TextView > TextView, ImageView, ScrollView

질문 3

스타일은 styles.xml에 정의된 리소스입니다. 스타일을 사용하면 색상, 글꼴, 텍스트 크기 등 여러 가지 뷰 특성을 정의할 수 있습니다. 참 또는 거짓 중 선택하세요.

▢ 참

▢ 거짓

질문 4

ScrollView은 여러 개의 뷰 또는 뷰 그룹을 하위 요소로 포함할 수 있는 뷰 그룹입니다. 참 또는 거짓 중 선택하세요.

▢ 참