[Video Summary] Ch. 3.1 onTapGesture & Buttons with labels - Building Big the Guy App UI in SwiftU (2025)

Mô tả nhanh

Video này hướng dẫn cách tạo giao diện người dùng (UI) cơ bản cho ứng dụng "Bip the Guy" bằng SwiftUI, bao gồm việc sử dụng onTapGesture để phát âm thanh khi người dùng chạm vào hình ảnh, và sử dụng một định dạng nút tùy chỉnh với Label, cho phép thêm biểu tượng và văn bản vào nút.

Video

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

Mô tả chi tiết

Video này hướng dẫn cách tạo giao diện người dùng (UI) cơ bản cho ứng dụng "Bip the Guy" bằng SwiftUI, bao gồm việc sử dụng onTapGesture để phát âm thanh khi người dùng chạm vào hình ảnh, và sử dụng một định dạng nút tùy chỉnh với Label, cho phép thêm biểu tượng và văn bản vào nút.

Dưới đây là các bước chi tiết:

1. Tạo Project và Import Tài Nguyên:

   • Tạo một project Xcode mới, chọn iOS App và đảm bảo chọn SwiftUI App.
   • Đặt tên project là "Bip the Guy" và tạo Git repository.
   • Tải xuống các tập tin tài nguyên (hình ảnh, âm thanh) từ đường dẫn được cung cấp (bit.ly/PRDG-SwiftUI-files).
   • Kéo và thả các tập tin hình ảnh vào Asset Catalog (AppIcon, LaunchScreen).
   • Kéo và thả các tập tin âm thanh (clown, punch) vào Asset Catalog.

2. Cấu Hình Launch Screen:

   • Sao chép tên của launch screen image.
   • Chọn project file, vào tab Info, tìm đến mục Launch screen.
   • Thêm tên ảnh vừa copy vào mục Image Name.

3. Xây Dựng Giao Diện Người Dùng (Content View):

   • Xóa các thành phần mặc định (Image, Text) trong Content View.
   • Thêm hình ảnh "clown" từ Asset Catalog.
   • Sử dụng các modifier .resizable() và .scaledToFit() để điều chỉnh kích thước hình ảnh.
   • Thêm Spacer ở trên và dưới hình ảnh để tạo khoảng cách.

4. Thêm Button với Label:

   • Sử dụng Button với action và label để tạo một nút tùy chỉnh.
   • Trong phần label, sử dụng Label để kết hợp hình ảnh và văn bản.
   • Sử dụng systemImage để chọn một biểu tượng từ thư viện hệ thống (ví dụ: "photo.fill.on.rectangle.fill").
   • Đặt tiêu đề cho nút (ví dụ: "Photo Library").
   • [Tùy chọn] Sử dụng .buttonStyle(.borderedProminent) để tạo kiểu cho nút.

5. Thêm Âm Thanh và Chức Năng onTapGesture:

   • Nhập thư viện AVFAudio ở đầu file ContentView.
   • Khai báo một biến audioPlayer kiểu AVAudioPlayer? (implicitly unwrapped optional).

   @State private var audioPlayer: AVAudioPlayer!
   

   • Sao chép hàm playSound từ một project trước đó (đã có sẵn chức năng phát âm thanh).
   • Sử dụng modifier .onTapGesture trên hình ảnh để phát âm thanh khi chạm vào.
   • Trong closure của .onTapGesture, gọi hàm playSound và truyền vào tên file âm thanh ("punch sound").

   Image("clown")
       .resizable()
       .scaledToFit()
       .onTapGesture {
           playSound(sound: "punch sound", type: "mp3")
       }
   

<Lời chúc>
Chúc bạn thành công và tiếp tục rèn luyện kỹ năng lập trình Swift!