스톱워치(StopWatch)_2 / [Android-Kotlin]

참고 교재 : Joyce의 안드로이드 앱 프로그래밍 - 홍정아

 

전체 코드가 궁금하다면 아래 링크를 참고하시길 바랍니다.

 

원본 코드 : Joyce의 안드로이드 앱 프로그래밍 - 홍정아

현재 블로그 작성 코드 :Gnow

---

이번에는 코틀린을 이용한 스톱워치 만들기 2편입니다.

 

3. 텍스트뷰 추가

[activity_main.xml] 에 3개의 TextView를 만듭니다.

텍스트뷰 3개 생성 00:00.00 으로 쓰일 예정, Constraintlayout에서 제약을 추가하지 않아 빨간줄이 생긴 모습

 

 

3. 텍스트뷰 위치 조정 및 제약 추가

 

마우스를 통해 위치를 이동하여 수직 방향 제약을 추가할 수 있다.

 

‘분 텍스트뷰’를 일직선 위에 놓이도록 베이스라인을 이용해 제약 추가
텍스트뷰에 마우스 우클릭 → show Baseline 클릭

하단에 생긴 바를 ‘초 텍스트뷰’ 막대 모양으로 드래그

분 과 초 텍스트뷰가 일직선 상에 놓이게 되었다. 밀리초도 똑같이 한다.

 

만약 베이스라인을 사용하지 않고 정렬할 경우 어떻게 될까?

 

위의 이미지의 왼쪽은 그냥 정렬한 모습이고 오른쪽은 베이스 라인을 사용한 모습이다.

왼쪽은 초록색 선 (텍스트뷰의 박스) 은 위치가 맞지만 숫자의 위치는 맞지 않다.

오른쪽의 경우 베이스라인을 사용함으로 써 내부 숫자의 위치가 맞다.

 

ctrl 키를 누른 상태에서 세 텍스트뷰 모두 클릭하여 선택 → 우클릭하여 Chains → Create Horizontal Chain 선택

균등한 여백으로 위치하게 된다.

 

떨어져 있는 것이 부자연스러움으로
Chains → Horizontal Chain Style → packed 를 통해 딱 붙일 수 있다.

 

[코드]

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

    <Button
        android:id="@+id/btn_start"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="80dp"
        android:backgroundTint="@color/blue"
        android:padding="20dp"
        android:text="@string/start"
        android:textColor="@color/white"
        android:textSize="16sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <Button
        android:id="@+id/btn_refresh"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="50dp"
        android:backgroundTint="@color/yellow"
        android:padding="20dp"
        android:text="@string/refresh"
        android:textColor="@color/white"
        android:textSize="16sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toTopOf="@+id/btn_start"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:id="@+id/tv_minute"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="00"
        android:textSize="45sp"
        app:layout_constraintBaseline_toBaselineOf="@+id/tv_second"
        app:layout_constraintEnd_toStartOf="@+id/tv_second"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:id="@+id/tv_second"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=":00"
        android:textSize="45sp"
        app:layout_constraintBottom_toTopOf="@+id/btn_refresh"
        app:layout_constraintEnd_toStartOf="@+id/tv_millisecond"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/tv_minute"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv_millisecond"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=".00"
        android:textSize="30sp"
        app:layout_constraintBaseline_toBaselineOf="@+id/tv_second"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/tv_second" />

</androidx.constraintlayout.widget.ConstraintLayout>

---

※ 본 게시글은 'Joyce의 안드로이드 앱 프로그래밍 - 홍정아' 책의 내용과 Android Developers의 공식문서 내용을 참고하여 작성하였습니다.

 

전체 코드가 궁금하다면 아래 링크를 참고하시길 바랍니다.

 

원본 코드 : Joyce의 안드로이드 앱 프로그래밍 - 홍정아

현재 블로그 작성 코드 : Gnow