초니로그

전체 코드 : https://github.com/ryr0121/AndroidPractice/tree/main/unitConversionApp

구현 결과

주요 기능

• cm <-> m 간의 값 변환 (초기 상태 : cm단위의 값 입력 시, m의 값으로 변환)
• 버튼을 통한 변환 단위 교체

ConstraintLayout으로 view 배치

ConstraintLayout은 상대적 제약조건을 통해 배치가 이루어지므로 렌더링 속도 향상 등의 이점 존재

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

   	...

</androidx.constraintlayout.widget.ConstraintLayout>

구현을 위해 사용한 컴포넌트는 아래와 같음

각 컴포넌트들에 대해 layout_..._...의 속성값 지정을 통해 상대적인 제약조건을 추가하여 UI 배치 진행

• EditText : 변환시킬 정수값을 입력받기 위한 컴포넌트
  
  • hint : 입력값에 대한 정보를 나타내는 텍스트
  • maxLength : 입력값의 최대 길이 지정
  • inputType : 입력값의 타입 지정 (number : 정수 / numberDecimal : 소수를 포함한 숫자)

<EditText
        android:id="@+id/inputEditText"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:gravity="end"
        android:hint="자연수를 입력해주세요"
        android:inputType="numberDecimal"
        android:maxLength="7"
        android:textColorHint="@color/purple"
        android:textSize="20sp"
        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_constraintVertical_bias="0.4"
        app:layout_constraintHorizontal_bias="0.2" />

• TextView : 단위가 변환된 값 / 입,출력 값의 단위 표시를 위한 컴포넌트

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

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

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

• ImageButton : 단위 교체를 위한 컴포넌트
  • src 속성값 지정을 통해 버튼에 사용할 이미지 선택

<ImageButton
        android:id="@+id/swapImgButton"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@drawable/baseline_swap_vert_24"
        app:layout_constraintStart_toEndOf="@id/inputUnitTextView"
        app:layout_constraintTop_toTopOf="@id/inputEditText"
        app:layout_constraintBottom_toBottomOf="@id/outputTextView"
        android:layout_marginStart="16dp" />

MainActivity 내에서 ViewBinding을 통해 findById 메소드 사용의 단점을 보완

(예. 중복된 ID 값으로 인한 문제, ID값 분실, 지정된 xml에서의 뷰 포함 여부 확인 어려움 등)

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

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

        val outputTextView = binding.outputTextView
        val outputUnitTextView = binding.outputUnitTextView
        val inputEditText = binding.inputEditText
        val inputUnitTextView = binding.inputUnitTextView
        val swapImgButton = binding.swapImgButton

        ...
    }

    ...
}

EditText의 addTextChangedListener 메소드를 통해 입력값의 변화가 감지될 때마다 관련된 이벤트 처리 가능

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

    if (cmToM) {
        outputTextView.text = inputNumber.times(0.01).toString()
    } else {
        outputTextView.text = inputNumber.times(100).toString()
    }
}

onSaveInstanceState 메소드와 onRestoreInstanceState 메소드를 통해, 단위 변환 상태에 대한 '임시 UI 상태 저장 및 복원' 가능
(공식 문서 : https://developer.android.com/guide/components/activities/activity-lifecycle?hl=ko)

override fun onSaveInstanceState(outState: Bundle, outPersistentState: PersistableBundle) {
    outState.putBoolean("cmToM", cmToM)

    super.onSaveInstanceState(outState, outPersistentState)
}

override fun onRestoreInstanceState(savedInstanceState: Bundle) {
    cmToM = savedInstanceState.getBoolean("cmToM")
    binding.inputUnitTextView.text = if(cmToM) "cm" else "m"
    binding.outputUnitTextView.text = if(cmToM) "m" else "cm"
    
    super.onRestoreInstanceState(savedInstanceState)
}

전체 코드 : https://github.com/ryr0121/AndroidPractice/tree/main/countingApp

구현결과

주요 기능

• 화면 상단에 카운팅된 숫자 표시
• '초기화' 버튼으로 숫자를 0으로 변경
• '+' 버튼으로 숫자를 1씩 증가

xml을 통해 UI 구현을 진행했고, LinearLayout을 통해 view를 배치함

LinearLayout은 배치 방향(orientation)의 값에 따라 세로 방향(vertical) 혹은 가로 방향(horizontal)으로 view 배치가 이루어짐

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    ...


</LinearLayout>

포함시킨 view는 TextView와 Button임

여러 디바이스에서 동등한 크기로 표시하기 위해 고안된 단위인 "밀도 독립적 픽셀(DP)" 사용

(픽셀 단위를 사용할 경우 디바이스 별로 전체 픽셀이 다르기 때문에 같은 값이 서로 다른 크기로 표현될 수 있기 때문)

id값 지정을 통해 이후 activity에서 버튼 이벤트 발생 시 변경된 숫자값을 표시하는 것이 가능해짐

<TextView
        android:id="@+id/numberTextView"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:text="0"
        android:textSize="100sp"
        android:textColor="@color/blue"
        android:textStyle="bold|italic"
        android:gravity="center"
        />

'초기화' 버튼과 '+' 버튼을 수평 방향으로 나란히 배치하기 위해 orientation이 horizontal인 LinearLayout을 사용함

id값 지정을 통해 이후 activity에서 사용자의 버튼 클릭 이벤트 처리가 가능해짐

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:id="@+id/resetButton"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="초기화"
            android:layout_weight="1"
            android:layout_marginTop="16dp"
            android:layout_marginBottom="16dp"
            android:layout_marginStart="16dp"
            />
        <Button
            android:id="@+id/plusButton"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="+"
            android:layout_weight="1"
            android:layout_margin="16dp"
            />
    </LinearLayout>

MainActivity 내에서 카운팅 현황을 나타내는 number 변수 선언 및 활용

findViewById 메소드를 활용하여 지정된 id의 view를 찾아와 활용

button의 setOnClickListener를 람다로 정의하여 사용자가 버튼 클릭 시 일어날 내용을 작성 (숫자를 0 혹은 +1 하여 변경)

class MainActivity : AppCompatActivity() {
    private var number = 0

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val numberTextView = findViewById<TextView>(R.id.numberTextView)
        val resetButton = findViewById<Button>(R.id.resetButton)
        val plusButton = findViewById<Button>(R.id.plusButton)

        resetButton.setOnClickListener {
            number = 0
            numberTextView.text = number.toString()
        }
        plusButton.setOnClickListener {
            number += 1
            numberTextView.text = number.toString()
        }
    }
}

아요랑 다른데 비슷해,,,비슷한데 다른 늒김,,,,,암튼 첫 구현 도전 성공,,