[Video Summary] Ch. 3.1 onTapGesture and Buttons with systemName icon labels - Building Big the Guy UI in SwiftUI
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
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:
- 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.
- 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ụcbip launch screen images
, và 2 fileclown
vàpunch sound
vào trong Asset Catalog.
- Truy cập đường dẫn
- Xây dựng giao diện (ContentView):
- Xóa code mặc định trong ContentView.
- Thêm
Image("clown")
vào trongVStack
, 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ớiaction
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ụngLabel
vớititle
là "Photo Library" vàsystemImage
(sử dụng SF symbol) làphoto.fill.on.rectangle.fill
.
- Trong
- Có thể thêm
.buttonStyle(.borderedProminent)
nhưng video này không dùng.
- 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ếnaudioPlayer
. - Copy hàm
playSound
từ một dự án trước và paste vào (ví dụ từ project YouAreAwesome).
- Import
- Thêm xử lý sự kiện chạm vào ảnh:
- Thêm
.onTapGesture
vàoImage("clown")
. - Trong closure của
onTapGesture
, gọi hàmplaySound("punch sound")
.
- Thêm
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!