Android Kotlin 기초 02.2: 사용자 상호작용 추가

이 Codelab은 Android Kotlin 기초 교육 과정의 일부입니다. Codelab을 순서대로 진행한다면 이 과정을 통해 최대한의 가치를 얻을 수 있을 것입니다. 모든 과정 Codelab은 Android Kotlin 기초 Codelab 방문 페이지에 나열되어 있습니다.

이 Codelab은 Android Kotlin 기초 교육 과정의 일부입니다. Codelab을 순서대로 진행한다면 이 과정을 통해 최대한의 가치를 얻을 수 있을 것입니다.

이 시리즈의 Codelab은 다음과 같습니다.

• 2.1 Layout Editor를 사용한 선형 레이아웃
• 2.2 사용자 상호작용 추가
• 2.3 Layout Editor를 사용한 제약 조건 레이아웃
• 2.4 데이터 결합 기본사항

기본 요건

• Kotlin으로 기본 Android 앱을 만드는 방법
• 에뮬레이터 또는 기기에서 Android 앱을 실행합니다.
• Android 스튜디오의 Layout Editor를 사용하여 선형 레이아웃 만들기
• 클릭 핸들러로 LinearLayout, TextView, ScrollView 버튼을 사용하는 간단한 앱을 만듭니다.

학습할 내용

• EditText 뷰를 사용하여 사용자 입력을 가져오는 방법
• EditText 뷰의 텍스트를 사용하여 텍스트를 TextView 뷰로 설정하는 방법
• View 및 ViewGroup의 사용 방법
• View의 공개 상태를 변경하는 방법

실습할 내용

• 이전 Codelab에서 가져온 AboutMe 앱에 상호작용을 추가합니다.
• 사용자가 텍스트를 입력할 수 있도록 EditText를 추가합니다.
• Button를 추가하고 클릭 핸들러를 구현합니다.

이 Codelab에서는 AboutMe 앱을 확장하여 사용자 상호작용을 추가합니다. 닉네임 필드, 완료 버튼, 텍스트 뷰를 추가하여 닉네임을 표시합니다. 사용자가 닉네임을 입력하고 완료 버튼을 탭하면 텍스트 보기가 업데이트되어 입력된 닉네임이 표시됩니다. 사용자는 텍스트 뷰를 탭하여 닉네임을 다시 업데이트할 수 있습니다.

이 작업에서는 사용자가 닉네임을 입력할 수 있도록 EditText 입력란을 추가합니다.

1단계: 시작하기

1. 이전 Codelab의 AboutMe 앱이 없다면 시작 코드 AboutMeInteractive-Starter를 다운로드하세요. 이전 Codelab에서 완료한 것과 동일한 코드입니다.
2. Android 스튜디오에서 AboutMeInteractive-Starter 프로젝트를 엽니다.
3. 앱을 실행합니다. 스크롤 뷰에서 이름 텍스트 뷰, 별표 이미지, 긴 텍스트 세그먼트가 표시됩니다.
   
   
   
   사용자가 텍스트를 변경할 수 없음을 확인합니다.

사용자가 앱을 입력할 수 있는 앱(예: 사용자가 텍스트를 입력할 수 있는 경우)이 더 흥미롭습니다. 텍스트 입력을 수락할 수 있도록 Android는 텍스트 수정이라는 사용자 인터페이스 (UI) 위젯을 제공합니다. TextView의 서브클래스인 EditText를 사용하여 수정 텍스트를 정의합니다. 수정 텍스트를 사용하면 아래 스크린샷과 같이 사용자가 텍스트 입력을 입력하고 수정할 수 있습니다.

2단계: EditText 추가

1. Android 스튜디오의 Design 탭에서 activity_main.xml 레이아웃 파일을 엽니다.
2. Palette 창에서 Text를 클릭합니다.
   
   
   
   Palette 창의 텍스트 요소 목록 상단에 TextView인 Ab TextView가 표시됩니다. Ab TextView 아래에는 여러 개의 EditText 뷰가 있습니다.
   
   Palette 창에서 TextView 아이콘에 밑줄이 없는 Ab 문자가 어떻게 표시되는지 확인합니다. 그러나 EditText 아이콘에는 밑줄이 표시된 Ab가 표시됩니다. 밑줄은 뷰를 수정할 수 있음을 나타냅니다.
   
   각 EditText 뷰에 관해 Android는 다른 속성을 설정하며 시스템에서 적절한 소프트 입력 방법 (예: 터치 키보드)을 표시합니다.
3. PlainText 수정 텍스트를 Component Tree로 드래그하여 name_text 아래에 star_image 위에 배치합니다.
   
   
   
4. Attributes 창을 사용하여 EditText 뷰에서 다음 속성을 설정합니다.

속성	값
id	nickname_edit
layout_width	match_parent(기본값)
layout_height	wrap_content(기본값)

5. 앱을 실행합니다. 별표 이미지 위에 기본 텍스트 'Name"'가 있는 수정 텍스트가 표시됩니다.
   
   
   

이 작업에서는 힌트를 추가하고 텍스트 정렬을 변경하고 스타일을 NameStyle로 변경하고 입력 유형을 설정하여 EditText 뷰의 스타일을 지정합니다.

1단계: 힌트 텍스트 추가

1. string.xml 파일의 힌트에 관한 새 문자열 리소스를 추가합니다.

<string name="what_is_your_nickname">What is your Nickname?</string>

도움말: 사용자가 각 수정 가능한 입력란에 무엇을 입력할지 알 수 있도록 각 EditText 뷰에 힌트를 표시하는 것이 좋습니다.

2. Attributes 창을 사용하여 다음 속성을 EditText 뷰로 설정합니다.

속성	값
style	NameStyle
textAlignment	(가운데)
hint	@string/what_is_your_nickname

3. Attributes 창의 text 속성에서 Name 값을 삭제합니다. 힌트가 표시되도록 text 속성 값을 비워 두어야 합니다.

2단계: inputType 속성 설정

inputType 속성은 사용자가 EditText 뷰에 입력할 수 있는 입력 유형을 지정합니다. Android 시스템은 입력된 입력 유형에 따라 적절한 입력 필드와 터치 키보드를 표시합니다.

가능한 모든 입력 유형을 보려면 Attributes 창에서 inputType 필드를 클릭하거나 필드 옆에 있는 점 3개 ...를 클릭합니다. 현재 활성화된 입력 유형이 선택된 상태에서 사용 가능한 모든 입력 유형이 표시된 목록이 열립니다. 입력 유형을 두 개 이상 선택할 수 있습니다.

예를 들어 비밀번호에는 textPassword 값을 사용합니다. 텍스트 필드는 사용자의 입력을 숨깁니다.

전화번호의 경우 phone 값을 사용합니다. 숫자 키패드가 표시되고 사용자는 숫자만 입력할 수 있습니다.

닉네임 필드의 입력 유형을 설정합니다.

1. nickname_edit 편집 텍스트의 inputType 속성을 textPersonName로 설정합니다.
2. Component Tree 창에서 autoFillHints 경고를 확인합니다. 이 경고는 이 앱에 적용되지 않으며 이 Codelab에서 다루지 않으므로 무시해도 됩니다. 자동 완성에 관해 자세히 알아보려면 앱 자동 완성 최적화를 참조하세요.
   
3. Attributes 창에서 다음 EditText 뷰 속성 값을 확인합니다.

속성	값
id	nickname_edit
layout_width	match_parent(기본값)
layout_height	wrap_content(기본값)
style	@style/NameStyle
inputType	textPersonName
hint	"@string/what_is_your_nickname"
text	(비어 있음)

Button은 사용자가 탭하여 작업을 실행할 수 있는 UI 요소입니다. 버튼은 텍스트, 아이콘 또는 텍스트와 아이콘으로 구성됩니다.

이 작업에서는 사용자가 닉네임을 입력한 후 탭하는 완료 버튼을 추가합니다. 버튼은 EditText 뷰를 닉네임이 표시된 TextView 뷰로 전환합니다. 닉네임을 업데이트하려면 사용자가 TextView 뷰를 탭하면 됩니다.

1단계: 완료 버튼 추가

1. Palette 창에서 Component Tree로 버튼을 드래그합니다. 버튼을 nickname_edit 수정 텍스트 아래에 배치합니다.
   
   
2. done이라는 새 문자열 리소스를 만듭니다. 문자열에 Done 값을 지정합니다.

<string name="done">Done</string>

3. Attributes 창을 사용하여 새로 추가된 Button 뷰에 다음 속성을 설정합니다.

속성	값
id	done_button
text	@string/done
layout_gravity	center_horizontal
layout_width	wrap_content

layout_gravity 속성은 상위 요소 LinearLayout의 뷰를 중앙에 배치합니다.

4. 스타일을 Android에서 제공하는 사전 정의된 스타일 중 하나인 Widget.AppCompat.Button.Colored으로 변경합니다. 드롭다운 또는 Resources 창에서 스타일을 선택할 수 있습니다.
   
   
   
   이 스타일을 사용하면 버튼 색상이 강조 색상인 colorAccent로 변경됩니다. 강조 색상은 res/values/colors.xml 파일에서 정의됩니다.
   
   
   

colors.xml 파일에 앱의 기본 색상이 포함되어 있습니다. 앱의 요구사항에 따라 새 색상 리소스를 추가하거나 프로젝트의 기존 색상 리소스를 변경할 수 있습니다.

샘플 colors.xml 파일:

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <color name="colorPrimary">#008577</color>
   <color name="colorPrimaryDark">#00574B</color>
   <color name="colorAccent">#D81B60</color>
</resources>

2단계: 완료 버튼 스타일 지정

1. Attributes 창에서 Layout_Margin > Top을 선택하여 상단 여백을 추가합니다. 상단 여백을 dimens.xml 파일에 정의된 layout_margin로 설정합니다.
   
   
   
2. 드롭다운 메뉴에서 fontFamily 속성을 roboto로 설정합니다.
   
   
   
3. Text 탭으로 전환하여 새로 추가된 버튼의 생성된 XML 코드를 확인합니다.
   

<Button
   android:id="@+id/done_button"
   style="@style/Widget.AppCompat.Button.Colored"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"
   android:layout_marginTop="@dimen/layout_margin"
   android:fontFamily="@font/roboto"
   android:text="@string/done" />

3단계: 색상 리소스 변경

이 단계에서는 활동의 앱 바에 맞게 버튼의 강조 색상을 변경합니다.

1. res/values/colors.xml를 열고 colorAccent 값을 #76bf5e로 변경합니다.
   

<color name="colorAccent">#76bf5e</color>

파일 편집기의 왼쪽 여백에서 16진수 코드 색상에 해당하는 색상을 볼 수 있습니다.

디자인 편집기에서 버튼 색상이 변경된 것을 확인할 수 있습니다.

2. 앱을 실행합니다. 편집 텍스트 아래에 스타일이 지정된 완료 버튼이 표시됩니다.
   
   
   

사용자가 닉네임을 입력하고 완료 버튼을 탭하면 닉네임이 TextView 뷰에 표시됩니다. 이 작업에서는 배경색과 함께 텍스트 뷰를 추가합니다. 텍스트 위의 star_image 위에 사용자 닉네임이 표시됩니다.

1단계: 닉네임에 대한 TextView 추가

1. Palette 창에서 Component Tree로 텍스트 뷰를 드래그합니다. 텍스트 뷰는 done_button 아래, star_image 위에 배치하세요.
   
   

2. Attributes 창을 사용하여 새 TextView 뷰에 다음 속성을 설정합니다.

속성	값
id	nickname_text
style	NameStyle
textAlignment	(가운데)

2단계: TextView의 공개 상태 변경

visibility 속성을 사용하여 앱에서 뷰를 표시하거나 숨길 수 있습니다. 이 속성은 다음 세 가지 값 중 하나를 사용합니다.

• visible: 뷰가 표시됩니다.
• Invisible: 뷰를 숨기지만 뷰는 여전히 레이아웃의 공간을 차지합니다.
• gone: 뷰를 숨기고 뷰가 레이아웃의 공간을 차지하지 않습니다.

1. Attributes 창에서 nickname_text 텍스트 뷰의 visibility를 gone로 설정합니다. 먼저 앱에서 이 텍스트 뷰가 표시되지 않도록 하기 때문입니다.
   
   
   
   Attributes 창에서 속성을 변경하면 nickname_text 뷰가 디자인 편집기에서 사라집니다. 레이아웃 미리보기에서는 뷰가 숨겨집니다.
2. nickname_text 뷰의 text 속성 값을 빈 문자열로 변경합니다.

이 TextView에 대해 생성된 XML 코드는 다음과 유사합니다.

<TextView
   android:id="@+id/nickname_text"
   style="@style/NameStyle"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:textAlignment="center"
   android:visibility="gone"
   android:text="" />

레이아웃 미리보기는 다음과 같이 표시됩니다.

Button 객체 (또는 모든 뷰)의 클릭 핸들러는 버튼 (뷰)을 탭할 때 실행될 작업을 지정합니다. 클릭 이벤트를 처리하는 함수는 버튼을 사용하여 레이아웃을 호스팅하는 Activity에 구현되어야 합니다.

클릭 리스너는 일반적으로 이 형식을 사용합니다. 여기서 전달된 뷰는 클릭 또는 탭을 수신한 뷰입니다.

private fun clickHandlerFunction(viewThatIsClicked: View) {
// Add code to perform the button click event
}

클릭 리스너 함수를 버튼 클릭 이벤트에 연결하는 방법에는 두 가지가 있습니다.

• XML 레이아웃에서 <Button> 요소에 android:onClick 속성을 추가할 수 있습니다. 예를 들면 다음과 같습니다.

<Button
   android:id="@+id/done_button"
   android:text="@string/done"
   ...
   android:onClick="clickHandlerFunction"/>

또는

• 이 작업은 런타임 시 Activity의 onCreate()에서 setOnClickListener를 호출하여 프로그래매틱 방식으로 실행할 수 있습니다. 예를 들면 다음과 같습니다.

myButton.setOnClickListener {
   clickHanderFunction(it)
}

이 작업에서는 프로그래매틱 방식으로 done_button의 클릭 리스너를 추가합니다. 클릭 활동에 해당하는 활동(MainActivity.kt)을 추가합니다.

addNickname라는 클릭 리스너 함수는 다음을 실행합니다.

• nickname_edit 수정 텍스트에서 텍스트를 가져옵니다.
• nickname_text 텍스트 뷰에서 텍스트를 설정합니다.
• 수정 텍스트와 버튼을 숨깁니다.
• 닉네임 TextView을 표시합니다.

1단계: 클릭 리스너 추가하기

1. Android 스튜디오의 java 폴더에서 MainActivity.kt 파일을 엽니다.
2. MainActivity.kt의 MainActivity 클래스 내부에 addNickname라는 함수를 추가합니다. View 유형의 view라는 입력 매개변수를 포함합니다. view 매개변수는 함수가 호출되는 View입니다. 이 경우 view는 DONE 버튼의 인스턴스입니다.

private fun addNickname(view: View) {
}

3. addNickname 함수 내에서 findViewById()를 사용하여 nickname_edit 수정 텍스트 및 nickname_text 텍스트 뷰를 참조합니다.

val editText = findViewById<EditText>(R.id.nickname_edit)
val nicknameTextView = findViewById<TextView>(R.id.nickname_text)

4. nicknameTextView 텍스트 뷰의 텍스트를 사용자가 editText에 입력한 텍스트로 설정하여 text 속성에서 가져옵니다.

nicknameTextView.text = editText.text

5. editText의 visibility 속성을 View.GONE로 설정하여 닉네임 EditText 뷰를 숨깁니다.

이전 작업에서는 Layout Editor를 사용하여 visibility 속성을 변경했습니다. 여기서는 프로그래매틱 방식으로 동일한 작업을 실행합니다.

editText.visibility = View.GONE

6. visibility 속성을 View.GONE로 설정하여 완료 버튼을 숨깁니다. 함수의 입력 매개변수인 view의 참조가 이미 있습니다.

view.visibility = View.GONE

7. addNickname 함수 끝에서 visibility 속성을 View.VISIBLE로 설정하여 닉네임 TextView 뷰를 표시합니다.

nicknameTextView.visibility = View.VISIBLE

2단계: 클릭 리스너를 DONE 버튼에 연결하기

이제 DONE 버튼을 탭할 때 실행할 작업을 정의하는 함수가 있으므로 함수를 Button 뷰에 연결해야 합니다.

1. MainActivity.kt의 onCreate() 함수 끝에서 DONE Button 뷰 참조를 가져옵니다. findViewById() 함수를 사용하고 setOnClickListener를 호출합니다. 클릭 리스너 함수 addNickname()에 대한 참조를 전달합니다.

findViewById<Button>(R.id.done_button).setOnClickListener {
            addNickname(it)
        }

위 코드에서 it는 인수로 전달되는 뷰인 done_button를 참조합니다.

2. 앱을 실행하고 닉네임을 입력한 다음 완료 버튼을 탭합니다. 텍스트 수정 및 버튼이 닉네임 텍스트 뷰로 대체된 방식을 확인하세요.

사용자가 완료 버튼을 탭하더라도 키보드는 계속 표시됩니다. 이 동작은 기본값입니다.

3단계: 키보드 숨기기

이 단계에서는 사용자가 완료 버튼을 탭한 후 키보드를 숨기도록 코드를 추가합니다.

1. MainActivity.kt에서 addNickname() 함수 끝에 다음 코드를 추가합니다. 이 코드의 작동 방식에 대한 자세한 내용은 hideSoftInputFromWindow 문서를 참조하세요.

// Hide the keyboard.
val inputMethodManager = getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
inputMethodManager.hideSoftInputFromWindow(view.windowToken, 0)

2. 앱을 다시 실행합니다. 완료를 탭하면 키보드가 숨겨집니다.

사용자가 완료 버튼을 탭한 후에는 닉네임을 변경할 수 없습니다. 다음 작업에서는 앱의 닉네임을 눈에 띄게 만들고 사용자가 닉네임을 업데이트할 수 있는 기능을 추가합니다.

이 작업에서는 닉네임 텍스트 뷰에 클릭 리스너를 추가합니다. 클릭 리스너는 닉네임 텍스트 뷰를 숨기고 수정 텍스트를 보여주며 완료 버튼을 표시합니다.

1단계: 클릭 리스너 추가하기

1. MainActivity에서 닉네임 텍스트 뷰에 updateNickname(view: View)라는 클릭 리스너 함수를 추가합니다.

private fun updateNickname (view: View) {
}

2. updateNickname 함수 내에서 nickname_edit 수정 텍스트 참조를 가져오고 DONE 버튼 참조를 가져옵니다. 이렇게 하려면 findViewById() 메서드를 사용합니다.

val editText = findViewById<EditText>(R.id.nickname_edit)
val doneButton = findViewById<Button>(R.id.done_button)

3. updateNickname 함수 끝에 코드를 추가하여 편집 텍스트를 표시하고 DONE 버튼을 표시하고 텍스트 뷰를 숨깁니다.

editText.visibility = View.VISIBLE
doneButton.visibility = View.VISIBLE
view.visibility = View.GONE

4. MainActivity.kt의 onCreate() 함수 끝에서 nickname_text 텍스트 뷰에서 setOnClickListener를 호출합니다. 클릭 리스너 함수 참조(updateNickname())를 전달합니다.

findViewById<TextView>(R.id.nickname_text).setOnClickListener {
   updateNickname(it)
}

5. 앱을 실행합니다. 닉네임을 입력하고 완료 버튼을 탭한 다음 닉네임 TextView 뷰를 탭합니다. 닉네임 보기가 사라지고 수정 텍스트와 완료 버튼이 표시됩니다.
   
   
   

기본적으로 EditText 뷰에는 포커스가 없으며 키보드가 표시되지 않습니다. 사용자가 닉네임 텍스트 뷰를 클릭할 수 있는지 알아보기 어렵습니다. 다음 작업에서는 닉네임 텍스트 뷰에 포커스와 스타일을 추가합니다.

2단계: 포커스를 EditText 뷰로 설정하고 키보드 표시

1. updateNickname 함수 끝에서 포커스를 EditText 뷰로 설정합니다. requestFocus() 메서드를 사용합니다.

// Set the focus to the edit text.
editText.requestFocus()

2. updateNickname 함수 끝에 코드를 추가하여 키보드를 표시합니다.

// Show the keyboard.
val imm = getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
imm.showSoftInput(editText, 0)

3단계: 닉네임 TextView 뷰에 배경 색상 추가하기

1. nickname_text 텍스트 뷰의 배경 색상을 @color/colorAccent으로 설정하고 @dimen/small_padding의 하단 패딩을 추가합니다. 이러한 변경은 닉네임 텍스트 뷰를 클릭할 수 있음을 사용자에게 알리는 역할을 합니다.

android:background="@color/colorAccent"
android:paddingBottom="@dimen/small_padding"

2. 최종 앱을 실행합니다. 수정 텍스트에 포커스가 있고 편집 텍스트에 닉네임이 표시되며 닉네임 텍스트 뷰의 스타일이 지정됩니다.

이제 양방향 AboutMe 앱을 친구에게 보여주세요.

Android 스튜디오 프로젝트: AboutMeInteractive

• Android 스튜디오의 Layout Editor 도구는 시각적 디자인 편집기입니다. Layout Editor를 사용하면 UI 요소를 레이아웃으로 드래그하여 앱 레이아웃을 빌드할 수 있습니다.
• EditText은 사용자가 텍스트를 입력하고 수정할 수 있는 UI 요소입니다.
• Button은 사용자가 탭하여 작업을 실행할 수 있는 UI 요소입니다. 버튼은 텍스트, 아이콘 또는 텍스트와 아이콘으로 구성됩니다.

클릭 리스너

• 클릭 리스너를 추가하여 View이 탭되도록 응답하도록 할 수 있습니다.
• 클릭 리스너를 정의하는 함수는 클릭되는 View을 수신합니다.

다음 두 가지 방법 중 하나로 클릭 리스너 함수를 View에 연결할 수 있습니다.

• XML 레이아웃에서 <View> 요소에 android:onClick 속성을 추가합니다.
• 프로그래매틱 방식으로 상응하는 Activity에서 setOnClickListener(View.OnClickListener) 함수를 사용합니다.

Udacity 과정:

• Kotlin을 사용하여 Android 앱 개발

Android 개발자 문서:

• Layout Editor로 UI 빌드
• Button
• EditText
• 입력 유형
• 키보드 입력 처리
• 스타일 및 테마

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

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

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

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

답변

질문 1

EditText는 무엇의 서브클래스인가요?

• View
• LinearLayout
• TextView
• Button

질문 2

다음 중 뷰에 설정되는 경우 뷰가 숨겨지고 레이아웃의 공간을 차지하지 않도록 하는 visibility 속성 값은 무엇인가요?

• visible
• Invisible
• gone
• hide

질문 3

EditText 보기의 경우 힌트가 입력란을 복잡하게 만들 수 있으므로 힌트를 제공하는 것은 좋지 않습니다. 참 또는 거짓 중 선택하세요.

• 참
• 거짓

질문 4

다음 중 Button 뷰에 관한 올바른 설명은 무엇인가요?

• Button 뷰는 뷰 그룹입니다.
• Button 뷰는 화면당 3개만 보유할 수 있습니다.
• Button 뷰는 클릭 가능하며, 뷰를 클릭하면 연결된 클릭 리스너가 작업을 실행합니다.
• Button은 ImageView의 확장 요소입니다.

다음 과정 시작: 2.3: Layout Editor를 사용한 제약 조건 레이아웃

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