20230810 TIL

로그인 기능과 자기소개 페이지 만들기

안드로이드 스튜디오와 코틀린을 이용하여 로그인 기능이 포함되어있는 자기소개 페이지를 만들어보았다.

크게 3가지의 화면으로 구성되어있다

로그인 화면

회원가입 화면

메인 화면

세가지 화면에 구현된 기능을 하나씩 알아보자.

1. 로그인 화면

로그인 화면에는 크게 3가지의 기능이 구현되어있다.
우선 아이디와 비밀번호에 입력된 값이 없으면 Toast를 출력하게 구현이 되어있다.

아이디가 입력되어있지 않으면 아이디를 입력해달라는 Toast를 출력

아이디가 입력되어있지만 비밀번호가 입력되어있지 않으면 비밀번호를 입력하라는 Toast를 출력한다. 이를 구현하기 위한 코드는 아래와 같다.

    loginBtn.setOnClickListener{//loginBtn이 눌렸을 시 실행,
        Log.d(TAG, "로그인 버튼 클릭")

        val id = inputID.text.toString()//아이디 Edit박스의 입력값 받음
        var pw = inputPassword.text.toString()//페스워드 Edit박스의 입력값 받음

        if(id.isEmpty()){//아이디 입력값이 없을 때,
            Toast.makeText(this, "아이디를 입력해주세요", Toast.LENGTH_SHORT).show()//Toast 출력
        }else if(pw.isEmpty()){//비밀번호 입력값이 없을 때
            Toast.makeText(this, "비밀번호를 입력해주세요", Toast.LENGTH_SHORT).show()//Toast 출력
        }else{
            Toast.makeText(this,"로그인 성공",Toast.LENGTH_SHORT).show()//두 입력값이 모두 있을 때 Toast 출력


            var intent = Intent(this, HomeActivity::class.java)
            intent.putExtra("id",id)//ID EditBot 안에 있는 내용 저장
            startActivity(intent) 다음 엑티비티 실행
        }



    }

이런식으로 코드를 구현하였다.
추가적으로 로그인버튼에 구현한 기능이 있는데, 하단에 intent를 생성하여 로그인 버튼이 누르면 아이디와 pw가 입력되었는지 확인한 후 , intent를 생성하여 HomeActivity가 실행하도록 기능을 구현하였다.

또한 회원가입 버튼도 구현하였다.

    regiBtn.setOnClickListener{
        var intent = Intent(this, SignUpActivity::class.java)
        resultLauncher.launch(intent)
    }

회원가입 버튼이 SingUpActivity가 실행된다.

다음 화면인 회원가입 화면을 알아보자.

2. 회원가입 화면

회원가입에선 이름,아이디,비밀번호가 모두 입력되어야만 다음 엑티비티로 넘어갈 수 있게 구현하였다.

        signUpBtn.setOnClickListener{
            var name = inputName.text.toString()
            var id = inputId.text.toString()
            var pw = inputPw.text.toString()
            if(name.isEmpty()){
                Toast.makeText(this, "이름을 입력해주세요", Toast.LENGTH_SHORT).show()
            }else if(id.isEmpty()){
                Toast.makeText(this, "아이디를 입력해주세요", Toast.LENGTH_SHORT).show()
            }else if(pw.isEmpty()){
                Toast.makeText(this, "비밀번호를 입력해주세요", Toast.LENGTH_SHORT).show()
            }else{
                Toast.makeText(this, "회원가입을 완료하였습니다!", Toast.LENGTH_SHORT).show()

                intent.putExtra("id",inputId.text.toString())
                intent.putExtra("pw",inputPw.text.toString())
                setResult(RESULT_OK,intent)
                finish()
            }

아래와같이 코드를 구현하였는데, 로그인과 내용이 다른 것을 찾을 수 있다. putExtra를 사용하였는데 이는 회원가입에서 입력받은 아이디와 패스워드를 Extra로 넘겨 회원가입이 완료되어서 로그인화면으로 다시 넘어가게되면 입력받은 아이디와 패스워드를 로그인 화면의 ID EditText와 Pw EditText에 값을 넘겨주는 기능을 구현하였다.

이로 인해 회원가입을 마치면 로그인화면에 아이디와 비밀번호가 자동으로 입력되어 있는 모습을 확인할 수 있다.

입력값

결과값. 회원가입 완료 Toast메세지와 함께 아이디와 PW가 입력되어 있는 모습을 볼 수 있다.

3. 메인화면

메인화면에는 3개의 기능을 구현하였다. 우선 아이디를 로그인 때 입력한 id값을 받아 출력하게 구현하였다.

        textView1.text = "아이디 : " + intent.getStringExtra("id")

로그인화면에서 id라는 Extra로 넘겨준 값을 출력한다.

다음 기능은 사진 5개를 로그인 버튼이 눌렸을 때 랜덤으로 출력하게 구현하였다.

이런식으로 5개의 이미지를 출력하게 하였다.

        var num1= Random.nextInt(5)
        var imgnum : Int = when(num1){
            0 ->R.drawable.test1
            1 ->R.drawable.test2
            2 ->R.drawable.test3
            3 ->R.drawable.test4
            else -> R.drawable.test5
        }
        imageView1.setImageResource(imgnum)

Random 패키지를 사용하여 num1변수를 선언하였고, 이 num1의 값에 따라 when문을 이용하여 imageView에 표현될 사진을 바꿔주게 구현하였다.

다음기능은 Selector를 사용한 버튼이다.
버튼이 평상시에는

모습이지만 버튼을 클릭하게 된다면

이런 모습으로 그림과 배경색이 바뀌게 구현하였다.

해당 기능은 xml을 이용하여 구현하였는데, selector기능을 이용하여 State_preesed의 값에 따라 화면이 바뀌게 구현하였다.

버튼 배경색 바꾸는 Selector

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 클릭시 -->
    <item android:state_pressed="false" android:drawable="@drawable/test_style" />
    <!-- 클릭하지 않았을시-->
    <item android:state_pressed="true" android:drawable="@drawable/test1_style" />
</selector>

버튼 이미지 바꾸는 Selector

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 클릭시 -->
    <item android:state_pressed="true" android:drawable="@drawable/btn_image1"/>
    <!-- 클릭하지 않았을시-->
    <item android:state_pressed="false" android:drawable="@drawable/btn_image2"/>
</selector>

Layout 안 Button의 속성

    <Button
        android:id="@+id/exitBtn"
        android:layout_width="200dp"
        android:layout_height="80dp"
        android:layout_marginTop="20dp"
        android:background="@drawable/btn_color_selector" // 배경색 수정
        android:drawableLeft="@drawable/btn_img_selector" // 이미지 수정
        android:paddingLeft="15dp"
        android:text="종료"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/homeMBTITextView"
        app:layout_constraintVertical_bias="0.17000002" />

상단 코드속 Background 속성과 DarwableLeft속성에 selector를 지정하여 사용한 모습을 확인할 수 있다.