코틀린(kotlin) - 뷰 정보를 활용해 동작 구현하기

본 글은 스파르타 코딩 클럽의 "안드로이드 앱개발 기초반" 강의를 듣고 작성한 개발일지입니다.

먼저 이전에 설명드렸던 토스트(Toast) 메시지를 띄어보도록 하겠습니다. 아래에서 "로그인하기" 버튼을 클릭하면 메시지가 나타나도록 할 것인데요.

MainActivity.kt 파일을 아래와 같이 수정할 것입니다. 코드를 추가로 작성했을 때 특정 단어가 빨간색으로 변한다면 관련 모듈을 임포트하지 못했음을 의미하므로, ALT + enter 를 치시면 자동으로 임포트 합니다.

package com.example.login

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.Toast

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
	
    // 추가해야 할 코드
    fun clickLogin(view: View) {
        Toast.makeText(view.context, "로그인!", Toast.LENGTH_LONG).show()
    }

}

그리고 activity_main.xml 파일에서 "로그인하기"에 해당하는 <Button>에 android:onClick="clickLogin" 을 추가하시면 됩니다. 그럼 아래와 같이 "로그인하기" 버튼을 클릭했을 때 "로그인!" 이라는 토스트 메시지가 뜨는 것을 확인할 수 있습니다.

그럼 미리 정해놓은 메시지 말고 앱 화면에서 입력한 텍스트 그대로 메시지를 출력해보도록 하겠습니다. 그 중에서도 EditText에 있는 email 정보를 출력하도록 할 것입니다.

class MainActivity : AppCompatActivity() {
    private lateinit var emailEditText: EditText // 추가
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        emailEditText = findViewById(R.id.editTextTextEmailAddress) // 추가
    }

    fun clickLogin(view: View) {
        var email = emailEditText.text // 추가
        Toast.makeText(view.context, email, Toast.LENGTH_LONG).show()
    }

}

lateinit은 나중에 값을 저장해두겠다는 의미로, 변수를 처음 만들 때가 아니라 필요한 시점에 저장하고 사용하겠다는 것으로 코틀린에만 있는 문법

1. 임시 변수 선언
2. 해당 변수에 실제 EditText를 찾아서 저장 <- findViewById 메서드 활용
3. 함수 내에 로컬 변수 선언

다음은 "로그인 페이지" 라는 타이틀을 변경해보려고 합니다. 이때 참고로 private lateinint var 에 해당하는 변수들은 activity_main.xml 파일에서 설정한 element를 가리킵니다.

class MainActivity : AppCompatActivity() {
    private lateinit var emailEditText: EditText
    private lateinit var titleTextView: TextView // 추가

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        emailEditText = findViewById(R.id.editTextTextEmailAddress)
        titleTextView = findViewById(R.id.textViewTitle) // 추가

    }

    fun clickLogin(view: View) {
        var email = emailEditText.text
        Toast.makeText(view.context, email, Toast.LENGTH_LONG).show()
        titleTextView.text = email // 추가
    }

}

위의 titleTextView.text = email 로 정해놓으면 아래 "로그인하기" 버튼을 눌렀을 때 email 필드에 입력한 대로 타이틀과 토스트 메시지에 모두 반영됩니다.

이제 clickLogin 함수에 조건문을 추가하여 email 형식이 아닌 경우 특정 토스트 메시지를 띄어보겠습니다. email 형식인지 아닌지는 단순하게 "@"의 유무로 판단(contains 함수 사용)하겠습니다.

class MainActivity : AppCompatActivity() {
    private lateinit var emailEditText: EditText
    private lateinit var titleTextView: TextView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        emailEditText = findViewById(R.id.editTextTextEmailAddress)
        titleTextView = findViewById(R.id.textViewTitle)

    }

    fun clickLogin(view: View) {
        var email = emailEditText.text
        if (email.contains("@")) {
            Toast.makeText(view.context, email, Toast.LENGTH_LONG).show()
        } else {
            Toast.makeText(view.context, "Email을 확인해주세요", Toast.LENGTH_LONG).show()
        }
    }
}

마지막으로 email을 아예 입력하지 않았을 경우에 email을 입력해달라는 메시지를 남기도록 하겠습니다. 입력된 값이 없다면 길이를 나타내는 length 함수를 사용하여 확인할 수 있습니다.

class MainActivity : AppCompatActivity() {
    private lateinit var emailEditText: EditText
    private lateinit var titleTextView: TextView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        emailEditText = findViewById(R.id.editTextTextEmailAddress)
        titleTextView = findViewById(R.id.textViewTitle)

    }

    fun clickLogin(view: View) {
        var email = emailEditText.text
        if (email.length == 0) {
            Toast.makeText(view.context, "Email을 입력해주세요", Toast.LENGTH_LONG).show()
        } else if (email.contains("@")) {
            Toast.makeText(view.context, email, Toast.LENGTH_LONG).show()
        } else {
            Toast.makeText(view.context, "Email을 확인해주세요", Toast.LENGTH_LONG).show()
        }
    }
}