[ Kotlin 앱 개발 ] 로그인 구현 #2 - 액티비티 값 넘기기

1편에 이어 2편을 포스팅해보겠습니다.

[ Kotlin 앱 개발 ] 로그인 구현 #1 - 레이아웃 구성

 

 

이번에는 로그인 버튼을 눌렀을 때 입력한 값을 다음 화면으로 전송해주는 코드를 작성해 보겠습니다.

 

웹 개발 할 때 form 태그로 logincheck_php로 넘기는 것과 비슷합니다.

 

php의 form태그에서도 각 input값에 name을 부여해서 전송받은 php가 이게 어떤 값인지 분별할 수 있게 코드를 작성하듯

kotlin에서도 각 TextInputEditText에다가 android:id를 부여합니다.

ID칸에는 textinputedittext_id

password 칸에는 textinputedittext_pass 라는 이름을 부여했습니다. 

그리고 로그인 버튼에도 button_login 이라는 아이디를 부여했습니다.

 

activity_login.xml

<com.google.android.material.textfield.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:layout_marginBottom="20dp"
                android:id="@+id/textinputedittext_id"
                android:hint="ID"/>
        </com.google.android.material.textfield.TextInputLayout>

        <com.google.android.material.textfield.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:layout_marginBottom="50dp"
                android:id="@+id/textinputedittext_pass"
                android:hint="password"/>
        </com.google.android.material.textfield.TextInputLayout>
        
         <Button
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:layout_marginBottom="10dp"
            android:background="@drawable/btn_blue"
            android:id="@+id/button_login"
            android:text="로그인" />

 

 

이제 MainActivity.kt 파일을 켜봅니다.

 

 

값 전송

 

이제 본격적으로 값을 전송해보겠습니다

kotlin에서 값을 전송할 때는 intent를 사용합니다.

 

사용법은 아래와 같습니다.

 

전달하는 파일에서 전달받는 파일에 화면을 띄울때 intent와 startActivity를 사용합니다.

그때 값도 같이 전달하고 싶다면 중간에 intent.putExtra(KEY값, VALUE값)을 추가해주면 됩니다.

 

현재 프로젝트에선 MainActivity.kt 에서 아이디와 비밀번호를 MainActivity2.kt로 전달하게 됩니다.

(파일 이름들을 처음에 잘못 설정함....LoginActivity.kt와 MainActivity.kt로 설정하려했는데)

 

MainActivity.kt (전송부)

val intent = Intent(this, secondActivity::class.java)
intent.putExtra("answer", "this is the answer")
startActivity(intent)

 

MainActivity2.kt (수신부)

val secondIntent = intent
TEXTVIEW.text = secondIntent.getStringExtra("answer")

 

아직 MainActivity2.kt 를 만들지 않았으므로 파일을 하나 생성해주겠습니다.

 

 

이 kotlin 파일을 만들면 layout 폴더에 xml 파일이 쌍으로 같이 생길 것입니다.

 

아래는 전달받는 수신 부 페이지의 xml 코드입니다.

 

activity_main2.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".MainActivity2">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:weightSum="9"
        >
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="로그인에 성공했습니다!"
        android:id="@+id/login_answer"
        android:gravity="center"
        android:layout_weight="3"
        />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="id 전달 테스트"
            android:gravity="center"
            android:id="@+id/idprint"
            android:layout_weight="3"
            />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="pass 전달 테스트"
            android:gravity="center"
            android:id="@+id/passprint"
            android:layout_weight="3"
            />


    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

 

값을 전달받기 전의 이 페이지는 로그인이 성공했다는 글귀와 id출력 칸 / pass 출력 칸으로 이루어져 있습니다.

 

만약 전송값을 잘 받았다면 저 출력칸의 textview 값이 바뀌게 되겠죠

 

 

MainActivity.kt

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

        val tvid: TextInputEditText = findViewById(R.id.textinputedittext_id)
        val tvpass: TextInputEditText = findViewById(R.id.textinputedittext_pass)
        val btn_login: Button = findViewById(R.id.button_login)

        // 버튼이 클릭되면 다음 값 전송
        btn_login.setOnClickListener() {
            val id = tvid.text.toString()
            val pass = tvpass.text.toString()
            val intent = Intent(this, MainActivity2::class.java)
            intent.putExtra("id", id)
            intent.putExtra("pass", pass)
            startActivity(intent)
        }
    }

}

코드 초반, 어떤 값을 가져올지는 각 View의 id 값으로 건드릴 수 있게 됩니다.

tvid, tvpass,btn_login 변수에 각각 findViewById로 해당 View를 저장합니다.

 

btn_login 버튼에 setOnClickListener 이벤트 핸들러를 장착합니다.

버튼이 클릭되면 그 때의 id 와 pass 의 String 값을 intent.putExtra를 통해 MainActivity2로 전송합니다.

 

putExtra로 전송할 때 "id" 와 "pass" 라고 하는 건 KEY값으로 택배의 송장 부분에 해당합니다. 이를 통해 전송부와 수신부가 어디로 도착할지를 확정지을 수 있습니다.

 

 

MainActivity2.kt

package com.haemaa.myapplication

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.TextView

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

        val idprint : TextView = findViewById(R.id.idprint)
        val passprint : TextView = findViewById(R.id.passprint)

        val secondIntent = intent
        idprint.text = secondIntent.getStringExtra("id")
        passprint.text = secondIntent.getStringExtra("pass")
    }
}

 

아까 생성한 TextView를 각각 idprint, passprint로 저장해둡니다.

putExtra의 KEY값으로 getStringExtra 가 idprint, passprint에 전송된 값을 저장합니다.

 

이제 코드가 잘 구축되었는지 녹스플레이어에서 실행시켜보겠습니다.

 

로그인 화면에서 id 칸에 hacker / 비밀번호 칸에 haemaa 라는 값을 전달해줍니다. 테스트용이므로 비밀번호 칸에 토글 설정은 하지 않았습니다. 이렇게 입력 후, 로그인 버튼을 누르면?

 

id 출력 칸에 hacker / password 출력칸에 haemaa가 출력된 것을 볼 수 있습니다.

 

버튼을 눌렀을 때 값이 전달되었고 출력 또한 깔끔하게 된 것을 확인할 수 있습니다.

 

 

이렇게 TextInputEdittext 를 통해 입력된 값을 다음 액티비티로 전달하는 기능을 구현해보았습니다.

 

 

아직 앱이 익숙치 않은건지 웹의 form 태그가 쉬웠던 건지 시행착오가 되게 잦았네요 ㅠㅠ

앱은 확실히 셋팅해놓아야 할 것들이 많은 느낌입니다.

 

다음으로는 안드로이드와 PHP와 MySQL를 연동시켜 DB에 저장된 회원 만이 로그인할 수 있는 기능을 구현해보겠습니다.

 

봐주셔서 감사합니다~ 

---

소스 참조

https://yuuj.tistory.com/193