Android with Kotlin : 안드로이드 기초편 - Intent 기초 setOnClickListener 이벤트

저번 글에서는 회원가입 화면을 만드는 UI에 관련된 내용을 다루어보았습니다. 이번 글에서는 코틀린의 이벤트처리에 대해 배워보도록 하겠습니다.

이벤트명	개념	사용법
setOnClickListener	사용자가 해당 버튼을 누르면 실행할 내용을 지정해주는 코드	이벤트를붙여줄버튼.setOnClickListener { // 버튼이 눌리면 실행 해줄 코드들을 작성. }
Intent	하나의 액티비티에서 다른 액티비티를 불러낼 때 사용하는 코드(이동)	val myIntent(변수이름변경가능) = Intent(출발지this, 도착액티비티::class.java) startActivity(myIntent)

​

* 연습내용 : MainActivity(로그인화면)에서 가입하기 버튼을 클릭했을 때 새로 생성한 JoinActivity(회원가입화면)으로 이동하는 로직을 짜보겠습니다. 해당 연습에서는 button을 클릭할 때 이벤트를 발생시켜야하고, 화면 이동도 필요합니다.

 

<!-- activity_main.xml (로그인화면) -->
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:padding="15dp"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center">

        <ImageView
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:src="@drawable/dolphin_logo_01" />

    </LinearLayout>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="아이디"
        android:layout_marginTop="20dp"
        android:textSize="18sp"/>

    <EditText
        android:id="@+id/idEdt"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="이메일 양식으로 입력"
        android:inputType="textEmailAddress"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        android:text="비밀번호"
        android:layout_marginTop="25dp" />

    <EditText
        android:id="@+id/pwEdt"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="비밀번호 입력"
        android:inputType="textPassword"/>

    <Button
        android:id="@+id/loginBtn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="로그인" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <Button
        android:id="@+id/joinBtn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="가입하기" />

</LinearLayout>

<!-- activity_join.xml (회원가입화면) -->
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    android:gravity="top"
    android:padding="15dp"
    android:background="#FFFFFF"
    tools:context=".JoinActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="아이디"
        android:layout_marginTop="15dp"
        android:textSize="16sp"
        android:textStyle="bold"/>

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="이메일 양식으로 입력하세요."
        android:inputType="textEmailAddress"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="15dp"
        android:textSize="16sp"
        android:textStyle="bold"
        android:text="비밀번호"/>

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="비밀번호를 입력하세요."
        android:inputType="textPassword" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="15dp"
        android:textSize="16sp"
        android:textStyle="bold"
        android:text="닉네임"/>

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="한글/영어 등을 한 줄로 입력하세요."
        android:singleLine="true"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="15dp"
        android:textSize="16sp"
        android:textStyle="bold"
        android:text="추천인"/>

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="추천한 사람의 닉네임으로 검색하세요. (준비중)"
        android:singleLine="true"
        android:enabled="false"
        android:imeOptions="actionSearch"/>

    <RadioGroup
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="gone"
        android:layout_marginTop="15dp"
        android:orientation="horizontal">

        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="만 14세 미만" />

        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="만 14세 이상" />

        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="외국인" />
    </RadioGroup>

    <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="15dp"
        android:text="이용약관에 동의합니다."
        android:checked="true"/>

    <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:enabled="false"
        android:text="마케팅 활용에 동의합니다."/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center">

        <ImageView
            android:layout_width="120dp"
            android:layout_height="120dp"
            android:src="@drawable/dolphin_logo_01"
            android:scaleType="centerCrop"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:text="취소"/>

        <Button
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:text="회원가입"/>

    </LinearLayout>

</LinearLayout>

 

앞서 말씀드렸다시피 처음 Main화면에 들어왔을 때 가입하기 버튼을 클릭하면 2번째 페이지(회원가입)화면으로 이동하는 setOnClick이벤트입니다. 안드로이드 / 코틀린에서는 setOnClickListener을 사용해서 이벤트를 태웁니다.

 

// MainActivity.kt
package com.example.myappwithgit

import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import kotlinx.android.synthetic.main.activity_main.*

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


        // 가입하기 버튼을 눌렀을 때 회원가입화면으로 이동하게 버튼 클릭이벤트 만들기
        joinBtn.setOnClickListener {

            // 가입하기 버튼을 누르면 들어오는 로직
            // 회원가입(JoinActivity) 화면으로 이동하게 Intent 사용
            val myIntent = Intent(this, JoinActivity::class.java)

            // startActivity를 해야 화면이동
            startActivity(myIntent)
        }

    }// onCreate
}

// JoinAcitivity.kt
package com.example.myappwithgit

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import kotlinx.android.synthetic.main.activity_join.*

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

        cancelBtn.setOnClickListener {

            // MainActivity에서 넘어온 Activity를 종료하고 싶으면
            finish()
        }
    }
}

위의 소스와 같이 사용하시면 화면이동하는 모습을 확인하실 수 있습니다.

 

※ kotlinx.android.synthetic.main.activity_main.*이 없어서 연결이 안된다면 아래와 같이 해결하시면 됩니다.

app > build.gradle로 들어가서 plugins에 'kotlin-android-extensions'를 추가합니다. 그리고 망치모양의 Sync Now(=Make Project)로 다시 빌드하면 됩니다.

plugins {
    id 'com.android.application'
    id 'org.jetbrains.kotlin.android'
    id 'kotlin-android'
    id 'kotlin-android-extensions' // 해당 내용 추가
}

[2023-04-26기준] 위와 같이 해결하고자 하였으나, The 'kotlin-android-extensions' Gradle plugin is no longer supported. 라는 또다른 오류가 발생하네요. 더이상 extensions 플러그인을 서포트하지 않는다는 오류인데 3년 전에 사용했던 플러그인이라 지금 기준에서는 어떻게 바뀌었는지 구글링이 필요할 것 같습니다.