[Video Summary] Ch. 1.7 Adding Your Own Images to Your SwiftUI App (2025)

Mô tả nhanh

Video này hướng dẫn cách thêm hình ảnh tùy chỉnh vào ứng dụng SwiftUI, cách bo tròn góc ảnh, thêm bóng đổ và cách thay đổi ảnh khi nhấn 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 thêm hình ảnh tùy chỉnh vào ứng dụng SwiftUI, cách bo tròn góc ảnh, thêm bóng đổ và cách thay đổi ảnh khi nhấn nút. Cụ thể, video trình bày các bước sau:

1. Chuẩn bị hình ảnh:
   • Sử dụng hình ảnh định dạng PNG, JPEG, HEIC.
   • Đặt tên ảnh theo thứ tự: image0, image1, image2, ... image9. Bạn có thể tải bộ ảnh mẫu từ link được cung cấp trong video (bit.ly/pr-dg-swiftui-files)
2. Thêm hình ảnh vào Asset Catalog:
   • Mở project navigator trong Xcode.
   • Chọn Assets.xcassets.
   • Kéo và thả các ảnh đã chuẩn bị vào cột giữa (dưới AppIcon).
   • Lưu ý: Có thể thêm các ảnh có độ phân giải cao hơn (2x, 3x) bằng cách thêm @2x hoặc @3x vào tên file.
3. Hiển thị ảnh trong ứng dụng:
   • Mở file ContentView.swift.
   • Trong VStack, thêm Image(name: "image0") để hiển thị ảnh đầu tiên.
   • Xóa modifier foregroundStyle (nếu có).
4. Bo tròn góc ảnh:
   • Sử dụng modifier .clipShape(RoundedRectangle(cornerRadius: 30)) để bo tròn góc. Thay đổi giá trị cornerRadius để có độ tròn khác nhau.
5. Thêm bóng đổ:
   • Sử dụng modifier .shadow(radius: 30) để thêm bóng đổ.
6. Thay đổi ảnh khi nhấn nút:

   • Khai báo một @State var tên imageName để lưu trữ tên ảnh, khởi tạo giá trị ban đầu là "".

   • Trong Image(name: imageName), thay name là imageName

   • Trong action của nút, sử dụng toán tử điều kiện (ternary operator) để thay đổi giá trị của imageName giữa image0 và image1 khi nút được nhấn:

     imageName = imageName == "image0" ? "image1" : "image0"
     

   • Chú ý: Tại thời điểm khởi chạy, vì imageName là rỗng ("") nên sẽ không có ảnh nào được hiển thị.

7. Refactor (đổi tên biến):
   • Click chuột phải vào biến cần đổi tên.
   • Chọn Refactor -> Rename.
   • Nhập tên mới và nhấn Enter.

Chúc bạn thành công và tiếp tục khám phá những điều thú vị khác trong lập trình Swift và SwiftUI!