UIStackView詳解


###UIStackView的介紹

 

 

第一次發博客,寫的不好請原諒,哈哈,這些是我從網上東拼西湊學來的,哈哈,如果有疑問的話請聯系我,這個我不會放圖我這里有完整的Demo需要的聯系我哦,我的郵箱是:xiaokang505@tom.com(請備注博客園)

1. UIStackView 是iOS9中新增的一個視圖,用來管理一行或一列視圖的組合。

2. 對於開發者來說堆棧視圖(UIStackView)的引入值得一提。我知道對於一些開發者來說使用autolayout設計一些復雜的交互界面是比較困難的。UIStackView正好能幫助到並讓我們的開發者的工作變得更容易些。UIStackView提供了一個高效的接口用於平鋪一行或一列的視圖組合。對於嵌入到StackView的視圖,你不用再添加自動布局的約束了Stack View管理這些子視圖的布局,並幫你自動布局約束。也就是說,這些子視圖能夠適應不同的屏幕尺寸。此外,你可以嵌入一個stack View到另一個stack view中來創建更為復雜的用戶界面。不要誤解我的意思,這並不意味着你就不需要處理自動布局了。你仍舊要定義一些布局約束來約束stack view。它只是幫你節約了為每個UI元素創建約束的時間,同時它更容易的從布局中添加/刪除一個視圖。

 

###UIStackView的在故事版中的兩種創建方法

 

1. 方法一:從控件面板中進行拖拽,在控件面板中一共有兩個stackView,一個是Horizontal Stack View,這個是子視圖水平依次排布另一個Vertical Stack View是子視圖垂直排布,選中一個將其拖出

2. 方法二:將需要添加如UIStackView的視圖全部選中點擊水槽一樣的按鈕此時在出現了

* 注意:此時這個UIStackView無法改變大小(只要在UIStackView中存在視圖就不能改變frame)我們可以為他添加約束,讓StackView進行改變

 

###UIStackView的屬性介紹

1. 這個是UIStackView的屬性面板

* Axis:這個屬性是改變UIStackView中的排布方式的屬性,其中有水平排布與垂直排布

* Alignment:這個屬性是其中子視圖的位置擺布方式默認是填充擺布

* Fill:子視圖填充他所在的位置(默認)

* Leading:子視圖頭部對齊

* Center:子視圖居中對齊

* Trailing:子視圖尾部對齊

* Distribution:子視圖的大小

* Fill:子視圖填充整個UIStackView

* Fill Equally:子視圖填充空白區域並等分

* Fill Proportionally:按照目前相對位置進行填充

* Equal Spacing:等間距

* Spacing設置子視圖之間的間距大小

* Baseline Relative:如果設置子視圖間距的大小為基線到下一個視圖的頭部

 

注意點UIStackView其實是一個Container View他不能被渲染所以這個視圖沒有backgroundColor與drawRect方法

代碼:

UIView *view1 = [[UIView alloc] init];

    view1.backgroundColor = [UIColor redColor];

    UIView *view2 = [[UIView alloc] init];

    view2.backgroundColor = [UIColor orangeColor];

    //創建一個水平的stackView子視圖這個視圖內置與大的StackView

    UIStackView *subStackView = [[UIStackView alloc] initWithArrangedSubviews:@[view1,view2]];

    subStackView.axis = UILayoutConstraintAxisHorizontal;

    subStackView.alignment = UIStackViewAlignmentFill;

    subStackView.distribution = UIStackViewDistributionFillEqually;

    

    

    UIView *view3 = [[UIView alloc] init];

    view3.backgroundColor = [UIColor brownColor];

    UIView *view4 = [[UIView alloc] init];

    view4.backgroundColor = [UIColor blueColor];

    

    //將上面的子stackView添加到全局的stackView

    UIStackView *stackView = [[UIStackView alloc] initWithArrangedSubviews:@[subStackView,view3,view4]];

    stackView.translatesAutoresizingMaskIntoConstraints = NO;

    stackView.axis = UILayoutConstraintAxisVertical;

    stackView.alignment = UIStackViewAlignmentFill;

    stackView.distribution = UIStackViewDistributionFillEqually;

    [self.view addSubview:stackView];

    

    

    //只有全局的stackView才去做自動布局,而子stackView不用去做自動布局,他會自動去適應屏幕

    NSString *hVFL = @"H:|-space-[stackView]-space-|";

    NSString *vVFL = @"V:|-space-[stackView]-space-|";

    NSArray *hVFLs = [NSLayoutConstraint constraintsWithVisualFormat:hVFL options:NSLayoutFormatDirectionLeadingToTrailing metrics:@{@"space":@0} views:NSDictionaryOfVariableBindings(stackView)];

    NSArray *vVFLs = [NSLayoutConstraint constraintsWithVisualFormat:vVFL options:NSLayoutFormatDirectionLeadingToTrailing metrics:@{@"space":@0} views:NSDictionaryOfVariableBindings(stackView)];

    [self.view addConstraints:hVFLs];

    [self.view addConstraints:vVFLs];


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM