[안드로이드 스튜디오]텍스트뷰 기본 사용법 – 문자 정렬, 글자 색, 크기, 내용 변경에 대해[TextView][1]

반응형

    메인이미지
    메인이미지

    안녕하세요.

    오늘은 코틀린을 황용한 안드로이드 프로그래밍 강좌를 하기 위해서 이렇게 찾아 뵙게 되었습니다.

    본래라면 안드로이드 스튜디오를 설치하고 프로젝트를 생성하는 방법 먼저 올렸겠지만 이번에는 그냥 바로 프로그래밍 방법에 대해서 설명 드리려고 합니다.

     

    오늘 설명드릴 것은 텍스트뷰에 대해서입니다.

    텍스트 뷰는 empty project로 프로젝트를 만들어도 기본적으로 생성되는 만큼 앱을 만들 때 가장 기본적이면서 많이 사용하게 될 위젯입니다.

    이름에 걸맞게 UI에 텍스트를 표시하는 일을 담당하고 있죠.

    사용법도 다른 위젯 들에 비해서 간단한 편이고 따로 무언가를 설정해주지 않아도 text 속성에 문자열을 지정해주는 것만으로도 사용할 수 있어요.

    그럼 바로 어떻게 만들 수 있는지부터 알아보도로 합시다.

    (이 강의는 코틀린을 기본언어로 작성되었습니다.)


    1. 텍스트뷰 사용법


    텍스트 뷰는 프로젝트의 레이아웃의 xml 파일에 텍스트 뷰를 추가하여 사용할 수 있습니다.

    팔레트에서 끌어와서 사용할 수도 있고 그냥 타이핑해서 추가할 수도 있죠.

    파레트를 통한 텍스트뷰 설정
    파레트를 이용한 텍스트뷰 추가

    이렇게 추가하면 xml파일에 자동으로 입력되니 타이핑으로 하는 것과 차이는 없습니다.

    이건 따로 예제로 보여드리지는 않겠습니다.

     

    원한다면 레이아웃에 아이디를 부여하고 그 아이디에 addview를 이용해서 프로그래밍으로 추가할 수도 있습니다.

    이 경우는 xml파일에 입력되지 않습니다.

     

    텍스트뷰를 xml에 추가한 뒤에 android:text 속성으로 텍스트를 설정할 수 있고 프로그래밍으로 텍스트뷰를 불러와서 텍스트를 설정할 수도 있습니다.

     

    한번 설정한 텍스트를 프로그래밍을 통해 바꿀 수 있기 때문에 사용자의 움직임에 따른 수동적인 텍스트 변경이나 위젯 혼자서 계속해서 바뀌는 능동적인 텍스트 변경이 가능합니다.

     

    아래는 xml을 이용한 생성, 프로그래밍을 통한 생성, 그리고 xml에서 생성한 후 프로그래밍으로 텍스트를 변경 등 세개의 방식으로 만든 텍스트 뷰입니다.

    세개의 방식을 통한 텍스트뷰
    세개의 방식으로 생성한 텍스트뷰들

    위 세개의 코딩 방식은 아래에서 볼 수 있습니다.

     

    ---XML에 직접 타이핑하여 추가한 경우---

    activity_main.xml
    <?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:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
    
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Hello World!"
            android:textSize="30sp" />
        
    </LinearLayout>

    위의 경우에는 xml의 레이아웃에 직접 타이핑하고 android:text  속성에 텍스트를 입력하여 만든 것입니다.

    ---프로그래밍을 통해 추가한 경우---

    activity_main.xml
    <?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:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/LinearLayout"
        tools:context=".MainActivity">
    </LinearLayout>
    MainActivity.kt
    package com.view.textview
    
    import androidx.appcompat.app.AppCompatActivity
    import android.os.Bundle
    import android.widget.TextView//텍스트뷰 라이브러리를 가져와야 TextView 객체를 사용할 수 있습니다.
    import kotlinx.android.synthetic.main.activity_main.*//따로 변수로 불러오지 않고 라이브러리처럼 가져와서 사용할 수 있습니다.
    
    class MainActivity : AppCompatActivity() {
    
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContentView(R.layout.activity_main)
            val textView : TextView = TextView(this)//텍스트뷰를 변수로 생성
            textView.text = "Hello, World!!(액티비티 프로그래밍으로 생성)"//텍스트 내용을 생성
            LinearLayout.addView(textView)//레이아웃에 위젯을 추가
        }
    }

    ---XML에 직접 타이핑하여 추가한 경우---

    activity_main.xml
    <TextView
        android:id="@+id/textView" <!--텍스트뷰 위젯에 아이디를 추가-->
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        />
    MainActivity.kt
    val xmlTextView : TextView = findViewById(R.id.textView)//텍스트뷰를 변수로 불러옴(생성하는 것과는 다름)
    xmlTextView.text = "Hello, World!!(xml생성된 텍스트뷰에 프로그래밍으로 글자 변경)"//불러온 텍스트뷰에 내용 변경

    이 경우는 xml에 텍스트뷰 위젯을 추가한 뒤 kt파일에서 불러온 후 text 속성을 설정해서 내용을 넣어 준 것입니다.

    다음은 텍스트 뷰에서 가장 많이 사용하는 속성들에 대해서 알아보도록 하죠.


    2. 텍스트뷰 속성 - 글자 크기, 글자 색, 정렬 위치


    텍스트뷰를 사용할 때 가장 많이 사용하는 속성은 텍스트, 글자 크기, 글자 색 등이라고 생각합니다.

    배경설정에 대해선 나중에 layoutdrawable을 설명드릴 때 자세히 알려드릴게요..

    내용 설정에 대해선 위에서 생성방법과 같이 알려드렸으니 이번에는 글자 정렬에 대해서 설명드리겠습니다.

    ---2.1 Gravity/textAlignment 속성을 통한 정렬 설정---

    텍스트뷰 속성에 gravity 혹은 textAlinement 속성을 입력하여 사용할 수 있습니다.

    Gravity

    정렬 위치

    textAlignment

    정렬 위치

    start

    상단 왼쪽 정렬

    textStart

    왼쪽 정렬

    center_horizontal

    상단 중앙 정렬

    center

    중앙 정렬

    end

    상단 오른쪽 정렬

    textEnd

    오른쪽 정렬

    center_vertical

    중단 왼쪽 정렬

    viewStart

    뷰의 왼쪽에 정렬

    center

    중단 중앙 정렬

    viewEnd

    뷰의 오른쪽에 정렬

    center|right

    중단 오른쪽 정렬

     

     

    bottom

    하단 왼쪽 정렬

     

     

    bottom|center

    하단 중앙 정렬

     

     

    bottom|right

    하단 오른쪽 정렬

     

     

    이 표처럼 gravity 속성은 상하단부터 좌우 정렬 까지 다양한 것을 설정할 수 있습니다.

    Textalignment 속성은 좌우 정렬까지만 설정할 수 있죠.

    그래서 저는 gravity 속성을 조금 더 많이 사용하는 것 같네요.

    아래는 사용 예제입니다.

    activity_main.xml
    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="원하는 정렬 형태"
        android:textAlignment="원하는 정렬 형태"
        />

    표에서 알려드린 속성 값을 속성 입력하면 됩니다.

    다음 설명드릴 것은 글자 크기 설정에 대해서입니다.

    ---2.2 textSize 속성을 통한 글자 크기 설정---

    텍스트 사이즈는 textSize 속성을 통해서 설정할 수 있습니다.

    텍스트 사이즈 설정은 매우 다양한데 총 6개가 있습니다.

    단위

    dp

    px

    sp

    in

    mm

    pt

    가장 많이 사용하게 될 sp/dp/px에 대해서 간단히 설명드리자면

     

    px는 디스플레이 스크린의 픽셀 한 개 단위를 그대로 가지는 값입니다.

    너무 유명해서 따로 설명 드릴 것은 없는 것 같습니다.

    하지만 요즘에는 px단위를 많이 사용하지 않는데 화면 해상도가 스마트폰마다 다르기 때문에 픽셀로 크기를 설정해 버리면 기기마다 보이는 글자의 크기가 달라져버립니다.

     

    하지만 dp의 경우 해상도가 달라도 같은 크기로 보이게  끔 만들어 주죠.

    Sp는 사용자가 시스템상에서 설정한 크기를 반영하여 글자크기를 설정해 줍니다.

    때문에 사용자가 원하는 크기로 글자가 표시될 수 있겠죠.

    셋의 차이는 나중에 자세하게 설명해드리겠습니다.

    activity_main.xml
    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        androdi:textSize="30dp/sp/px"
        />

     

    다음은 글자색 설정입니다.

    ---2.3 textColor 속성을 통한 글자색 설정---

    글자 색은 textColor 속성을 이용해서 설정할 수 있습니다.

    16진수 색상코드를 이용해서 설정할 수 있고 setTextColor을 이용해서 설정할 수 있는데 직접 보여드리죠.

    xml을 통한 설정 방법

    activity_main.xml
    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        androdi:textColor="#ff0000"
        />

    프로그래밍을 통한 글자색 설정

    MainActivity.kt
    val xmlTextView : TextView = findViewById(R.id.textView)
    xmlTextView.setTextColor(Color.parseColor("#000000"))
    //텍스트뷰에 색상 설정, Color의 parseColor을 통해 16진수 색상 코드를 변환

    글자색 변경
    글자 색 변경


    이렇게 오늘은 간단한 textView 사용법에 대해서 알아 봤습니다.

    이정도만 알아도 일반적인 앱을 만드는 데는 문제가 없어요.\

    하지만 다양한 속성설정을 통해서 여러가지 기능을 할 수 있게 만들 수도 있기 때문에 다음에 또 텍스트 뷰에 관한 내용으로 찾아 뵙겠습니다.

     

    이 글의 저작권은 전적으로 작성자인 P_Emblem에게 있으며
    허락없는 사용을 금합니다.

    댓글

    Designed by JB FACTORY