iOS 設定頁面用UIStackView佈局多個UIView達到UITableView的效果

2020-10-29 12:01:04

需求設計

設定頁面

實現思路

這個設定頁面之前就是直接在UIViewController的XIB上佈局的,一個設定選項就是一個UIView。現在新需求來了,多增加了幾個設定選項,如果還這樣直接在VC上加View的話,螢幕較小的手機就有可能顯示不全。因此,我在VC上增加了一個UIView,然後,依此新增UIScrollView和UIStackView在其上,最後把這些充當Cell的UIView都新增到UIStackView上去。

備註:這個UIScrollView佈局出現了好些問題,報錯提示說什麼內容檢視佈局不清晰,後來去掉了內容佈局,再加了一個UIView作為UIScrollView的父檢視,才沒報錯。

XIB截圖

UIStackView是什麼?

在iOS9中蘋果在UIKit框架中引入了一個新的檢視類UIStackView。UIStackView 類提供了一個高效的介面用於平鋪一行或一列的檢視組合。Stack檢視管理著所有在它的 arrangedSubviews 屬性中的檢視的佈局。這些檢視根據它們在 arrangedSubviews 陣列中的順序沿著 Stack 檢視的軸向排列。

簡而言之,即UIStackView,就是一個ContainerView,可以沿橫向或縱向按照一定的規則佈局內部的子View。

UIStackView使用arrangedSubviews陣列來管理子檢視。

需要注意的是這個陣列是一個readonly的屬性,我們需要呼叫方法對arrangedSubviews陣列進行操作。

初始化陣列:
- (instancetype)initWithArrangedSubviews:(NSArray<__kindof UIView *> *)views;
新增子檢視: 
- (void)addArrangedSubview:(UIView *)view;
移除子檢視:
- (void)removeArrangedSubview:(UIView *)view;
根據下標插入檢視:
- (void)insertArrangedSubview:(UIView *)view atIndex:(NSUInteger)stackIndex;

注意: addArrangedSubview 和 insertArrangedSubview, 會把子控制元件加到arrangedSubviews陣列的同時新增到StackView上,
但是removeArrangedSubview, 只會把子控制元件從arrangedSubviews陣列中移除,
不會從subviews中移除,如果需要可呼叫removeFromSuperview