Android <5> Layouts & Tip(팁) 계산기🔢

👽미리 알고 들어가기

 

Android 앱의 UI는 구성요소(위젯)의 포함 UI 계층 구조와 이러한 구성요소의 화면 레이아웃으로 빌드됨.

 

*UI 요소의 뷰 계층 구조

하위 뷰와 상위 뷰

 

 

 

각 UI 요소는 XML 파일의 XML 요소로 표현 + 각 요소는 태그로 시작해서 태그로 끝남.

 

*위의 파란색 부분은 아래와 같이 적을 수도 있다! (태그의 차이)

<TextView
	android:text="Hello World!" />

 

 

 

예제: TextView 아래 Button을 하위 요소로 추가하는 경우

<androidx.constraintlayout.widget.ConstraintLayout>
    <TextView
        android:text="Hello World!" />
    <Button
        android:text="Calculate" />
</androidx.constraintlayout.widget.ConstraintLayout>

ConstraintLayout 태그의 경우 위와 같이 길게 표시되는 이유

: ConstraintLayout이 핵심 Android 플랫폼 외에도 추가 기능을 제공하는 코드 라이브러리가 포함된 Android Jetpack의 일부이기 때문

 

---

 

오늘의 과제 : 🔢팁 계산기 앱 만들기 🔢

 

최종 결과물

 

 

🔢 서비스 비용 텍스트 입력란 추가하기

: EditText 요소 = 사용자가 앱에서 텍스트를 입력하거나 수정할 수 있는 요소

<!-- 사용자가 앱에서 텍스트를 입력/수정할 수 있는 요소+제약조건-->
    
    <EditText
        android:id="@+id/plain_text_input"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:inputType="text"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        />

 

🤔제약조건의 이름

: layout_constraint<Source>_to<Target>Of 형식

Source - 현재 뷰, Target - 현재 뷰가 제한되는 타겟 뷰(상위 컨테이너 또는 다른 뷰)의 가장자리

 

 

🤔리소스 ID

: XML 파일의 새로운 뷰 ID는 @+id 접두사로 정의해야 하고 이 접두사는 Android 스튜디오에 이 ID를 새 리소스 ID로 추가하라고 지시.

-> 앱코드에서 리소스ID를 참조할 때는 R.<type>.<name>  사용 (ex. R.id.button)

 

 

*속성 수정하기

<EditText
        android:id="@+id/cost_of_service"
        android:layout_height="wrap_content" 
        android:layout_width="160dp" <- 고정너비로 변경
        android:inputType="numberDecimal" <- 숫자만 입력받기
        android:hint="Cost of Service" <--사용자에게 입력란에 대한 힌트 주기
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        />

 

 

 

---

⚠️갑분 에러 발생과 해결 ..

⚠️ An issue was found when checking AAR metadata:

1. Dependency 'androidx.activity:activity:1.8.0' requires libraries and applications that depend on it to compile against version 34 or later of the Android APIs. :app is currently compiled against android-33. Recommended action: Update this project to use a newer compileSdk of at least 34, for example 34.

Note that updating a library or application's compileSdk (which allows newer APIs to be used) can be done separately from updating targetSdk (which opts the app in to new runtime behavior) and minSdk (which determines which devices the app can be installed on).

-> 실행했더니 요런 에러 발생 !

: 찾아보니 androidx.activity:activity 라이브러리의 최신 버전이 안드로이드 API 레벨 34 이상을 필요로 하는데, 현재 프로젝트가 사용 중인 안드로이드 API 레벨이 33이어서 발생한 문제라고 함

 

app > Gradle Scripts > build.gradle.kt(:app) 파일에서

compileSdk = 33

으로 돼있는 부분을 34로 변경 후, sync now 버튼을 누르고 재실행하면 해결됨!

 

---

 

---

 

 

🔢 서비스에 대한 질문 추가하기

<TextView
    android:id="@+id/service_question"
    android:layout_width="wrap_content" <- Textview가 내부의 텍스트 콘텐츠만큼만 크면 되기 때문!
    android:layout_height="wrap_content"
    android:text="서비스는 어떠셨나요?" 
    
    <!-- 제약조건 추가하기 -->
    app:layout_constraintStart_toStartOf="parent" <- 시작 가장자리를 상위 요소의 시작 가장자리로
    app:layout_constraintTop_toBottomOf="@id/cost_of_service"/>
    <- 상단 가장자리를 서비스비용view의 가장자리로 제한

 

 

 

🔢 팁 옵션 추가하기 - 적절한 요소 사용하기

: 옵션 3가지 추가하기 - 훌룡함(20%), 좋음(18%), 괜찮음(15%)

 

--구조--

RadioGroup : 상위 뷰

| -- RadioButton : 하위 뷰

 

<RadioGroup
    android:id="@+id/tip_options"
    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"> <-서비스 질문 아래 배치


</RadioGroup>

 

	<RadioButton
            android:id="@+id/option_twenty_percent"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="최고! (20%)" />

        <RadioButton
            android:id="@+id/option_eighteen_percent"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="좋아요 (18%)" />

        <RadioButton
            android:id="@+id/option_fifteen_percent"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="괜찮았어요 (15%)" />

 

 

🤔기본 선택 추가하기

* RadioGroup에는 처음에 선택해야 하는 버튼을 지정할 수 있는 속성이 있음

= checkButton : 선택하길 바라는 라디오 버튼의 리소스 ID로 값을 설정

   android:id="@+id/tip_options"
   android:checkedButton="@id/option_twenty_percent"

 

결과물! 음 귀엽군

---

 

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

<Switch
    android:id="@+id/round_up_switch"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:checked="true" <-- 기본값을 true로 설정
    android:text="팁을 반올림할까요?"
    app:layout_constraintEnd_toEndOf="parent"
    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:text="계산하기"
        app:layout_constraintTop_toBottomOf="@id/round_up_switch"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

 

🤔 View의 너비를 포함되는 ConstraintLayout의 너비와 같게 하려면 시작과 끝을 상위 요소의 시작과 끝으로 제한하고 너비를 0dp로 설정합니다!

 

🔢팁 결과 추가하기

<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" />

 

 

---

팁 계산하는 기능 구현하기

 

🧙‍♀️뷰 결합 사용 설정

: 팁을 계산하려면 코드가 모든 UI 요소에 엑세스하여 사용자의 입력을 읽어야 함

-> 뷰에 대한 참조를 반환하는 작업 실행  (findViewById()보다 간단한 기능)

 

build.gradle 파일의 android 섹션에 내용 추가

buildFeatures {
    viewBinding = true
}

---

 

 

🧙‍♀️결합 객체 초기화 

: 앱의 각 View마다 findViewById()를 호출하는대신, View Binding으로 결합 객체를 한 번 만들고 초기화 !

 

 

MainActivity.kt 코드 수정하기 -> *ActivityMainBinding import문도 추가해야 함!

package com.myfirstandroidapp.realtiptime

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.myfirstandroidapp.realtiptime.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {
    lateinit var binding: ActivityMainBinding // 결합 객체의 최상위 변수 선언

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater) // activity_main.xml 레이아웃에서
        Views에 엑세스하는 데 사용할 binding 객체 초기화
        setContentView(binding.root) // 활동의 콘텐츠 뷰 생성. 앱의 뷰 계층 구조 루트로 지정

    }
}

 

 

 

🤔지난 번에 주사위 굴리는 앱을 만들 때는 View에 대한 참조가 필요할 때 findViewById()를 매번 호출해서 사용했는데,

이젠 그럴 필요 없이 직접 view 참조를 사용하기만 하면 된다는 얘기 같다 !!!!!!!!!!!!!

*why? 

: binding 객체는 ID가 있는 앱의 모든 View를 위한 참조를 자동으로 정의하기 때문에! View를 위한 참조를 유지할 변수 생성이 불필요하기 때문!

---

package com.myfirstandroidapp.realtiptime

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.myfirstandroidapp.realtiptime.databinding.ActivityMainBinding
import java.text.NumberFormat

class MainActivity : AppCompatActivity() {
    lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)
        binding.calculateButton.setOnClickListener{ calculateTip() }
    }


    fun calculateTip() {

        //서비스 비용의 텍스트부분을 가져오고,십진수로 변환
        // toDouble()은 String에서 호출되어야 함 : text -> String -> Double

        val stringInTextField = binding.costOfService.text.toString()
        val cost = stringInTextField.toDouble()

        //팁 비율 가져오기
        val selectedId = binding.tipOptions.checkedRadioButtonId
        val tipPercentage = when (selectedId) {
            R.id.option_twenty_percent -> 0.20
            R.id.option_eighteen_percent -> 0.18
            else -> 0.15
        } // when문에는 무조건 else가 필요함!

        var tip = tipPercentage * cost
        // 사용자의 switch 옵션 선택에 따라 값이 반올림 값으로 변경될 수 있음
        //-> val이 아니라 var

        val roundUp = binding.roundUpSwitch.isChecked
        //switch가 사용 설정 상태인지 확인

        if (roundUp) { //roundUp이 참인 경우
            tip = kotlin.math.ceil(tip) //tip변수에 tip의 상한 할당
        }

        //숫자 형식 지정 클래스 사용
        val formattedTip = NumberFormat.getCurrencyInstance().format(tip)

    }
}

---

 

🧙‍♀️팁 표시

 

*app>res>values>strings.xml 파일에 추가

    <string name="app_name">Real Tip Time: %s</string>
</resources>

* %s는 형식이 지정된 통화가 삽입되는 위치이다!

 

 

 

*calculateTip() 에서  반환되는 값을 팁 결과 TextView의 text 속성에 할당하기

binding.tipResult.text = getString(R.string.tip_amount, formattedTip)

 

 

 

*app > res > layout > activity_main.xml 파일의  android:text를 tools:text -- 로 수정

---

 

⚠️아 또 무슨 이상한 오류났는데 보니까? 이 파일에서 string/app_name 리소스를 찾을 수 없대욥..

=>  AndroidManifest.xml 파일에서 android:label 에, 앞에 string.xml에서 바꾼 이름인 tip_amount를 제대로 적어줘야 함!

---

 

결과물!!!!!!!!!! - 아니 왜 갑자기 화면 캡쳐가 안되는지 .. ㅠ 모르겠엇요

아무튼 잘 작동한다는 >>..!