MakeXYZ Fun

[Video Summary] Ch. 1.1 Xcode Tour & Text + Image Intro (You Are Awesome SwiftUI app - 2025)

Admin -

Mô tả nhanh

Video này trình bày về tour Xcode và giới thiệu về cách hiển thị text và image trong ứng dụng SwiftUI. Video hướng dẫn các bước tạo một project Xcode mới, làm quen với giao diện Xcode và cách viết code SwiftUI cơ bản để hiển thị text, image và tùy chỉnh chúng.

Video

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

Mô tả chi tiết

Video này trình bày về tour Xcode và giới thiệu về cách hiển thị text và image trong ứng dụng SwiftUI.

Video bắt đầu bằng việc hướng dẫn cách tạo một project Xcode mới, thiết lập các thông số ban đầu như tên project, team, organization identifier, và lựa chọn Swift UI làm interface. Sau đó, video chia sẻ các lưu ý quan trọng về việc quản lý project và các file liên quan, đặc biệt là không được đổi tên hoặc di chuyển các file, folder khi Xcode đang mở.

Tiếp theo, video đi vào chi tiết giao diện của Xcode, bao gồm Project Navigator, Editor, Inspector, Preview canvas và các thao tác cơ bản với chúng (ẩn/hiện, resize, zoom). Các setting quan trọng để hiển thị line number, bật code folding cũng được hướng dẫn.

Phần trọng tâm của video là đi vào code SwiftUI để hiển thị "Hello, world!" sau đó chỉnh sửa thành "You are awesome!". Các bước thực hiện cụ thể:

  1. Làm quen với VStack: Giải thích về VStack để stack views theo chiều dọc. Thay đổi thử thành HStack để stack views theo chiều ngang.
  2. Chỉnh sửa Text view:
    • Thay đổi nội dung text từ "Hello, world!" thành "You are awesome!".
    • Giải thích về kiểu dữ liệu string và cách sử dụng double quotes.
    • Giới thiệu về Attributes inspector để thay đổi font chữ và các thuộc tính khác của Text view.
    • Hướng dẫn cách code trực tiếp để thay đổi font, bỏ qua Attributes inspector. Hướng dẫn cách sử dụng code completion để tránh typo.
    • Thực hiện các thay đổi về font chữ (large title), font weight (heavy), foreground color (red) cho text view cả bằng attributes inspector và code.
    • Lưu ý về việc foreground color bị deprecated và thay thế bằng foregroundStyle.
  3. Chỉnh sửa Image view:
    • Tìm hiểu về image scale và cách thay đổi.
    • Thay đổi image scale thành resizable và scaledToFit để hiển thị image một cách đầy đủ, không bị méo mó.
    • Thay đổi image từ globe -> cloud -> iPhone.
    • Thay đổi màu của image bằng tint hoặc foregroundStyle.
    • Hướng dẫn cách sử dụng library để tìm kiếm các system symbol và thêm vào project.
  4. Thử thách: Cho người xem tự tìm symbol Swift và set màu orange.

Video kết thúc bằng một thử thách nhỏ và lời chúc học tập thành công.

Chúc bạn học tập tốt và có những trải nghiệm thú vị với SwiftUI!