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

들어가며

이제 로또만들기의 본격적인 UI를 만듭니다!! 기본 베이스는 ConstraintLayout을 기반으로 하며 Button 과 LinearLayout안에 TextView들을 동적으로 만들어보는 시간을 가질 겁니다!

ConstraintLayout 를 부모 태그로 하며 자식 태그로 LinearLayout 을 구성하는 레이아웃을 구성 할 것 입니다 왜냐하면 LinearLayout은 여러개의 자식 View를 일정하게 구성할때 많이 사용하기 때문에 ConstraintLayout 만으로는 구성하기가 많이 힘들어요! 그래서 ContraintLayout과 LinearLayout을 이용하여 만들어볼까요?!

ConstraintLayout + LinearLayout

<?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=".MainActivity"
    tools:ignore="MissingConstraints">

    <NumberPicker
        android:id="@+id/top_number"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:orientation="horizontal"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/top_number">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="1" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="10dp"
            android:text="2" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="10dp"
            android:text="3" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="10dp"
            android:text="4" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="10dp"
            android:text="5" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="10dp"
            android:text="6" />


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

생각보다 간단합니다!

저희가 다뤄보았던 ConstraintLayout 옵션을 사용하고 자식으로 LinearLayout에 가로 모드인 vertical 을 이용해서 Textview를 구성하는 코드입니다.

지금은 동적 코드가 아니라서 일일이 하나씩 뷰를 구성하고 있는데 실질적 코드를 작성한다면 동적으로 6개의 Textview 를 추가해서 디스플레이 할 예정입니다

ConstraintLayout은 별거 없습니다 Chain 과 bias라고 생각합니다!

여기서 bias가 뭐냐 bias는 Constraint 속성중 하나로써 Chain 이 위, 아래 나 왼쪽, 오른쪽으로 걸려있다면 위치 값을 0 부터 1 까지 정 할 수 있습니다.

예를 들면

app:layout_constraintHorizontal_bias="0.5"

기본 값입이다 기본 값은 좌우 좌 0 우 1로 봤을때 0.5는 가운데를 의미 합니다.

NumberPicker 의 좌 우 모두 parent 에 채인을 걸어놨기 때문에 bias는 0.5입니다

그렇지만 따로 0.8로 적용을 한다면

app:layout_constraintHorizontal_bias="0.8"

저장을 한다면 0.8일 1에 가깝기 때문에 오른쪽으로 취우쳐 저있는 모습을 볼 수 있습니다

이렇게 ConstraintLayout를 사용하면 LinearLayout과 RelateLayout 에서 구현을 할 수 있지만 ConstraintLayout에 비하면 xml코드가 훨신 복잡해지고 가독성도 떨어지기 때문에 협업에 있어서 마이너스 요소가 있을 것으로 예상됩니다.

내일은 layout을 좀 더 이쁘게 꾸며 보고 실질적인 Kotlin 코드를 만져 보면서 공부하는 시간을 가질 것 같습니다

점점 실력이 오르는 것 같아서 기분이 좋아지는군요!! 호호호

 

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

 

https://bit.ly/37BpXiC

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

 

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