8월 한달 토이 프로젝트를 해보자! -03 : LogIn UI

나는 가이드라인을 매우 좋아한다. 가이드라인에 UI 컴포넌트들을 붙이는 것이 가장 선호하는 구성 방식이다. Composable을 자유롭게 다룰 수 있게 된다면 그땐 또 모르겠지만, 현재는 그렇다.

일단 양 옆의 margin, 혹은 padding은 값을 정하기보다 가이드라인을 그어서 왼편과 오른편이 각각 붙도록 설정할 것이다.

그리고 웬만하면 계층 구조를 만들기보다 한 ConstraintLayout 안에 비율을 줘서 때려박는 것을 좋아하기도 한다. 2년에 걸쳐 형성된 습관이랄까,,, 좋지 않음을 이유와 함께 알려주신다면 기꺼이 고치겠습니다. 굽신

아이콘은 iconfinder.com 에서 free & commercial use 가능한 아이콘과, Material Icons를 사용할 것이다.

id와 pw가 비어있으면 입력하라는 토스트를, pw 길이가 6 미만일 경우 비밀번호 제대로 입력하라는 토스트를 띄울 것이다. 또한, 사용자 편의상 화면을 터치하면 키보드가 내려가도록 세팅하였다.

이를 위해 LogInFragment에 함수를 세팅해준다.

private fun hideKeyboard() {
    val imm = context?.getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
    imm.hideSoftInputFromWindow(idInputField.windowToken, 0)
}

private fun makeToast(content: String) = Toast.makeText(requireContext(), content, Toast.LENGTH_SHORT).show()

private fun validateInputs() = idInputField.text.toString().isNotEmpty() && pwInputField.text.toString().isNotEmpty()

private fun validatePassword() = pwInputField.text.toString().length > 5

참, 우선 UI 요소들을 선언해준다.
data Binding 적용 후에 전부 사라질 것이다. 굳이? 하고 안절부절 못하지 말자. 물론 제가 쓰는 것은 언제나 틀릴 수 있습니다. 근거 있는 훈수 언제나 환영입니다.

    private val baseLyt: ConstraintLayout by lazy {
        view?.findViewById(R.id.logIn_base) as ConstraintLayout
    }
    private val btnLogIn: MaterialButton by lazy {
        view?.findViewById(R.id.btn_logIn) as MaterialButton
    }
    private val idInputField: TextInputEditText by lazy {
        view?.findViewById(R.id.idInput) as TextInputEditText
    }
    private val pwInputField: TextInputEditText by lazy {
        view?.findViewById(R.id.pwInput) as TextInputEditText
    }

이후 onClick 함수는 다음과 같이 수정될 것이다.

    override fun onClick(v: View?) {
        when(v?.id) {
            R.id.logIn_base -> hideKeyboard()
            R.id.btn_logIn -> {
                if (!validateInputs()) {
                    makeToast("계정 또는 비밀번호를 입력해주세요.")
                    return
                }
                if (!validatePassword()) {
                    makeToast("비밀번호는 최소 6자리 이상입니다.")
                    return
                }

                toList()
            }
        }
    }

백과 통신하며 아이디와 비밀번호를 검증하는 프로세스가 아직 존재하지 않기 때문에 (firebase에 관련해서 만들어둔 것도 없다 아직) 바로 리스트로 진입하지만, 이후에는 네트워킹을 통한 검증이 도입될 것이다. 이 과정은 후반부에, ViewModel 적용 후에 Retrofit이나 Ktor을 통해 구현할 예정이다.

그나저나, 기본 색상이 마음에 안 든다. 나는 저 teal과 purple이 보기 싫다. 하여 color을 추가 후 Theme을 변경할 것이다.

우선, 컬러 팔레뜨는 https://colorpalettes.net/color-palette-2178/ 이 링크를 가져왔다. 예뻐서.

colors.xml에 원하는 색상들을 추가한 후, Themes의 colorPrimary, colorSecondary를 손본다. 참고로, MaterialButton의 텍스트 색상은 themes의 colorOnPrimary를 변경하여 바꿀 수 있다!

좋아. 마음에 든다. 파스텔톤이 좋아 역시. 그런데, Toy Project가 맞긴 한데 앱 이름이 저렇게 있으니 별로다. 앱 이름을 바꿔주자. My Photo Diary라 로고에 써 놓았으니, 앱 이름도 동일하게 가져간다.