Contents
Chào bạn đến với Fx Studio. Chúng ta sẽ bắt đầu chương mới của series SwiftUI Notes. Bài viết này sẽ tập trung vào đối tượng SwiftUI View là Text View (hay còn gọi đơn giản là Text). Bài viết chủ yếu mang tính chất giới thiệu & trình bày các đặc trưng của Text.
Nếu mọi việc đã ổn rồi, thì …
Bắt đầu thôi!
Chuẩn bị
Về mặt tool và version, các bạn tham khảo như sau:
-
- SwiftUI 2.0
- Xcode 12
Về mặt kiến thức, bạn cần biết trước các kiến thức cơ bản với SwiftUI & SwiftUI App. Tham khảo các bài viết sau, nếu bạn chưa đọc qua SwiftUI:
Về mặt demo, hầu như là demo đơn giản, vì tập trung vào từng View riêng lẻ. Do đó, bạn cũng không cần phải quá lo lắng và việc tạo mới project cũng không ảnh hưởng gì nhiều.
(Mặc định, mình xem như bạn đã biết về cách tạo project với SwiftUI & SwiftUI App rồi.)
Text View
A view that displays one or more lines of read-only text.
Theo Apple thì Text là một SwiftUI View. Nó dùng để hiển thị các dòng văn bảng (1 hoặc nhiều dòng). Người dùng chỉ đọc được và không có tương tác nào để thay đổi giá trị của chúng.
Với UIKit, thì Text giống như UILabel. Công dụng và đặc trưng cũng khá là tương đồng với nhau … Bây giờ, bạn hãy tạo mới một project với SwiftUI và bắt tay vào việc tìm hiểu Text như thế nào.
1. Displaying a Simple Text
Để tiện cho việc demo nhiều loại SwiftUI View thì bạn hãy tạo mới một file SwiftUI View. Mình đặt tên là TextDemoView.swift
. Bạn sẽ thấy code mặt định cho TextDemoView như sau:
import SwiftUI struct TextDemoView: View { var body: some View { Text("Hello, World!") } } struct TextDemo_Previews: PreviewProvider { static var previews: some View { TextDemoView() }
Và bạn cũng thấy dòng code đầu tiên cho Text đó là:
Text("Hello, World!")
Đây chính là hiển thị một Text đơn giản. Bạn có thể thay đổi nội dung trong hai dấu ( )
.
2. Multiline Text
Bạn thử thay đổi nội dung sang 1 đoạn chữ dài và nhiều như sau:
Text("Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.")
Bấm Resume để xem hiển thị của đoạn Text dài này.
Đúng là mơ ước của biết bao nhiều thế hệ anh em dev iOS.
Text sẽ tự động tạo điều chỉnh kích thước để hiển thị đầy đủ nội dung. Và bạn có thể quản lý số dòng hiển thị bằng modifier này .lineLimit(:_)
. Xem ví dụ code:
Text("Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.") .lineLimit(3)
Với giá trị là 3
thì sẽ hiển thị 3 dòng & đi kèm với nó là dấu ...
nếu số lượng dòng thực tế vượt quá số dòng. Còn để không giới hạn thì sẽ là .lineLimit(nil)
SwiftUI cũng cho phép bạn thay đổi vị trí dấu ...
và nó không phải nhất thiết chỉ là ở cuối à. Xem ví dụ:
Text("Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.") .lineLimit(1) .truncationMode(.middle)
Bạn chỉ cần sử dụng modifier .truncationMode()
. Các tham số khác của nó như sau:
.head
cho ở đầu.tail
ở cuối đoạn.middle
ở giữa đoạn
Mọi thứ thật là EZ!
3. Font
Về Font, mặc định sẽ là font hệ thống (system font) cho Text. Bạn có thể sử dụng một số tuỳ chọn mặc định như sau để thay đổi kích thước của font.
Tuỳ thuộc vào mỗi nền tảng thì sẽ có kích thước phụ hợp với mỗi tuỳ chọn ở trên cho các Text View. Bạn cũng có thể tuỳ chọn kích thước một cách xác định riêng.
.font(.system(size: 20))
Trong đó, modifier .system
sẽ sử dụng chính font hệ thống của thiết bị. Ngoài ra, bạn có thể chọn các font khác với modifier là .custom
. Ví dụ code như sau:
.font(.custom("Helvetica Neue", size: 25))
4. Color
Bạn muốn thay đổi màu chữ của Text View, thì sử dụng modifier foregroundColor
với tham số là Color. Chúng ta chuyển màu sang màu xanh lá nào.
.foregroundColor(Color.green)
Bạn hoàn toàn có thể sử dụng các màu sắc khác. Hãy tìm hiểu thêm các hàm khởi tạo Color nha.
5. Text Alignment
Để thay đổi canh lề cho nội dung của Text. Bạn sử dụng modifier .multilineTextAlignment
Với 3 tuỳ chọn sau:
-
.leading
lề trái.center
chính giữa.trailing
lề phải
Ví dụ với canh lề chính giữa như sau:
Text("...") .font(.largeTitle) .multilineTextAlignment(.center) .frame(width: 300)
Nâng cấp demo lên xịn sò tí nha.
struct TextDemoView: View { let alignments: [TextAlignment] = [.leading, .center, .trailing] @State private var alignment = TextAlignment.leading var body: some View { VStack { Picker("Text alignment", selection: $alignment) { ForEach(alignments, id: \.self) { alignment in Text(String(describing: alignment)) } } Text("Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.") .font(.custom("Helvetica Neue", size: 25)) .foregroundColor(Color.green) .multilineTextAlignment(alignment) .lineLimit(5) .truncationMode(.middle) } } }
Bạn tha hồ mà test nha. Hãy sử dụng Live Preview để kiểm tra.
6. Padding and Line Spacing
Bạn có thể kiểm soát được khoảng cách giữa các dòng trong nội dung bằng modifiers .lineSpacing
. Thử với ví dụ sau:
.lineSpacing(20.0)
Bạn thêm nó vào tiếp code demo của chúng ta và bấm Resume để xem kết quả.
Và khi bạn muốn nội dung của bạn không quá gần các mép, thì hãy sử dụng tiếp modifier .padding()
. Bạn thêm tiếp dòng code đó vào ví dụ và xem kết quả.
Ngoài ra, bạn có thể thêm các tham số cho .padding
để xác định so với mép nào và giá trị cụ thể như thế nào. Ví dụ như cách ở trên và giá trị là 30
.
.padding(.top, 30.0)
7. Spacing between letters
Bạn có thể thay đổi khoảng cách giữa các ký tự hay các từ trong nội dung. Với 2 modifier sau:
.tracking
giãn cách các ký tự bất chấp là cùng hay không cùng một từ.kerning
sẽ giãn cách cả chữ, nhưng các từ ghép có nghĩa thì sẽ không vẫn dính với nhau
Bạn hãy thử với demo sau:
struct ContentView: View { @State private var amount: CGFloat = 50 var body: some View { VStack { Text("ffi") .font(.custom("AmericanTypewriter", size: 72)) .kerning(amount) Text("ffi") .font(.custom("AmericanTypewriter", size: 72)) .tracking(amount) Slider(value: $amount, in: 0...100) { Text("Adjust the amount of spacing") } } } }
Kết quả nhoé!
8. Format dates
Về hiển thị ngày tháng thì cũng khá đơn giản. Chúng cũng được modifier .addingTimeInterval
cung cấp cho bạn. Bạn xem qua ví dụ code sau:
VStack { // show just the date Text(Date().addingTimeInterval(600), style: .date) // show just the time Text(Date().addingTimeInterval(600), style: .time) // show the relative distance from now, automatically updating Text(Date().addingTimeInterval(600), style: .relative) // make a timer style, automatically updating Text(Date().addingTimeInterval(600), style: .timer) }
Kết quả như sau:
9. Rotating the Text
Xoay Text của bạn, tại sao không? Thực hiện điều này cũng khá đơn giản. Bạn sử dụng modifier rotationEffect
. Thử các đoạn code ví dụ sau
- Một góc cụ thể nào đó.
.rotationEffect(.degrees(45))
- Xác định điểm treo theo hệ toạ độ 2D
.rotationEffect(.degrees(20), anchor: UnitPoint(x: 0, y: 0))
- Xác định điểm treo trong hệ toạ độ 3D
.rotation3DEffect(.degrees(60), axis: (x: 1, y: 0, z: 0))
10. Shadow
Thất tuyệt vời với việc bạn thêm bóng đổ cho hiệu ứng 3D của Text. Bạn thử áp dụng modifier .shadow
để hoàn thiện giao diện của mình đẹp nhất với Text.
Code ví dụ như sau:
.shadow(color: .gray, radius: 2, x: 0, y: 15)
11. Order of modifiers
Đây là một điểm mà bạn hết sức chú ý khi sử dụng quá nhiều modifier cho một đối tượng. Thứ tự thêm các modifier cho 1 View, sẽ ảnh hưởng tới việc hiển thị của View của bạn ra sao.
Mỗi lần gọi một modifier là sẽ nhân bản đối tượng View đó lên. Sau đó thay đổi giá trị và thay thế đối tượng trước đó. Đây là bản chất của Declaring View.
Bạn hãy test với 2 ví dụ sau:
Text("Fx Studio") .background(Color.red) .padding()
Và
Text("Fx Studio") .padding() .background(Color.red)
Kết quả như sau:
Tạm kết
Thật sự để liệt kê hết các modifier mà giúp bạn tuỳ biến Text thì quả thật là quá nhiều. Qua trên, mình chỉ xin phép cung cấp các modifier hay sử dụng đối với Text mà thôi. Ngoài ra, bạn vẫn có thể áp dụng chúng cho nhiều đối tượng SwiftUI View khác mà có tính tương đồng với Text.
Okay! Tới đây, mình xin kết thúc bài viết về đối tượng Text trong SwiftUI. Và nếu có gì thắc mắc hay góp ý cho mình thì bạn có thể để lại bình luận hoặc gởi email theo trang Contact.
Cảm ơn bạn đã đọc bài viết này!
Related Posts:
Written by chuotfx
Hãy ngồi xuống, uống miếng bánh và ăn miếng trà. Chúng ta cùng nhau đàm đạo về đời, về code nhóe!
Leave a Reply Cancel reply
Fan page
Tags
Recent Posts
- Prompt Engineering trong 10 phút
- Một số ví dụ sử dụng Prompt cơ bản khi làm việc với AI
- Prompt trong 10 phút
- Charles Proxy – Phần 1 : Giới thiệu, cài đặt và cấu hình
- Complete Concurrency với Swift 6
- 300 Bài code thiếu nhi bằng Python – Ebook
- Builder Pattern trong 10 phút
- Observer Pattern trong 10 phút
- Memento Pattern trong 10 phút
- Strategy Pattern trong 10 phút
You may also like:
Archives
- December 2024 (3)
- September 2024 (1)
- July 2024 (1)
- June 2024 (1)
- May 2024 (4)
- April 2024 (2)
- March 2024 (5)
- January 2024 (4)
- February 2023 (1)
- January 2023 (2)
- November 2022 (2)
- October 2022 (1)
- September 2022 (5)
- August 2022 (6)
- July 2022 (7)
- June 2022 (8)
- May 2022 (5)
- April 2022 (1)
- March 2022 (3)
- February 2022 (5)
- January 2022 (4)
- December 2021 (6)
- November 2021 (8)
- October 2021 (8)
- September 2021 (8)
- August 2021 (8)
- July 2021 (9)
- June 2021 (8)
- May 2021 (7)
- April 2021 (11)
- March 2021 (12)
- February 2021 (3)
- January 2021 (3)
- December 2020 (3)
- November 2020 (9)
- October 2020 (7)
- September 2020 (17)
- August 2020 (1)
- July 2020 (3)
- June 2020 (1)
- May 2020 (2)
- April 2020 (3)
- March 2020 (20)
- February 2020 (5)
- January 2020 (2)
- December 2019 (12)
- November 2019 (12)
- October 2019 (19)
- September 2019 (17)
- August 2019 (10)