Storyboard一些特性及操作技巧整理

Xcode6之后蘋果就一直極力倡導(dǎo)使用storyboard生宛,特別隨著Xcode6 的Size ClassIBDesignable璧榄、IBInspectable厦取;Xcode7 的Storyboard Reference推出之后革半,越來越多的開發(fā)者開始使用Storyboard丛晦。作為一個(gè)Storyboard的重度使用者,在這里對(duì)使用Storyboard的一些特性和技巧做一些整理涩馆。

Storyboard Reference

作為xib和storyboard的重度使用者(特別是Xcode6以后)行施,以前storyboard一直被大家吐槽,特別是多人開發(fā)Merge的時(shí)候凌净,一大堆warning悲龟、error撲面而來,弄得頭都大冰寻。而Xcode7之后出現(xiàn)的Storyboard Reference,讓我為之一喜皿渗。

Storyboard Reference的目的是把一個(gè)個(gè)模塊分離斩芭,既避免了Main.storyboard的龐大不可把控,又模塊化UI讓分工變得簡(jiǎn)單乐疆,而且可以快速準(zhǔn)確地找到分工的各部分划乖。

使用Storyboard Reference,最后你看到你的storyboard應(yīng)該是這樣的:

Storyboard Reference

這樣是不是簡(jiǎn)潔明了,可控性好很多挤土,不用再為多人開發(fā)整合而煩惱了~ ~

操作:

只需在Main.storyboard中選中要分離的UIViewController琴庵,然后點(diǎn)擊菜單:Editor->Refactor to Storyboard 創(chuàng)建一個(gè)新的分離出來的storyboard就好了。

Size Class

Xcode6之后出現(xiàn)的Size Class,下面顯示了iOS設(shè)備及其對(duì)應(yīng)的Size Class:

更直觀的iOS設(shè)備對(duì)應(yīng)的Size Class:

至于size class在各設(shè)備上的相對(duì)應(yīng)的使用就不贅述了仰美,接下來介紹size classAttributes Inspector上的使用:

Attributes Inspector中左邊帶+的都可以使用size class.

IBDesignable&IBInspectable

IBDesignable&IBInspectable的介紹在nshipster中很早之前就有了迷殿,這里也只是我之前使用過的一些整理。

比如咖杂,在Storyboard中給按鈕加圓角庆寺、邊框什么的,User Defined Runtime Attributes可能是這個(gè)樣子的:

上圖是用戶自定義的運(yùn)行時(shí)屬性的使用诉字,而IBInspectable屬性提供了一種新的方式懦尝。

創(chuàng)建一個(gè)自定義的UIButton:

.h文件

#import <UIKit/UIKit.h>

IB_DESIGNABLE
@interface MyDrawButton : UIButton

@property (nonatomic) IBInspectable UIColor *fillColor;           //填充顏色
@property (nonatomic) IBInspectable NSInteger lineWidth;          //線的寬度
@property (nonatomic) IBInspectable NSInteger cornerRadius;       //圓角弧度
@property (nonatomic) IBInspectable NSInteger borderWidth;        //邊框?qū)挾?
@end

.m文件

#import "MyDrawButton.h"
#import <pop/POP.h>

@implementation MyDrawButton

- (void)drawRect:(CGRect)rect {
    CGContextRef context=UIGraphicsGetCurrentContext();
    CGRect myFrame=self.bounds;
    CGContextSetLineWidth(context, _lineWidth);
    CGRectInset(myFrame, 5, 5);
    [_fillColor set];
    UIRectFrame(myFrame);
    
    self.layer.cornerRadius=_cornerRadius;
    self.layer.borderWidth=_borderWidth;
    self.layer.borderColor=_fillColor.CGColor;
    
    [self addTarget:self action:@selector(scaleToSmall)
   forControlEvents:UIControlEventTouchDown | UIControlEventTouchDragEnter];
    [self addTarget:self action:@selector(scaleAnimation)
   forControlEvents:UIControlEventTouchUpInside];
    [self addTarget:self action:@selector(scaleToDefault)
   forControlEvents:UIControlEventTouchDragExit];
    
}
- (void)scaleToSmall
{
    POPBasicAnimation *scaleAnimation = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerScaleXY];
    scaleAnimation.toValue = [NSValue valueWithCGSize:CGSizeMake(0.95f, 0.95f)];
    [self.layer pop_addAnimation:scaleAnimation forKey:@"layerScaleSmallAnimation"];
}
- (void)scaleAnimation
{
    POPSpringAnimation *scaleAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerScaleXY];
    scaleAnimation.velocity = [NSValue valueWithCGSize:CGSizeMake(2.f, 2.f)];
    scaleAnimation.toValue = [NSValue valueWithCGSize:CGSizeMake(1.f, 1.f)];
    scaleAnimation.springBounciness = 25.0f;
    [self.layer pop_addAnimation:scaleAnimation forKey:@"layerScaleSpringAnimation"];
    
}
- (void)scaleToDefault
{
    POPBasicAnimation *scaleAnimation = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerScaleXY];
    scaleAnimation.toValue = [NSValue valueWithCGSize:CGSizeMake(1.f, 1.f)];
    [self.layer pop_addAnimation:scaleAnimation forKey:@"layerScaleDefaultAnimation"];
}
@end

storyboard中的UIButton只需繼承自它,然后就可以在Attributes Inspector中看到這些屬性:

給相應(yīng)的屬性設(shè)值就有效果了壤圃。而上面給自定義按鈕添加了點(diǎn)擊動(dòng)畫陵霉,只要繼承自這個(gè)自定義按鈕都會(huì)有點(diǎn)擊動(dòng)畫,其效果是這樣的:

User Defined Runtime Attributes

上面圖中最后兩個(gè)是自定義關(guān)聯(lián)的運(yùn)行時(shí)屬性伍绳,
比如layer.colorFromUIColor,只需新建一個(gè)CALayerCategory

.h文件

@interface CALayer (Addition)

@property(nonatomic,strong) UIColor *colorFromUIColor;

-(void)setColorFromUIColor:(UIColor *)color;

@end

.m文件

#import "CALayer+Addition.h"
#import <objc/runtime.h>

@implementation CALayer (Addition)
@dynamic colorFromUIColor;

-(UIColor *)colorFromUIColor
{
    return objc_getAssociatedObject(self, @selector(colorFromUIColor));
}
-(void)setColorFromUIColor:(UIColor *)color
{
    objc_setAssociatedObject(self, @selector(colorFromUIColor), color, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
    [self setColorFromUI:self.colorFromUIColor];
}
-(void)setColorFromUI:(UIColor *)color
{
    self.borderColor=color.CGColor;
}
@end

這樣設(shè)置就ok了踊挠,然后在User Defined Runtime Attributes中就可以設(shè)置colorFromUIColor這個(gè)屬性了。

而自定義runtime屬性bindingAnimationType來自FastAnimationWithPOP,配置相關(guān)屬性運(yùn)行可以直接得到如下效果:

配置
導(dǎo)入pop墨叛、FastAnimationWithPOP:

pod 'pop', '~> 1.0.9'
pod 'FastAnimationWithPOP', '~> 0.0.2'

然后在Identity Inspector中配置控件的用戶自定義運(yùn)行時(shí)屬性

控制好animationTypedelay就得到了上面的效果止毕,自己不需要寫一句代碼模蜡!有沒有很nice! 反正我最開始用的時(shí)候興奮極了 ~ ~

UIStackView

iOS9之后出來的UIStackView比較特別,對(duì)于自動(dòng)布局這塊非常方便扁凛,它可以快速地在垂直或水平排布多個(gè)subview忍疾,最有用的就是它會(huì)自動(dòng)為每個(gè)subview創(chuàng)建和添加Auto Layout constraints。當(dāng)然你可以控制subview的大小和位置谨朝÷倍剩可以通過選項(xiàng)配置subview的大小、排布以及彼此間的間距字币。具體細(xì)節(jié)見iOS 9: UIStackView入門,以下是我自己實(shí)戰(zhàn)操作则披。

UIStackView
UIStackView

至于兼容iOS9之前版本,推薦使用FDStackView洗出,兼容UIStackView iOS9之前版本士复,同樣的,也可以使用storyboard翩活,非常好阱洪!
FDStackView Part1FDStackView Part2菠镇、FDStackView Part3這三篇文章是作者分析FDStackView的設(shè)計(jì)實(shí)現(xiàn)過程冗荸,有興趣可以看一下。

提高Interface Builder高效工作的8個(gè)技巧

  • 使view的Size與view中的Content相適應(yīng)
  • 按住option鍵—觀察所選中view與另外view邊緣之間的距離
  • Editor -> Embed In View, Unembed:
  • 在不影響subview的位置時(shí)給view自由的添加padding
  • 對(duì)不在最前端的view進(jìn)行移動(dòng)
  • IBOutletCollection排序
  • 使用自定義屬性
  • MoarFonts——字體定制:所見即所得

具體細(xì)節(jié)查看原文:提高Interface Builder高效工作的8個(gè)技巧

總結(jié):

我現(xiàn)在一直在使用storyboard利耍,至今感覺良好蚌本!特別有了這些技巧和特性之后,效率那是杠杠的.隘梨。這里把以前用過的寫在這里分享?出來程癌,也方便我自己總結(jié)和回顧。

這篇文章主要內(nèi)容:

  • Storyboard Reference:Storyboard分離
  • Size Class:多設(shè)備自動(dòng)布局
  • IBDesignable&IBInspectable:配置自定義控件
  • User Defined Runtime Attributes:用戶自定義運(yùn)行時(shí)屬性
  • UIStackView:方便垂直或水平排布多個(gè)subview
  • 提高Interface Builder高效工作的8個(gè)技巧:Interface Builder的操作技巧
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末出嘹,一起剝皮案震驚了整個(gè)濱河市席楚,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌税稼,老刑警劉巖烦秩,帶你破解...
    沈念sama閱讀 217,406評(píng)論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異郎仆,居然都是意外死亡只祠,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,732評(píng)論 3 393
  • 文/潘曉璐 我一進(jìn)店門扰肌,熙熙樓的掌柜王于貴愁眉苦臉地迎上來抛寝,“玉大人,你說我怎么就攤上這事〉两ⅲ” “怎么了晶府?”我有些...
    開封第一講書人閱讀 163,711評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)钻趋。 經(jīng)常有香客問我川陆,道長(zhǎng),這世上最難降的妖魔是什么蛮位? 我笑而不...
    開封第一講書人閱讀 58,380評(píng)論 1 293
  • 正文 為了忘掉前任较沪,我火速辦了婚禮,結(jié)果婚禮上失仁,老公的妹妹穿的比我還像新娘尸曼。我一直安慰自己,他們只是感情好萄焦,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,432評(píng)論 6 392
  • 文/花漫 我一把揭開白布控轿。 她就那樣靜靜地躺著,像睡著了一般楷扬。 火紅的嫁衣襯著肌膚如雪解幽。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,301評(píng)論 1 301
  • 那天烘苹,我揣著相機(jī)與錄音,去河邊找鬼片部。 笑死镣衡,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的档悠。 我是一名探鬼主播廊鸥,決...
    沈念sama閱讀 40,145評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼辖所!你這毒婦竟也來了惰说?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,008評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤缘回,失蹤者是張志新(化名)和其女友劉穎吆视,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體酥宴,經(jīng)...
    沈念sama閱讀 45,443評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡啦吧,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,649評(píng)論 3 334
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了拙寡。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片授滓。...
    茶點(diǎn)故事閱讀 39,795評(píng)論 1 347
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出般堆,到底是詐尸還是另有隱情在孝,我是刑警寧澤,帶...
    沈念sama閱讀 35,501評(píng)論 5 345
  • 正文 年R本政府宣布淮摔,位于F島的核電站私沮,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏噩咪。R本人自食惡果不足惜顾彰,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,119評(píng)論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望胃碾。 院中可真熱鬧涨享,春花似錦、人聲如沸仆百。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,731評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽俄周。三九已至吁讨,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間峦朗,已是汗流浹背建丧。 一陣腳步聲響...
    開封第一講書人閱讀 32,865評(píng)論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留波势,地道東北人翎朱。 一個(gè)月前我還...
    沈念sama閱讀 47,899評(píng)論 2 370
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像尺铣,于是被迫代替她去往敵國和親拴曲。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,724評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容

  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫凛忿、插件澈灼、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,102評(píng)論 4 62
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn)店溢,斷路器叁熔,智...
    卡卡羅2017閱讀 134,654評(píng)論 18 139
  • 我希望有一個(gè)如你一般的人,不是已經(jīng)屬于別人逞怨,而是屬于我或者被我無所顧及的追隨者疤。你金燦燦的或者個(gè)人照頭像都讓我歡心,...
    tristeolive閱讀 502評(píng)論 0 0
  • 文|沒有春 我想你了 酸酸的 像剛喝了一碗醋 酸烈激靈過后 有種想哭的感覺 我想你了 暈暈的 像剛喝完一口烈酒 走...
    沒有春閱讀 490評(píng)論 22 13
  • 文/劉彩霞 第二天一早叠赦,雪在空中飄著驹马。奇異的是太陽出來了革砸,只才一會(huì)兒。陽光清麗糯累,把雪花映襯得晶晶閃閃算利,雪花打著...
    彩霞漫天閱讀 336評(píng)論 0 0