[FastCampus] Android (ConstraintLayout, EditText, ImageButton, ViewBinding)

[ 단위 변환기 ]

 

1. 구현할 기능

 - cm를 m로 변환

 - 값을 입력하면, 바로 변환된 값이 노출 (입력값은 자연수로 한정)

 - 단위를 반대로 변경

 - 단위 변환 연산

 - 간단한 기능을 구현하고, UI를 그릴 수 있다

    - ConstraintLayout, EditText 활용

    - ViewBinding, onSaveinstanceState 활용

 

2. ConstraintLayout

 - View의 위치를 정의하려면 View의 가로 및 세로 제약조건을 각각 하나 이상 추가해야 합니다.

 - layout_constraint A to B of : 요소의 A를 대상 요소 B 에 맞춘다.

 - layout_constraint ... bias : vertical 또는 horizontal 방향으로 치우침 정도를 설정한다.

 - id 속성 값 : Constraint를 받기 위해서는 요소에 id 값이 설정되어 있어야 한다.

 - baseline to A to B : baseline에 맞춘다

 

3. EditText

 - TextView를 상속받은 요소 (TextView 기능을 모두 사용가능하다)

 - 사용자의 입력값을 받을 수 있다

 - inputType : 입력받을 값을 한정할 수 있다

 - android:hint : 입력받을 자리에 가이드 안내말을 작성할 수 있다 (색상은 ColorHint)

 

4. ImageButton

 - New > Vector Asset > 아이콘 지정 후 저장 > drawable 폴더에 저장

 - android:src : 경로로 아이콘 설정

 

<?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=".MainActivity2">

    <EditText
        android:id="@+id/inputEditView"
        android:layout_width="250dp"
        android:layout_height="wrap_content"
        android:gravity="end"
        android:hint="자연수를 입력해주세요"
        android:inputType="number"
        android:textColor="@color/teal_200"
        android:textColorHint="@color/teal_200"
        android:textSize="30sp"
        android:textStyle="italic"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintHorizontal_bias="0.3"
        app:layout_constraintVertical_bias="0.4" />

    <TextView
        android:id="@+id/outputTextView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="100"
        android:gravity="end"
        android:textColor="@color/black"
        android:textSize="30sp"
        android:layout_marginTop="30dp"
        app:layout_constraintEnd_toEndOf="@+id/inputEditView"
        app:layout_constraintStart_toStartOf="@+id/inputEditView"
        app:layout_constraintTop_toBottomOf="@+id/inputEditView" />

    <TextView
        android:id="@+id/inputUnitTextView"
        android:text="cm"
        android:textSize="20sp"
        app:layout_constraintStart_toEndOf="@+id/inputEditView"
        android:layout_width="wrap_content"
        android:layout_marginStart="16dp"
        app:layout_constraintBaseline_toBaselineOf="@id/inputEditView"
        app:layout_constraintTop_toTopOf="@id/inputEditView"
        android:layout_height="wrap_content"/>

    <TextView
        android:id="@+id/outputUnitTextView"
        android:text="m"
        app:layout_constraintStart_toEndOf="@id/outputTextView"
        app:layout_constraintBaseline_toBaselineOf="@id/outputTextView"
        android:textSize="20sp"
        android:layout_marginStart="16dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="@id/inputEditView"
        app:layout_constraintBottom_toBottomOf="@id/outputTextView"
        app:layout_constraintStart_toEndOf="@id/inputUnitTextView"
        android:layout_marginStart="16dp"
        android:src="@drawable/ic_baseline_360_24"
        />
    
</androidx.constraintlayout.widget.ConstraintLayout>

 

5. ViewBinding

 - findViewById를 대체가능

 - Gradle > android 이하 수준 > viewBinding 사용 코드 추가

// build.gradle
viewBinding{
    enabled = true
}

- Activity 파일에 binding 추가

class MainActivity2 : AppCompatActivity() {
    private lateinit var binding: ActivityMain2Binding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMain2Binding.inflate(layoutInflater)
        val view = binding.root
        setContentView(view)

- lateinit : 선언을 추후에 할 것을 알림 (타입은 반드시 선언해줘야 함)

- 한 프로젝트 내에서 id값이 중복될 경우 findViewById를 사용 시에 문제가 됨

- ViewBinding : findViewById의 기능을 대체 할 수 있고, 여러 Id 값을 유용하게 사용가능

- not() or ! : 반대값 지정

package com.example.androidup

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.util.Log
import android.widget.TextView
import androidx.core.widget.addTextChangedListener
import com.example.androidup.databinding.ActivityMain2Binding
import java.lang.NumberFormatException

class MainActivity2 : AppCompatActivity() {
    private lateinit var binding: ActivityMain2Binding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMain2Binding.inflate(layoutInflater)
        val view = binding.root
        setContentView(view)

        val outputTextView = binding.outputTextView
        val outputUnitTextView = binding.outputUnitTextView
        val inputEditText = binding.inputEditView
        val inputUintTextView = binding.inputUnitTextView
        val swapImageButton = binding.swapImageButton

        var inputNumber : Int = 0
        var cmToM = true

        inputEditText.addTextChangedListener{ text ->
            inputNumber = if(text.isNullOrEmpty()) {
                0
            } else {
                text.toString().toInt()
            }

            var outputNumber = inputNumber.times(0.01)
            if(cmToM) {
                outputTextView.text = inputNumber.times(0.01).toString()
            } else {
                outputTextView.text = inputNumber.times(100).toString()
            }
            outputTextView.text = outputNumber.toString()
        }
        swapImageButton.setOnClickListener{
            cmToM = cmToM.not()
            if(cmToM) {
                inputUintTextView.text = "cm"
                outputUnitTextView.text = "m"
                outputTextView.text = inputNumber.times(0.01).toString()
            } else {
                inputUintTextView.text = "m"
                outputUnitTextView.text = "cm"
                outputTextView.text = inputNumber.times(100).toString()
            }
        }
    }
}

 

 

FastCampus 강의 : https://fastcampus.co.kr/dev_online_androidappfinal

35개 프로젝트로 배우는 Android 앱 개발 feat. Jetpack Compose 초격차 패키지 Online. | 패스트캠퍼스