자 이제 레이아웃의 구현은 거의 다 끝났습니다. 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>
'Project > Android' 카테고리의 다른 글
[Android] Activity와 ViewBinding으로 화면 전환하기 (0) | 2024.04.01 |
---|---|
[Android] [팁 계산기] 4. 팁 옵션 추가하기 (0) | 2024.03.26 |
[Android] [팁 계산기] 3. XML로 레이아웃 만들기 (0) | 2024.03.26 |
[Android] [팁 계산기] 2. XML의 이해 (0) | 2024.03.26 |
[Android] [팁 계산기] 1. 템플릿 (0) | 2024.03.25 |
댓글