[안드로이드] 패스트캠퍼스 챌린지 21일차!!

들어가며

오늘은 나의 비밀 정원 이라는 보안이 가미되어 있는 어플을 만들어 볼 것입니다 일단 만들기 앞서 UI를 꾸려 봐야겠죠?? 이번에도 UI는 ConstraintLayout을 사용할 예정입니다 ConstraintLayout의 장정은 뭐니뭐니 해도 체인 시스템인데요! 체인 시스템은 개발자가 원하는 곳에 View를 하기 쉽게 만들어 놓은 기능입니다. 비밀 정원에 들어가는 로그인 UI는 ConstraintLayout 자식 태그로 ConstraintLayout이 들어가는 이중 레이아웃으로 구성되어 있습니다!

 

CODE

<?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"
    android:background="#3BBBBB"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:text="나의 비밀 정원"
        android:textSize="30sp"
        app:layout_constraintBottom_toTopOf="@id/passwordLayout"
        android:layout_marginBottom="20dp"/>



    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/passwordLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#CDCDCD"
        android:padding="15dp"
        app:layout_constraintVertical_bias="0.45"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">


        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/login_button"
            android:layout_width="40dp"
            android:layout_height="60dp"
            android:layout_marginEnd="10dp"
            app:layout_constraintBottom_toBottomOf="@id/picker1"
            app:layout_constraintEnd_toStartOf="@id/picker1"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="@id/picker1" />
        <androidx.appcompat.widget.AppCompatButton
            android:layout_width="20dp"
            android:layout_height="20dp"
            app:layout_constraintTop_toBottomOf="@id/login_button"
            app:layout_constraintStart_toStartOf="@id/login_button"
            app:layout_constraintEnd_toEndOf="@id/login_button"/>

        <NumberPicker
            android:id="@+id/picker1"
            android:layout_width="30dp"
            android:layout_height="120dp"
            app:layout_constraintEnd_toStartOf="@id/picker2"
            app:layout_constraintStart_toEndOf="@id/login_button"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintHorizontal_chainStyle="packed" />

        <NumberPicker
            android:id="@+id/picker2"
            android:layout_width="30dp"
            android:layout_height="120dp"
            app:layout_constraintEnd_toStartOf="@id/picker3"
            app:layout_constraintStart_toEndOf="@id/picker1"
            app:layout_constraintTop_toTopOf="@id/picker1" />

        <NumberPicker
            android:id="@+id/picker3"
            android:layout_width="30dp"
            android:layout_height="120dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@id/picker2"
            app:layout_constraintTop_toTopOf="@id/picker1" />


    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

꽤 길어 보이지만 간단한 UI입니다 NumberPicker 세개로 비밀번호를 설정 해 주고 첫번째 버튼으로 로그인 버튼을 구현하고 마지막으로 두번째 버튼으로 비밀번호를 셋팅하는 기능입니다. 

옛날에 보면 자전거를 잠그기 위한 돌리면서 비밀번호를 맞추는 그런 자물쇠가 있는데 그것을 최대한 비슷하게 구현을 해보도록 하겠습니다

 

저 위에 androidx.appcompat.widget.AppCompatButton 은 다름이 아닌 기본 버튼 태그 입니다 

 

이상하게 들릴 수도 있지만 안드로이는 머터리얼 UI라는 테마를 기본으로 셋팅 해놓기 때문에 버튼 색상 등 갖가지 스타일들이 기본 으로 잡혀 있습니다 그래서 아마 개발을 하실 때면 버튼의 색깔이 기본적으로 보라색으로 구성되어 있는데 이를 해결할려면 Button 태그가 아닌 AppCompatButton 을 사용해야 원 하는 색상으로 뷰를 구성 할 수 있습니다.

 

나머지 들은 간단합니다 start end top bottom 체인 속성을 주면서 자식으로 설정되어있는 constraintLayout을 가운데 정렬을 하고 그 가운데 정렬이 되어 있는 constraintLayout에 start 와 end 속성을 준 자식 뷰들 button / numberPicker 로 구성 되어 있습니다 기본적으로 양 끝을 체인화 시키면 가운데 정렬이 되는데 이 기능이 너무 좋습니다

 

linearLayout 을 사용해본 분들은 이해가 되시겠지만 gravity속성이 맘대로 잘 붙지 않습니다.. 아마 특정 조건이 있을때 사용이 되는 걸로 알고 있는데 constraintlayouut은 그런 것들이 필요없이 체인 만드로 가운데 정렬을 할 수 있고 또 그 정렬 기준을 bias 속성으로 정할 수 있으니 깔끔하고 좋은 기능인 것 같습니다!

 

내일은 login 을 직접 할 수 있겠금 kotlin코드로 기능을 구현 해보록 하겠습니다~~~

 

 

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발#패스트캠퍼스후기#30개 프로젝트로 배우는 Android 앱 개발 with Kotlin 초격차 패키지 Online

 

https://bit.ly/37BpXiC

패스트캠퍼스 [직장인 실무교육]

 

 본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.