[Android Kotlin] TextView를 사용하여 Text 출력하기

안녕하세요. 뉴핀입니다.

지난 시간까지는 Android Studio에서 Flutter로 개발을 진행해왔었습니다.
Flutter로 Android 네이티브 호출에 대해 글을 작성하면서 Flutter를 진행하기 전에 Kotlin부터 하는 것이 맞다고 생각하여
앞으로는 Kotlin을 사용하여 Android 네이티브 개발에 대해 다뤄볼 예정입니다.

코틀린(Kotlin)은 JVM에서 동작하는 크로스 플랫폼 오픈소스 프로그래밍 언어입니다. 2011년 7월 JetBrains사에서 공개되었는데, 2019년 5월 7일 이후로 구글의 안드로이드 앱 개발에서 선호하는 언어가 되었다고 합니다.

코틀린에 대한 자세한 정보는 아래 링크를 통해 확인하실 수 있습니다.

Kotlin Programming Language

오늘은 코틀린 UI에서 제일 기초라고 할 수 있는 TextView에 대해 진행하도록 하겠습니다.
개발 환경에 대한 부분은 넘어가도록 하겠습니다.

MainActivity.kt

package com.example.blogexample

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle

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

activity_main.xml

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

UI를 다루는 작업은 MainActivity에서 코드를 입력하여 적용하는 방식과 xml 파일에서 바로 적용을 시키는 방식이 존재합니다.

처음 프로젝트를 생성하게 되면 MainActivity.kt와 activity_main.xml이 생성됩니다.
UI를 다루고 있는 xml 파일을 간략하게 보면 "Hello World!"가 적힌 TextView가 구현되어 있습니다.

우선 xml 파일에 적혀있는 내용을 보면

ConstraintLayout은 xml을 감싸고 있는 레이아웃으로 해당 레이아웃 안에서 TextView나 Button 등을 사용할 수 있습니다.

TextView는 ConstraintLayout 안에서 사용된 텍스트를 보여주기 위한 것으로 사이즈나 텍스트, 위치 등이 기본으로 세팅되어 있습니다.

TextView 안에 적힌 내용을 좀 더 자세히 보도록 하겠습니다.

android:layout_width="wrap_content"

 

android:layout_width="wrap_content"는 해당 TextView의 폭을 나타내며 wrap_content는 텍스트의 폭이 딱 맞게 떨어지도록 사이즈를 조절해주는 역할을 합니다.

android:layout_height="wrap_content"

android:layout_height="wrap_content"는 해당 TextView의 높이를 나타내며 마찬가지로 wrap_content는 텍스트의 높이가 딱 맞게 떨어지도록 사이즈를 조절해주는 역할을 합니다.

android:text="Hello World!"

android:text="Hello World!"는 해당 TextView에 담을 텍스트 내용을 나타내며 "Hello World!" 안에 들어갈 내용을 자유롭게 변경할 수 있습니다.

app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"

app:layout_constraint 4가지는 주로 해당 TextView의 위치를 ConstraintLayout 기준으로 어디에 둘 지 설정하는 것으로
Top, Bottom, Left(Start), Right(End)가 있으며 parent는 TextView를 감싸고 있는 레이아웃을 의미합니다.

xml에서 TextView에 있는 text 속성에 대해 수정하는 방법

android:textColor="#000000"

텍스트 색상 변경 android:textColor="" 해당 값에는 RGB 코드를 헥스코드로 변환하여 입력하거나 res > values > colors.xml 에서 색상을 추가하여 입력할 수 있습니다.

android:textSize="20dp"

텍스트 크기 변경 android:textSize="" 해당 값에는 sp 또는 dp 단위의 크기를 입력하여 적용할 수 있습니다. dp는 픽셀 단위로 사용되기 때문에 디바이스가 변경되더라도 해당 사이즈가 고정된 값을 유지합니다. 따라서 dp 단위로 사용하는 것을 추천합니다.

android:textStyle="bold"

텍스트 굵기 변경 android:textStyle="" 해당 값에는 bold(굵게), italic(기울임 꼴), normal(일반)이 존재하며 사용하고 싶은 상황에 맞게 입력하여 사용하면 됩니다.

android:textAlignment="center"

텍스트 정렬 변경 android:txtAlignment="" 해당 값에는 center, textStart, textEnd 등 해당 텍스트의 전체 너비 중 정렬할 곳을 선택할 수 있습니다. width, height가 wrap_content로 설정되어 있을 때는 전체 너비가 텍스트와 딱 맞게 떨어지기 때문에 변동이 되지 않습니다.

xml에서 TextView 위치를 수정하는 방법

parent가 ConstraintLayout일 경우 해당 예제에 사용되었던 app:layout_constraintTop_toTopOf 등의 설정이 가능합니다.
예제에서는 Top, Bottom, Left, Right 모두가 parent로 지정이 되어 있기 때문에 화면의 중앙에 TextView가 제공됩니다.

해당 TextView의 위치를 수정하기 위해서는 margin을 주는 경우와, ConstraintLayout 안에 감싸져 있는 경우 bias를 이용하여 수정할 수 있습니다.

android:layout_marginTop="100dp"
android:layout_marginStart="100dp"

margin을 이용하여 위치를 수정하는 경우: android:layout_margin 뒤에 Top, Bottom, Left(Start), Right(End)를 붙여서 각 부위별 공간을 띄울 수 있습니다.

app:layout_constraintVertical_bias="0"
app:layout_constraintHorizontal_bias="0"

bias를 이용하여 위치를 수정하는 경우: app:layout_constraintVertical_bias(수직)와 app:layout_constraintHorizontal_bias(수직)가 있으며 0, 1 또는 0~1의 소수점 값을 이용하여 이동할 수 있습니다.

예를 들어 TextView를 parent에서 수직 상단에 위치하고 싶은 경우 Vertical_bias를 0을 주면 해당 TextView를 감싸고 있는 ConstraintLayout의 최상단에 위치하게 됩니다. 수평의 경우 Horizontal_bias를 0을 주면 해당 TextView를 감싸고 있는 ConstraintLayout의 가장 좌측에 위치하게 됩니다.

또한 TextView에 id값을 주어 다른 Button이나 View 등의 위치를 관리할 때, Activity에서 해당 TextView를 수정할 때 사용할 수 있습니다.

예를 들어 TextView 안에 android:id="@+id/tv_title"을 입력하게 되면 해당 TextView는 tv_title이란 id를 갖게 되며 Activity에서 호출을 할 수 있고, 다른 View에서 정렬할 때 유용하게 사용할 수 있습니다.

최종적으로 ConstraintLayout 안에서 만든 TextView가 Vertical, Horizontal bias 값을 0으로 잡아 좌측 상단에 위치하고,  Top, Start에 각각 margin을 100dp씩 입력하여 마진을 잡고, 텍스트 사이즈와 굵기, 색상 등을 수정하는 방법을 모두 마쳤습니다.

오늘은 xml 파일 내에서 TextView의 속성과 정렬을 하는 방법에 대해 알아보았습니다. 다음 시간에는 해당 TextView를 Activity에서 호출하여 변경하는 방법에 대해서 알아보는 시간을 가지도록 하겠습니다.

감사합니다.