IOS開發學習筆記038-autolayout 自動布局 界面實現

在storyboard/xib文件中實現自動布局 autolayout 

1、注意事項

• autolayout和frame屬性是有沖突的，所以如果准備使用autolayout，就不要再代碼中對控件的frame屬性進行操作。

• 設置autolayout必須設置完全，必須包括位置信息和尺寸信息。也就是說必須有寬高和坐標位置,缺一不可。

 

2、簡單示例

　　兩個view（redView和blueView），等高等寬，redView距離左邊和下邊間距都是20，距離blueView間距也是20.blueView距離右邊和下邊都是20.

 

 

　　2.1、autolayout的相關屬性設置

 

　　2.2、redView的設置，blueView類似

要保證每個控件都可以計算出來位置信息和尺寸信息。

 

blueView的約束設置

 

　　2.3、效果預覽

任意旋轉，始終處於底部，並且間距保持一致。

3、復雜示例

　　實現效果如下：

　　View中有四個UIView

　　每個UIView中又包含兩個控件UIImageView和UILable。

　　UIimageview位於正中心，UILable位於底部。

　　

 

　　3.1、先實現內部控件的自動布局

分析如下：

　　UIImageView和UIlable的自動布局。

UIImageView的相關約束信息。

UIlable的相關約束信息

 

　　3.2、添加四個相同的UIView，並設置相關約束

其中一個redView的約束信息

 

看效果，在不同尺寸下，和旋轉狀態下，效果一致。

 

總結：

這個全部是通過操作添加約束的，難以用文字表達清楚，看源代碼吧（最后邊）。

 

 

4、特殊情況UIlable

設置UILable的約束條件，它只需指定位置和寬度，高度系統會根據文字長度自動計算。
比如一下程序：

 兩個UIView中間是一個UIlabel。現在文字長度是這樣。然后添加一個方法實現單擊屏幕，使得文字內容變短。

/**
 *  觸摸屏幕調用這個方法

 */
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    
    // 添加動畫效果
    [UIView animateWithDuration:0.5 animations:^{
         _lab.text = @"asdfasfasdfadsf";
        // 要執行動畫的view
        [self.view layoutIfNeeded];
    }];
}

 

單擊屏幕后UILable會自動縮小高度。不會是固定大小。

 

 

源代碼參考：

  http://pan.baidu.com/s/1qW60b5y

 

 

 

今日如此，明日依舊。

2015-06-02