[TIL] App 실습 - BMI 계산기(1)

Yanus·2024년 4월 1일

TIL

첫번째 app 만들기 실습은 BMI 계산기를 만들어보기로 했다.

app의 UI를 꾸미기 위해서는 xml 언어를 다뤄야한다.
프로젝트를 Empty Views Activity로 생성한다면
activity_main.xml 에서 xml 코드의 구조를 확인할 수 있다.

xml 파일을 Code로 수정하는 방법도 있으나
익숙해지기전에는 Design을 조작하는 방식으로 수정해야겠다.

View 객체 추가하기

Design 탭에서 원하는 항목을 추가하였다.

Text->TextView, Number
Buttons->Button

TextView 수정하기

TextView의 프로퍼티들을 수정하였다.
text: 문자내용
textColor: 문자색상
textSize: 문자크기
textStyle: 문자스타일 (bold설정)

Layout->Constraint Widget 상대좌표설정
layout_constraintEnd_toEndOf: 오른쪽기준 = parent
layout_constraintStart_toStartOf: 왼쪽기준 = parent
layout_constraintTop_toTopOf: 위쪽기준 = parent
layout_marginTop: 위쪽기준 margin 설정

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="80dp"
        android:text="BMI 계산기"
        android:textColor="@android:color/holo_blue_dark"
        android:textSize="40sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

xml 코드가 자동생성되었다.

EditText 수정하기

EditText의 프로퍼티를 수정하였다.
layout_width: 가로길이 설정

Layout->Constraint Widget 상대좌표설정
layout_constraintBottom_toBottomOf: 아래쪽기준 = textView2
layout_constraintStart_toEndOf: 왼쪽기준 = textView2
layout_constraintTop_toTopOf: 위쪽기준 = textView2
layout_marginStart: 왼쪽기준 margin 설정

    <EditText
        android:id="@+id/editTextNumber"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:ems="10"
        android:inputType="number"
        android:gravity="center"
        app:layout_constraintBottom_toBottomOf="@+id/textView2"
        app:layout_constraintStart_toEndOf="@+id/textView2"
        app:layout_constraintTop_toTopOf="@+id/textView2" />

자동생성된 xml 코드에 gravity 속성을 추가하였다.
android:gravity="center"
: 사용자 입력 중앙에 출력.

Button 수정하기

Button의 프로퍼티를 수정하였다.
text: 문자내용

Layout->Constraint Widget 상대좌표설정
layout_constraintEnd_toEndOf: 오른쪽기준 = parent
layout_constraintStart_toStartOf: 왼쪽기준 = parent
layout_constraintTop_toBottomOf: 위쪽기준 = textView3
layout_marginTop: 위쪽기준 margin 설정

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="80dp"
        android:text="확인하러가기"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView3" />

xml 코드가 자동생성되었다.

Horizontal Chain 만들기

두개의 TextView와 하나의 Edit Text를
Horizontal Chain으로 결합하였다.

Horizontal Chain style을 수정하였다.

layout_constraintHorizontal_bias: 0~1사이값 (0은 좌측정렬 1은 우측정렬)
layout_constraintHorizontal_chainStyle: 배치 스타일 (packed설정)

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="80dp"
        android:text="신장"
        android:textColor="@color/black"
        android:textSize="20sp"
        app:layout_constraintEnd_toStartOf="@+id/editTextNumber"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView" />