iOS應(yīng)用UI開發(fā)中的字體和按鈕控件使用指南

更新時(shí)間：2016年01月26日 09:32:18 作者：芳草小腳丫

這篇文章主要介紹了iOS應(yīng)用UI開發(fā)中的字體和按鈕控件使用指南,分別簡(jiǎn)單講解了UILabel和UIButton的用法,需要的朋友可以參考下

UILabel的使用
一、初始化

UILabel *myLabel = [[UILabel alloc] initWithFrame:CGRectMake(40, 40, 120, 44)];

[self.view addSubview:myLabel];

二、設(shè)置文字

①、設(shè)置默認(rèn)文本

復(fù)制代碼代碼如下:

NSString *text = @"標(biāo)簽文本";

myLabel.text = text;

效果：

201612692523743.png (87×39)

②、設(shè)置標(biāo)簽文本（此屬性是iOS6.0之后才出現(xiàn)，如若不是必要，不建議使用此屬性)

復(fù)制代碼代碼如下:

NSString *text = @"其實(shí)沒什么";

NSMutableAttributedString *attributeString = [[NSMutableAttributedString alloc] initWithString:text];

[attributeString setAttributes:@{NSForegroundColorAttributeName : [UIColor redColor],   NSFontAttributeName : [UIFont systemFontOfSize:17]} range:NSMakeRange(2, 1)];

myLabel.attributedText = attributeString;

效果：

201612692551483.png (98×39)

關(guān)鍵字標(biāo)紅的效果

復(fù)制代碼代碼如下:

NSString *keyword = @"腳本";

NSString *result = @"腳本之家";

// 設(shè)置標(biāo)簽文字

NSMutableAttributedString *attrituteString = [[NSMutableAttributedString alloc] initWithString:result];

// 獲取標(biāo)紅的位置和長(zhǎng)度

NSRange range = [result rangeOfString:keyword];

// 設(shè)置標(biāo)簽文字的屬性

[attrituteString setAttributes:@{NSForegroundColorAttributeName : [UIColor redColor],   NSFontAttributeName : [UIFont systemFontOfSize:17]} range:range];

// 顯示在Label上

label.attributedText = attrituteString;

③、設(shè)置字體，如果是使用②中的文本，那在設(shè)置AttributeString的屬性時(shí)已經(jīng)設(shè)置過Font了和textColor了，直接使用①設(shè)置文本時(shí)設(shè)置文本時(shí)，設(shè)置字體方法

復(fù)制代碼代碼如下:

myLabel.font = [UIFont systemFontOfSize:13];

④、設(shè)置顏色

復(fù)制代碼代碼如下:

myLabel.textColor = [UIColor blueColor];

⑤、設(shè)置對(duì)齊方式

復(fù)制代碼代碼如下:

myLabel.textAlignment = NSTextAlignmentCenter;//居中

NSTextAlignmentLeft //左對(duì)齊
NSTextAlignmentCenter //居中
NSTextAlignmentRight //右對(duì)齊
NSTextAlignmentJustified//最后一行自然對(duì)齊
NSTextAlignmentNatural //默認(rèn)對(duì)齊腳本

NSTextAlignmentJustified和 NSTextAlignmentNatural用的時(shí)候會(huì)報(bào)錯(cuò)，程序崩潰，暫時(shí)不知道什么時(shí)候可以使用，希望知道的指教一下，感激不盡。

⑥、文字剪裁方式

復(fù)制代碼代碼如下:

NSLineBreakByWordWrapping = 0,//以空格為邊界，保留單詞
NSLineBreakByCharWrapping, //保留整個(gè)字符
NSLineBreakByClipping, //簡(jiǎn)單剪裁，到邊界為止
NSLineBreakByTruncatingHead, //按照"……文字"顯示
NSLineBreakByTruncatingTail, //按照"文字……文字"顯示
NSLineBreakByTruncatingMiddle //按照"文字……"顯示

myLabel.lineBreakMode = NSLineBreakByTruncatingHead;

⑦、設(shè)置Label enabled屬性
如果設(shè)置為No，則文字顏色會(huì)變暗，表明其是不可用的，默認(rèn)值為YES。

復(fù)制代碼代碼如下:

myLabel.enabled = NO;

三、匹配Label上的文字
①、是否根據(jù)文本寬度改變字體大小

復(fù)制代碼代碼如下:

myLabel.adjustsFontSizeToFitWidth = YES;

假設(shè)文字內(nèi)容為@"曾在月光之下望煙花,曾共看夕陽漸降下"，Label長(zhǎng)度為200，則一行顯示不下，若設(shè)置此屬性為YES，則會(huì)降低字體大小，以顯示全部?jī)?nèi)容。
前后對(duì)比：

201612692633831.png (199×25)

201612692655069.png (197×27)

②、改變字母之間的間距來適應(yīng)label大小
當(dāng)這個(gè)屬性是YES，標(biāo)簽可能改變標(biāo)簽文本的字母間距，以使該文本更適合標(biāo)簽的邊界內(nèi)。此屬性的字符串，而不管當(dāng)前行的行的裁剪模式。該屬性的默認(rèn)值是NO。

復(fù)制代碼代碼如下:

myLabel.adjustsLetterSpacingToFitWidth = NO;

個(gè)人使用了一下，沒發(fā)現(xiàn)有什么區(qū)別，不知道具體是什么時(shí)候發(fā)揮作用。
③、設(shè)置對(duì)齊基線

復(fù)制代碼代碼如下:

myLabel.adjustsFontSizeToFitWidth = YES;//調(diào)整基線位置需將此屬性設(shè)置為YES

myLabel.baselineAdjustment = UIBaselineAdjustmentAlignBaselines;

此屬性有三個(gè)值可選

復(fù)制代碼代碼如下:

UIBaselineAdjustmentAlignBaselines //文本最上端與Label中線對(duì)齊，默認(rèn)值

UIBaselineAdjustmentAlignCenters   //文本中線與Label中線對(duì)齊

UIBaselineAdjustmentNone           //文本最下端與Label中線對(duì)齊

④、最小字體大小，當(dāng)字體小于這個(gè)最小值時(shí)無效，顯示此屬性值
iOS6.0之前：minimumFontSize

iOS6.0之后：minimumScaleFactor

myLabel.minimumScaleFactor = 10.0;//默認(rèn)值為0，為當(dāng)前字體大小
⑤、行數(shù)

復(fù)制代碼代碼如下:

myLabel.numberOfLines = 2;//Label行數(shù)

⑥、高亮

復(fù)制代碼代碼如下:

myLabel.highlighted = YES;//是否高亮

myLabel.highlightedTextColor = [UIColor redColor];//高亮顏色；此屬性在設(shè)置按鈕的titleLabel時(shí)，無論highlighted是YES還是NO，在按鈕按下時(shí)標(biāo)題都顯示此高亮顏色

⑦、陰影

復(fù)制代碼代碼如下:

myLabel.shadowColor = [UIColor grayColor];//陰影顏色，默認(rèn)為nil

myLabel.shadowOffset = CGSizeMake(1, 1);//陰影的偏移點(diǎn)

四、Label位置
①、計(jì)算UIlabel 隨字體多行后的高度

復(fù)制代碼代碼如下:

CGRect result,bounds;

bounds = CGRectMake(0, 0,200, 300);

heightLabel = [myLabel textRectForBounds:bounds limitedToNumberOfLines:20];//計(jì)算20行后的Label的Frame

NSLog(@"%f",heightLabel.size.height);

②、繪制text到指定區(qū)域

復(fù)制代碼代碼如下:

- (void)drawTextInRect:(CGRect)rect

//需要重載此方法，然后由子類調(diào)用，重寫時(shí)調(diào)用super可以按默認(rèn)圖形屬性繪制,若自己完全重寫繪制函數(shù),就不用調(diào)用super了

UIButton的簡(jiǎn)單使用
Button（按鈕）是使用最頻繁的控件之一，UIButton的使用并不難，但是有一點(diǎn)必須要注意

UIButton默認(rèn)Type是Rounded Rect button，這個(gè)形態(tài)是不被App Store所接受的，即便是你給這個(gè)button添加了背景圖片，不再是Rounded Rect 的外觀，還是會(huì)被App Store所拒，總之Button的類型不能是Rounded Rect。
一、UIButton的外觀

1.1 UIButton有6種類型, 如下圖所示

復(fù)制代碼代碼如下:

UIButtonTypeCustom          

UIButtonTypeRoundedRect         

UIButtonTypeDetailDisclosure

UIButtonTypeInfoLight

UIButtonTypeInfoDark

UIButtonTypeContactAdd

201612692752467.png (385×266)

1.2 設(shè)置buttonType

復(fù)制代碼代碼如下:

UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(10, 10, 100, 44)];

[UIButton buttonWithType:UIButtonTypeCustom];

二、設(shè)置背景圖片

2.1可以設(shè)置正常狀態(tài)，不可點(diǎn)擊狀態(tài)，選中狀態(tài)等各種形態(tài)下的背景圖片

復(fù)制代碼代碼如下:

// 正常狀態(tài)下的圖片

    [button setBackgroundImage:[UIImage imageNamed:@"normal.png"] forState:UIControlStateNormal];

    // 點(diǎn)擊后的圖片

    [button setBackgroundImage:[UIImage imageNamed:@"pressed.png"] forState:UIControlStateSelected];

2.2 可延伸的圖片，有一張26*46的圖片，但是按鈕是100*46，這時(shí)將圖片延伸一下效果就會(huì)很好，這樣的話可以使得項(xiàng)目中的圖片文件比較小，為項(xiàng)目瘦身，QQ的會(huì)話氣泡也是利用此種方法達(dá)到延伸的效果，先上對(duì)比圖

201612692809799.png (454×340)

復(fù)制代碼代碼如下:

UIImage *buttonNormal = [UIImage imageNamed:@"button-white-part"];

// 進(jìn)行寬度上的延伸，如果要進(jìn)行高度上的延伸，改變第一個(gè)和第三個(gè)參數(shù)的值，此方法是保證圖片邊緣的框架的前提下對(duì)圖片中間進(jìn)行高度或者寬度的延伸   

UIImage *stretchNormal = [buttonNormal resizableImageWithCapInsets:UIEdgeInsetsMake(0, 15, 0, 30)];

[button setBackgroundImage:stretchNormal forState:UIControlStateNormal];

三、按鈕事件

按鈕事件還有好多種，可以自行查看文檔

復(fù)制代碼代碼如下:

[button addTarget:self action:@selector(buttonPress:) forControlEvents:UIControlEventTouchUpInside];

// 點(diǎn)擊事件

- (IBAction)buttonPress:(id)sender {

   NSLog("@"button pressed!");

}

以上是代碼添加。
四、xib添加

4.1 在View中拖動(dòng)一個(gè)Button放入畫布

201612692835668.png (907×516)