MakeXYZ Fun

[Video Summary] Ch. 3.1 onTapGesture and Buttons with systemName icon labels - Building Big the Guy UI in SwiftUI

Admin -

Mô tả nhanh

Video này hướng dẫn cách tạo dự án Xcode, thiết lập giao diện người dùng cơ bản với SwiftUI, sử dụng onTapGesture để phát âm thanh khi chạm vào ảnh, và làm quen với một định dạng nút (button) mới có icon và label.

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 dự án Xcode, thiết lập giao diện người dùng cơ bản với SwiftUI, sử dụng onTapGesture để phát âm thanh khi chạm vào ảnh, và làm quen với một định dạng nút (button) mới có icon và label.

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

  1. Tạo dự án Xcode mới:
    • Chọn "App" trong iOS.
    • Đặt tên dự án (ví dụ: "BipTheGuy-SwiftUI").
    • Chọn giao diện SwiftUI, bỏ chọn các tùy chọn Tests và Core Data.
    • Lưu project vào desktop.
    • Thiết lập tên hiển thị (Display Name) cho project.
  2. Tải và thêm tài nguyên:
    • Truy cập đường dẫn bit.ly/profg-swiftuifiles để tải file tài nguyên.
    • Kéo file bip the guy icon, thư mục bip launch screen images, và 2 file clown và punch sound vào trong Asset Catalog.
  3. Xây dựng giao diện (ContentView):
    • Xóa code mặc định trong ContentView.
    • Thêm Image("clown") vào trong VStack, sau đó thêm modifier .resizable() và .scaledToFit() để điều chỉnh kích thước ảnh.
    • Thêm Spacer() ở trên và dưới ảnh.
    • Thêm Button với action và label (một dạng mới của button trong SwiftUI).
      • Trong action, thêm comment //TODO Button action here
      • Trong label, sử dụng Label với title là "Photo Library" và systemImage (sử dụng SF symbol) là photo.fill.on.rectangle.fill.
    • Có thể thêm .buttonStyle(.borderedProminent) nhưng video này không dùng.
  4. Thêm chức năng phát âm thanh:
    • Import AVFAudio ở đầu file.
    • Thêm @State private var audioPlayer: AVAudioPlayer! để khai báo một biến audioPlayer.
    • Copy hàm playSound từ một dự án trước và paste vào (ví dụ từ project YouAreAwesome).
  5. Thêm xử lý sự kiện chạm vào ảnh:
    • Thêm .onTapGesture vào Image("clown").
    • Trong closure của onTapGesture, gọi hàm playSound("punch sound").

Video kết thúc với việc kiểm tra chức năng khi chạm vào ảnh và phát âm thanh.

Chúc bạn học tập tốt!