Stack View được Apple giới thiệu ở iOS 9, sự ra đời của nó đã làm giảm gánh nặng cho lập trình viên khi sử dụng Auto Layout. Tuy nhiên có một hạn chế đó là chúng ta không thể tùy chỉnh được khoảng cách giữa các views bên trong Stack View, Cách khắc phục là lồng các stack view vào với nhau, nhưng nó sẽ làm UI trở nên phức tạp hơn. Và đến iOS 11 thì bạn đã có thể hoàn toàn tùy chỉnh thông số này.

Ví dụ tôi muốn tạo một layout giống như hình dưới đây:

Variable space layout

Chúng ta có tổng cộng là 5 label, một header label với font size lớn hơn, 3 label làm thân và 1 label có font chữ nhỏ hơn làm footer ở dưới. Khoảng cách của 3 label ở giữa là 8, nhưng khoảng cách với header và footer là 32.

Như đã nói ở trên thì chúng ta có tạo ra một Inner stack view để lồng vào trong stack view hiện tại.

Inner Stack View

Inner Stack View chứa 3 label ở giữa và cách header và footer mỗi phần là 32 point. Cách này đã giải quyết được bài toán ở trên, thế nhưng khi tôi muốn thay đổi khoảng cách giữa Inner Stack View và Header là 20 chẳng hạn, thì bài toán sẽ trở nên phức tạp hơn rất nhiều.

Và với sự ra đời của iOS 11 thì Apple cũng đã cho phép chúng ta tùy chỉnh spacing giữa các subview trong Stack View. Giả dụ chúng ta thiết lập Stack view ở code như sau:

let stackView = UIStackView(arrangedSubviews: [headerLabel, topLabel, middleLabel, bottomLabel, footerLabel])
stackView.axis = .vertical
stackView.alignment = .fill
stackView.spacing = 8.0

Như vậy là chúng ta đã tạo spacing = 8 giữa các subview. Và để tùy biến thêm ở footer và header thì chúng ta làm như sau:

// iOS 11 only
stackView.setCustomSpacing(32.0, after: headerLabel)
stackView.setCustomSpacing(32.0, after: bottomLabel)

Lưu ý:

  • Bạn luôn phải đặt spacing sau khi thiết lập các subview.
  • Chúng ta không thể tạo custom spacing ở Interface Builder. Bạn cần phải làm nó ở trong code.
  • Custom spacing cũng sẽ bị xóa bỏ khi bạn remove subview bên trong stack view.

Standard and Default Spacing

Chúng ta có thêm 2 property mới của UIStackView trong iOS 11, chúng có vai trò thiết lập default và system spacing:

class let spacingUseDefault: CGFloat
class let spacingUseSystem: CGFloat

 

Ở đây thì bạn không thể dựa vào giá trị mà hai property trên trả về để tính toán spacing. Vai trò của chúng là một dạng "token" được dùng để lấy giá trị system spacing. Mà bạn sẽ sử dụng chúng để reset custom spacing sau khi setup view. Ví dụ như sau:

stackview.setCustomSpacing(UIStackView.spacingUseSystem, after: topLabel)

 

stackview.setCustomSpacing(UIStackView.spacingUseDefault, after: topLabel)

Khóa học lập trình di động tại Techmaster:

Để cài đặt MacOSX lên phần cứng không phải Apple liên hệ chuyên gia cài Hackintosh:

  • Nguyễn Minh Sơn: 01287065634
  • Huỳnh Minh Sơn: 0936225565
  • Website: caidatmacos.com

​