Cafedevn, hôm nay sẽ chia sẽ cho các bạn toàn bộ các control tương ứng của SwiftUi với UIKit để các bạn có thể nắm được cơ bản tới nâng cao về các control này. Và giúp ích cho phát triển ứng dụng sau này.
Nội dung chính
Yêu cầu
- Xcode 11.1 (Tải xuống từ Apple)
- iOS 13 / macOS 10.15 / tvOS 13 / watchOS 6
- macOS Catalina để có vẽ SwiftUI trong khung vẽ (Tải xuống từ Apple)
View Controllers
| UIKit | SwiftUI | Ghi chú |
|---|---|---|
| UIViewController | View | |
| UITableViewController | List | |
| UICollectionViewController | – | Hiện tại chư có UI tương ứng cho SwiftUI cho cái này, nhưng bạn có thể mô phỏng một số bố cục với việc soạn Danh sách như trong bài này |
| UISplitViewController | NavigationView | Hỗ trợ một phần trong phiên bản beta 5, nhưng vẫn chưa hoàn thiệt cho mấy |
| UINavigationController | NavigationView | |
| UIPageViewController | – | |
| UITabBarController | TabView | |
| UISearchController | – | |
| UIImagePickerController | – | |
| UIVideoEditorController | – | |
| UIActivityViewController | – | |
| UIAlertController | Alert |
Views and Controls
| UIKit | SwiftUI | Ghi chú |
|---|---|---|
| UILabel | Text | |
| UITabBar | TabView | |
| UITabBarItem | TabView | .tabItem ở dưới TabView |
| UITextField | TextField | Sử dụng mật khẩu (isSecureTextEntry) với SecureField |
| UITableView | List | có VStack và Form |
| UINavigationBar | NavigationView | Một phần của NavigationView |
| UIBarButtonItem | NavigationView | .navigationBarItems trong NavigationView |
| UICollectionView | – | |
| UIStackView | HStack | .axis == .Horizontal |
| UIStackView | VStack | .axis == .Vertical |
| – | ZStack | |
| UIScrollView | ScrollView | |
| UIActivityIndicatorView | – | |
| UIImageView | Image | |
| UIPickerView | Picker | |
| UIButton | Button | |
| UIDatePicker | DatePicker | |
| UIPageControl | – | |
| UISegmentedControl | Picker | Kiểu dáng (SegmentedPickerStyle) của Picker |
| UISlider | Slider | |
| UIStepper | Stepper | |
| UISwitch | Toggle | |
| UIToolBar | – | |
| UIAlertAction | ActionSheet | |
| – | Modal | |
| Spacer | ||
| Divider |
Framework để tích hợp – UIKit vào SwiftUI
Tích hợp các View trong SwiftUI vào các ứng dụng hiện có và nhúng các View đó và controller của UIKit vào hệ thống phân cấp View của SwiftUI.
| UIKit | SwiftUI | Ghi chú |
|---|---|---|
| UIView | UIViewRepresentable | |
| UIViewController | UIViewControllerRepresentable |
Framework để tích hợp – SwiftUI vào UIKit
Tích hợp các View trong SwiftUI vào các ứng dụng hiện có và nhúng các View đó và controller của UIKit vào hệ thống phân cấp View của SwiftUI.
| UIKit | SwiftUI | Ghi chú |
|---|---|---|
| UIView (UIHostingController) | View | Không có chuyển đổi trực tiếp thành UIView, nhưng bạn có thể sử dụng chế độ view container để thêm VIew từ UIViewControll vào cấu trúc phân cấp các view trong App |
| UIViewController (UIHostingController) |
Một số nguồn tham khảo khác
- SwiftUI Tutorials (Official)
- Introducing SwiftUI: Building Your First App (Official)
- SwiftUI: Getting Started Raywenderlich
- SwiftUI Essentials (Official)
- SwiftUI – Làm thế nào để setup dự án Swift UI
- About SwiftUI(Kho tài liệu và source demo vô tận về swiftUI)
