[Android] [팁 계산기] 5. 나머지 레이아웃 추가

자 이제 레이아웃의 구현은 거의 다 끝났습니다. switch, Button, TextView 위젯을 사용하여 세부적인 기능들을 더 추가해 보도록 하겠습니다. 

 

 

 

팁을 반올림하기 위한 Switch 추가

---

 우선 XML을 먼저 보도록 하겠습니다. 

<Switch
    android:id="@+id/round_up_switch"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:checked="true"
    android:text="Round up tip?"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="@id/tip_options"
    app:layout_constraintTop_toBottomOf="@id/tip_options" />

 

switch는 사용자가 팁 반올림 여부에 예나 아니요를 선택할 수 있게 해 줍니다. 간단한 설명은 다음과 같습니다:

 

• ConstraintLayout의 UI요소에 맞춰 너비를 설정하고, 뷰의 높이를 내부 콘텐츠의 높이와 같도록 해 줍니다.
• checked 옵션을 true로 설정하여 스위치의 기본 옵션을 on으로 설정합니다. 
• app:layout_constraintEnd_toEndOf="parent": 해당 뷰의 오른쪽 끝을 부모 컨테이너(ConstraintLayout
  )의 오른쪽 끝에 맞춥니다. 즉, 뷰를 화면의 오른쪽 끝에 배치합니다.
• app:layout_constraintStart_toStartOf="@id/tip_options": tip_options라는 다른 뷰의 왼쪽 끝에 해당 뷰의 왼쪽 끝을 정렬합니다.
• app:layout_constraintTop_toBottomOf="@id/tip_options": tip_options라는 다른 뷰의 하단에 해당 뷰의 상단을 정렬합니다.
  
  

Calculate 버튼 추가

---

이제 사용자가 팁 계산을 요청할 수 있는 Button을 추가할겁니다. 버튼의 넓이는 상위 요소의 넓이와 같아야 하므로 Switch의 경우와 동일합니다. Calculate버튼의 XML을 한번 살펴보겠습니다. 

 

<Button
   android:id="@+id/calculate_button"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="@string/calculate"
   app:layout_constraintTop_toBottomOf="@id/round_up_switch"
   app:layout_constraintStart_toStartOf="parent"
   app:layout_constraintEnd_toEndOf="parent" />

 

마찬가지로 위치를 중점으로 보면 됩니다. 위치는 라운드업스위치의 아래이며, 왼쪽 끝을 부모 컨테이너의 왼쪽 끝과 일치시키고, 오른쪽 끝 역시 같은 방법으로 설정해 준다는 뜻이 되겠습니다. 

 

팁 결과 추가

---

연산 결과를 추가하는 레이아웃도 구현해봅시다. 

<TextView
    android:id="@+id/tip_result"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@id/calculate_button"
    android:text="Tip Amount" />

 

자 이제 끝났습니다. 여기까지 잘 따라오셨다면 다음과 같은 화면이 만들어져 있을 겁니다:

 

앱의 모양이 스크린샷과 일치하지 않을 수도 있습니다. Android 스튜디오에서 템플릿이 변경되었을 수 있기 때문입니다.

어쨌든 수고하셨습니다. 눈에 보이는 UI를 구현하고, 구조를 뜯어보며 어떻게 작동하는지 알아보았습니다. 실제 기능을 수행하는 앱을 만들고 배포하는 것은 아직 많이 남았지만, 그 과정을 잘 시작했고 또 마무리했으니 앞으로도 잘할 수 있을 겁니다. 저도 더 열심히 해 보겠습니다.  다음 포스팅부터는 XML파일과 Kotlin클래스 파일을 결합하여 동작하는 로직까지 구현해 볼 겁니다. 완성 코드를 적고 저는 더 공부하러 가보겠습니다. 

 

activity_main.xml

<?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:id="@+id/main"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:padding="16dp"
    tools:context=".MainActivity">

    <EditText
        android:id="@+id/cost_of_service"
        android:layout_width="160dp"
        android:layout_height="wrap_content"
        android:hint="@string/cost_of_service_hint"
        android:importantForAutofill="no"
        android:inputType="numberDecimal"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    
    <TextView
        android:id="@+id/service_question"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/How_was_the_service"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/cost_of_service" />

    <RadioGroup
        android:id="@+id/tip_options"
        android:checkedButton="@id/option_twenty_percent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/service_question" >

        <RadioButton
            android:id="@+id/option_twenty_percent"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/twenty" />

        <RadioButton
            android:id="@+id/option_eighteen_percent"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/eighteen" />

        <RadioButton
            android:id="@+id/option_fifteen_percent"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/fifteen" />

    </RadioGroup>

    <Switch
        android:id="@+id/round_up_switch"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="4dp"
        android:checked="true"
        android:text="@string/round_up"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="@id/tip_options"
        app:layout_constraintTop_toBottomOf="@id/tip_options" />

    <Button
        android:id="@+id/calculate_button"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="12dp"
        android:text="@string/calculate"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/round_up_switch" />

    <TextView
        android:id="@+id/tip_result"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/calculate_button"
        android:text="@string/tip_amount" />







</androidx.constraintlayout.widget.ConstraintLayout>

 

strings.xml:

<resources>
    <string name="app_name">tiptime</string>
    <string name="cost_of_service_hint">Cost of Service</string>
    <string name="How_was_the_service">How was the service?</string>
    <string name="twenty">Amazing (20%)</string>
    <string name="eighteen">Good (18%)</string>
    <string name="fifteen">Okay (15%)</string>
    <string name="round_up">Round up tip?</string>
    <string name="calculate">Calculate</string>
    <string name="tip_amount">Tip Amount</string>

</resources>