[Video Summary] Ch. 1. Fundamentals: Getting SwiftUI Layout Right Pt 2. Colors, background, safeArea & More (2025)

Mô tả nhanh

Video này hướng dẫn về cách sử dụng Spacer để sắp xếp các view, làm việc với safe area và cách xử lý màu nền tràn vào safe area, cách tạo màu tùy chỉnh và áp dụng gradient cho background trong SwiftUI.

Video

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

Mô tả chi tiết

Video này hướng dẫn về cách sử dụng Spacer để sắp xếp các view, làm việc với safe area và cách xử lý màu nền tràn vào safe area, cách tạo màu tùy chỉnh và áp dụng gradient cho background trong SwiftUI.

Nội dung chi tiết:

1. Sử dụng Spacer:
   • Spacer tự động chiếm hết không gian có sẵn để đẩy các view khác ra xa.
   • Có thể dùng nhiều Spacer trong VStack/HStack để căn chỉnh các view.
   • Các Spacer sẽ chia đều không gian trống khi có nhiều hơn một.
2. Safe Area:
   • Safe Area là vùng an toàn trên màn hình, tránh các phần bị che khuất như notch hoặc phần bo tròn của màn hình.
   • Có thể thêm padding để tạo khoảng cách giữa button và cạnh dưới màn hình.
3. Màu và Background:
   • Khi đặt background cho một view, màu có thể tràn vào safe area.
   • Để tránh tràn màu vào safe area có 2 cách:
     • Thêm một chút padding (1 point).
     • Sử dụng .clipShape(RoundedRectangle(cornerRadius: 0)) hoặc .clipShape(RoundedRectangle(cornerRadius: number))
   • .cornerRadius(0) không tạo góc bo tròn nhưng vẫn ngăn màu tràn vào safe area.
4. Tạo Color tùy chỉnh:
   • Mở Assets Catalog (bên trái màn hình), tạo một new Color set.
   • Đặt Appearances là None để chỉ có một màu duy nhất.
   • Có 3 cách tạo màu:
     • Dùng Color Picker:
       • Chọn universal box, ấn Show Color Panel (bên phải).
       • Chọn màu từ các tab Color Panel hoặc chọn chính xác 1 điểm màu bằng Eye Dropper.
     • Nhập giá trị RGB:
       • Chọn input method là 8-bit(0-255).
       • Điền giá trị R, G, B.
     • Dùng Eyedropper:
       • Co nhỏ cửa sổ Xcode để thấy cả trang web chứa màu mong muốn.
       • Click Eyedropper và chọn màu trên trang web.
   • Các màu tùy chỉnh được đặt tên và có thể được gọi bằng dot notation trong code.
5. Sử dụng màu:
   • Có thể nhập màu bằng dot notation hoặc kéo thả từ library.
   • Màu có thể thay đổi ở Assets Catalog và tất cả chỗ dùng màu đó sẽ được cập nhật.
   • Phân biệt background modifier (cho phần tĩnh) và tint modifier (cho các phần tương tác).
6. Background cho toàn màn hình:
   • Có 2 cách:
     • Dùng ZStack:
       • Bọc VStack trong ZStack.
       • Màu được đặt đầu tiên trong ZStack và dùng Color view.
       • Sử dụng .ignoresSafeArea() để màu tràn cả safe area.
     • Dùng background modifier:
       • Dùng .background(Color.yourColor) cho VStack để tạo background full màn hình.
   • Có thể dùng .opacity() để làm mờ màu background.
7. Gradient:
   • Dùng .gradient để tạo hiệu ứng chuyển màu nhẹ.
   • Có thể tạo gradient phức tạp với Gradient(colors: [color1, color2, ...]).
   • Các loại gradient khác: linearGradient, radialGradient, angularGradient.

Chúc bạn thành công trên con đường chinh phục Swift và SwiftUI!