Cách tạo phân trang văn bản (pagination text) trong Android bằng Kotlin

Ví dụ này minh họa cách tạo phân trang văn bản trong Android sử dụng Kotlin.

Bước 1: Tạo dự án mới

Trong Android Studio, chọn File → New Project và điền đầy đủ thông tin để tạo dự án mới.

Bước 2: Cấu hình layout chính (activity_main.xml)

Thêm mã sau vào res/layout/activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="16dp"
    android:paddingTop="16dp"
    android:paddingRight="16dp"
    android:paddingBottom="16dp">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <Button
            android:id="@+id/buttonBack"
            style="?android:attr/buttonBarButtonStyle"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@android:color/transparent" />
        <Button
            android:id="@+id/buttonForward"
            style="?android:attr/buttonBarButtonStyle"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@android:color/transparent" />
    </LinearLayout>
    <TextView
        android:id="@+id/tv"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</RelativeLayout>

Bước 3: Viết mã MainActivity.kt

Thêm mã sau vào src/MainActivity.kt:

import android.graphics.Color
import android.graphics.Typeface
import android.os.Bundle
import android.text.Html
import android.text.Spannable
import android.text.SpannableString
import android.text.TextUtils
import android.text.style.ForegroundColorSpan
import android.text.style.RelativeSizeSpan
import android.text.style.StyleSpan
import android.view.ViewTreeObserver
import android.widget.Button
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {
    lateinit var buttonBack: Button
    lateinit var buttonForward: Button
    private lateinit var textView: TextView
    private var pagination: Pagination? = null
    private lateinit var charSequence: CharSequence
    private var currentIndex = 0
    
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        title = "KotlinApp"
        
        buttonBack = findViewById(R.id.buttonBack)
        buttonForward = findViewById(R.id.buttonForward)
        textView = findViewById(R.id.tv)
        
        val htmlString = Html.fromHtml(getString(R.string.html_string))
        val spanString = SpannableString(getString(R.string.long_string))
        
        spanString.setSpan(ForegroundColorSpan(Color.BLUE), 0, 24, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
        spanString.setSpan(RelativeSizeSpan(2f), 0, 24, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
        spanString.setSpan(StyleSpan(Typeface.MONOSPACE.style), 0, 24, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
        spanString.setSpan(ForegroundColorSpan(Color.BLUE), 536, spanString.length, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
        spanString.setSpan(RelativeSizeSpan(2f), 536, spanString.length, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
        spanString.setSpan(StyleSpan(Typeface.MONOSPACE.style), 536, spanString.length, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
        
        charSequence = TextUtils.concat(htmlString, spanString)
        
        textView.viewTreeObserver.addOnGlobalLayoutListener(object : ViewTreeObserver.OnGlobalLayoutListener {
            override fun onGlobalLayout() {
                textView.viewTreeObserver.removeOnGlobalLayoutListener(this)
                pagination = Pagination(
                    charSequence, textView.width,
                    textView.height, textView.paint,
                    textView.lineSpacingMultiplier,
                    textView.lineSpacingExtra,
                    textView.includeFontPadding
                )
                update()
            }
        })
        
        buttonBack.setOnClickListener {
            currentIndex = if (currentIndex > 0) currentIndex - 1 else 0
            update()
        }
        
        buttonForward.setOnClickListener {
            currentIndex = if (currentIndex < pagination!!.size() - 1) currentIndex + 1 else pagination!!.size() - 1
            update()
        }
    }
    
    private fun update() {
        val text = pagination!![currentIndex]
        if (text != null) textView.text = text
    }
}

Bước 4: Tạo lớp Pagination.kt

Tạo một class Kotlin mới tên Pagination để xử lý logic chia trang văn bản. (Mã nguồn gốc bị trùng lặp với MainActivity, cần tách riêng lớp Pagination xử lý đo lường và cắt văn bản theo kích thước TextView).

Bước 5: Cấu hình AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="com.example.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>

Chạy ứng dụng

Kết nối thiết bị Android thực với máy tính. Từ Android Studio, mở file activity và nhấn biểu tượng Run trên thanh công cụ. Chọn thiết bị di động và kiểm tra màn hình hiển thị.