SwiftUI – Phần 3 : Tích hợp SwiftUI và UIKit

Chào bạn đến với Fx Studio. Bài viết này sẽ tổng hợp chặng đường thứ 3 của series SwiftUI này. Trong phần 3, mình trình bày về việc tích hợp giữa 2 nền tảng SwiftUI và UIKit. Các cách sử dụng qua lại giữa 2 nền tảng và quan trọng nhất là cách truyền tải dữ liệu giữa chúng với nhau.

1. Giới thiệu

1.1. Chuẩn bị

Dành cho các bạn chưa đọc phần một & hai của series SwiftUI Notes này, thì có thể truy cập ở link sau đây:

• • SwiftUI – Phần 1 : Làm quen với SwiftUI
  • SwiftUI – Phần 2 : Cơ bản về ứng dụng SwiftUI App

Về mặt chuẩn bị, chúng ta sẽ vẫn là những yêu cầu cơ bản từ phần một. Nếu như bạn có thể cập nhật tất cả lên version mới nhất thì càng tốt. Còn sau đây là cấu hình đề xuất cho bạn:

• • MacOS Catalina
  • Xcode 12
  • Swift 5.3
  • SwiftUI 2.0

Về mặt kiến thức, bạn chỉ cần nắm được cơ bản về ngôn ngữ lập trình Swift là ổn rồi. Nếu bạn đã biết thêm cơ bản về lập trình iOS thì sẽ có lợi thế hơn nữa. Bạn có thể đọc các bài viết đó ở link sau:

• • Basic Swift trong 10 phút
  • Lập trình iOS cho mọi người

1.2. SwiftUI và UIKit

Nếu như bạn là một dev iOS thì chắc chắn phần này rất quan trọng đối với bạn. Chúng ta không thể phủ nhận đi được tầm ảnh hưởng của UIKit và các thư viện của nó đến với giới dev iOS. Rất nhiều thứ đã được viết ra cho UIKit hoặc đơn giản là dự án của bạn đang làm vẫn đang là UIKit.

Nhưng …

Tương lai là của SwiftUI

Cũng giống như thời kì Swift ra mắt và Objective-C dần lui về phía sau, nhường sân khấu cho Swift. Apple không phải khai tử đi Objective-C mà thay vào đó tạo ra các cấu nối cho cả 2 ngôn ngữ đều sử dụng được. Và bây giờ, Apple vẫn làm như vậy. Bạn vẫn có thể sử dụng SwiftUI vào trong UIKit và ngược lại. Bạn sẽ tận dụng được lại tất cả những tinh hoa của UIKit để bổ sung các thiếu sót ban đầu cho SwiftUI.

Các thành phần mà bạn sẽ cần quan tâm trong việc tích hợp giữa SwiftUI và UIKit như sau:

• SwiftUI
  • SwiftUI View
• UIKit
  • UIViewController
  • UIView
  • Custom UIView

Các đối tượng đó cũng chính là trọng tâm của các bài viết trong phần 3 này. Ngoài ra, ta còn học cách sử dụng đám Data của UIKit trong SwiftUI nữa. Và việc sử dụng được Declaring Data vào các UI Control … Vâng vâng và mây mây! Và điều cần làm lúc này là …

Bắt đầu thôi!

1.3. Lưu ý

Hiện tại, Apple đã ra mắt máy MacOS chạy với chip M1. Kéo theo là sự thay đổi lớn cho các nền tảng lập trình của chính Apple. Cộng thêm sự ra mắt của SwiftUI 2.0 với Life Cycle mới được xem là tiền đề cho cuộc cách mạng này. Nên các ứng dụng trên nền tảng UIKit sẽ được đưa lên các nên tảng khác một cách dễ dàng.

Tuy nhiên, đây chỉ là bước đệm mà thôi. Và SwiftUI sẽ dần đảm đương hết các phần việc của UIKit. Do đó, với các bài viết cho phần này chỉ mang tính chất tham khảo. Nó không thực sự ảnh hưởng tới cả lộ trình SwiftUI nói chung.

Mục đích chính là giúp bạn biết các truyền tải dữ liệu (passing data) giữa các thực thể UIKit & SwiftUI.

2. Danh sách

Trong phần thứ ba này, mình sẽ trình bày các bài viết dưới dạng hướng dẫn. Dựa vào các demo để giải thích các điểm lý thuyết và các vấn đề bạn sẽ gặp phải trong việc tích hợp giữa SwiftUI và UIKit. Do đó, bạn cần phải thực hiện các thao tác theo thứ tự để tránh sai sót.

Danh sách như sau:

1. 1. Sử dụng SwiftUI View vào UIKit Project
   2. Tích hợp UIViewController (UIKit) vào SwiftUI Project
   3. Tích hợp UIView (UIKit) vào SwiftUI Project
   4. Sử dụng Custom UIView vào SwiftUI Project

Bên cạnh việc sử dụng qua lại giữa các đối tượng đại diện cho hai nền tảng SwiftUI và UIKit, thì chúng ta còn quan tâm việc truyền tải dữ liệu. Và cách điều phối sự kiện bằng Coordinator. Cuối cùng, bạn sẽ học thêm cách tích hợp mà vẫn giữ đúng bản chất của Declarative App.

3. Thông tin và trạng thái

3.1. Thông tin

• • Website: Fx Studio
  • Link seri: https://fxstudio.dev/tag/swiftui-notes/
  • Github: https://github.com/fx-studio/swiftui-notes
  • Trạng thái: đang cập nhật

Nếu bạn có đóng góp hay nhận xét về series này, cách viết bài, cũng như nội dung truyền tải. Thì mình rất rất cảm ơn. Nếu có bất cứ vấn đề gì, thì bạn có thể liên lạc theo các địa chỉ dưới đây.

• • Website: https://fxstudio.dev/contact/
  • Email: lephuongtien.dev@gmail.com

3.2. Bản quyền

Về bản quyền của series SwiftUI Notes là của Fx Studio, bao gồm các bài viết trên website & mã nguồn trên GitHub. Và chúng hoàn toàn miễn phí cho các mục đích phi lợi nhuận và học tập. Tất cả các hành vi sao chép hay sử dụng vì mục đích thương mại đều là vi phạm.

Vui lòng để lại link bài viết gốc, nếu bạn muốn sử dụng & cũng như trích dẫn các nội dụng từ các bài viết trong series SwiftUI Notes này.

3.3. Các phần khác trong series:

1. Làm quen với SwiftUI
2. Cơ bản về ứng dụng SwiftUI App
3. Tích hợp SwiftUI và UIKit
4. Apple Ecosystem
5. Multiplatform App
6. Basic UI Controls
7. State & Data Flow
8. Working with List
9. Routing in SwiftUI
10. Grid Layout
11. …

Cảm ơn bạn đã ủng hộ Fx Studio và series SwiftUI Notes!

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!