MakeXYZ Fun

[Video Summary] Ch. 2.1 Creating the WordGarden App Interface in SwiftUI (2025)

Admin -

Mô tả nhanh

Video này trình bày cách tạo giao diện ứng dụng Word Garden trong SwiftUI. Tác giả hướng dẫn từng bước từ việc tạo dự án mới, thêm assets, đến việc xây dựng giao diện người dùng với các thành phần như Text, TextField, Button, Image và cách sử dụng State để điều khiển giao diện.

Video

Click vào hình dưới để mở:

Mô tả chi tiết

Video này hướng dẫn tạo giao diện ứng dụng Word Garden trong SwiftUI.

Các bước thực hiện:

  1. Chuẩn bị Assets:

    • Tải xuống các file assets (âm thanh, hình ảnh, icon) từ Google Drive.
    • Kéo các thư mục "flower sounds" và "flower images" vào Asset Catalog trong Xcode.
    • Kéo file ảnh "word Garden icon PNG" vào mục AppIcon.
    • Kéo 3 ảnh launch screen vào Asset Catalog.
    • Thiết lập ảnh launch screen bằng cách copy tên ảnh và paste vào mục Launch Screen trong phần Info của project.

  2. Xây dựng giao diện người dùng:

    • Xóa code mặc định trong ContentView.swift.
    • Tạo một VStack lớn bao ngoài để chứa toàn bộ giao diện.
    • Tạo phần hiển thị số liệu thống kê (words guessed, words missed, etc.):
      • Tạo hai VStack nhỏ, một căn trái (leading) và một căn phải (trailing), mỗi cái chứa hai Text hiển thị số liệu.
      • Đặt hai VStack này vào trong một HStack để chúng nằm ngang, sử dụng Spacer() để đẩy chúng về hai phía.
      • Khai báo các biến @State để lưu trữ số liệu (ví dụ: wordsGuessed, wordsMissed, wordsToGuess).
      • Sử dụng string interpolation để hiển thị giá trị của các biến này trong các Text.
    • Tạo phần hiển thị trạng thái trò chơi:
      • Thêm một Spacer() để tạo khoảng cách.
      • Tạo một Text để hiển thị thông báo trạng thái trò chơi (ví dụ: "How many guesses to uncover the hidden word").
      • Sử dụng modifier font(.title) và multilineTextAlignment(.center) để định dạng văn bản.
      • Khai báo biến @State gameStatusMessage để lưu trữ thông báo trạng thái trò chơi.
    • Tạo phần hiển thị từ cần đoán:
      • Thêm một Spacer() để tạo khoảng cách.
      • Tạo một Text để hiển thị từ cần đoán (ban đầu hiển thị các dấu gạch dưới).
      • Sử dụng comment //TODO: để đánh dấu vị trí cần thay đổi sau này (hiển thị từ thực tế).
      • Khai báo biến @State currentWord để lưu trữ index của từ hiện tại trong mảng từ cần đoán.
    • Tạo phần nhập liệu và nút Guess a Letter:
      • Tạo một TextField để người dùng nhập chữ cái đoán.
        • Sử dụng TextFieldStyle(.roundedBorder) để tạo khung viền bo tròn.
        • Sử dụng frame(width: 30) để giới hạn chiều rộng của TextField.
        • Sử dụng overlay và RoundedRectangle để tạo viền đậm hơn cho TextField.
      • Tạo một Button với label "Guess a Letter".
        • Sử dụng buttonStyle(.bordered) và tint(.mint) để định dạng nút.
      • Đặt TextField và Button vào trong một HStack.
    • Tạo phần hiển thị hình ảnh:
      • Tạo một Image để hiển thị hình ảnh (ví dụ: hoa).
      • Sử dụng resizable() và scaledToFit() để đảm bảo hình ảnh hiển thị đúng kích thước.
      • Sử dụng ignoresSafeArea(.bottom) để hình ảnh tràn ra ngoài safe area ở phía dưới.
      • Khai báo biến @State imageName để lưu trữ tên hình ảnh.
    • Tạo padding và Conditional View:
      • Thêm padding(.horizontal) cho HStack lớn nhất để tạo khoảng cách với lề.
      • Thêm padding() cho Text hiển thị trạng thái trò chơi.
      • Tạo một Button khác với label "Another Word" (ẩn/hiện tùy thuộc vào trạng thái trò chơi).
      • Sử dụng if/else để ẩn/hiện HStack chứa TextField và Button "Guess a Letter" hoặc Button "Another Word" dựa trên biến @State playAgainHidden.

  3. Conditional View:

    • Giải thích cách sử dụng biến @State playAgainHidden để điều khiển hiển thị giữa HStack chứa TextField và Button "Guess a Letter" và Button "Another Word".

Chúc bạn thành công và tiếp tục khám phá thế giới lập trình iOS!