[Android/Kotlin] 안드로이드 학습 2.2 - 사용자 상호작용

 

이번 시간에 정리해볼 부분은 User Interactivity, 사용자 상호작용이다.

Android Kotlin Fundamentals: Add user interactivity  |  Android Developers

 

 

 

EditText

사용자에게 텍스트를 입력받기 위해서, Android Studio에서는 EditText를 사용한다.

 

 

디자인 탭으로 전환한 뒤 Palette에서 UI 요소들을 살펴보자.

가장 상단에서 텍스트뷰인 Ab TextView 밑으로 다양한 EditText 뷰들을 확인해볼 수 있다.

 요소 이름 왼쪽의 Ab에 주목해야 한다. 잘 보면 밑줄 여부가 다른 것을 확인할 수 있는데, Ab 아이콘 밑의 밑줄은 그 뷰가 editable, 즉, 편집 가능함을 나타낸다.

 

 

 

 

 

 

 

 

 

Step 1: Add hint text

EditText에서 아무 글자도 입력하지 않으면 보여주는 텍스트가 있다. hint 속성을 활용하면 된다. hint라는 이름답게 사용자에게 editable fields에 어떤 값을 입력할지 알려주는 데 도와주는 역할이다.

 

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

힌트에 대한 문자열 리소스를 Strings.xml에 추가해준다.

Attribute에서 EditText에 위의 속성들을 추가해 준다.

 

Step 2: Set the inputType attribute

 

다양한 inputType

 

 

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

 가능한 모든 입력 유형을 보려면 Attribute 창에서 inputType 필드를 클릭하거나 필드 옆에 있는 세 개의 점 ...을 클릭. 현재 활성화된 입력 유형이 선택된 상태에서, 사용할 수 있는 모든 입력 유형에 대한 리스트를 확인할 수 있다. 하나 이상의 입력 유형을 선택할 수도 있다.

 여기서 input 속성 textPersonName를 체크해준다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Button

 

과제: DONE 버튼을 추가. 사용자가 닉네임 입력 후 버튼을 누르면 EditText를 닉네임을 보여주는 TextView로 바꿔주기. 닉네임을 업데이트 한 뒤에 사용자가 TextView를 탭할 수 있게 할 것.

 

Change the visibility 

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

• visible: 뷰가 보임
• Invisible: 보기를 숨기지만 보기는 여전히 레이아웃에서 공간을 차지
• gone: 보기를 숨기고 보기가 레이아웃에서 공간을 차지하지 않음

 

ClickListener

버튼을 클릭했을 때 동작 처리. 클릭 이벤트를 처리하는 곳은 버튼이 있는 레이아웃을 호스팅하는 Activity에서 구현되어야 함.

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

다음 두 가지 방법으로 버튼 클릭 이벤트에 클릭 이벤트를 연결할 수 있다.

• XML 레이아웃에서 요소에 android:onClick속성을 추가할 수 있다 

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

또는

• Activity의  onCreate()에서 setOnClickListener를 호출하여 런타임에서 프로그래밍 방식으로 수행할 수 있다 

myButton.setOnClickListener {
   clickHanderFunction(it)
}

 

 

ClickListener 추가하기

1. Button 클릭 리스너

MainActivity.kt 전체 코드

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        findViewById<Button>(R.id.done_button).setOnClickListener {
            addNickname(it) // it은 인수로 전달된 뷰인 'done_button'을 나타냄
        }
    }

    private fun addNickname(view: View) {
        val editText = findViewById<EditText>(R.id.nickname_edit)
        val nicknameTextView = findViewById<TextView>(R.id.nickname_text)

        nicknameTextView.text = editText.text

        editText.visibility = View.GONE
        view.visibility = View.GONE
        nicknameTextView.visibility = View.VISIBLE
    }
}

• 매개변수 (parameter): 인수를 함수 내부로 전달하기 위해 사용하는 변수
• 인수(argument): 함수가 호출될 때 함수로 전달해주는 값

-키보드 숨기기-

사용자가 Done 버튼을 누르면 키보드를 숨김. 위의 버튼 클릭 리스너 함수인 addNickname() 안에 써주면 됨

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

 

2. EditText, TextView 클릭 리스너

private fun updateNickname(view: View) {
    editText.visibility = View.VISIBLE
    doneButton.visibility = View.VISIBLE
    view.visibility = View.GONE

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

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

 

 

 

Learn More

Udacity course:

• Developing Android Apps with Kotlin

Android developer documentation:

• Build a UI with Layout Editor
• Button
• EditText
• Input types
• Handle keyboard input
• Styles and Themes