Skip to content
  • Home
  • Code
  • iOS & Swift
  • Combine
  • RxSwift
  • SwiftUI
  • Flutter & Dart
  • Tutorials
  • Art
  • Blog
Fx Studio
  • Home
  • Code
  • iOS & Swift
  • Combine
  • RxSwift
  • SwiftUI
  • Flutter & Dart
  • Tutorials
  • Art
  • Blog
Written by chuotfx on October 23, 2019

Basic iOS tutorial : Stack View

iOS & Swift

Contents

  • Chuẩn bị
  • 1. Giới thiệu
  • 2. First Stack View
  • 3. Stack View Constraints
  • 4. Stack View Properties
    • 4.1. Axis
    • 4.2 Alignment
    • 4.3 Distribution
    • 4.4 Spacing
  • 5. Stack View in Stack View
  • Tạm kết

Chào bạn, chúng ta lại tiếp tục với seri học iOS cho mọi người. Ở bài trước, thì mình đã giới thiệu sơ lược về Auto Layout trong việc thiết kế giao diện của ứng dụng iOS. Bây giờ, chúng ta sẽ tới phần tạo giao diện khác Auto Layout 1 chút, nhưng đơn giản hơn rất nhiều. Đó là Stack View, nó rất phù hợp với việc tạo giao diện nhanh và không quá phức tạp.

Còn nếu bạn chưa biết hay chưa đọc qua cách tạo giao diện bằng code chay thì có thể tham khảo các bài sau:

  • Basic iOS tutorial : Custom View
  • Basic iOS tutorial : Drawing

Bắt đầu thôi!

Chuẩn bị

  • MacOS 10.14.4
  • Xcode 11.0
  • Swift 5.1

1. Giới thiệu

  • Khó khăn khi tạo giao diện bằng code chay:
    • Tính toán frame cho phù hợp
    • Custom view tốn thời gian
    • Testing phải build đi build nhiều lần
  • Khó khăn khi tạo giao diện bằng Auto Layout:
    • Khó, khó và khó
    • Contraints cũng rất phức tạp
    • Debugs không ra
    • Đôi lúc không hiểu vì sao kéo thả lại được
    • Giao diện càng phức tạp thì Auto Layout lại khá là nặng

Cần tìm 1 giải pháp để giải quyết 2 vấn đề:

  1. Bố cục view : để auto layout cho các phần view nhỏ hơn, lúc đó sẽ đơn giản hơn
  2. Nhanh và tiết kiệm thời gian

Chào mừng bạn đến với Stack View.

  • Stack View là gì?
    • Là một cách dựng giao diện dễ dàng và nhanh chóng hơn
    • Cung cấp cách layout  của các view theo các chiều horizontal và vertical
    • Có các thuộc tính để tuỳ chỉnh cho việc tự động layout
      • alignment
      • distribution
      • spacing
      • …
    • Nó cũng giống như 1 view bình thường nên có thể sử dụng Auto Layout cho nó.

2. First Stack View

  • Mở Xcode > new iOS project
  • Mở file Main.storyboar
  • Thêm 3 UIImageView

  • Tại thanh Auto Layout Bar > Chọn Embed in > Chọn Stack View
    • 3 UIImageView sẽ nhóm lại
    • Bọc chúng nó bằng 1 Stack View

  • Kết quả khá là xấu nếu ảnh của bạn có size lơn.

  • Auto Layout cho Stack View trên
    • Size : 310px x 100px
    • Center: Horizontal & Vertical
  • Edit lại thuộc tính của Stack View với:
    • Alignment = Fill
    • Distribution = Fill Equally
    • Spacing = 5
  • Kết quả:

3. Stack View Constraints

Xem Stack View cũng là một View, thì chúng ta có thể áp dụng các constraints từ Auto Layout cho nó.

  • Cần phải có `constraints` cho các Stack View vì chúng rất dễ bị ảnh hưởng từ các subview trong nó. Dẫn tới layout của bạn rất là xấu
  • Ví dụ:
    • Thêm 1 UIView chứa 2 subview (2 UILabel)
    • View này sẽ ở chính giữa màn hình và Stack View trên sẽ ở dưới 30px so với View
  • Add constraint cho Stack View
    • Bước 1: kích thước

    • Bước 2: canh chính giữa Horizontal

    • Bước 3: canh top so với View trên

  • Kết quả

4. Stack View Properties

Tuỳ chỉnh một số thuộc tính của Stack View, xem nó thay đổi như thế nào nha.

4.1. Axis

  • Horizontal

  • Vertical

4.2 Alignment

  • Fill

  • Leading

  • Center

  • Trailing

Tạm thời OK thì chúng ta sẽ xét là Fill cho đẹp và chuyển sang các thuộc tính khác của Stack View.

4.3 Distribution

  • Fill

  • Fill Equally

  • Fill Proportionally

  • Equal Spacing

  • Equal Centering

4.4 Spacing

  • Fix value

  • Standard

 

5. Stack View in Stack View

  • Có thể tạo Stack View cho các Stack View để bố cục giao diện hợp lý hơn
  • Các thuộc tính và constraint thì vẫn áp dụng được như trên.
  • Tiếp tục ví dụ, clear hết tất cả các contraints layout

  • Embed in 2 view thành 1 Stack View

  • Xét constraints cho Stack View lớn
    • Kích thước

    • Canh giữa màn hình

 

  • Edit lại các thuộc tính của Stack View

  • Làm tiếp cho các Stack View con
  • Kết quả

Tạm kết

  • Tìm hiểu Stack View & cách tạo
  • Tuỳ chỉnh được các thuộc tính của Stack View
  • Bố cục được giao diện với Stack View
FacebookTweetPinYummlyLinkedInPrintEmailShares9

Related Posts:

  • Reusable View - SwiftUI Notes #10
    Reusable View - SwiftUI Notes #10
  • Declaring View - SwiftUI Notes #8
    Declaring View - SwiftUI Notes #8
  • RxCocoa Basic – Delegate Proxy
    RxCocoa Basic – Delegate Proxy
  • RxCocoa Basic – Traits
    RxCocoa Basic – Traits
Tags: basic ios tutorial, iOS, StackView
Written by chuotfx

Hãy ngồi xuống, uống miếng bánh và ăn miếng trà. Chúng ta cùng nhau đàm đạo về đời, về code nhóe!

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Donate – Buy me a coffee!

Fan page

Fx Studio

Tags

Actor Advanced Swift api AppDistribution Asynchronous autolayout basic ios tutorial blog callback ci/cd closure collectionview combine concurrency CoreData Core Location crashlytics darkmode dart dart basic dart tour Declarative decoding delegate deploy fabric fastlane firebase flavor flutter GCD iOS mapview MVVM optional protocol rxswift Swift Swift 5.5 SwiftUI SwiftUI Notes tableview testing TravisCI unittest

Recent Posts

  • Raw String trong 10 phút
  • Dispatch Semaphore trong 10 phút
  • Tổng kết năm 2022
  • KeyPath trong 10 phút – Swift
  • Make color App Flutter
  • Ứng dụng Flutter đầu tiên
  • Cài đặt Flutter SDK & Hello world
  • Coding Conventions – người hùng hay kẻ tội đồ?
  • Giới thiệu về Flutter
  • Tìm hiểu về ngôn ngữ lập trình Dart

You may also like:

  • RxCocoa Basic - Display Data
    RxCocoa Basic - Display Data
  • RxCocoa Basic – Merge Observables Input
    RxCocoa Basic – Merge Observables Input
  • RxCocoa Basic – Binding Observables
    RxCocoa Basic – Binding Observables
  • Modal View, Alert & ActionSheet - SwiftUI Notes #47
    Modal View, Alert & ActionSheet - SwiftUI Notes #47
  • Text View trong 10 phút - SwiftUI Notes #25
    Text View trong 10 phút - SwiftUI Notes #25

Archives

  • February 2023 (1)
  • January 2023 (2)
  • November 2022 (2)
  • October 2022 (1)
  • September 2022 (5)
  • August 2022 (6)
  • July 2022 (7)
  • June 2022 (8)
  • May 2022 (5)
  • April 2022 (1)
  • March 2022 (3)
  • February 2022 (5)
  • January 2022 (4)
  • December 2021 (6)
  • November 2021 (8)
  • October 2021 (8)
  • September 2021 (8)
  • August 2021 (8)
  • July 2021 (9)
  • June 2021 (8)
  • May 2021 (7)
  • April 2021 (11)
  • March 2021 (12)
  • February 2021 (3)
  • January 2021 (3)
  • December 2020 (3)
  • November 2020 (9)
  • October 2020 (7)
  • September 2020 (17)
  • August 2020 (1)
  • July 2020 (3)
  • June 2020 (1)
  • May 2020 (2)
  • April 2020 (3)
  • March 2020 (20)
  • February 2020 (5)
  • January 2020 (2)
  • December 2019 (12)
  • November 2019 (12)
  • October 2019 (19)
  • September 2019 (17)
  • August 2019 (10)

About me

Education, Mini Game, Digital Art & Life of coders
Contacts:
contacts@fxstudio.dev

Fx Studio

  • Home
  • About me
  • Contact us
  • Mail
  • Privacy Policy
  • Donate
  • Sitemap

Categories

  • Art (1)
  • Blog (22)
  • Code (4)
  • Combine (22)
  • Flutter & Dart (24)
  • iOS & Swift (86)
  • RxSwift (37)
  • SwiftUI (76)
  • Tutorials (70)

Newsletter

Stay up to date with our latest news and posts.
Loading

    Copyright © 2023 Fx Studio - All rights reserved.

    Share this ArticleLike this article? Email it to a friend!

    Email sent!