Sử dụng Text and Images trong Swift UI

Chào các bạn thân mến ! Tôi lại có chút thời gian để ngồi viết lách một chút về Swift UI. Kể từ khi Apple giới thiệu về nó, tôi không ngừng cảm thấy hứng thú. Tôi cố gắng nghiên cứu từ những cái cơ bản nhất để cố gắng tiếp cận được với nó. Ở phần trước tôi đã giới thiệu sơ qua về Swift UI còn ở phần này chúng ta có thể gọi là pactice một chút. Tôi sẽ giới thiệu về TextImages trong Swift UI.

I. How to create static labels with a Text view ?

Để show một đoạn text tương tự như chúng ta set text cho một UILabel trong UIKit thì rất đơn giản. Chúng ta chỉ cần viết như sau :

Text("Hello World")

Cũng giống như Label. Mặc định Text chỉ có một dòng hiển thị nếu chuỗi quá dài thì cũng sẽ hiển thị "...". Nên nếu bạn muốn tăng số line cho Text này thì chỉ cần làm như sau:

Text("Hello World") .lineLimit(3)

Apple cũng lưu ý rằng. Đoạn .lineLimit(3) nên cách lề trái so với Text("Hello World") vì như thế sẽ giúp người khác nhìn vào sẽ dễ hiểu hơn. Điều này rất quan trọng khi ContentView của chúng ta có nhiều UI. Ở UIKit thì muốn auto line cho UILabel thì chúng ta set thuộc tính line cho nó = 0. Còn ở Swift UI chúng ta sẽ set nó là nil. Ví dụ

Text("Hello World") .lineLimit(nil)

Để căn lề cho Text chúng ta sẽ dùng thuộc tính truncationMode cho Text. Tôi ví dụ muốn căn giữa như sau:

Text("This is an extremely long string that will never fit even the widest of Phones") .multilineTextAlignment(.center)

Để thay đổi font chúng ta dùng thuộc tính .font():

Text("This is an extremely long string that will never fit even the widest of Phones") .lineLimit(nil) .font(.largeTitle) .multilineTextAlignment(.center)

Giờ chúng ta thay màu cho text nào:

Text("The best laid plans") .foregroundColor(Color.red)

II. How to draw images using Image views

Để hiển thị một Image chúng ta dùng Image. Nó cũng giống như UIImage có thể load ảnh từ bundle, system icons hoặc từ UIImage. Tôi ví dụ cách để hiển thị ảnh từ bundle :

var body: some View { Image("example-image") }

Nếu chúng ta có một UIImage và muốn sử Image để hiển thị ảnh đó thì làm theo cách sau:

guard let img = UIImage(named: "example-image") else { fatalError("Unable to load image") } return Image(uiImage: img)

Một số lưu ý khi sử dụng Image là. Mặc định kích thước của nó sẽ tự set thay nội dung của resource. Nên rất có thể nó sẽ lớn hơn màn hình của chúng ta 😃. Để kích thước tự động fill vào view chúng ta sẽ sử dụng thuộc tính resizable().

Image("example-image") .resizable()

Tuy nhiên điều này cũng có thể khiến hình ảnh bị biến dạng theo tỷ lệ gốc của nó. Nếu muốn giữ tỷ lệ cho Image thì chúng ta nên sử dụng kèm thêm các modifier .fill hoặc .fit như sau:

Image("example-image") .resizable() .aspectRatio(contentMode: .fill)

Mọi thứ ở Swift UI dường như khá ngắn gọn và nhìn vào sẽ rất dễ hiểu. Bạn có thể thấy nó giống một ngôn ngữ nào đó phải không 😃.

III. Kết luận

Các bạn hay thử practice với những Control cơ bản. Và hãy tự tìm hiểu các thuộc tính của nó để có thể custom UI theo ý của mình. Bài viết này tôi hy vọng sẽ tạo cảm hứng cho các bạn về Swift UI để chúng ta có thể bắt đầu tiếp cận nó. Trước hết hôm nay tôi đã giới thiệu về TextImage. Vào bài sau tôi sẽ giới thiệu cho các bạn về View layout. Hãy dần tiếp cận nó vì tôi tin chắc trước sau gì chúng ta cũng phải dùng nó để làm việc 😃.