[Android/Kotlin 02-2] 자기소개앱 만들기(디테일 페이지)

이다을·2023년 8월 2일
0

지난번에 이어서 자기소개앱의 마지막 화면인 자기소개 페이지까지 만들어 보았습니다.
전글을 안보신 분들을 위해 요약하자면 순서는 이렇습니다. ↓

  1. 로그인 페이지를 만들고 아이디 값을 Extra로 아이디 값을 넘겨줍니다.
  2. 로그인 아래의 회원가입 버튼을 누르면 회원가입 페이지로 넘어갑니다.
  3. 로그인 페이지에서 받은 Extra 아이디 값을 받아 자기소개 페이지에 구현해줍니다.

3) 자기소개 페이지(HomeActivity)

  • SignInActivity에서 받은 extra data(아이디)를 화면에 표시
  • 종료 버튼을 누르면 SignInActivity로 이동(finish 활용)

이렇게 아이디 값을 작성해주고 로그인을 누르면

아이디 내용이 성공적으로 반영된 모습을 볼 수 있다.

// putExtra() : 값을 보내는 로직
package com.example.signinactivity

import android.content.Context
import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import android.widget.Toast

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

        val login = findViewById<Button>(R.id.btn_login)
        val join = findViewById<Button>(R.id.btn_join)
        val idText = findViewById<EditText>(R.id.idText)
        val pwText = findViewById<EditText>(R.id.pwText)

        // 로그인
        login.setOnClickListener {
            val inputId = idText.text.toString()
            val inputPw = pwText.text.toString()
            checkToast(this, inputId, inputPw)
        }
        // 회원가입
        join.setOnClickListener {
            join()
        }
    }
	// 토스트 메세지
    private fun showToast(context: Context, message: String) {
        Toast.makeText(context, message, Toast.LENGTH_SHORT).show()
    }
    // 로그인 가능 여부 확인 및 데이터 값 보내기
    private fun checkToast(context: Context, inputId: String, inputPw: String) {
        val trimmedId = inputId.trim()
        val trimmedPw = inputPw.trim()
        if (trimmedId.isEmpty() || trimmedPw.isEmpty()) {
            showToast(this, "아이디/비밀번호를 확인해주세요.")
        } else {
            showToast(context, "로그인 성공!")
            val intent = Intent(this, HomeActivity::class.java)
            intent.putExtra("ID", inputId)
            startActivity(intent)
        }
    }
    // 회원가입 페이지 이동
    private fun join() {
        val intent = Intent(this,SignUpActivity::class.java)
        startActivity(intent)
    }
}
// getStringExtra() : 가져온 값을 반영하는 로직
package com.example.signinactivity

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

class HomeActivity : AppCompatActivity() {
    @SuppressLint("MissingInflatedId")
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_home)
        
		// 입력받은 아이디 값을 가져와서 getId의 TextView 값에 뿌려준다.
        val inputId = intent.getStringExtra("ID")
        val idText = findViewById<TextView>(R.id.getId)
        idText.text = inputId
		
        // 종료 버튼을 누르면 앱 종료
        val finish = findViewById<Button>(R.id.btn_finish)
        finish.setOnClickListener {
            finish()
        }
    }
}

✔ 트러블 슈팅

문제점 :
1) 자기소개 페이지의 TextView를 우측정렬 하려했지만 적용되지 않았음
2) 아이디, 비밀번호 입력 후 로그인 하면 받아온 데이터 값이 화면에 반환되지 않았음

원인 :
1) android:gravity로 해야 텍스트를 정렬할 수 있는데 android:layout_gravity로 계속 시도하니 적용되지 않았음
2) 아이디를 입력하고 로그인을 눌렀을 때 자기소개 페이지의 아이디 텍스트 부분에 값이 보이지 않았음

// 수정하기 전 코드
login.setOnClickListener {
    val inputId = idText.text.toString()
    val inputPw = pwText.text.toString()
    val intent = Intent(this,HomeActivity::class.java) <- 중복되는 이부분 삭제
    intent.putExtra("ID", inputId) <- 옮길 코드
    checkToast(this, inputId, inputPw)
}

// 수정된 코드
private fun checkToast(context: Context, inputId: String, inputPw: String) {
        val trimmedId = inputId.trim()
        val trimmedPw = inputPw.trim()
        if (trimmedId.isEmpty() || trimmedPw.isEmpty()) {
            showToast(this, "아이디/비밀번호를 확인해주세요.")
        } else {
            showToast(context, "로그인 성공!")
            val intent = Intent(this, HomeActivity::class.java) <- 남겨준 코드
            intent.putExtra("ID", inputId) <- 이쪽으로 옮겨줌
            startActivity(intent)
        }
    }

해결책 :
1) android:gravity로 모두 바꿔 정렬해 줌
2) 토스트 메세지를 띄워주는 if문 코드와 로그인 버튼을 눌렀을때의 코드에 HomeActivity로 넘어가는 부분이 중복으로 들어있어 빈 값을 받은 페이지가 존재해 값이 보이지 않았음

느낀점 :
이번에는 화면 구현과 함께 데이터 값을 반환하고 값을 불러와 화면에 그려주는 것 까지 구현해야 했는데 실질적인 데이터를 연결해 주어 어떤 원리로 앱이 작동하게 되는지 확실하게 이해할 수 있었던 예제였습니다. CRUD처럼 기본적인 부분이 언제나 가장 중요한 것 같습니다. 그리고 틀린 부분을 바로 잡았다면 거기서 끝나는 것이 아닌 무엇이 달랐고 어떻게 그 문제점을 해결하였는지 계속해서 비교해보고 확실하게 이해는것이 가장 좋은 공부가 되는 것 같습니다.

profile
나도 개발 할래

5개의 댓글

comment-user-thumbnail
2023년 8월 2일

좋은 글 감사합니다.

답글 달기
comment-user-thumbnail
2023년 8월 2일

트러블슈팅으로 원인을 분석해서 왜 이런 현상이 나는지 서술해 주셔서 비슷한 문제점이 생긴 다른 사람이 봐도 도움이 많이될거같아요!

답글 달기
comment-user-thumbnail
2023년 8월 3일

아 말씀하셨던 gravity가 우측정렬을 하기 위해서 필요했던 거였군요?
저도 과제할 때 적용시켜 봐야겠네요 :)

답글 달기
comment-user-thumbnail
2023년 8월 3일

저도 만드는데 참고하겠습니다!
그 와중에 루피가 귀엽네요..

답글 달기
comment-user-thumbnail
2023년 8월 3일

설명이랑 트러블 슈팅까지 잘 설명해주셔서 저도 자기소개앱 시도해볼 때 많은 도움이 될 거 같네요!! 감사합니다!

답글 달기