Văn bản và kiểu chữ trong phát triển di động: định nghĩa, công cụ và cách hoạt động

Văn bản trong ứng dụng di động: NSAttributedString trên iOS

NSAttributedString là lớp iOS cơ bản để làm việc với văn bản có định dạng. Nó cho phép áp dụng các thuộc tính cho từng ký tự hoặc phạm vi riêng lẻ: phông chữ qua UIFont, màu sắc qua UIColor, khoảng cách ký tự qua kern và khoảng cách dòng qua NSMutableParagraphStyle. Trong các ứng dụng di động, NSAttributedString được sử dụng ở khắp mọi nơi — từ UILabel đến UITextView phức tạp với hỗ trợ chỉnh sửa.

UIFont và cấu hình phông chữ

UIFont là lớp chính để làm việc với phông chữ trên iOS. Nó hỗ trợ các phông chữ hệ thống, phông chữ tùy chỉnh và Dynamic Type. UIFont(name:size:) tải phông chữ theo tên, UIFont.systemFont(ofSize:weight:) tải phông chữ hệ thống. UIFontDescriptor cho phép sửa đổi phông chữ hiện có: thay đổi kích thước, trọng lượng hoặc thêm ma trận biến đổi. Đối với phông chữ tùy chỉnh, tệp .ttf được thêm vào dự án và đăng ký trong Info.plist dưới khóa Fonts provided by application.

let attributes: [NSAttributedString.Key: Any] = [
    .font: UIFont(name: "HelveticaNeue-Bold", size: 18) as Any,
    .foregroundColor: UIColor.darkGray as Any,
    .kern: 1.5 as Any
]
let attributedString = NSAttributedString(
    string: "Форматированный текст",
    attributes: attributes
)
label.attributedText = attributedString

NSMutableParagraphStyle và định dạng đoạn văn

NSMutableParagraphStyle là phiên bản có thể thay đổi của ParagraphStyle để cấu hình hiển thị đoạn văn. Nó kiểm soát căn chỉnh (alignment), khoảng cách dòng (lineSpacing), thụt đầu dòng (headIndent, tailIndent) và chế độ cắt (lineBreakMode). ParagraphStyle rất quan trọng đối với khả năng đọc của văn bản dài trên thiết bị di động: lineSpacing phù hợp ngăn chặn sự hợp nhất dòng và lineBreakMode ngăn chặn việc cắt từ. Cài đặt paragraphSpacing xác định khoảng cách giữa các đoạn văn.

Văn bản trong ứng dụng di động: SpannableString trên Android

SpannableString là công cụ chính để định dạng văn bản trên Android. Nó hoạt động thông qua cơ chế các đối tượng Span, mỗi đối tượng chịu trách nhiệm về một khía cạnh: StyleSpan cho in đậm hoặc in nghiêng, ForegroundColorSpan cho màu sắc, URLSpan cho liên kết, UnderlineSpan cho gạch chân. SpannableStringBuilder tương đương với NSMutableAttributedString, cho phép xây dựng văn bản từ nhiều đoạn. Hiểu SpannableString là điều cần thiết để tạo giao diện linh hoạt với văn bản có định dạng trong ứng dụng di động.

Typeface và phông chữ tùy chỉnh trên Android

Typeface là lớp để làm việc với phông chữ trên Android. Nó hỗ trợ các phông chữ hệ thống Roboto và Noto, cũng như phông chữ tùy chỉnh. Typeface.createFromResource() tải phông chữ từ res/font/, Typeface.createFromAsset() tải từ thư mục assets. Android 8.0+ hỗ trợ họ phông chữ trong XML, kết hợp nhiều tệp phông chữ thành một tài nguyên duy nhất. Phông chữ tùy chỉnh cho văn bản trong ứng dụng di động trên Android được đặt qua thuộc tính android:fontFamily hoặc theo chương trình bằng setTypeface().

TextMeasurer và đo lường văn bản

TextMeasurer (API 29+) là công cụ hiện đại để đo văn bản mà không cần gắn với View. Nó tính toán chiều rộng, chiều cao và vị trí ký tự trước khi kết xuất. Trên các API cũ, Paint.measureText() được sử dụng cho văn bản một dòng hoặc StaticLayout cho văn bản nhiều dòng. TextMeasurer đặc biệt hữu ích trong các View tùy chỉnh nơi văn bản được vẽ qua Canvas.drawText(). Đo lường chính xác ngăn chặn việc cắt ký tự trong giao diện.

val spannable = SpannableString("Жирный текст с цветом")
spannable.setSpan(
    StyleSpan(Typeface.BOLD),
    0, 6,
    Spannable.SPAN_EXCLUSIVE_EXCLUSIVE
)
spannable.setSpan(
    ForegroundColorSpan(Color.RED),
    14, 19,
    Spannable.SPAN_EXCLUSIVE_EXCLUSIVE
)
textView.text = spannable

Kiểu chữ trong phát triển di động: Kerning, ligature và tracking

Kiểu chữ trong ứng dụng di động là cấu hình toàn diện của phông chữ, khoảng cách ký tự và khoảng cách dòng. Kiểu chữ phù hợp trong phát triển di động ảnh hưởng trực tiếp đến khả năng đọc văn bản và nhận thức trực quan về giao diện. Hãy xem xét các tham số chính có sẵn trên cả hai nền tảng.

Kerning và Tracking

Kerning là sự điều chỉnh khoảng cách giữa các cặp ký tự cụ thể (AV, To, Wa). Tracking là khoảng cách ký tự đồng đều cho toàn bộ văn bản hoặc một phần của nó. Trên iOS, kerning được đặt qua NSKernAttributeName, trên Android — qua thuộc tính letterSpacing của TextView. Giá trị âm đưa các ký tự lại gần nhau, giá trị dương mở rộng chúng ra. Kiểu chữ trong phát triển di động yêu cầu điều chỉnh cẩn thận các tham số này: đối với tiêu đề lớn, khoảng cách ký tự thường được tăng lên, đối với văn bản nội dung thì giữ nguyên tiêu chuẩn.

Ligature

Ligature là các glyph đặc biệt thay thế sự kết hợp của hai hoặc nhiều ký tự: fi, fl, ffi. Trên iOS, ligature được kiểm soát qua NSLigatureAttributeName: 0 — tắt, 1 — tiêu chuẩn, 2 — tất cả có sẵn. Trên Android, ligature được kiểm soát ở cấp phông chữ qua các tính năng OpenType. Bật ligature cải thiện ngoại hình văn bản, đặc biệt là trong các phông chữ có chân. Kiểu chữ trong phát triển di động sử dụng ligature chủ yếu cho tiêu đề và logo.

Phông chữ tùy chỉnh trong ứng dụng di động: tải và cấu hình

Phông chữ tùy chỉnh là một trong những công cụ chính để tạo phong cách trực quan độc đáo cho ứng dụng. Chúng giúp làm nổi bật thương hiệu và cải thiện trải nghiệm người dùng. Trong các ứng dụng di động, phông chữ tùy chỉnh được sử dụng cho tiêu đề, logo, yếu tố nhấn mạnh và nhận diện thương hiệu.

Phông chữ biến thiên

Phông chữ biến thiên là công nghệ phông chữ hiện đại nơi một tệp duy nhất chứa nhiều kiểu: từ mảnh đến cực đậm, từ hẹp đến rộng. Điều này giảm kích thước ứng dụng bằng cách thay thế nhiều tệp phông chữ bằng một tệp duy nhất. Trên iOS, phông chữ biến thiên được hỗ trợ qua UIFont với tham số weight. Trên Android — qua Typeface.Builder chỉ định các trục biến thiên wght, wdth, slnt. Sử dụng phông chữ biến thiên đơn giản hóa kiểu chữ trong ứng dụng di động: nhà phát triển không cần tải các tệp riêng biệt cho mỗi kiểu.

let customFont = UIFont(name: "CustomFont-Regular", size: 16)
let scaledFont = UIFontMetrics.default
    .scaledFont(for: customFont)
label.font = scaledFont
label.adjustsFontForContentSizeCategory(true)

NSTextAttachment và ImageSpan

NSTextAttachment trên iOS cho phép nhúng UIImage vào bên trong NSAttributedString — hình ảnh căn chỉnh theo đường cơ sở và di chuyển cùng với văn bản. Trên Android, tương đương là ImageSpan bên trong SpannableString. Cả hai phương pháp đều hữu ích cho trò chuyện với biểu tượng cảm xúc, bảng tin với biểu tượng và biểu mẫu với hộp kiểm tùy chỉnh. Điều quan trọng là phải chia tỷ lệ hình ảnh phù hợp với chiều cao phông chữ để văn bản và đồ họa trông hài hòa.

Hiệu ứng văn bản, căn chỉnh và dấu ba chấm

Ngoài định dạng cơ bản, văn bản trong ứng dụng di động hỗ trợ các hiệu ứng trực quan bổ sung: bóng đổ, đường viền, gạch ngang và gạch chân. Những công cụ này mở rộng khả năng của kiểu chữ nhưng yêu cầu áp dụng cẩn thận để duy trì khả năng đọc.

Bóng đổ và đường viền văn bản

Bóng đổ văn bản trên iOS được đặt qua NSShadow với offset, blurRadius và color. Đường viền — qua NSStrokeWidthAttributeName: giá trị âm tạo tô màu có đường viền, giá trị dương chỉ tạo đường viền. Gạch ngang — NSUnderlineStyle (.single, .thick, .double). Trên Android, bóng đổ TextView được cấu hình qua android:shadowRadius, android:shadowDx, android:shadowDy. SpannableString hỗ trợ StrikethroughSpan và UnderlineSpan. Đường viền văn bản trên Android được triển khai qua OutlineSpan hoặc phông chữ tùy chỉnh.

Dấu ba chấm và Marquee

Dấu ba chấm là việc cắt ngắn văn bản với dấu ba chấm khi vùng chứa bị tràn. Trên iOS, nó được cấu hình qua lineBreakMode .byTruncatingTail và numberOfLines. Trên Android — qua android:ellipsize="end" và android:maxLines. Marquee là hoạt ảnh văn bản cuộn có sẵn trên Android qua android:ellipsize="marquee". Trên iOS, không có tương đương tích hợp — thư viện MarqueeLabel được sử dụng. Dấu ba chấm là bắt buộc đối với tất cả văn bản một dòng trong ứng dụng di động để tránh cắt nội dung.

Dynamic Type trên iOS

Dynamic Type là hệ thống văn bản thích ứng trên iOS điều chỉnh kích thước phông chữ dựa trên cài đặt Trợ năng của người dùng. Sử dụng UIFontMetrics để chia tỷ lệ phông chữ tùy chỉnh. Dynamic Type là bắt buộc đối với các ứng dụng tuân thủ Trợ năng. Trên Android, tương đương là đơn vị sp và scaledPixels, chia tỷ lệ theo cài đặt kích thước văn bản hệ thống.