내일배움캠프 19일차

김재현·2024년 3월 22일

오늘은 개인과제를 시작하였다.

1. 로그인 페이지 만들기(SignInActivity)

프로젝트의 이름을 SignInActivity로 바꾸고 아이디, 비밀번호는 EditText로

비밀번호는 입력내용이 가려지게 xml을 작성해주었다.
프로젝트의 이름은 Refactor/Rename을 통해 바꿔주었다.
그 다음은 EditText를 포함한 UI를 설정해주었다.

<EditText
	android:id="@+id/edit_id"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="10dp"
    android:layout_marginEnd="10dp"
    android:layout_marginTop="10dp"
    android:hint="아이디를 입력하세요."
    android:textColorHint="#616161"
    android:textColor="@color/white"
    android:background="@android:color/transparent"
    app:layout_constraintTop_toBottomOf="@+id/text_id"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent" />

아이디를 받는 EditText

<EditText
	android:id="@+id/edit_password"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="10dp"
    android:layout_marginEnd="10dp"
    android:layout_marginTop="10dp"
    android:hint="비밀번호를 입력하세요."
    android:textColorHint="#616161"
    android:textColor="@color/white"
    android:background="@android:color/transparent"
    android:inputType="textPassword"
    app:layout_constraintTop_toBottomOf="@+id/text_password"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent" />

비밀번호를 받는 EditText

입력내용은 inputType으로 textPassword로 설정해주면 가려진다.
그 다음 내용은 기능적인 내용이다.
- 로그인 버튼을 누르면 HomeActivity가 실행되도록 구현
- 아이디/비밀번호 모두 입력 되어야만 로그인 버튼이 눌리도록 구현
- 하나라도 비어있으면 토스트 메세지 출력
- 회원가입 버튼을 누르면 SignUpActivity가 실행되도록 구현
- Extra로 아이디 HomeActivity로 넘겨주기

(다른건 괜찮았는데 아이디 넘겨주는 부분에서 뇌가 멈출뻔했다...)

순서대로 구현해보자

로그인 버튼을 누르면 HomeActivity가 실행되도록 구현

val btn_in1 = findViewById<Button>(R.id.btn_in1)
btn_in1.setOnClickListener {
	val intent = Intent(this, HomeActivity::class.java)
    startActivity(intent)
}
findViewById로 btn_in1(로그인 버튼)을 가져오고 btn_in1을 누를때 intent로
지금 activity에서 HomeActivity로 보내준다.

아이디/비밀번호 모두 입력 되어야만 로그인 버튼이 눌리도록 구현

btn_in1.setOnClickListener {
	//아이디 입력 EditText가 비어있을 때
    if (id.text.toString().trim().isEmpty()) {
    Toast.makeText(this@SignInActivity, "아이디를 확인해주세요", Toast.LENGTH_SHORT).show()
    //비밀번호 입력 EditText가 비어있을 때
    } else if (password.text.toString().trim().isEmpty()) {
    Toast.makeText(this@SignInActivity, "비밀번호를 확인해주세요", Toast.LENGTH_SHORT).show()
}

버튼을 누를때 if문을 통해 각 EditText가 비어있으면 토스트 메세지 출력해준다.

회원가입 버튼을 누르면 SignUpActivity가 실행되도록 구현

btn_in2.setOnClickListener {
	val intent = Intent(this, SignUpActivity::class.java)
    startActivity(intent)
}

이 부분도 로그인 버튼과 동일하다.

Extra로 아이디 넘겨주기

이게 좀 어려웠는데 구글링으로 찾아보고 아까 사용한 if문에 else로 넣어주었다.

else {
	Toast.makeText(this@SignInActivity, "로그인 성공", Toast.LENGTH_SHORT).show()
	val intent = Intent(this, HomeActivity::class.java)
    //val inputId는 EditText id에서 받아온 text를 toString으로 바꿔서
    val inputId = id.text.toString()
    //intent 보내준다
    intent.putExtra("", inputId)
    startActivity(intent)

intent.putExtra로 id(아이디를 적는 EditText)를 HomeActivity로 보내면

if(intent.hasExtra("")) {
	text_id.text = intent.getStringExtra("")

안의 값이 맞으면(?) getStringExtra로 받아온다.

2. 회원가입 페이지 만들기(SignUpActivity)

SignActivity를 생성하고 이름, 아이디, 비밀번호 모두 입력시 회원가입 버튼이 눌리도록 구현.

회원가입 버튼이 눌리면 초기화면으로 이동(finish 활용)
첫번째 조건은 SignInActivity에서 경험해봐서 바로 if 활용해서 작성했다.

btn_up.setOnClickListener {
	if (edit1.text.toString().trim().isEmpty()) {
		Toast.makeText(this@SignUpActivity, "입력되지 않은 정보가 있습니다.", Toast.LENGTH_SHORT).show()
	} else if (edit2.text.toString().trim().isEmpty()) {
		Toast.makeText(this@SignUpActivity, "입력되지 않은 정보가 있습니다.", Toast.LENGTH_SHORT).show()
    } else if (edit3.text.toString().trim().isEmpty()) {
		Toast.makeText(this@SignUpActivity, "입력되지 않은 정보가 있습니다.", Toast.LENGTH_SHORT).show()
    }
	//3가지 EditText가 전부 제대로 입력되었다면 Toast 메세지와 함께 현재화면이 종료된다.
    else {
    	Toast.makeText(this@SignUpActivity, "회원가입이 완료되었습니다.", Toast.LENGTH_SHORT).show()
        finish()
	}
}

버튼이 눌렸을때 정보가 비어있으면 토스트 메세지를 출력하고 전부 입력시 else를 통해 빠져나간다.

3. 자기소개 페이지 만들기(HomeActivity)

HomeActivity를 생성, SignInActivity에서 받은 extra data(아이디)를 화면에 표시(완.)

mageView, TextView 외에 각종 Widget을 활용해 자유롭게 화면을 디자인

종료 버튼이 눌리면 SignInActivity로 이동하도록 구현합니다. (finish 활용)

extra data 제외하면 다 경험해본 것이라서 바로 했다!

when문을 이용해 추가 기능하나도 구현했다

(자기소개 페이지가 시작될 때 5장 중 랜덤으로 1장의 사진이 표시되도록 구현합니다.)

btn_finish.setOnClickListener {
	finish()
}

종료버튼

val imageView = findViewById<ImageView>(R.id.img3)
	when(Random.nextInt(5)) {
    	0 -> imageView.setImageResource(R.drawable.randompic1)
    	1 -> imageView.setImageResource(R.drawable.randompic2)
    	2 -> imageView.setImageResource(R.drawable.randompic3)
    	3 -> imageView.setImageResource(R.drawable.randompic4)
    	4 -> imageView.setImageResource(R.drawable.randompic5)
	}