[Android/Kotlin 02-4] 자기소개앱 만들기(최종)

Intro

앱을 클릭하면 스플래시화면이 나타나고, 3초뒤 메인화면으로 전환됩니다.
제가 제일 좋아하는 양파쿵야! 맑은 눈의 광인처럼 너무 귀엽지 않나요?
사심 가득 컨셉으로 꾸며봤습니다.😉

✔ 앱 아이콘 변경

File -> New -> Image Asset 에서 변경 가능합니다.
Path 항목을 선택하면 내 로컬에서 파일을 업로드 해올 수 있고, Resize 바를 왔다갔다 하시면 사이즈도 조절할 수 있습니다. 맑눈광 다시봐도 너무 귀엽네요.
마음에들면 NEXT -> FINISH

✔ 스플래시 화면

drawable에 넣은 스플래시 이미지를 activity_splash.xml파일에 구현해줍니다.
그런다음 AndroidManifest.xml에서 SplashActivity를 메인으로 설정해 주어야 합니다.
~~ MAIN, ~~LAUNCHER 코드가 보이시죠? 중요!!

// SplachActivity
package com.example.signinactivity

import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.os.Handler
import android.os.Looper

class SplashActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_splash)
        loadSplashScreen()
    }
    private fun loadSplashScreen(){
        Handler(Looper.getMainLooper()).postDelayed({
            val intent = Intent(this,SignInActivity::class.java)
            startActivity(intent)
            finish()
        }, 3000)
    }
}

// AndroidManifest.xml
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" >
	<application
		<activity
          android:name=".HomeActivity"
          android:exported="false" />
        <activity
           android:name=".SignUpActivity"
           android:exported="false" />
        <activity
          android:name=".SignInActivity"
          android:exported="false" >
        </activity>
        // SplashActivity를 메인으로 설정
        <activity
          android:name=".SplashActivity"
          android:exported="true" >
          <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
		  </intent-filter>
		</activity>
	</application>
</manifest>

✔ 로그인 화면 디자인 옵션

어두운 톤의 배경화면을 넣었기 때문에 텍스트에 해당하는 부분들을 white로 변경 해주었습니다.

텍스트 컬러 : android:textColor="@color/white"
입력란 밑줄 컬러 : android:backgroundTint="@color/white"
입력되는 텍스트 컬러 : android:textColor="@color/white"
텍스트 미리보기 컬러 : android:textColorHint="@color/white"

Main

✔ 회원가입, 로그인 화면 로직

회원가입, 로그인 페이지에 모든 텍스트가 입력되지 않으면 화면 전환이 되지 않으며, 정보를 모두 입력해 달라는 토스트 메세지가 뜹니다. 회원가입시 작성한 id와 password데이터를 로그인 페이지에 전달 하는 로직을 추가하였습니다.

// SignUpActivity.kt (회원가입)
package com.example.signinactivity

import android.app.Activity
import android.content.Context
import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.util.Log
import android.widget.Button
import android.widget.EditText
import android.widget.Toast
import androidx.activity.result.contract.ActivityResultContract

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

        val name = findViewById<EditText>(R.id.editName)
        val idText = findViewById<EditText>(R.id.editId)
        val pwText = findViewById<EditText>(R.id.editPw)
        val join = findViewById<Button>(R.id.btn_join)

        // 회원가입
        join.setOnClickListener {
            val inputName = name.text.toString()
            val inputId = idText.text.toString()
            val inputPw = pwText.text.toString()
            if (inputName.isEmpty() || inputId.isEmpty() || inputPw.isEmpty()) {
                Toast.makeText(this, "입력되지 않은 정보가 있습니다.", Toast.LENGTH_SHORT).show()
            } else {
                val intent = Intent(this,SignInActivity::class.java)
                intent.putExtra("id", inputId)
                intent.putExtra("password", inputPw)
                setResult(Activity.RESULT_OK, intent)
                finish()
            }
        }
    }
}

// SignInActivity.kt (로그인)
package com.example.signinactivity

import android.annotation.SuppressLint
import android.app.Activity
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.TextView
import android.widget.Toast
import androidx.activity.result.ActivityResultLauncher
import androidx.activity.result.contract.ActivityResultContract
import androidx.activity.result.contract.ActivityResultContracts

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

        setResultSignUp()

        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()
            if (inputId.isEmpty() || inputPw.isEmpty()) {
                Toast.makeText(this, "아이디/비밀번호를 확인해주세요.", Toast.LENGTH_SHORT).show()
            } else {
                Toast.makeText(this, "로그인 성공!", Toast.LENGTH_SHORT).show()
                val intent = Intent(this, HomeActivity::class.java)
                intent.putExtra("id", inputId)
                startActivity(intent)
            }
        }

        // 회원가입
        join.setOnClickListener {
            val intent = Intent(this,SignUpActivity::class.java)
            resultLauncher.launch(intent)
        }
    }
    // 회원가입시 작성한 데이터 전달
    private lateinit var resultLauncher: ActivityResultLauncher<Intent>

    private fun setResultSignUp() {
        resultLauncher = registerForActivityResult(ActivityResultContracts.StartActivityForResult()) { result ->
            if (result.resultCode == Activity.RESULT_OK) {
                val data: Intent? = result.data
                val inputId = data?.getStringExtra("id")
                val inputPw = data?.getStringExtra("password")
                val getId = findViewById<EditText>(R.id.idText)
                getId.setText(inputId)
                val getPw = findViewById<EditText>(R.id.pwText)
                getPw.setText(inputPw)
            }
        }
    }
}

Sub

✔ 자기소개 화면

회원가입을 성공적으로 마치면 아이디, 비밀번호 정보가 그대로 로그인 페이지로 넘어오기 때문에 로그인 버튼만 눌러 로그인을 할 수 있습니다. 로그인을 하면 다양한 프로필 이미지가 랜덤으로 반겨주네요! 로그인 화면에서 입력한 id도 그대로 반영이 되는것을 확인할 수 있습니다.

// HomeActivi.kt
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.ImageView
import android.widget.TextView
import androidx.databinding.DataBindingUtil
import com.example.signinactivity.databinding.ActivityHomeBinding
import kotlin.random.Random

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

        val randomImg = findViewById<ImageView>(R.id.profile_img)
        when(Random.nextInt(1, 6)) {
            1 -> randomImg.setImageResource(R.drawable.profile_01)
            2 -> randomImg.setImageResource(R.drawable.profile_02)
            3 -> randomImg.setImageResource(R.drawable.profile_03)
            4 -> randomImg.setImageResource(R.drawable.profile_04)
            5 -> randomImg.setImageResource(R.drawable.profile_05)
        }

        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()
        }

    }
}

✔ 종료(로그아웃)

종료 버튼을 누르면 버튼 이미지가 변경되면서 최종적으로 로그인을 종료합니다.
종료가 아쉬운 양파쿵야가 몽둥이를 들고 서운해합니다..ㅎㅎ(서운한거 맞음)