[30기 안드로이드] 1주차 세미나 과제

로그인 페이지 만들기

 

 

 

왼쪽 사진과 같이 로그인을 위한 SignIn 뷰를 만들었습니다.

 

아이디와 비밀번호를 입력하기 위한 EditText와 다른 Activity로 가기 위한 두 개의 버튼이 있습니다.

 

editText의 "아이디를 입력해주세요", "비밀번호를 입력해주세요"는 다른 글씨보다 옅게 나오는데 이 글씨는 editText안에 글씨를 작성하면 사라집니다.

이것은 android:text가 아닌 android:hint 속성을 사용해여 작성해주면 됩니다.

 

그리고 비밀번호를 입력할 때 일반적으로 비밀번호는 보여지면 안되기 때문에 비밀번호를 입력하는 editText의 inputType 속성을 textPassword로 바꿔주면 됩니다.

 

 

 

 

 

 

아직은 서버가 없어서 어떤 아이디를 입력해도 로그인이 되겠지만, 그래도 아이디과 비밀번호를 입력하지 않았을 때는 로그인이 되지 않아야겠죠?

private fun clickLogin(){
        binding.btnLogin.setOnClickListener{
            val homeIntent = Intent(this, HomeActivity::class.java)
            if(binding.etId.text.isEmpty() or binding.etPw.text.isEmpty()){
                this.shortToast("아이디/비밀번호를 확인해주세요")
            }
            else{
                startActivity(homeIntent)
                this.shortToast("로그인 성공")
            }
        }
    }

버튼을 눌렀을 때 isEmpty() 함수를 사용해서 아이디와 비밀번호 editText가 하나라도 비어있다면 다시 확인하라는 토스트 메시지를 띄워줍니다. 만약 둘 다 비어있지 않다면 '로그인 성공'이라는 토스트 메시지와 함께 Intent로 homeActivity를 시작합니다.

 

 

아, 토스트 메시지 부분이 이상할 수 있습니다. 토스트 메시지는 우리가 굉장히 자주 사용하는 코드인데, 맨날 같은 코드 길게 쓰는게 꽤 귀찮았습니다. 그래서 확장함수를 사용하여 토스트 메시지를 짧게 사용할 수 있도록 만들었습니다.

import android.content.Context
import android.widget.Toast

object ContextExt {
    fun Context.shortToast(message:String){
        Toast.makeText(this, message, Toast.LENGTH_SHORT).show()
    }
    fun Context.longToast(message: String){
        Toast.makeText(this, message, Toast.LENGTH_LONG).show()
    }
}

(이 부분은 아직 1주차 세미나에선 다루지 않은 방법입니다. 이해가 되지 않는다면 원래대로 토스트 메시지를 작성하면 됩니다.)

 

---

회원가입 페이지 만들기

 

 

회원가입 페이지도 로그인 페이지와 굉장히 유사합니다. 버튼이 하나 줄고 입력할게 하나 늘어났을뿐입니다.

 

로그인 페이지에서 해줬던 것과 마찬가지로 editText의 hint 속성을 사용하고 inputType도 textPassword로 바꿔줍니다.

 

여기엔 특별한 것이 없지만 한 가지 추가해줘야할 내용이 있습니다.

회원가입을 하면 로그인 페이지로 돌아가게 되는데 이 때 우리가 가입한 아이디와 비밀번호가 로그인 페이지에 자동으로 입력되길 원합니다.

 

그리고 회원가입 완료를 눌러 로그인 페이지를 띄워주는 것도 이전처럼 startActivity를 사용하지 않을 것입니다.

 

 

 

 

우리가 로그인 페이지에서 회원가입 버튼을 눌러서 회원가입 페이지로 올 때는 startActivity()를 사용했습니다. 그러나 우리가 로그인 페이지를 finish() 해주지 않았기 때문에 현재 보이는 회원가입뷰 아래에 로그인 뷰가 남아있습니다. 우리는 이를 보통 백스택에 쌓여있다고 합니다.

 

하지만 회원가입 완료 버튼을 누르면 회원가입 뷰는 더 이상 우리에게 필요하지 않습니다. 그래서 버튼을 누르면 finish를 해줄 것이고 로그인 뷰 또한 startActivity()로 새로 실행하는 것이 아니라 그냥 회원가입 뷰를 종료하면 백스택에 쌓여있던 로그인 뷰가 등장할 것입니다.

 

그래서 우리는 startActivity()를 사용하지 않고 회원가입 뷰를 finish()하면서 아이디와 비밀번호를 로그인 뷰에 넘겨줄 것입니다. 그러기 위해선 먼저 로그인 뷰에서 먼저 코드를 작성해야 합니다.

 

---

 

SignInActivity의 OnCreate함수

override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivitySignInBinding.inflate(layoutInflater)
        setContentView(binding.root)

        clickLogin()
        clickSignUp()
        setResultSignUp()
    }

여기서 봐야할 것은 clickSignUp()과 setResultSignUp()입니다

 

 

clickSignUp()

private fun clickSignUp(){
        binding.btnSignup.setOnClickListener{
            val signUpIntent = Intent(this, SignUpActivity::class.java)
            resultLauncher.launch(signUpIntent)
        }
    }

회원가입 버튼을 눌렀을 때 처리해줄 코드입니다.

Intent 객체를 생성하고 resultLauncher.launch()에 Intent객체를 전달해주므로 SignUpActivity를 시작합니다.

그전에 resultLauncher가 뭐냐? 

private lateinit var resultLauncher : ActivityResultLauncher<Intent>

이렇게 lateinit으로 SignUpActivity 클래스에서 전역으로 선언해주고 아래 setResultSignUp() 함수에서 초기화해줍니다.

 

 

setResultSignUp()

private fun setResultSignUp(){
        resultLauncher = registerForActivityResult(ActivityResultContracts.StartActivityForResult()){result->
            if(result.resultCode== RESULT_OK){
                val id = result.data?.getStringExtra("id")
                val pw = result.data?.getStringExtra("pw")
                binding.etId.setText(id)
                binding.etPw.setText(pw)
            }
        }
    }

result->를 지우고 아래에서 사용되는 result 대신 it을 사용해도 된다.

setResultSignUp() 함수는 SignUpActivity에서 Intent를 통해 보내주는 데이터를 받기 위한 코드입니다.

받아오는 resultCode가 RESULT_OK일 때 아이디와 비밀번호를 editText에 넣어줍니다.

else인 상황에 대한 코드도 작성해줄 수 있지만 저는 따로 작성하지 않았습니다.

 

---

SignUpActivity의 clickSignUp()

private fun clickSignUp(){
        val intent = Intent(this, SignInActivity::class.java)
        binding.btnLogin.setOnClickListener{
            if(binding.etId.text.isEmpty() or binding.etName.text.isEmpty() or binding.etPw.text.isEmpty()){
                this.shortToast("입력되지 않은 정보가 있습니다")
            }
            else{
                intent.putExtra("id", binding.etId.text.toString())
                intent.putExtra("pw", binding.etPw.text.toString())
                setResult(RESULT_OK, intent)
                this.shortToast("회원가입 되었습니다.")
                finish()
            }
        }
    }

Intent를 통해 데이터를 전해주므로 putExtra()를 이용하며 첫 번째 파라미터는 key, 두 번째 파라미터는 value입니다.

그리고  setResult() 함수로 RESULT_OK를 전달하며 제대로 전달됨을 알립니다.

startActivity() 없이 finish() 되며 회원가입 뷰는 종료되고 로그인 뷰로 돌아갑니다.

 

---

홈(자기소개) 페이지 만들기

 

먼저 자기소개가 길어질 경우를 생각해서 스크롤이 될 수 있게 할 것입니다.

스크롤 뷰를 사용해야하는데 스크롤 뷰 안에는 하나의 뷰밖에 들어가지 못합니다.

 

하지만 우리는 이미지뷰와 여러 텍스트뷰들을 넣어야하므로 스크롤 뷰 안에 constraintlayout을 넣어주고 우리가 넣고 싶은 뷰들은 레이아웃 안에 넣어줄 것입니다.

 

프로필 이미지는 top, start, end에 제약을 걸어주고 width와 height 모두 0dp로 설정해줍니다. 이렇게 되면 bottom 제약이 없으므로 이미지뷰의 세로 길이가 0이 될 것입니다.

 

이때 이미지의 width를 마진 값을 통해 원하는 만큼 설정해주고 아래처럼 이미지뷰의 비율을 설정해주면 왼쪽 사진과 같이 됩니다.

app:layout_constraintDimensionRatio="1:1"

 

---

 

실행 영상

 

 

 

https://github.com/Hott6/Hot-Yongmin/tree/seminar-1th

GitHub - Hott6/Hot-Yongmin: 세상에서 가장 핫한 오가니제이션에 모인 개발자들