Giới thiệu UIStackView IOS 9

Screen Shot 2015-10-17 at 21.00.34.png

Giới thiệu

Chào các bạn. Hôm nay mình sẽ giới thiệu với các bạn UIStackView 1 class mới của ios9 hỗ trợ cho việc code UI làm giảm bớt số lượng constraint trong 1 file storyboard hoặc 1 file xib.

DemoApp

Để minh hoạ cho việc sử dụng UIStackView. Mình và các bạn sẽ đi xây 1 project đơn giản hiển thị ảnh và title. Như hình vẽ dưới đây: stackview-16-2.png

Các bạn download project sample chứa resource tại url: https://www.dropbox.com/s/n8qeg6rsreatqfe/StackViewDemoStarter.zip?dl=0

Add UIStackView

Các bạn chọn storyboard chọn object library và kéo thả UIStackView vào view của viewcontroller như hình vẽ sau: Screen Shot 2015-10-17 at 21.00.34.png Có 2 loại UIStackView là stackView layout theo chiều ngang hoặc chiều dọc tương tự linearlayout của android ( nếu mình nhớ ko nhầm =))) ( cũng chẳng hiểu tại sao apple lại cho 2 loại stackView vào trong object library trong khi đó chỉ cần chọn ở: Screen Shot 2015-10-17 at 21.03.35.png là có thể chuyển đổi 2 style UIStackView) Kéo 3 UIImageView vào trong UIStackView bạn sẽ thấy các imageviews tự động căng chỉnh mà ko cần dùng constraint. Tuy cái này hay nhưng theo mình với trường hợp mà bạn cần set layout 1 trong số các imageView cũng sẽ hơi căng.

Add constraints cho StackView

Tuy bạn không phải định nghĩa constraint cho subviews của UIStackView nhưng vẫn phải định nghĩa constraint cho nó.

  • Chọn top, right, left constraint như hình vẽ

stackview-3-fs8 (1).png

  • Set constraint height của stackview = 0.7 height của superView. Bằng việc ctrl + drag vào superView

stackview-4-fs8.png

Screen Shot 2015-10-17 at 21.18.42.png

Cấu hình UIStackView

Để cho subviews trong stackView được layout như ý muốn. Bạn phải cấu hình cho UIStackview.

Screen Shot 2015-10-17 at 21.21.39.png

Các thông số như sau:

  • axis: chọn subviews layout theo chiều dọc hoặc chiều ngang
  • Alignment: Căng lề subviews sẽ căng lề với superview vd fill là subviews sẽ layout để fill toàn bộ stackview
  • distribution: xác định kích thước của các subviews.
  • Spacing: Khoảng cách giữa các subviews Chọn distribution = equal để cho 3 imageViews giãn đều theo chiều cao và spacing = 5.

stackview-8-fs8.png

Cấu hình cho các imageViews

Với mỗi imageViews bạn chọn image, enable clipSubViews, contentMod = AspectFill.

Screen Shot 2015-10-17 at 21.38.19.png

Thay đổi device trong controller và tận hưởng thành quả:

Screen Shot 2015-10-17 at 21.41.26.png

Ngon một cách tương đối @@!

Sub StackViews

Chưa xong. Hãy còn label và button nữa. với label bạn drag 2 laybel tử object library vào trong view. đặt tên là "Nature" font 30 và "A collection of nature photos from magdeleine.co" dưới "nature". Ngoài drag stackviews bằng việc drag từ object library bạn còn có 1 cách khác. chọn 2 label và click như hình sau.

Screen Shot 2015-10-17 at 21.47.13.png

stackview-11.gif

Stackviews có thể được lồng vào nhau. Tiếp theo add 2 button vào view, đặt tên là "Like" và "Share". Chọn 2 button và làm như bước trên. Chọn axis và horizontal để được 2 button theo xếp theo chiều ngang. Resize lại stackview để fit vừa đủ size button. Drag stackviews của button vào trong stackview của label ngay dưới label "nature". Select "nature" và stackview của button để embedd chung vào 1 stackview. chọn axis của stackview đó là horizontal để 2 button nằm ngang cùng với label "nature".

stackview-13.gif

Buttons yêu cầu align với baseline của label "nature". Chọn stackview chứa label "nature" và button. Align chọn First BaseLine.

stackview-14-fs8.png

Cấu hình constraint giữa stackview chứa các ảnh và stackview chứa buttons và labels.

stackview-15-fs8.png

để đảm bảo description label automatically resized. chọn line options = 0 và line breaks option thành Word Wrap.

Screen Shot 2015-10-17 at 22.07.26.png

Kết quả cuối cùng là đây:

Screen Shot 2015-10-17 at 22.11.02.png

Simulator Screen Shot Oct 17, 2015, 22.21.38.png

Nhìn landscape hơi xấu phải ko nhỉ bạn có muốn nó đẹp hơn nữa không:

Simulator Screen Shot Oct 17, 2015, 22.24.29.png

Thiết kế stackview cho từng loại màn hình sử dụng Size Classes (Nếu chưa rành sizeclass bạn có thể lên raywenderlich hoặc developer.apple.com để xem lại)

Size class parameter: stackview-19-fs8.png Chọn stackview chứa imageViews. làm như hình vẽ chọn compact height:

Screen Shot 2015-10-17 at 22.24.11.png

Và cuối cùng run project. Woa !!!

Kết luận:

  • UIStackView chỉ hoạt động trên iOS9 do vậy project của bạn sẽ chỉ chạy được trên ios9 trở đi. Chắc bạn phải chờ thêm 1 năm nữa ra ios 10 may ra thì add vào project ko bị ảnh hưởng gì về lượng người dùng. Theo mình UIStackView là con dao 2 lưỡi vì nó ẩn các constraint đi sau này muốn custom có thể sẽ khó. Nó hao hao giống fragment của android. Chúc bạn success với UIStackView -_-.
  • Link tham khảo: http://www.appcoda.com/stack-views-intro/
  • Source code: http://www.mediafire.com/download/le3pb8uw47vipaz/StackViewDemo.zip