SwiftUI – Phần 6 : Basic UI Controls

Chào mừng bạn đến với Fx Studio và series SwiftUI Notes. Đây sẽ phần thứ 6 của series. Nếu bạn là người theo dõi từ đầu series này thì tới được đây cũng phải rất gian nan. Bạn đã tìm hiểu được vô số kiến thức mới thú vị về SwiftUI và những đặc trưng của nó. Tuy nhiên, tất cả mới là những điểm lý thuyết và tổng quát cách vận hành của một SwiftUI App. Qua chương mới này, chúng ta tập trung vào những UI Controls cơ bản (SwiftUI Views). Hi vọng đây là làn gió mới giúp bạn thêm yêu quý nhiều hơn SwiftUI.

Nào, bây giờ thì …

Bắt đầu thôi!

1. Giới thiệu

1.1. Chuẩn bị

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

• 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

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:

• • 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. Basic UI Controls

Trong phần này, chúng ta sẽ không đi vào việc giải thích các vấn đề lớn, cách hoạt động và cũng như bản chất của một thứ gì đó. Thay vào đó, ta sẽ tập trung cho việc xây dựng giao diện của ứng dụng.

Để giúp cho việc phát triển một giao diện đẹp, bạn cần nắm được các thành phần cấu tạo nên nó. Đó chính là các View cơ bản đầu tiên.

Mình đã có một bài viết tổng hợp cơ bản về các View trong SwiftUI View. Chúng được gọi là Declaring View và bạn có thể tìm đọc tại đây.

Đối tượng chúng ta cần tìm hiểu chính là các View Nguyên thuỷ và tìm hiểu những đặc trưng của nó. Sau đó, chúng ta mới chuyển sang phần kết hợp để tạo nên các giao diện phức tạp hơn nhiều.

Bên cạnh đó, mình sẽ đưa tới cho bạn các ứng dụng hay cách sử dụng những kĩ thuật cơ bản (MVC, MVVM, Custom View …) trong phần này. Điều này sẽ giúp bạn tự tin thiết kế những màn hình với giao diện phức tạp hơn. Hoặc bạn có thể tự tìm hiểu thêm về các UI Controls khác một cách nhanh chóng.

Cuối cùng, bạn sẽ biết về bản chất của Layout trong SwiftUI là như thế nào. Mục đích chính mà bạn cần hướng tới là hiểu và bố cục được các View theo đúng ý đồ.

2. Danh sách

Các bài viết trong phần Basic UI Controls này được trình bày riêng lẻ. Các demo một phần sẽ sử dụng lại cho nhiều bài viết. Bạn có thể viết một project mới và lên ý tưởng thiết kế ban đầu thì rất là hay. Hoặc có thể bạn checkout project tại đây để tham khảo.

Danh sách như sau:

1. 1. Text View trong 10 phút
   2. Image View trong 10 phút
   3. Basic TextField
   4. TextField Style & Modifier
   5. Input Controls
   6. Bản chất của Layout
   7. Stack & Container

Ngoài các kiến thức về các UI Control cơ bản. Các bài viết còn hướng dẫn bạn Custom Modifier, Custom Style. Hay các mô hình được sử dụng như MVC, MVVM (cơ bản). Và bản chất thực sự của Layout & cách hoạt động của nó trong SwiftUI.

Tất cả, bạn sẽ có đầy đủ vũ khí để có thể tạo một ứng dụng đẹp nhất.

Lưu ý

Công nghệ mỗi ngày là một thay đổi và bạn phải dành ra nhiều thời gian để cập nhất nó hằng ngày. Do đó, các bài viết sẽ mang tính chất giới thiệu và ở mức độ cơ bản mà thôi. Và cho đúng thời điểm hiện tại với SwiftUI 2.0. Có thể trong quá trình nghiên cứu thêm, mình sẽ bổ sung thêm các phần lý thuyết cho chương này của series.

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

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!