[안드로이드 코틀린] CountDownTimer 타이머 쉽게 만드는 방법 part1 뷰 바인딩 및 화면 구성

이번 시간에는 뷰 바인딩 설정과 타이머 화면 구성을 만들어 보겠습니다.

---

 목차

1. 실행 화면
2. 뷰 바인딩
3. 메인 화면 activity_main.xml

---

1. 실행 화면

 1-1 설정 화면

1-2 타이머 화면

2. 뷰바인딩

build.gradle(Module:프로젝트명:app)

android 괄호 안에 아래 코드를 넣어주시면 됩니다.

findViewById 없이 뷰 객체 접근하기 위한 설정

  buildFeatures{
        viewBinding = true
    }

 

3. 메인 화면 activity_main.xml

- 설명 -

 1. 큰 틀은 설정 레이아웃과 타이머 레이아웃으로 구성

 2. 설정 레이아웃은 시, 분, 초 입력과 시작 버튼으로 구성

 3. 타이머 레이아웃은 타이머 텍스트와 정지 버튼, 취소 버튼으로 구성

 4. 첫 화면은 설정 레이아웃을 보여주고, 시작 버튼을 누르면 타이머 레이아웃 보여준다.

 5. 타이머 레이아웃은 visibility="gone" 옵션으로 숨김

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <!--  설정 레이아웃 -->
    <LinearLayout
        android:id="@+id/settingLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="100dp"
        android:orientation="vertical">

        <!-- 텍스트 레이아웃 -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="horizontal">

            <TextView
                android:layout_width="100dp"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="시"
                android:textSize="30sp"
                android:textStyle="bold" />

            <TextView
                android:layout_width="100dp"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="분"
                android:textSize="30sp"
                android:textStyle="bold" />

            <TextView
                android:layout_width="100dp"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="초"
                android:textSize="30sp"
                android:textStyle="bold" />
        </LinearLayout>
        <!-- 텍스트 레이아웃 End-->

        <!-- 입력 레이아웃 -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:gravity="center"
            android:orientation="horizontal">

            <EditText
                android:id="@+id/hourEdit"
                android:layout_width="100dp"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:inputType="number"
                android:selectAllOnFocus="true"
                android:text="00"
                android:textSize="25sp" />

            <EditText
                android:id="@+id/minEdit"
                android:layout_width="100dp"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:inputType="number"
                android:selectAllOnFocus="true"
                android:text="00"
                android:textSize="25sp" />

            <EditText
                android:id="@+id/secEdit"
                android:layout_width="100dp"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:inputType="number"
                android:selectAllOnFocus="true"
                android:text="00"
                android:textSize="25sp" />
        </LinearLayout>
        <!-- 입력 레이아웃 End -->

        <Button
            android:id="@+id/startBtn"
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="30dp"
            android:text="시작"
            android:textSize="25sp" />
    </LinearLayout>
    <!--  설정 레이아웃 End -->

    <!-- 타이머 레이아웃 -->
    <LinearLayout
        android:id="@+id/timerLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="100dp"
        android:gravity="center"
        android:orientation="vertical"
        android:visibility="gone">

        <TextView
            android:id="@+id/timerText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="00:00:00"
            android:textSize="50sp" />

        <!-- 버튼 레이아웃 -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="50dp"
            android:gravity="center"
            android:orientation="horizontal">

            <Button
                android:id="@+id/stopBtn"
                android:layout_width="150dp"
                android:layout_height="wrap_content"
                android:text="일시 정지"
                android:textSize="25sp" />

            <Button
                android:id="@+id/cancelBtn"
                android:layout_width="150dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="30dp"
                android:text="취소"
                android:textSize="25sp" />
        </LinearLayout>
    </LinearLayout>
    <!-- 타이머 레이아웃 End -->

</LinearLayout>

2022.10.03 - [안드로이드] - [안드로이드 코틀린] 스톱워치 StopWatch 쉽게 만드는 방법

[안드로이드 코틀린] 스톱워치 StopWatch 쉽게 만드는 방법

2022.09.30 - [안드로이드] - [안드로이드 코틀린] HTTP Glide 이미지 쉽게 보여주는 방법

[안드로이드 코틀린] HTTP Glide 이미지 쉽게 보여주는 방법

2022.09.27 - [안드로이드] - [안드로이드 코틀린] Vibrator 진동 효과 내는 방법

[안드로이드 코틀린] Vibrator 진동 효과 내는 방법