Time to sync up! Tune in for Google I/O on May 14, 2024. Register now.

이 페이지는 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 스튜디오에 프로젝트가 이미 열려 있는 경우 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를 클릭합니다.

속성	값
애플리케이션 이름	내 정보
회사 이름 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 뷰 그룹을 사용하도록 루트 레이아웃을 변경합니다.

Project > Android 창을 선택합니다. app/res/layout 폴더에서 activity_main.xml 파일을 엽니다.
Text 탭을 선택하고 루트 뷰 그룹을 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 탭을 클릭합니다. 아래 스크린샷은 Layout Editor의 일부를 보여줍니다.

Design Editor: 디자인 뷰, 청사진 뷰 또는 둘 다에 화면 레이아웃을 시각적으로 표시합니다. 디자인 편집기는 Layout Editor의 주된 부분입니다.

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

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

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

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

Component Tree: 레이아웃 계층 구조를 뷰 트리로 표시합니다. Component Tree는 디자인 편집기에서 다른 방법으로 선택할 수 없는 작거나 숨겨진 뷰 또는 겹치는 뷰가 있을 때 유용합니다.

1단계: TextView 추가

res/layout/activity_main.xml 파일이 열려 있지 않으면 파일을 엽니다.
Text 탭 로 전환하고 코드를 검사합니다. 코드의 루트 뷰 그룹으로는 LinearLayout가 있습니다. (뷰 그룹은 다른 뷰가 포함된 뷰입니다.)

LinearLayout에는 기본적으로 layout_height인 필수 속성 layout_height, layout_width, orientation이 있습니다.
Design 탭으로 전환하여 Layout Editor를 엽니다.

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

속성	값
ID	`name_text`
문자	이름으로 설정합니다. text 필드 중 하나는 `tools` 네임스페이스임을 나타내는 렌치 아이콘을 표시합니다. 렌치가 없는 항목은 `android` 네임스페이스용이며, 원하는 text 필드입니다.
textAppearance > textSize	`20sp`
textAppearance > textColor	`@android:color/black`
textAppearance > textAlignment	가운데

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

Component Tree에서 TextView, 옆에 경고 아이콘 이 표시됩니다. 경고 텍스트를 보려면 아래 스크린샷에 표시된 것처럼 아이콘을 클릭하거나 가리키세요.

경고를 해결하려면 문자열 리소스를 만듭니다.

Attributes 창에서 이름에 설정한 text 속성 옆의 점 3개를 클릭합니다. 리소스 편집기가 열립니다.
Resources 대화상자에서 Add new resource > New string Value를 선택합니다.
New String Value Resource 대화상자에서 Resource name 필드를 name로 설정합니다. Resource value 필드를 자체 이름으로 설정합니다. 확인을 클릭합니다. 경고가 사라진 것을 알 수 있습니다.
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 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은 뷰의 'starting' 가장자리에 패딩을 지정합니다.
android:paddingEnd는 뷰의 가장자리에 대한 패딩을 지정합니다.
android:paddingLeft는 왼쪽 가장자리의 패딩을 지정합니다.
android:paddingRight는 오른쪽 가장자리의 패딩을 지정합니다.

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

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

오른쪽/왼쪽 vs. 시작/종료

"Right" 및 "left"는 앱이 왼쪽에서 오른쪽 (LTR) 흐름을 사용하는지 또는 오른쪽에서 왼쪽 (RTL) 흐름을 사용하는지와 관계없이 항상 화면의 오른쪽과 왼쪽을 나타냅니다. "Start" 및\"quot;end"는 항상 흐름의 시작과 끝을 참조합니다.

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

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

"left" 및 \"quot;오른쪽
예를 들어 RTL 언어를 지원하려면 android:layout_marginLeft가 android:layout_marginStart이 되어야 합니다.

앱이 Android 4.2보다 낮은 버전에서 작동하도록 하려면(즉, 앱의 targetSdkVersion 또는 minSdkVersion이 16 이하인 경우) 다음 단계를 따르세요.

"왼쪽" 및 '오른쪽'.
예를 들어 android:paddingLeft과 android:paddingStart을 모두 사용합니다.

1단계: 패딩 추가

이름과 name 텍스트 뷰의 상단 가장자리 사이에 공백을 넣으려면 상단 패딩을 추가하세요.

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

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

2단계: 여백 추가

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

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

3단계: 글꼴 추가

name 텍스트 뷰가 더 잘 표시되도록 하려면 Android Roboto 글꼴을 사용하세요. 이 글꼴은 지원 라이브러리의 일부이며 글꼴을 리소스로 추가합니다.

Attributes 창에서 "fontFamily"를 검색합니다.
fontFamily 입력란에서 드롭다운 화살표를 클릭하고, 목록 하단으로 스크롤한 다음 More Fonts를 선택합니다.
Resources 대화상자에서 rob를 검색하고 Roboto를 선택합니다. 미리보기 목록에서 Regular를 선택합니다.
프로젝트에 글꼴 추가 라디오 버튼을 선택합니다.
확인을 클릭합니다.

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

4단계: 스타일 추출

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

name 텍스트 뷰의 형식을 스타일로 추출하고 앱의 여러 뷰에 스타일을 재사용할 수 있습니다. 스타일을 재사용하면 뷰가 여러 개 있을 때 앱에 일관된 디자인을 적용할 수 있습니다. 스타일을 사용하면 이러한 공통 속성을 한곳에 유지할 수 있습니다.

Component Tree에서 TextView를 마우스 오른쪽 버튼으로 클릭하고 Refactor > Extract Style을 선택합니다.
Extract Android Style 대화상자에서 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와 함께 제공되는 이미지 리소스가 있습니다. 이러한 리소스 중 하나를 앱에 추가합니다.

Design 탭에서 레이아웃 파일을 표시한 다음 Palette 창에서 ImageView를 Component Tree의 name_text 아래로 드래그합니다. Resources 대화상자가 열립니다.
아직 선택하지 않았다면 Drawable을 선택합니다.
android를 펼쳐서 스크롤한 후 btn_star_big_on을 선택합니다. 노란색 별표 입니다.
확인을 클릭합니다.

이름 아래의 레이아웃에 별표 이미지가 추가됩니다. 세로가 LinearLayout이므로 추가한 뷰가 세로로 정렬됩니다.
Text 탭으로 전환하고 생성된 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로 설정합니다. 리팩터링을 클릭합니다.

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

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

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

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

이 작업에서는 사용자가 간단한 약력을 표시하는 텍스트 뷰를 스크롤할 수 있는 ScrollView를 추가합니다. 한 개의 뷰만 스크롤 가능하게 만드는 경우에는 이 작업에서 하는 것처럼 뷰를 ScrollView에 직접 배치할 수 있습니다.

이 ScrollView에는 단일 TextView가 포함됩니다.

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

Design 탭에서 activity_main.xml 파일을 엽니다.
스크롤 보기를 디자인 편집기 또는 구성요소 트리로 드래그하여 레이아웃으로 드래그합니다. 스크롤 보기를 별표 이미지 아래에 넣습니다.
Text 탭으로 전환하여 생성된 코드를 검사합니다.

// 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를 배치하여 화면의 나머지 가용 공간을 채웁니다.

id를 ScrollView에 추가하고 이름을 bio_scroll로 지정합니다. id를 ScrollView에 추가하면 Android 시스템이 뷰의 핸들을 제공하여 사용자가 기기를 회전할 때 시스템에서 스크롤 위치를 유지할 수 있습니다.
ScrollView 내에서 LinearLayout 코드를 삭제합니다. 앱에는 스크롤 가능한 뷰 1개(TextView)만 있기 때문입니다.
TextView를 Palette에서 Component Tree로 드래그합니다. TextView를 bio_scroll 아래에 하위 요소 bio_scroll의 요소로 배치합니다.
새 텍스트 뷰의 id를 bio_text로 설정합니다.
다음으로, 새 텍스트 뷰의 스타일을 추가합니다. Attributes 창에서 style 속성 옆의 점 3개 ...를 클릭하여 Resources 대화상자를 엽니다.
Resources 대화상자에서 NameStyle를 검색합니다. 목록에서 NameStyle를 선택하고 OK를 클릭합니다. 이제 텍스트 뷰는 이전 작업에서 만든 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에 왼쪽, 시작, 오른쪽, 종료 패딩 속성을 추가하면 됩니다. 하단 하단까지 곧바로 실행되는 텍스트는 사용자에게 스크롤 가능한 텍스트를 표시하기 때문에 하단 패딩을 추가할 필요가 없습니다.
16dp의 시작 및 끝 패딩을 루트 LinearLayout에 추가합니다.
텍스트 탭으로 전환하여 측정기준 리소스를 추출한 다음 이름을 layout_padding로 지정합니다.

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

수고하셨습니다.

앱을 처음부터 끝까지 완료하셨군요. 훌륭합니다.

Android 스튜디오 프로젝트: AboutMe

ScrollView 내에서 TextView 위에 ImageView를 추가합니다. 앱을 실행하면 별표와 달리 이 이미지는 텍스트가 위로 스크롤되면 스크롤되어 사라집니다.

힌트: 스크롤 뷰는 하위 뷰 하나만 보유할 수 있습니다. 스크롤 가능한 두 뷰 ImageView와 TextView를 LinearLayout로 래핑해야 합니다.

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

Udacity 과정:

Kotlin을 사용하여 Android 앱 개발

Android 개발자 문서:

이 섹션에는 강사가 진행하는 과정의 일부로 이 Codelab을 통해 작업하는 학생들의 숙제 과제가 나와 있습니다. 강사는 다음을 처리합니다.

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

강사는 이러한 추천을 원하는 만큼 사용할 수 있으며 다른 적절한 숙제를 할당해도 좋습니다.

이 Codelab을 직접 학습하고 있다면 언제든지 숙제를 통해 지식을 확인해 보세요.

답변

질문 1

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

▢ EditText

▢ LinearLayout

▢ TextView

▢ Button

질문 2

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

▢ LinearLayout 및 TextView; TextView, ImageView

▢ ScrollView 및g; LinearLayout > TextView, Button, Button, ScrollView > TextView

▢ TextView > TextView, ImageView, ScrollView

질문 3

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

▢ 참

▢ 거짓

질문 4

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

▢ 참

▢ 거짓

질문 5

앱에 이미지를 표시하는 데 사용할 수 있는 UI 요소는 무엇인가요?

▢ TextView

▢ ImageView

▢ Button

▢ ScrollView

다음 강의 시작: 2.2: 사용자 상호작용 추가

이 과정의 다른 Codelab 링크는 Android Kotlin 기초 Codelab 방문 페이지를 참고하세요.