Android 앱개발 입문과제(LV1) - 로그인 페이지 만들기

# 로그인 페이지 만들기 구현사항

• 새 프로젝트를 만들고 MainActivity의 이름을 SignInActivity로 바꿔주세요.
• 로고 이미지는 원하는 이미지로 넣어주세요.
• 아이디, 비밀번호를 입력 받는 EditText를 넣어주세요.(미리보기 글씨(플레이스 홀더) 포함)
• 비밀번호 EditText는 입력 내용이 가려져야 합니다.(●●● 처리)
• 로그인 버튼을 누르면 HomeActivity가 실행되도록 구현합니다. (Extra로 아이디를 넘겨줍니다.)
• 아이디/비밀번호 모두 입력 되어야만 로그인 버튼이 눌리도록 구현합니다. (“로그인 성공”이라는 토스트 메세지 출력하도록 구현)
• 아이디/비밀번호 중 하나라도 비어 있다면 “아이디/비밀번호를 확인해주세요” 라는 토스트 메세지가 출력되도록 구현합니다.
• 회원가입 버튼을 누르면 SignUpActivity가 실행되도록 구현합니다

 

 

 

먼저 activity_sign_in.xml파일을 아래와 같이 디자인해줬다

귀여운 병아리 이미지에 맞게 버튼도 노란색으로 맞춰줬다!! 

여기서 비밀번호를 입력하는 EditText에서는 inputType을 textPassword로 지정해줘서 입력하는 비밀번호값이 안보이게 처리해주었다. 그리고 겹치는 스타일은 strings에 한번에 적어놓고 간편하게 쓸수있도록 했다

<?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=".SignInActivity">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="60dp"
        android:src="@drawable/login_img"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/id_tv"
        style="@style/TextStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="60dp"
        android:text="아이디"
        app:layout_constraintStart_toStartOf="@+id/id_et"
        app:layout_constraintTop_toBottomOf="@+id/imageView" />

    <EditText
        android:id="@+id/id_et"
        style="@style/TextStyle2"
        android:layout_width="350dp"
        android:layout_height="wrap_content"
        android:ems="10"
        android:hint="아이디를 입력해주세요"
        android:inputType="text"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/id_tv" />

    <TextView
        android:id="@+id/password_tv"
        style="@style/TextStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="40dp"
        android:text="비밀번호"
        app:layout_constraintStart_toStartOf="@+id/password_et"
        app:layout_constraintTop_toBottomOf="@+id/id_et" />

    <EditText
        android:id="@+id/password_et"
        style="@style/TextStyle2"
        android:layout_width="350dp"
        android:layout_height="wrap_content"
        android:ems="10"
        android:hint="비밀번호를 입력해주세요"
        android:inputType="textPassword"
        app:layout_constraintEnd_toEndOf="@+id/id_et"
        app:layout_constraintStart_toStartOf="@+id/id_et"
        app:layout_constraintTop_toBottomOf="@+id/password_tv" />

    <Button
        android:id="@+id/login_btn"
        android:layout_width="350dp"
        android:layout_height="wrap_content"
        android:text="로그인"
        android:background="@drawable/button_radius_yellow"
        style="@style/TextStyle2"
        android:layout_marginTop="100dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/password_et" />

    <Button
        android:id="@+id/sign_btn"
        android:layout_width="350dp"
        android:layout_height="wrap_content"
        android:text="회원가입"
        android:background="@drawable/button_radius_yellow"
        style="@style/TextStyle2"
        android:layout_marginTop="25dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/login_btn" />



</androidx.constraintlayout.widget.ConstraintLayout>

activity_sign_in.xml

 

activity_sign_in.xml

 

 

 

 

그런다음 SignInActivity로 가서 findViewById를 통해 레이아웃과 연결해줬고

로그인 버튼 클릭시 if문을 사용해서 아이디 또는 비밀번호가 비어있으면 토스트 메시지를 출력해주고, 비어있지 않으면 HomeActivity로 이동하는 코드를 짜주었다

HomeActivity에서 아이디값을 넣어줄것이기 때문에, 이동할때 putExtra를 통해서 값을 아이디값을 넘겨준다

그리고 회원가입 버튼을 누르면 SignUpActivity로 이동하도록 코드를 짜준다

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


        val loginbtn = findViewById<Button>(R.id.login_btn)
        val signbtn = findViewById<Button>(R.id.sign_btn)
        val id_et = findViewById<EditText>(R.id.id_et)
        val password_et = findViewById<EditText>(R.id.password_et)


        // 로그인 버튼 클릭시
        loginbtn.setOnClickListener {

            // 사용자가 입력한 아이디, 비밀번호값 가져오기
            val id = id_et.text.toString()
            val password = password_et.text.toString()


            // 아이디 or 비밀번호가 비어있으면
            if (id.isEmpty() || password.isEmpty()) {
                Toast.makeText(this, "아이디/비밀번호를 확인해주세요", Toast.LENGTH_SHORT).show()
            } else {
                // 아니면 HomeActivity로 이동
                val intent = Intent(this, HomeActivity::class.java)
                intent.putExtra("id",id) // 내가 입력한 id값 넘겨줌
                startActivity(intent)
                Toast.makeText(this, "로그인 성공!", Toast.LENGTH_SHORT).show()

            }


        }


        // 회원가입 버튼 클릭시
        signbtn.setOnClickListener {
            val intent = Intent(this, SignUpActivity::class.java)
            startActivity(intent)
        }


    }
}

 

 

이렇게 짜주게되면 아이디와 비밀번호를 둘중 하나라도 입력하지 않으면 "아이디/비밀번호를 입력해주세요" 라는 토스트 메시지가 뜨면서 화면이 이동하지 않고

아이디,비번 둘다 입력해줘야만 "로그인 성공!" 메시지가 뜨면서 HomeActivity로 이동하게 된다