ข้อความและการพิมพ์ตัวอักษรในการพัฒนามือถือ: คืออะไร เครื่องมืออะไรบ้าง และทำงานอย่างไร

ข้อความในแอปมือถือ: NSAttributedString บน iOS

NSAttributedString คือคลาสพื้นฐานของ iOS สำหรับทำงานกับข้อความที่จัดรูปแบบ มันอนุญาตให้ใช้แอตทริบิวต์กับตัวอักษรหรือช่วงแต่ละตัว: ฟอนต์ผ่าน UIFont, สีผ่าน UIColor, ระยะห่างตัวอักษรผ่าน kern และระยะห่างบรรทัดผ่าน NSMutableParagraphStyle ในแอปมือถือ NSAttributedString ถูกใช้ทุกที่ — ตั้งแต่ UILabel ไปจนถึง UITextView ที่ซับซ้อนพร้อมรองรับการแก้ไข

UIFont และการกำหนดค่าฟอนต์

UIFont คือคลาสหลักสำหรับทำงานกับฟอนต์บน iOS มันรองรับฟอนต์ระบบ ฟอนต์ที่กำหนดเอง และ Dynamic Type UIFont(name:size:) โหลดฟอนต์ตามชื่อ UIFont.systemFont(ofSize:weight:) โหลดฟอนต์ระบบ UIFontDescriptor อนุญาตให้ปรับเปลี่ยนฟอนต์ที่มีอยู่: เปลี่ยนขนาด น้ำหนัก หรือเพิ่มเมทริกซ์การแปลง สำหรับฟอนต์ที่กำหนดเอง ไฟล์ .ttf จะถูกเพิ่มไปยังโปรเจกต์และลงทะเบียนใน Info.plist ภายใต้คีย์ 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 และการจัดรูปแบบย่อหน้า

NSMutableParagraphStyle คือเวอร์ชันที่แก้ไขได้ของ ParagraphStyle สำหรับกำหนดค่าการแสดงย่อหน้า มันควบคุมการจัดตำแหน่ง (alignment) ระยะห่างบรรทัด (lineSpacing) การเยื้อง (headIndent, tailIndent) และโหมดการตัด (lineBreakMode) ParagraphStyle สำคัญต่อความสามารถในการอ่านข้อความยาวบนอุปกรณ์มือถือ: lineSpacing ที่เหมาะสมป้องกันการรวมบรรทัด และ lineBreakMode ป้องกันการตัดคำ การตั้งค่า paragraphSpacing กำหนดระยะห่างระหว่างย่อหน้า

ข้อความในแอปมือถือ: SpannableString บน Android

SpannableString คือเครื่องมือหลักสำหรับการจัดรูปแบบข้อความบน Android มันทำงานผ่านกลไกของวัตถุ Span ซึ่งแต่ละอันรับผิดชอบหนึ่งแง่มุม: StyleSpan สำหรับตัวหนาหรือตัวเอียง ForegroundColorSpan สำหรับสี URLSpan สำหรับลิงก์ UnderlineSpan สำหรับการขีดเส้นใต้ SpannableStringBuilder คือสิ่งที่เทียบเท่ากับ NSMutableAttributedString ซึ่งอนุญาตให้สร้างข้อความจากหลายส่วน การเข้าใจ SpannableString เป็นสิ่งจำเป็นสำหรับการสร้างอินเทอร์เฟซที่ยืดหยุ่นด้วยข้อความที่จัดรูปแบบในแอปมือถือ

Typeface และฟอนต์ที่กำหนดเองบน Android

Typeface คือคลาสสำหรับทำงานกับฟอนต์บน Android มันรองรับฟอนต์ระบบ Roboto และ Noto รวมถึงฟอนต์ที่กำหนดเอง Typeface.createFromResource() โหลดฟอนต์จาก res/font/ Typeface.createFromAsset() โหลดจากโฟลเดอร์ assets Android 8.0+ รองรับตระกูลฟอนต์ใน XML รวมไฟล์ฟอนต์หลายไฟล์เป็นทรัพยากรเดียว ฟอนต์ที่กำหนดเองสำหรับข้อความในแอปมือถือบน Android ถูกตั้งค่าผ่านแอตทริบิวต์ android:fontFamily หรือโดยโปรแกรมด้วย setTypeface()

TextMeasurer และการวัดข้อความ

TextMeasurer (API 29+) เป็นเครื่องมือที่ทันสมัยสำหรับการวัดข้อความโดยไม่ผูกกับ View มันคำนวณความกว้าง ความสูง และตำแหน่งตัวอักษรก่อนการเรนเดอร์ ใน API รุ่นเก่า ใช้ Paint.measureText() สำหรับข้อความบรรทัดเดียวหรือ StaticLayout สำหรับข้อความหลายบรรทัด TextMeasurer มีประโยชน์โดยเฉพาะใน View ที่กำหนดเองซึ่งข้อความถูกวาดผ่าน Canvas.drawText() การวัดที่ถูกต้องป้องกันการตัดตัวอักษรในอินเทอร์เฟซ

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

การพิมพ์ตัวอักษรในการพัฒนามือถือ: การปรับระยะห่างตัวอักษร ลิเกเจอร์ และการติดตาม

การพิมพ์ตัวอักษรในแอปมือถือคือการกำหนดค่าที่ครอบคลุมของฟอนต์ ระยะห่างตัวอักษร และระยะห่างบรรทัด การพิมพ์ตัวอักษรที่เหมาะสมในการพัฒนามือถือส่งผลโดยตรงต่อความสามารถในการอ่านข้อความและการรับรู้ทางภาพของอินเทอร์เฟซ มาดูพารามิเตอร์หลักที่มีบนทั้งสองแพลตฟอร์ม

การปรับระยะห่างตัวอักษรและการติดตาม

การปรับระยะห่างตัวอักษรคือการปรับช่องว่างระหว่างคู่ตัวอักษรเฉพาะ (AV, To, Wa) การติดตามคือระยะห่างตัวอักษรที่สม่ำเสมอสำหรับข้อความทั้งหมดหรือบางส่วน บน iOS การปรับระยะห่างตัวอักษรถูกตั้งค่าผ่าน NSKernAttributeName บน Android — ผ่านคุณสมบัติ letterSpacing ของ TextView ค่าลบทำให้ตัวอักษรชิดกัน ค่าบวกทำให้ห่างกัน การพิมพ์ตัวอักษรในการพัฒนามือถือต้องการการปรับค่าพารามิเตอร์เหล่านี้อย่างระมัดระวัง: สำหรับหัวเรื่องขนาดใหญ่ ระยะห่างตัวอักษรมักจะเพิ่มขึ้น สำหรับข้อความเนื้อหาจะเป็นค่ามาตรฐาน

ลิเกเจอร์

ลิเกเจอร์คือกลิฟพิเศษที่แทนที่การรวมกันของตัวอักษรสองตัวขึ้นไป: fi, fl, ffi บน iOS ลิเกเจอร์ถูกควบคุมผ่าน NSLigatureAttributeName: 0 — ปิด, 1 — มาตรฐาน, 2 — ทั้งหมดที่มี บน Android ลิเกเจอร์ถูกควบคุมในระดับฟอนต์ผ่านคุณสมบัติ OpenType การเปิดใช้ลิเกเจอร์ช่วยปรับปรุงลักษณะของข้อความ โดยเฉพาะในฟอนต์ที่มีเชิง การพิมพ์ตัวอักษรในการพัฒนามือถือใช้ลิเกเจอร์เป็นหลักสำหรับหัวเรื่องและโลโก้

ฟอนต์ที่กำหนดเองในแอปมือถือ: การโหลดและการกำหนดค่า

ฟอนต์ที่กำหนดเองเป็นหนึ่งในเครื่องมือหลักสำหรับสร้างสไตล์ภาพที่เป็นเอกลักษณ์สำหรับแอป ช่วยเน้นแบรนด์และปรับปรุงประสบการณ์ผู้ใช้ ในแอปมือถือ ฟอนต์ที่กำหนดเองถูกใช้สำหรับหัวเรื่อง โลโก้ องค์ประกอบเน้นและเอกลักษณ์องค์กร

ฟอนต์แปรผัน

ฟอนต์แปรผันคือเทคโนโลยีฟอนต์ที่ทันสมัยซึ่งไฟล์เดียวมีหลายสไตล์: จากบางถึงหนาพิเศษ จากแคบถึงกว้าง ซึ่งช่วยลดขนาดแอปโดยแทนที่ไฟล์ฟอนต์หลายไฟล์ด้วยไฟล์เดียว บน iOS ฟอนต์แปรผันรองรับผ่าน UIFont ด้วยพารามิเตอร์ weight บน Android — ผ่าน Typeface.Builder ที่ระบุแกนความแปรผัน wght, wdth, slnt การใช้ฟอนต์แปรผันทำให้การพิมพ์ตัวอักษรในแอปมือถือง่ายขึ้น: นักพัฒนาไม่ต้องโหลดไฟล์แยกสำหรับแต่ละสไตล์

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

NSTextAttachment และ ImageSpan

NSTextAttachmentบน iOS อนุญาตให้ฝัง UIImage ภายใน NSAttributedString — รูปภาพจัดตำแหน่งกับเส้นฐานและเลื่อนไปพร้อมกับข้อความ บน Android สิ่งที่เทียบเท่าคือ ImageSpan ภายใน SpannableString ทั้งสองแนวทางมีประโยชน์สำหรับแชทที่มีอิโมจิ ฟีดข่าวที่มีไอคอน และฟอร์มที่มีช่องทำเครื่องหมายที่กำหนดเอง สิ่งสำคัญคือต้องปรับขนาดรูปภาพให้เหมาะสมกับความสูงของฟอนต์เพื่อให้ข้อความและกราฟิกดูกลมกลืน

เอฟเฟกต์ข้อความ การจัดตำแหน่ง และจุดไข่ปลา

นอกเหนือจากการจัดรูปแบบพื้นฐาน ข้อความในแอปมือถือรองรับเอฟเฟกต์ภาพเพิ่มเติม: เงา เส้นขอบ การขีดทับ และการขีดเส้นใต้ เครื่องมือเหล่านี้ขยายความเป็นไปได้ของการพิมพ์ตัวอักษร แต่ต้องการการใช้งานอย่างระมัดระวังเพื่อรักษาความสามารถในการอ่าน

เงาและเส้นขอบข้อความ

เงาข้อความบน iOS ถูกตั้งค่าผ่าน NSShadow ด้วย offset, blurRadius และ color เส้นขอบ — ผ่าน NSStrokeWidthAttributeName: ค่าลบสร้างการเติมด้วยเส้นขอบ ค่าบวกสร้างเฉพาะโครงร่าง การขีดทับ — NSUnderlineStyle (.single, .thick, .double) บน Android เงาของ TextView ถูกกำหนดค่าผ่าน android:shadowRadius, android:shadowDx, android:shadowDy SpannableString รองรับ StrikethroughSpan และ UnderlineSpan เส้นขอบข้อความบน Android ถูกใช้งานผ่าน OutlineSpan หรือฟอนต์ที่กำหนดเอง

จุดไข่ปลาและมาร์กี

จุดไข่ปลาคือการตัดข้อความด้วยจุดไข่ปลาเมื่อคอนเทนเนอร์ล้น บน iOS ถูกกำหนดค่าผ่าน lineBreakMode .byTruncatingTail และ numberOfLines บน Android — ผ่าน android:ellipsize="end" และ android:maxLines มาร์กีคือแอนิเมชันข้อความเลื่อนที่มีบน Android ผ่าน android:ellipsize="marquee" บน iOS ไม่มีสิ่งเทียบเท่าในตัว — ใช้ไลบรารี MarqueeLabel จุดไข่ปลาจำเป็นสำหรับข้อความบรรทัดเดียวทั้งหมดในแอปมือถือเพื่อหลีกเลี่ยงการตัดเนื้อหา

Dynamic Type บน iOS

Dynamic Typeคือระบบข้อความที่ปรับเปลี่ยนได้ใน iOS ซึ่งปรับขนาดฟอนต์ตามการตั้งค่าการช่วยเหลือของผู้ใช้ ใช้ UIFontMetrics เพื่อปรับขนาดฟอนต์ที่กำหนดเอง Dynamic Type จำเป็นสำหรับแอปที่สอดคล้องกับการช่วยเหลือ บน Android สิ่งที่เทียบเท่าคือหน่วย sp และ scaledPixels ซึ่งปรับขนาดตามการตั้งค่าขนาดข้อความของระบบ