Computer >> 컴퓨터 >  >> 프로그래밍 >> Android

Kotlin으로 Android에서 문자열 아래 첨자·위 첨자 적용하기

개요

이 튜토리얼에서는 Kotlin을 사용해 Android 앱의 문자열에 아래 첨자(Subscript)와 위 첨자(Superscript)를 적용하는 방법을 단계별로 살펴봅니다. H₂O 같은 화학식이나 X² 같은 거듭제곱 표기를 TextView에 출력해야 할 때 유용한 기능으로, SpannableStringBuilder와 SubscriptSpan, SuperscriptSpan을 조합해 손쉽게 구현할 수 있습니다.

1단계 — 새 프로젝트 생성

Android Studio에서 File → New Project 메뉴로 이동한 뒤, 새 프로젝트 생성에 필요한 모든 항목을 입력하여 프로젝트를 만듭니다.

2단계 — 레이아웃 작성(activity_main.xml)

res/layout/activity_main.xml 파일에 아래 코드를 추가합니다. 화면 상단에는 타이틀용 TextView를, 중앙에는 첨자 효과가 적용될 TextView를 배치했습니다.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="8dp"
    tools:context=".MainActivity">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="50dp"
        android:text="Tutorials Point"
        android:textAlignment="center"
        android:textColor="@android:color/holo_green_dark"
        android:textSize="32sp"
        android:textStyle="bold" />
    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:fontFamily="sans-serif-condensed"
        android:textAlignment="center"
        android:textColor="@android:color/background_dark"
        android:textSize="36sp"
        android:textStyle="bold" />
</RelativeLayout>

3단계 — MainActivity.kt 코드 작성

src/MainActivity.kt 파일에 아래 코드를 추가합니다. 이 코드는 원본 문자열을 SpannableStringBuilder로 감싼 뒤, "2"에는 SubscriptSpan(아래 첨자)을, "5"에는 SuperscriptSpan(위 첨자)을 적용합니다. 이어서 RelativeSizeSpan으로 해당 글자의 크기를 0.5배로 줄여 실제 첨자처럼 자연스럽게 보이도록 마무리합니다.

import android.os.Bundle
import android.text.SpannableStringBuilder
import android.text.Spanned
import android.text.style.RelativeSizeSpan
import android.text.style.SubscriptSpan
import android.text.style.SuperscriptSpan
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {
    lateinit var textView: TextView
    private lateinit var strText: String
    lateinit var spannableStringBuilder: SpannableStringBuilder
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        title = "KotlinApp"
        textView = findViewById(R.id.textView)
        strText = "Test text to show SubscriptSpan X2 and SuperscriptSpan Y5 example."
        spannableStringBuilder = SpannableStringBuilder(strText)
        val subscriptSpan = SubscriptSpan()
        val superscriptSpan = SuperscriptSpan()
        spannableStringBuilder.setSpan(subscriptSpan, strText.indexOf("2"),
        strText.indexOf("2") + "2".length,
        Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
        spannableStringBuilder.setSpan(superscriptSpan, strText.indexOf("5"), strText.indexOf("5") +
        "5".length,
        Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
        showSmallSizeText("2")
        showSmallSizeText("5")
        textView.text = spannableStringBuilder
    }
    private fun showSmallSizeText(string: String) {
        val relativeSizeSpan = RelativeSizeSpan(.5f)
        spannableStringBuilder.setSpan(relativeSizeSpan, strText.indexOf(string),
        strText.indexOf(string) + string.length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
    }
}

주요 클래스 정리

  • SubscriptSpan — 지정한 범위의 텍스트를 아래 첨자 위치로 내려 표시합니다.
  • SuperscriptSpan — 지정한 범위의 텍스트를 위 첨자 위치로 올려 표시합니다.
  • RelativeSizeSpan(0.5f) — 기본 글자 크기의 50%로 텍스트를 축소해 첨자다운 시각적 효과를 완성합니다.
  • SPAN_EXCLUSIVE_EXCLUSIVE — span 범위의 시작점과 끝점에 새로 삽입되는 텍스트로 스타일이 확장되지 않도록 제한하는 플래그입니다.

4단계 — AndroidManifest.xml 설정

androidManifest.xml 파일에 아래 코드를 추가합니다.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android" package="app.com.q11">
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

앱 실행 및 결과 확인

이제 애플리케이션을 실행해 보겠습니다. 실제 Android 기기가 컴퓨터에 연결되어 있다고 가정합니다. Android Studio에서 프로젝트의 액티비티 파일 중 하나를 연 뒤, 툴바에서 실행(Run) 아이콘을 클릭하세요. 기기 목록에서 본인의 모바일 기기를 선택하면, 기기 화면에 아래와 같이 아래 첨자와 위 첨자가 적용된 최종 결과가 표시됩니다.

Kotlin으로 Android에서 문자열 아래 첨자·위 첨자 적용하기

Kotlin으로 Android에서 문자열 아래 첨자·위 첨자 적용하기