xib和storyboard匯總干貨(一)

前言

這篇文章是把所有自己開發(fā)中使用到的XIB方面的東西做一個匯總,想到啥寫啥,個人感覺也差不多能滿足開發(fā)的基本需求了,如果有什么遺漏,可以留言我再補充;因為是想到啥就去寫啥,demo也是臨時建的,大部分的東西可能都會以截圖進行展示,所以可能比較亂,大家將就看吧...(文章中的所有代碼在文章最后面統(tǒng)一給出下載地址,需要的可以下載)

1. Button

btn方面就講幾點:

1.1 如何設置圓角:
圓角
1.2 如何設置邊框

邊框設置因為涉及到邊框的顏色CGColor,所以Key Path中是沒辦法的,但是可以通過給CALayer添加一個分類設置:

#import <QuartzCore/QuartzCore.h>
#import <UIKit/UIKit.h>
NS_ASSUME_NONNULL_BEGIN

@interface CALayer (XibConfiguration)
@property(nonatomic, assign) UIColor *borderUIColor;
@end

NS_ASSUME_NONNULL_END

#import "CALayer+XibConfiguration.h"
@implementation CALayer (XibConfiguration)

-(void)setBorderUIColor:(UIColor*)color{
    self.borderColor = color.CGColor;
}

-(UIColor*)borderUIColor{
    return [UIColor colorWithCGColor:self.borderColor];
}

@end

然后btn再設置如下:


image.png

最后的效果如圖:


image.png
1.3 如何設置指定的角為圓角,如圖這樣:
image.png

我這里的方法是創(chuàng)建了一個button的子類,然后xib中的button繼承這個button類,子類具體如下:

#import <UIKit/UIKit.h>

NS_ASSUME_NONNULL_BEGIN

IB_DESIGNABLE

@interface CYFRoundedButton : UIButton

@property (nonatomic, assign) IBInspectable NSUInteger style;

@property (nonatomic, assign) IBInspectable CGFloat yf_cornerRadius;

@end

NS_ASSUME_NONNULL_END

#import "CYFRoundedButton.h"

@implementation CYFRoundedButton

- (void)makeCorner {
    UIRectCorner corners;
    switch (self.style) {
        case 0:
            corners = UIRectCornerBottomLeft;
            break;
        case 1:
            corners = UIRectCornerTopRight;
            break;
        case 2:
            corners = UIRectCornerTopLeft;
            break;
        case 3:
            corners = UIRectCornerTopRight;
            break;
        case 4:
            corners = UIRectCornerBottomLeft | UIRectCornerBottomRight;
            break;
        case 5:
            corners = UIRectCornerTopLeft | UIRectCornerTopRight;
            break;
        case 6:
            corners = UIRectCornerBottomLeft | UIRectCornerTopLeft;
            break;
        case 7:
            corners = UIRectCornerBottomRight | UIRectCornerTopRight;
            break;
        case 8:
            corners = UIRectCornerBottomRight | UIRectCornerTopRight | UIRectCornerTopLeft;
            break;
        case 9:
            corners = UIRectCornerBottomRight | UIRectCornerTopRight | UIRectCornerBottomLeft;
            break;
        default:
            corners = UIRectCornerAllCorners;
            break;
    }
    _yf_cornerRadius = _yf_cornerRadius ? : 10.0f;
    ///< cornerRadii : 每個角橢圓的半徑
    UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:self.bounds byRoundingCorners:corners cornerRadii:CGSizeMake(_yf_cornerRadius, _yf_cornerRadius)];
    
    CAShapeLayer *maskLayer = [CAShapeLayer layer];
    maskLayer.frame = self.bounds;
    maskLayer.path = maskPath.CGPath;                                                                                                                                                                                                                                                                                                                                                                                                                       
    self.layer.mask = maskLayer;
}

- (instancetype)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) {
        [self setupUIOnce];
    }
    return self;
}

- (instancetype)initWithCoder:(NSCoder *)aDecoder {
    if (self = [super initWithCoder:aDecoder]) {
        [self setupUIOnce];
    }
    return self;
}

- (void)setupUIOnce {
    [self makeCorner];
}

- (void)layoutSubviews {
    [super layoutSubviews];
    [self makeCorner];
}

@end

上面代碼這里就解釋一點:IB_DESIGNABLE是給xib添加屬性的,在@interface前導入,然后 IBInspectable是寫在屬性前面的,那么類中的屬性會出現(xiàn)在xib中,具體如圖:


image.png

到這里大家可能就會有很多的想法了,我們居然可以自定義屬性,那么是不是可以屬性很多xib實現(xiàn)不了的功能呢,這個大家可以去慢慢嘗試了,xib是很牛逼的工具.

如果是用純代碼的話設置button的圓角的話, 實際上就是button的layer層的mask屬性賦值一個CAShapeLayer, 而這個CAShapeLayer的路徑就是我們設置的貝塞爾曲線, 代碼如下:

_yf_cornerRadius = _yf_cornerRadius ? : 10.0f;
    ///< cornerRadii : 每個角橢圓的半徑
    UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:self.bounds byRoundingCorners:corners cornerRadii:CGSizeMake(_yf_cornerRadius, _yf_cornerRadius)];
    
    CAShapeLayer *maskLayer = [CAShapeLayer layer];
    maskLayer.frame = self.bounds;
    maskLayer.path = maskPath.CGPath;
    self.layer.mask = maskLayer;
1.4 如何給按鈕設置圖片和文字

效果如圖:


這個是左邊圖片右邊文字

操作步驟:
1.選擇btn,然后如圖:


image.png

2.設置文字和圖片的布局方式:


image.png

Force Right-to-Left 是圖片在右罗标，文字在左，F(xiàn)orce Left-to-Right 是正好相反

  1. 通過下面可以進行微調(diào),到這基本完成:


    image.png
1.5 事件綁定

按住ctrl拖拽到view上這個大家應該都會,就不說了,主要提一點,btn在一個子view上,事件拖到子view上,要注意修改File's Owner為View,不然崩潰:


image.png

button就講這么多了

20200708:button補充
button設置各種狀態(tài)時,比如設置過selected時,會發(fā)現(xiàn)button的點擊效果會有背景色加圓角,這是因為我們的button的style的設置導致的,如果使用system,就是默認使用系統(tǒng)的處理方案,我們只需要選擇Custom即可去除這些自帶的設置;

2. 給VC和View添加xib文件并綁定
1. 給一個已經(jīng)創(chuàng)建的VC添加一個xib文件:
image.png

把名稱改成我們要添加的VC的名稱,系統(tǒng)會自動生成.xib文件,但是還沒有綁定
綁定方法就是,按住ctrl 把 File`s owner 拖拽到VIew上,彈出黑框,選擇view即可


image.png

綁定后查看如下:


.

如上圖說明綁定成功了,到處就完成了;當然如果是創(chuàng)建時勾選xib則不需要自己創(chuàng)建綁定,關鍵是自己老忘??

2. 給View創(chuàng)建xib文件
  1. 同上,添加一個同名的xib

  2. 綁定:我們需要給xib關聯(lián)上VIew,但是發(fā)現(xiàn) File Owner是不能進行拖線的,因為他們兩是同級別的關系,這里我們設置如下:


    image.png

這樣就可以了;
給view創(chuàng)建了xib后,設置大小的辦法如下:View的Size可以自定義积蜻，去掉狀態(tài)欄

image.png
image.png
3.把用xib搭建的view顯示在VC的xib上

只要使用如下代碼即可:

#import "TestViewController.h"
#import "SubVIew.h"
@interface TestViewController ()

@property (weak, nonatomic) IBOutlet UIView *coverView;

@end

@implementation TestViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    SubVIew *subV = [[[NSBundle mainBundle] loadNibNamed:@"SubVIew" owner:self options:nil] lastObject];
    
    subV.frame = self.coverView.bounds;
    
    [self.coverView addSubview:subV];
    
    subV.buttonClick = ^{
        NSLog(@"點擊");
    };
    
}

@end
3. 將多個view視圖合并到一個視圖層級
image.png

在布局好了后,如果想把它們作為一個整體,可以如下操作:
按住shift鍵,選中我們需要設置成一個整體的控件,然后:


image.png

意思就是把這些控件放在一個VIew上顯示;
同樣闯割，要將其從父類view上移到另一個視圖，選擇上圖中Editor->Unembed 就可以了

4. Lable
4.1 富文本
image.png

如果想實現(xiàn)如上的效果,代碼是比較麻煩的,xib可以直接設置


image.png

設置成 attributed屬性,然后界面就變成如上了,然后我們從2中選擇要變顏色的字體,點擊3后會出現(xiàn)顏色選擇器


image.png
4.2 文字的自動換行和高度自適應
image.png

文字增加時,label自動增加高度


image.png

實現(xiàn)也很簡單:


image.png

設置行數(shù)為0,和自動換行,同時約束上,我這邊是給了三個,上左右,然后參考label設置了居上label的距離

image.png

然后XIBlable如下:


image.png

當然,你也可以給xiblabel設置上左,然后寬度設置值,高度設置成>=40這樣子:


image.png

最后的效果如圖:


image.png
4.3 設置寬度的自適應
image.png

上面的label簡單的設置添加寬度竿拆，高度宙拉，左邊，上邊約束,很簡單的常規(guī)操作;
然后如下操作: 讓其寬度可以自動調(diào)整,同時設置自適應的優(yōu)先級為1000,


image.png

然后我們在設置之前的寬度的優(yōu)先級,調(diào)到小于1000(就是比上面那個小就可以)


image.png

然后我們發(fā)現(xiàn)我們的寬度的約束變成了虛線:


image.png

說明設置成功,這里的寬度約束低于自適應的寬度設置;效果:


image.png

但是如果太長,貌似有bug:


image.png

問題還是出在寬度上面,我們改下,如圖:


image.png

設置寬度<=300,然后優(yōu)先級調(diào)到最大1000,這樣寬度又會變回實線,效果如下:


完美解決

當然這里可以優(yōu)化下,不設置寬度,設置左右邊距,然后左右邊距設置優(yōu)先級,道理是一樣的.

Lable的字體加粗和下劃線添加沒有找到,貌似只能代碼處理;

5. textField的XIB界面介紹

1丙笋、Text ：設置文本框的默認文本谢澈。
2、Placeholder ： 可以在文本框中顯示灰色的字御板，用于提示用戶應該在這個文本框輸入什么內(nèi)容锥忿。當這個文本框中輸入了數(shù)據(jù)時，用于提示的灰色的字將會自動消失怠肋。
3敬鬓、Background ：
4、Disabled ： 若選中此項笙各，用戶將不能更改文本框內(nèi)容钉答。
5、接下來是三個按鈕酪惭，用來設置對齊方式希痴。
6者甲、Border Style ： 選擇邊界風格春感。
7、Clear Button ： 這是一個下拉菜單，你可以選擇清除按鈕什么時候出現(xiàn)鲫懒，所謂清除按鈕就是出一個現(xiàn)在文本框右邊的小 X 嫩实，你可以有以下選擇：
7.1 Never appears ： 從不出現(xiàn)
7.2 Appears while editing ： 編輯時出現(xiàn)
7.3 Appears unless editing ：
7.4 Is always visible ： 總是可見
8、Clear when editing begins ： 若選中此項窥岩，則當開始編輯這個文本框時甲献，文本框中之前的內(nèi)容會被清除掉。比如颂翼，你現(xiàn)在這個文本框 A 中輸入了 "What" 晃洒，之后去編輯文本框 B，若再回來編輯文本框 A 朦乏，則其中的"What" 會被立即清除球及。
9、Text Color ： 設置文本框中文本的顏色呻疹。
10吃引、Font ： 設置文本的字體與字號。
11刽锤、Min Font Size ： 設置文本框可以顯示的最小字體（不過我感覺沒什么用）
12镊尺、Adjust To Fit ： 指定當文本框尺寸減小時，文本框中的文本是否也要縮小并思。選擇它庐氮，可以使得全部文本都可見，即使文本很長纺荧。但是這個選項要跟 Min Font Size 配合使用旭愧，文本再縮小，也不會小于設定的 Min Font Size 宙暇。
接下來的部分用于設置鍵盤如何顯示输枯。
13、Captitalization ： 設置大寫占贫。下拉菜單中有四個選項：
13.1 None ： 不設置大寫
13.2 Words ： 每個單詞首字母大寫桃熄，這里的單詞指的是以空格分開的字符串
13.3 Sentances ： 每個句子的第一個字母大寫，這里的句子是以句號加空格分開的字符串
13.4 All Characters ： 所以字母大寫
14型奥、Correction ： 檢查拼寫瞳收，默認是 YES 。
15厢汹、Keyboard ： 選擇鍵盤類型螟深，比如全數(shù)字、字母和數(shù)字等烫葬。
16界弧、Appearance：
17凡蜻、Return Key ： 選擇返回鍵，可以選擇 Search 垢箕、 Return 划栓、 Done 等。
18条获、Auto-enable Return Key ： 如選擇此項忠荞，則只有至少在文本框輸入一個字符后鍵盤的返回鍵才有效。
19帅掘、Secure ： 當你的文本框用作密碼輸入框時委煤，可以選擇這個選項超全，此時叔遂，字符顯示為星號雷蹂。

1.Alignment Horizontal 水平對齊方式
2.Alignment Vertical 垂直對齊方式
3.用于返回一個BOOL值 輸入框是否 Selected(選中) Enabled(可用) Highlighted(高亮)

6.UISegmentedControl

Style 屬性 :
-- Plain : 分段控件使用最普通的風格;
-- Bordered : 在最普通風格上添加一圈邊框;
-- Bar : 分段控件使用工具條風格;

State 屬性 :-- Momentary 復選框 : 勾選復選框后, 分段控件不保存控件狀態(tài), 如果勾選后, 點擊時高亮, 點擊后恢復原樣;

Tint 屬性 : -- 作用 : 設置分段控件被選中的高亮顏色;

Segments 屬性 : -- 作用 : 控制分成幾段;

Segment 屬性 : -- 作用 : 為不同的分段設置對應的 標題, 圖片 等內(nèi)容;

Tittle 屬性 : 每個 Segment 都有一個 Tittle 屬性, 就是分段按鈕每個按鈕的標題;
Image 屬性: 為不同的 分段 Segment 設置圖片;

Behavior 屬性 :
-- Enable 復選框 : 用于設置 Segment 是否可用;
-- Selected 復選框 : 用于設置 Segment 是否被選中;

7. UIImageView

設置圖片顯示的屬性 :
-- image (普通) : 訪問或設置該控件顯示的圖片;
-- HighlightedImage (高亮) : 設置圖片處于 高亮狀態(tài) 時顯示的圖片;

UIImageView 縮放屬性 :content Mode
-- Scale To Fill : 不保持 縱橫縮放比, 圖片完全自適應 UIImageView 控件;
-- Aspect Fit : 保持縱橫比縮放, 保證圖片長邊完全顯示出來, 完整顯示圖片;
-- Aspect Fill : 保持縱橫比縮放, 保證圖片短邊能顯示出來, 只在水平或垂直方向某一個方向是完整的, 另一個方向截取;
-- Center : 不縮放圖片, 顯示圖片的中間區(qū)域;
-- Top : 不縮放圖片, 顯示圖片的頂部區(qū)域;
-- Bottom : 不縮放圖片, 顯示圖片底部區(qū)域;
-- Left : 不縮放圖片, 顯示圖片左邊區(qū)域;
-- Right : 不縮放圖片, 顯示圖片右邊區(qū)域;
-- Top Left : 不縮放圖片, 顯示圖片左上區(qū)域;
-- Top Right : 不縮放圖片, 顯示圖片右上區(qū)域;
-- Bottom Left : 不縮放圖片, 顯示圖片左下區(qū)域;
-- Bottom Right : 不縮放圖片, 顯示圖片右下區(qū)域;

8. UIProgressView 控件屬性

Style 屬性 :
-- Default : 使用默認風格的進度條;
-- Bar : 工具條風格;
Progress 屬性 : 設置已進行的進度的比例值, 取值范圍 0.0 ~ 1.0;
Progress Tint 屬性 : 已完成的顏色;
Track Tint 屬性 : 進度條軌道顏色;

ProgressImage 屬性 : 設置進度條完成的圖片;-- 注意 : 該屬性在 Interface Builder 中沒有體現(xiàn)出來;

trackImage 屬性 : 設置進度條軌道圖片;
-- 注意 : 代碼中設置, 界面設計文件中無該屬性;

可拉伸圖片用法
可拉伸圖片作用 : 在上述進度條中, 設置的 progressImage 和 trackImage 必須是可拉伸圖片;

(2) 可拉伸圖片創(chuàng)建
創(chuàng)建可拉伸圖片 : 使用 UIImage 創(chuàng)建 可拉伸圖片, 通過 UIEdgeInsets 結(jié)構(gòu)體定義圖片拉伸區(qū)域;
-- UIEdgeInsets 結(jié)構(gòu)體 : 包括 left, top, right, bottom 四個值;
-- 縮放主體 : 圖片縮放只在 UIEdgeInsets 定義的 四個屬性值 區(qū)域縮放, 圖片的中心部分是不進行縮放的;

9. 進度環(huán)控件 (UIActivityIndicatorView)

Style 屬性 :
-- Large White : 大的 白色 風格;
-- White : 白色風格;
-- Gray : 灰色風格;

(2) Color 屬性
Color 屬性 :
-- 作用 : 設置進度條的顏色, 設置該屬性會覆蓋之前選中的風格中的顏色;

(3) Behavior 屬性
Behavior 屬性 :
-- Animating : 顯示出來后立即轉(zhuǎn)動;
-- Hides When Stopped : 停止時自動隱藏;

(4) UIActivityIndicatorView 大小
兩種大小 :
-- 標準風格 : 像素值 20 x 20;
-- 大風格 : 像素值 37 x 37;

(5) 控制方法
UIActivityIndicatorView 控制方法 :
-- 開始轉(zhuǎn)動 : startAnimating 方法;
-- 停止轉(zhuǎn)動 : stopAnimating 方法;

10. UISlider

沒啥好說的這個...

11.
11. 其他雜

當移動控件等導致警告時,可以:


image.png

一個是更新下約束,一個是去除控件上面的全部約束,就是重新布局了;

【iOS開發(fā)】理解IBOutlet顶瞒、Outlet奢赂、referencing outlet富岳、outlet connection

為了能讓代碼引用nib中的對象呛哟，我們在代碼中對應的變量前面加上IBOutlet來修飾標記苞俘，本身來說它只是個標記癣诱，沒有什么實際意義计维，只是用來告訴編譯器，這個變量有些特別撕予，是個界面的Outlet(出口)鲫惶，Outlet要和nib文件（也就是storyborad里面的界面）里面的一個對象關聯(lián)起來（建立了一個connection），一旦建立了連接实抡，我們就說當前這個標記了IBOutlet的變量是nib文件中某對象（object）的referencing outlet(引用出口)

所以說 Outlet是一個變量欠母，是一個帶有outlet標記的變量，outlet connection是nib對象創(chuàng)建之后吆寨，通過nib里面的定義赏淌，在runtime的時候，把它們關聯(lián)起來的一個機制啄清，這個關聯(lián)關系建立起來之后六水，這個outlet就是這個nib對象的referencing outlet

TestView *tView = [[NSBundle mainBundle] loadNibNamed:@"TestView" owner:self options:nil][0];

xib文件是資源文件，放在main bundle中
方法返回的是一個數(shù)組而不直接是對象辣卒，這是考慮到了Mac開發(fā)會有多個對象返回的情況掷贾，在iOS開發(fā)中就只有一個，固定取[0]就行

以xib的形式保存控件對象的過程其實叫做固化(archive)荣茫，通過xib文件創(chuàng)建控件的過程叫做解固

一般的UIView對象想帅，代碼初始化的時候都會調(diào)用initWithFrame:方法,用xib創(chuàng)建的UIView對象是不會調(diào)用此方法的
Xib固化相關的初始化函數(shù)是：- (instancetype)initWithCoder:(NSCoder *)aDecoder

所以，當以xib創(chuàng)建UIView對象的時候這個函數(shù)會調(diào)用啡莉，之前在initWithFrame:中要做的事情港准，可以放在initWithCoder:中憎乙，或者放在：

- (void)awakeFromNib
{
    [super awakeFromNib];
    //...
}

該函數(shù)會在initWithCoder:后調(diào)用,兩個函數(shù)之間的關系有點像VC的loadView和viewDidLoad之間的關系,

由于SB文件與VC一般是一對多的關系，所以我們不僅要知道即將創(chuàng)建的這個VC的實例對象是加載的哪個SB叉趣，而且還要知道加載的是該SB中的哪個具體的VC。
storyboard中取VC的方法
SecVC *secVC = [[UIStoryboard storyboardWithName:@"Demo" bundle:[NSBundle mainBundle]] instantiateViewControllerWithIdentifier:@"SecVC"];

@"Demo"參數(shù)代表SB的文件名字该押，@"SecVC"代表該VC在SB中的ID疗杉，具體使用會在下面的文章中提到。個人建議蚕礼，該ID最好與類名相同烟具，這樣便于將實例化的方法封在基類中

storyboard 中加載VC的基類寫法:

#import <UIKit/UIKit.h>

@interface GJBasicController : UIViewController

+ (NSString *)gj_storyboardID;
+ (instancetype)gj_controllerInstanceFromStoryboardWithName:(NSString *)aStoryboardName;

@end
#import "GJBasicController.h"

@implementation GJBasicController

+ (NSString *)gj_storyboardID
{
    return NSStringFromClass([self class]);
}

+ (instancetype)gj_controllerInstanceFromStoryboardWithName:(NSString *)aStoryboardName
{
    return [[UIStoryboard storyboardWithName:aStoryboardName bundle:[NSBundle mainBundle]] instantiateViewControllerWithIdentifier:[self storyboardID]];
}

@end
image.png

Class菜單中的Class，一般就是將你的類與xib文件掛鉤,我們這里的SecondVC.xib中的View如果要設置成你自定義的View的話就改變這個屬性奠蹬，我們將一個xib與一個UIView子類進行綁定的時候也是改變這個屬性的朝聋，這是一個很重要的屬性

Control + Shift + Command + Enter 打開多個窗口的快捷鍵,方便拖線

色板:
image.png
文件交互

該標簽主要負責xib文件和類的源文件交互用，都是“連線”相關的操作囤躁，例如UITableView的delegate與datasoutce冀痕，IBAction、IBOutlet等相關,如果我們用了xib的頁面產(chǎn)生了莫名其妙的crash那你就要看看是不是自己的“連線”有問題了狸演。

Files Owner

Files Owner指這個xib文件的所屬文件是誰言蛇，簡單的說是xib文件和誰建立起交互，用戶通過該xib呈現(xiàn)的頁面進行交互的時候誰來處理背后的邏輯宵距。

image.png
Btn事件連線查看
image.png
查看方法與XIB界面控件的對應關系:
image.png
tableView的代理連線:
image.png

用xib建立delegate腊尚、datasource和tableView的“連線”，就相當于在Files Owner中寫了如下代碼：

_testTableView.delegate = self; 
_testTableView.datasource = self;
關于約束的三個按鈕:
image.png

第一個約束中,從上到下依次是左對齊满哪、右對齊婿斥、上對齊、下對齊哨鸭、水平對齊民宿、豎直對齊,如下:


image.png

平常都是灰色不能選擇的,左右最下面的可以使用,因為這個功能需要選擇兩個視圖,最下面的兩個按鈕是因為默認了選中當前的視圖和它父視圖;

image.png

再來個button的約束:

image.png

我讓button居中在它的父視圖上了(前提是父視圖已經(jīng)在界面上進行了約束,不然報錯),具體操作是如下:
1.選擇button和它的父視圖view
2.如圖:


image.png

小技巧:按住command鍵,把鼠標移到控件上,會有約束的數(shù)值顯示,如圖,很方便調(diào)試;
image.png

image.png

還一點要說明的是,button,label,在xib中是可以不給寬高的,系統(tǒng)會默認計算一個合適的寬高顯示but的內(nèi)容

image.png

關于上圖的這兩個按鈕,也是要兩個視圖,我們可以勾選設置他們的寬高一樣;結(jié)果如圖(btn下面有個VIew的,view是btn的父視圖):


image.png

下面的Aspect Ratio 是設置自身的寬高比的

如下圖,如果希望button和view是同級的關系,同時他們在同一塊區(qū)域顯示,應該怎么辦,直接拖拽會把btn拖到view中,當然,先拖btn在拖view是可以的,但是如果你的view 是已經(jīng)布局好的呢,怎么辦?
其實很簡單,只需要在拖動btn時按住command鍵即可去除包含關系.

image.png
image.png

對應一個控件,其實是可以同時設置它的左右間距的同時設置它的寬度的,雖然左右間距的設置已經(jīng)可以確定寬度了,只是這樣會報錯,我們需要設置一個優(yōu)先級,上面說過了優(yōu)先級的設置了,結(jié)果如圖:


image.png
Xib設置了大小后,代碼修改的方法:

不使用auto layout時是可以在viewDidLoad:里設置frame的，一旦開啟了auto layout像鸡，就要注意勘高，通常在viewDidLoad:中設置frame就不再生效,因為iOS5加入的viewWillLayoutSubviews會在viewDidLoad之后調(diào)用，而該函數(shù)會在執(zhí)行的時候去加載該文件對應的xib設置的約束坟桅，就是說在viewDidLoad:中設置frame的時機太早了华望，沒有生效就又改成了xib中的樣子，而且在viewWillLayoutSubviews中修改frame也是不生效的,
方法一：
在viewDidLayoutSubviews中修改frame仅乓，這是最簡單的方法赖舟。

選中xib中的約束（藍色線段，左邊欄Constants里的item）像拖動其他控件一樣夸楣，將其拖動成為IBOutlet的屬性或全局變量

image.png

寫成了 屬性,就可以在viewDidLoad設置了,也會生效

- (void)viewDidLayoutSubviews{
    [super viewDidLayoutSubviews];
    [UIView animateWithDuration:1 animations:^{
        self.labelLeftCount.constant = 100;
        [self.view layoutIfNeeded];
    }];
    
    
}
12.storyboard

如下,實現(xiàn)一個vc push到另一個vc,沒寫一行代碼,全是storyboard


image.png

具體步驟如下:
1.拖一個VC進來,加一個btn;
2.給VC添加導航欄,如下操作


image.png

3.然后就是給btn添加事件,拖過去,選擇push即可


image.png
跳轉(zhuǎn)傳參:

1.綁定VC


image.png

2.設置跳轉(zhuǎn)的segue的標識


image.png

3.傳遞參數(shù)titName方法 
#import "ViewController.h"
#import "TestViewController.h"
@implementation ViewController
- (void)viewDidLoad {
    [super viewDidLoad];
    self.self.view.backgroundColor = [UIColor whiteColor];
}
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender
{
    if ([segue.identifier isEqualToString:@"pushTestVC"]) {
        TestViewController *tVC = (TestViewController *)segue.destinationViewController;
        tVC.titName = @"hello world";
    }
}

@end
一個按鈕,可能跳轉(zhuǎn)兩個或多個VC的處理:

如下圖,點擊’有選擇額跳轉(zhuǎn),可能進入下面的兩個VC中的一個
操作如下


image.png

右鍵點擊VC,出現(xiàn)如圖界面,點擊Triggered Segues 的+號,拖動到要跳轉(zhuǎn)的VC上,兩個要跳轉(zhuǎn)的都如此操作,結(jié)果會出現(xiàn)兩條線


image.png

設置他們的標識,然后VC代碼中:

//點擊事件
- (IBAction)choiceJumpBtnClick:(id)sender {
//flag就是一個隨便寫的判斷條件而已
    self.flag = !self.flag;
    
    //跳轉(zhuǎn)方法,通過Identifier而進入到不同的VC中
    if (self.flag) {
        [self performSegueWithIdentifier:@"choiceSec" sender:sender];
    }else{
        [self performSegueWithIdentifier:@"chioceTest" sender:sender];
    }
}
IBAction與IBOutlet

對于一個類來說宾抓，方法和屬性(在這里屬性與字段合在一起表示一個概念)是最重要的兩個要素子漩，而IBAction與IBOutlet就是分別標識方法與屬性的，它們標識著由它們修飾的方法和屬性是來自xib的石洗，我猜它們是給編譯器看的幢泼。

IBInspectable

前面介紹過了,我們之前講的東西都是xib是如何影響代碼的，而IBInspectable是可以用代碼影響xib的

IB_DESIGNABLE

在OC中將IB_DESIGNABLE寫在@implementation前
它也是xcode6引入的新功能讲衫，它的作用是可以在不運行的情況下把你的代碼顯示在xib或SB文件中缕棵。

兩點說明：
1.這是一個針對UI顯示的功能，所以只能是在UIView及其子類或者NSView及其子類上生效

2.要想使IBDesignable起作用必須把代碼寫在drawRect里才能顯示涉兽，同樣的代碼招驴，我寫在了awakeFromNib里就不會再xib中看出效果，只有寫在了drawRect才可以枷畏。

IBOutletCollection(ClassName):

將基于IBOutlet創(chuàng)建的對象放在一個NSarray里别厘。

image.png

如圖,加入了兩個label在labelarr中,當我們選擇labelArr,會看到 嘗試1,2 都被選中,取得話通過tag值取;

一個單獨的xib文件如何添加到VC上并響應事件?

1.關聯(lián)


image.png

2.VC上創(chuàng)建一個視圖用于接收顯示accessoryView(可以省略,只是習慣性這樣干,好布局)


image.png

3.VC中獲取view,顯示,同時連線添加響應事件(如果沒有關聯(lián)VC,無法連線)

- (void)viewDidLoad {
    [super viewDidLoad];
   /**
    這里的AccessoryView 只有一個xib文件,沒有依托于.h .m
    */
    UIView *view = [[[NSBundle mainBundle] loadNibNamed:@"AccessoryView" owner:self options:nil] firstObject];
    
    view.frame = self.coverVIew.bounds;
    
    [self.coverVIew addSubview:view];
}


- (IBAction)btnClickaction:(id)sender {
    NSLog(@"----點擊事件響應了---");
}
Storyboard中的界面跳轉(zhuǎn)的另一種方法:

可以跳轉(zhuǎn)到任意一個界面,方法如下:
假設是在Main.storyboard中,btn跳轉(zhuǎn)到任意一個界面

image.png

這就是一個干干凈凈的VC,沒有進行過連線,在Main.storyboard如果想找到他,則需要設置VC的ID
注意是設置VC 的ID,直接點界面容易勿選成VIew的

image.png

然后就可以進行如下代碼操作了

UIStoryboard *mainSB = [UIStoryboard storyboardWithName:@"Main" bundle:[NSBundle mainBundle]];
    
UIViewController *notsureVC = [mainSB instantiateViewControllerWithIdentifier:@"notsureVC"];

[self presentViewController:notsureVC animated:YES completion:nil];
第二種跳轉(zhuǎn)是一個storyboard的nav跳轉(zhuǎn)到另一個storyboard的nav中

主要是因為@interface UINavigationController : UIViewController 繼承關系
實現(xiàn)給一個新的navtonav.storyboard的nav添加id


image.png

然后代碼如下:


 UIStoryboard *navSB = [UIStoryboard storyboardWithName:@"navtonav" bundle:[NSBundle mainBundle]];
    
    UINavigationController *navC = [navSB instantiateViewControllerWithIdentifier:@"navNav"];
    
//    [self.navigationController pushViewController:navC animated:YES];
    navC.modalPresentationStyle = 0;
    [self presentViewController:navC animated:YES completion:nil];
設置一個視圖是父視圖的一半的方法:

如圖,我要讓imgView是父視圖的寬度的一半,然后高度一樣,先添加上左下的約束為0,然后設置寬度比例


image.png

比例設置方法是按住ctrl,然后把imgVIew拖線到父視圖,會彈出選擇框,


image.png

選擇Equal Widths,然后


image.png

改成0.5,即為父視圖的一半寬度.

高度比例設置是一樣的,如果是 要設置對自己的寬高比,如下:

image.png

設置自身的寬高比,這里我設置成了1:1,正方形


image.png
設置一個View上的三個view高度自適應父視圖:

我這里以三個子view高度一樣為例,效果如圖:


image.png

我改變父視圖高度,子view也會自動適應
做法如下:

父視圖隨意給4個約束,關鍵是子視圖,先給第一個view添加三個約束,報錯不管它;


image.png

然后第三個view添加三個約束:


image.png

然后是中間的view添加四個約束:


image.png

發(fā)現(xiàn)添加完依然報錯,因為控制器不知道如何給三個view分配高度,所以按住shift選中三個子view,然后


image.png

設置高度一樣,均分,報錯消失,完成;

如果高度不是一樣,比如高度是1:2:3
image.png

只需要在上面的基礎上調(diào)整如下的屬性更改比例即可


image.png

上面的做法其實很不好,很麻煩,還有更好的辦法,這個在下面第二篇中scrollview的橫向滑動中我會介紹;
雜七雜八的方法目前就這些,下面是還有tableview和scrollview的,分第二篇寫了

參考鏈接：https://blog.csdn.net/liuchuo/article/details/52560250
https://blog.csdn.net/virgil_li/article/details/51012790
http://www.reibang.com/p/7d59b9420bba

如果想系統(tǒng)的學習IOS設計模式或者其他IOS技術(shù),底層,逆向,OpenGL等,可以加V:zhuangxiaozhen666,Q3086163058,給你分享資料 密碼: 0ivw

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市拥诡，隨后出現(xiàn)的幾起案子触趴，更是在濱河造成了極大的恐慌，老刑警劉巖渴肉，帶你破解...
    沈念sama閱讀 211,194評論 6贊 490
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件雕蔽，死亡現(xiàn)場離奇詭異，居然都是意外死亡宾娜，警方通過查閱死者的電腦和手機批狐，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,058評論 2贊 385
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來前塔，“玉大人嚣艇，你說我怎么就攤上這事』” “怎么了食零？”我有些...
    開封第一講書人閱讀 156,780評論 0贊 346
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長寂屏。 經(jīng)常有香客問我贰谣，道長，這世上最難降的妖魔是什么迁霎？ 我笑而不...
    開封第一講書人閱讀 56,388評論 1贊 283
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任吱抚，我火速辦了婚禮，結(jié)果婚禮上考廉，老公的妹妹穿的比我還像新娘秘豹。我一直安慰自己，他們只是感情好昌粤，可當我...
    茶點故事閱讀 65,430評論 5贊 384
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布既绕。 她就那樣靜靜地躺著啄刹，像睡著了一般。 火紅的嫁衣襯著肌膚如雪凄贩。 梳的紋絲不亂的頭發(fā)上誓军，一...
    開封第一講書人閱讀 49,764評論 1贊 290
  • 城市分裂傳說
    那天，我揣著相機與錄音疲扎，去河邊找鬼昵时。 笑死，一個胖子當著我的面吹牛评肆，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播非区，決...
    沈念sama閱讀 38,907評論 3贊 406
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼瓜挽，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了征绸？” 一聲冷哼從身側(cè)響起久橙，我...
    開封第一講書人閱讀 37,679評論 0贊 266
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎管怠，沒想到半個月后淆衷，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 44,122評論 1贊 303
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡渤弛，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,459評論 2贊 325
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年祝拯，在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片她肯。...
    茶點故事閱讀 38,605評論 1贊 340
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡佳头，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出晴氨，到底是詐尸還是另有隱情康嘉，我是刑警寧澤，帶...
    沈念sama閱讀 34,270評論 4贊 329
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布籽前，位于F島的核電站亭珍，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏枝哄。R本人自食惡果不足惜肄梨，卻給世界環(huán)境...
    茶點故事閱讀 39,867評論 3贊 312
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望挠锥。 院中可真熱鬧峭范，春花似錦、人聲如沸瘪贱。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,734評論 0贊 21
  • 一樁弒父案辆毡，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至甜害，卻和暖如春舶掖，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背尔店。 一陣腳步聲響...
    開封第一講書人閱讀 31,961評論 1贊 265
  • 情欲美人皮
    我被黑心中介騙來泰國打工眨攘， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人嚣州。 一個月前我還...
    沈念sama閱讀 46,297評論 2贊 360
  • 代替公主和親
    正文 我出身青樓鲫售，卻偏偏與公主長得像，于是被迫代替她去往敵國和親该肴。 傳聞我的和親對象是個殘疾皇子情竹，可洞房花燭夜當晚...
    茶點故事閱讀 43,472評論 2贊 348