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

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

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

기본 요건

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

학습할 내용

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

실습할 내용

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

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

AboutMe 앱

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

1단계: 시작하기

이전 Codelab의 AboutMe 앱이 아직 없는 경우 시작 코드인 AboutMeInteractive-Starter를 다운로드합니다. 이 코드는 이전 Codelab에서 완료한 코드와 동일합니다.
Android 스튜디오에서 AboutMeInteractive-Starter 프로젝트를 엽니다.
앱을 실행합니다. 스크롤 뷰에 이름 텍스트 뷰, 별 이미지, 긴 텍스트 세그먼트가 표시됩니다.

사용자가 텍스트를 변경할 수 없습니다.

사용자가 텍스트를 입력할 수 있는 등 앱과 상호작용할 수 있는 경우 앱이 더 흥미로워집니다. 텍스트 입력을 허용하기 위해 Android에서는 수정 텍스트라는 사용자 인터페이스 (UI) 위젯을 제공합니다. TextView의 서브클래스인 EditText를 사용하여 수정 텍스트를 정의합니다. 수정 가능한 텍스트를 사용하면 아래 스크린샷과 같이 사용자가 텍스트 입력을 입력하고 수정할 수 있습니다.

2단계: EditText 추가

Android 스튜디오의 Design 탭에서 activity_main.xml 레이아웃 파일을 엽니다.
Palette 창에서 Text를 클릭합니다.

Ab TextView(TextView)가 Palette 창의 텍스트 요소 목록 상단에 표시됩니다. Ab TextView 아래에는 여러 EditText 뷰가 있습니다.

팔레트 창에서 TextView 아이콘에 밑줄이 없는 Ab 글자가 표시되는 것을 확인하세요. 하지만 EditText 아이콘에는 Ab 에 밑줄이 표시됩니다. 밑줄은 뷰를 수정할 수 있음을 나타냅니다.

각 EditText 뷰에 대해 Android는 서로 다른 속성을 설정하고 시스템은 적절한 소프트 입력 방법 (예: 터치 키보드)을 표시합니다.
PlainText 수정 텍스트를 Component Tree로 드래그하여 name_text 아래, star_image 위에 배치합니다.
속성 창을 사용하여 EditText 뷰에 다음 속성을 설정합니다.

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

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

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

1단계: 힌트 텍스트 추가

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

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

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

속성	값
`style`	`NameStyle`
`textAlignment`	(중앙)
`hint`	`@string/what_is_your_nickname`

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

2단계: inputType 속성 설정

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

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

예를 들어 비밀번호의 경우 textPassword 값을 사용합니다. 텍스트 필드에서 사용자의 입력이 숨겨집니다.

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

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

nickname_edit 수정 텍스트의 inputType 속성을 textPersonName로 설정합니다.
Component Tree 창에 autoFillHints 경고가 표시됩니다. 이 경고는 이 앱에 적용되지 않으며 이 Codelab의 범위를 벗어나므로 무시해도 됩니다. (자동 완성에 대해 자세히 알아보려면 자동 완성을 위한 앱 최적화를 참고하세요.)
속성 창에서 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 요소입니다. 버튼은 텍스트, 아이콘 또는 텍스트와 아이콘으로 구성될 수 있습니다.

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

1단계: '완료' 버튼 추가

팔레트 창에서 구성요소 트리로 버튼을 드래그합니다. nickname_edit 수정 텍스트 아래에 버튼을 배치합니다.
done이라는 새 문자열 리소스를 만듭니다. 문자열에 Done 값을 지정합니다.

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

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

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

layout_gravity 속성은 뷰를 상위 레이아웃인 LinearLayout의 중앙에 배치합니다.

스타일을 Android에서 제공하는 사전 정의된 스타일 중 하나인 Widget.AppCompat.Button.Colored로 변경합니다. 드롭다운 또는 리소스 창에서 스타일을 선택할 수 있습니다.

이 스타일은 버튼 색상을 강조 색상인 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단계: '완료' 버튼 스타일 지정

속성 창에서 Layout_Margin > Top을 선택하여 상단 여백을 추가합니다. 상단 여백을 dimens.xml 파일에 정의된 layout_margin로 설정합니다.
드롭다운 메뉴에서 fontFamily 속성을 roboto로 설정합니다.
텍스트 탭으로 전환하여 새로 추가된 버튼의 생성된 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단계: 색상 리소스 변경

이 단계에서는 활동의 앱 바와 일치하도록 버튼의 강조 색상을 변경합니다.

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

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

파일 편집기의 왼쪽 여백에 16진수 코드에 해당하는 색상이 표시됩니다.

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

앱을 실행합니다. 수정 텍스트 아래에 스타일이 지정된 DONE 버튼이 표시됩니다.

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

1단계: 닉네임용 TextView 추가

Palette 창에서 텍스트 뷰를 Component Tree로 드래그합니다. 텍스트 뷰를 done_button 아래, star_image 위에 배치합니다.
속성 창을 사용하여 새 TextView 뷰에 다음 속성을 설정합니다.

속성	값
`id`	`nickname_text`
`style`	`NameStyle`
`textAlignment`	(중앙)

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

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

visible: 뷰가 표시됩니다.
Invisible: 뷰를 숨기지만 뷰는 레이아웃에서 공간을 계속 차지합니다.
gone: 뷰를 숨기며 뷰가 레이아웃에서 공간을 차지하지 않습니다.

속성 창에서 nickname_text 텍스트 뷰의 visibility를 gone로 설정합니다. 앱에서 이 텍스트 뷰를 처음에는 표시하지 않기 때문입니다.

속성 창에서 속성을 변경하면 nickname_text 뷰가 디자인 편집기에서 사라집니다. 레이아웃 미리보기에서 뷰가 숨겨져 있습니다.
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단계: 클릭 리스너 추가

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

private fun addNickname(view: View) {
}

addNickname 함수 내에서 findViewById()를 사용하여 nickname_edit 수정 텍스트와 nickname_text 텍스트 뷰에 대한 참조를 가져옵니다.

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

text 속성에서 가져온 editText에 사용자가 입력한 텍스트를 nicknameTextView 텍스트 뷰에 설정합니다.

nicknameTextView.text = editText.text

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

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

editText.visibility = View.GONE

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

view.visibility = View.GONE

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

nicknameTextView.visibility = View.VISIBLE

2단계: 클릭 리스너를 '완료' 버튼에 연결

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

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

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

위 코드에서 it은 done_button를 나타내며, 이는 인수로 전달된 뷰입니다.

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

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

3단계: 키보드 숨기기

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

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

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

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

사용자가 완료 버튼을 탭한 후에는 닉네임을 변경할 수 없습니다. 다음 작업에서는 앱을 더 대화형으로 만들고 사용자가 닉네임을 업데이트할 수 있도록 기능을 추가합니다.

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

1단계: 클릭 리스너 추가

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

private fun updateNickname (view: View) {
}

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

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

updateNickname 함수 끝에 텍스트를 표시하고, 완료 버튼을 표시하고, 텍스트 뷰를 숨기는 코드를 추가합니다.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

이제 친구에게 대화형 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 개발자 문서:

이 섹션에는 강사가 진행하는 과정의 일부로 이 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 방문 페이지를 참고하세요.

Android Kotlin 기초 02.2: 사용자 상호작용 추가 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

기본 요건

학습할 내용

실습할 내용

1단계: 시작하기

2단계: EditText 추가

1단계: 힌트 텍스트 추가

2단계: inputType 속성 설정

1단계: '완료' 버튼 추가

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

3단계: 색상 리소스 변경

1단계: 닉네임용 TextView 추가

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

1단계: 클릭 리스너 추가

2단계: 클릭 리스너를 '완료' 버튼에 연결

3단계: 키보드 숨기기

1단계: 클릭 리스너 추가

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

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

질문에 답하세요

질문 1

질문 2

질문 3

질문 4

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