IOS暑假小學(xué)期實訓(xùn) 第2天 “UI基礎(chǔ)控件”

2016/07/10

// ?ViewController.m

// ?UI基礎(chǔ)控件

//

// ?Created by lanou on 16/7/10.

// ?Copyright [表情] 2016年 yhy. All rights reserved.

//


#import "ViewController.h"


@interface ViewController ()


//標題標簽

@property(nonatomic,strong)UILabel *titleLable;


//左邊按鈕

@property(nonatomic,strong)UIButton *leftBtn;


//右邊按鈕

@property(nonatomic,strong)UIButton *rightBtn;


//顯示圖片

@property(nonatomic,strong)UIImageView *myImageView;


//給存入的四張圖片定義一個數(shù)組

@property(nonatomic,strong)NSArray *imageNames;


@end


@implementation ViewController


//視圖加載好時會自動調(diào)用

- (void)viewDidLoad {

? ?[super viewDidLoad];

// ? ?創(chuàng)建并初始化標簽


? ?self.titleLable = [[UILabel alloc]initWithFrame:CGRectMake(100, 50, 150, 30)];


// ? ?寫入標簽文本


　　self.titleLable.text = @"biaoqingdi";


// ? ?設(shè)置標簽文本的背景顏色為紅色


　　self.titleLable.backgroundColor = [UIColor greenColor];


// ? ?設(shè)置標簽文本在框中居中對齊


? ?self.titleLable.textAlignment = NSTextAlignmentCenter;



// ? ?添加標簽到視圖上


? ?[self.view addSubview:self.titleLable];


// ? ?創(chuàng)建并初始化定義（坐標各墨、寬高）相框


? ?self.myImageView = [[UIImageView alloc]initWithFrame:CGRectMake(85, 100, 200, 200)];


// ? ?將圖片保存在名為image中（根據(jù)圖片地址名加載圖片）


? ?UIImage *image = [UIImage imageNamed:@"biaoqingdi"];


// ? ?顯示圖片


? ?self.myImageView.image = image;


// ? ?添加相框到視圖中


? ?[self.view addSubview:_myImageView];


// ? ?創(chuàng)建并初始化定義（坐標、寬高）左按鈕


? ?self.leftBtn = [[UIButton alloc]initWithFrame:CGRectMake(20, 150, 45, 45)];


// ? ?關(guān)閉左按鈕的交互


? ?self.leftBtn.userInteractionEnabled = NO;


// ? ?將左按鈕的圖片保存在名為leftImage中（根據(jù)圖片地址名加載圖片）


　　UIImage *leftImage = [UIImage imageNamed: @"left_disable"];


// ? ?設(shè)置左按鈕的背景圖片（在正常狀態(tài)下）


　　[self.leftBtn setBackgroundImage:leftImage forState:(UIControlStateNormal)];


// ? ?添加左按鈕到視圖上


? ?[self.view addSubview: _leftBtn];

// ? ?創(chuàng)建并初始化定義（坐標、寬高）右按鈕


　　self.rightBtn = [[UIButton alloc]initWithFrame:CGRectMake(305, 150, 45, 45)];


// ? ?將右按鈕的圖片保存在名為 rightImage中（根據(jù)圖片地址名加載圖片）


　　UIImage *rightImage = [UIImage imageNamed: @"right_normal"];


// ? ?設(shè)置右按鈕的背景圖片（在正常狀態(tài)下）


　　[self.rightBtn setBackgroundImage:rightImage forState:(UIControlStateNormal)];


// ? ?添加右按鈕在視圖上


　　[self.view addSubview:_rightBtn];


// ? 右按鈕監(jiān)聽


　　[self.rightBtn addTarget:self action:@selector(rightBtnAction) forControlEvents:(UIControlEventTouchUpInside)];


// ? 左按鈕監(jiān)聽


[self.leftBtn addTarget:self action:@selector(leftBtnAction) forControlEvents:(UIControlEventTouchUpInside)];




}


// ? 右按鈕


-(void)rightBtnAction{


// ? ?切換圖片 ? 圖片為png格式則不用加后綴名 其他格式需要加后綴


　　self.imageNames = @[ @"biaoqingdi",@"bingli",@"chiniupa",@"danteng",@"wangba"];


// ? ?獲取當(dāng)前是第幾張圖片（整型變量）


? ?NSInteger index = [self.imageNames indexOfObject:self.titleLable.text];


// ? ? ? ? ? ?把按鈕圖片加載成灰色（正常狀態(tài)下狀態(tài)）


// ? ?不是為最后一張才切換到下一張


? ?if (index < 4) {


// ? ? ? ?如果index=3（即圖片從第四張切換到口四，第五張時）

? ? ? ?if (index == 3) {


// ? ? ? ? ? ?關(guān)閉右按鈕交互（右按鈕圖片變?yōu)榛疑?/p>


? ? ? ? ? ?self.rightBtn.userInteractionEnabled = NO;


// ? ?將右按鈕灰色圖片保存在image中（根據(jù)名字加載圖片）


? ? ? ? ? ?UIImage *image =[UIImage imageNamed:@"right_disable"];


// ? ? ? ? ? 將右按鈕狀態(tài)為一般（正常）狀態(tài)下的背景圖片設(shè)置成為image中圖像


? ? ? ? ? ?[self.rightBtn setBackgroundImage:image forState:(UIControlStateNormal)];


}


else{

// ? ? ? ? ? ? ?否則（圖片為第1,2,3張時）


// ? ? ? 將兩個按鈕正常狀態(tài)下的背景圖片設(shè)置為黑色圖片

? ? ? ? ? ?[self.rightBtn setBackgroundImage:[UIImage imageNamed:@"right_normal"] forState:(UIControlStateNormal)];

? ? ? ? ? ?[self.leftBtn setBackgroundImage:[UIImage imageNamed:@"left_normal"] forState:(UIControlStateNormal)];

// ? ? ? 開啟兩個按鈕的交互

? ? ? ? ? ?self.rightBtn.userInteractionEnabled = YES;

? ? ? ? ? ?self.leftBtn.userInteractionEnabled = YES;

? ? ? ? ? ? ?}


// ? ? ? ?將標簽titleLable內(nèi)容切換到下一張圖片的標簽內(nèi)容

NSString *nextTitle = self.imageNames[index+1];


? ? ? ?self.titleLable.text = nextTitle;


// ? ? ? ?將圖片切換到下一張


? ? ? ?self.myImageView.image = [UIImage imageNamed: nextTitle];

? ?}



}


//左按鈕


-(void)leftBtnAction{


　　// ? ?切換圖片 ? 圖片為png格式則不用加后綴名 其他格式需要加后綴


　　self.imageNames = @[ @"biaoqingdi",@"bingli",@"chiniupa",@"danteng",@"wangba"];


　　// ? ?獲取當(dāng)前是第幾張圖片（整型）


NSInteger index = [self.imageNames indexOfObject:self.titleLable.text];


　　// ? ?不是為第一張才切換到上一張


　　if (index > 0) {


　　// ? ? 第二張切換到第一張時


if (index == 1) {


// ? ? ? ? ? ?左邊按鈕交互關(guān)閉（左按鈕圖片變?yōu)榛疑?/p>


? ? ? ? ? ?self.leftBtn.userInteractionEnabled = NO;



// ? ?將左按鈕灰色圖片保存在image中（根據(jù)名字加載圖片）


UIImage *image =[UIImage imageNamed:@"left_disable"];


// ? ? ? ? ? 將左按鈕狀態(tài)為一般（正常）狀態(tài)下的背景圖片設(shè)置成為image中圖像


? ? ? ? ?[self.leftBtn setBackgroundImage:image forState:(UIControlStateNormal)];


}

else{


// ? ? ? ? ? ? 否則（圖片為第3,4,5張時）


// ? ? ? 將兩個按鈕正常狀態(tài)下的背景圖片設(shè)置為黑色圖片


? ? ? ? ? ?[self.rightBtn setBackgroundImage:[UIImage imageNamed:@"right_normal"] forState:(UIControlStateNormal)];

? ? ? ? ? ?[self.leftBtn setBackgroundImage:[UIImage imageNamed:@"left_normal"] forState:(UIControlStateNormal)];


// ? ? ? 開啟兩個按鈕的交互


? ? ? ? ? ?self.rightBtn.userInteractionEnabled = YES;

? ? ? ? ? ?self.leftBtn.userInteractionEnabled = YES;


? ? ? ?}


// ? ? ? ?將標簽titleLable內(nèi)容切換到上一張圖片的標簽內(nèi)容


? ? ? ?NSString *preTitle =self.imageNames[index-1];

? ? ? ?self.titleLable.text = preTitle;


// ? ? ? ?將圖片切換到上一張


? ? ? ?self.myImageView.image = [UIImage imageNamed: preTitle];

? ?}


}






-(void)demo{

　　// ? ?按鈕UIButton


　　// ? ?UIButton *button = [UIButton buttonWithType: UIButtonTypeContactAdd];


// ? ? 創(chuàng)建并初始化定義（坐標、寬高）按鈕


UIButton *button = [[UIButton alloc]initWithFrame:CGRectMake(50, 50, 80, 80)];


// ? ? ?frame 表明了空間的坐標和寬高(CGRect類型)


　　[button setTitle:@"眼鏡哥" forState:UIControlEventTouchDown];


?// ? ?設(shè)置按鈕背景色為紅色


　　button.backgroundColor = [UIColor redColor];


　　// ? ?根據(jù)名字加載圖片


　　UIImage *image = [UIImage imageNamed:@"right_normal"];


　　// ? ?給按鈕設(shè)置背景圖片


　　[button setBackgroundImage:image forState:UIControlStateNormal];


　　// ? ?按鈕的監(jiān)聽


? ?[button addTarget:self action:@selector(btnClickLister) forControlEvents:UIControlEventTouchUpOutside];

　　// ? ?添加到屏幕上面


? ?[self.view addSubview:button];

　　// ? ?相框UIImageView


?// ? ? 創(chuàng)建并初始化視圖相框


　　UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(150, 50, 200, 200)];


　　UIImage *image1 = [UIImage imageNamed:@"biaoqingdi"];


　　// ? ?設(shè)置imageView顯示的圖片


? ?imageView.image = image1;

　　[self.view addSubview:imageView];


　　// ? ?標簽UIlable


　　UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(150, 270, 150, 30)];


　　// ? ?設(shè)置標簽的文本


　　label.text = @"表情弟";


// ? ? ?設(shè)置居中方式（注：是將文本在標簽框內(nèi)部居中）

label.textAlignment = NSTextAlignmentCenter;


// ? ? ? 設(shè)置標簽的顏色為紅色

? ?label.textColor = [UIColor redColor];

// ? ? ?將標簽顯示在視圖屏幕上


[self.view addSubview:label];



}


// ? ? ?方法調(diào)用

- (void)didReceiveMemoryWarning {

[super didReceiveMemoryWarning];


}


// ? ?調(diào)用按鈕監(jiān)聽的方法


-(void)btnClickLister{

// ? ?在視圖屏幕中執(zhí)行按鈕操作時领铐，代碼工程中將會打印“click btn”


NSLog(@"click btn");


}

@end

總結(jié)：


一些常用的UI基礎(chǔ)控件

1.UIlabel

UILabel建立

UILabel*label=[[UILabelalloc] init];

UILabel基本設(shè)置

// 設(shè)置label背景色

label.backgroundColor=[UIColor redColor];

// 設(shè)置label位置大小

label.frame=CGRectMake(100,100,100,300);

// 設(shè)置label中顯示文字

label.text=@"hello world溉仑！";

// label中顯示文字居中

label.textAlignment=NSTextAlignmentCenter;

// label中文字行數(shù)隨文字數(shù)量自動改變

label.numberOfLines=0;

// 將label添加到父控件中

[self.view addSubview:label];

2.UIImageView

UIImageView建立

UIImageView*imageView=[[UIImageViewalloc] init];

UIImageView基本設(shè)置

// 設(shè)置imageView的位置與大小

imageView.frame=CGRectMake(50,100,300,300);

// 設(shè)置imageView的背景顏色

imageView.backgroundColor=[UIColorredColor];

// 加載圖片

imageView.image=[UIImageimageNamed:@"圖片名稱"];

// 將圖片置于控件底部

imageView.contentMode=UIViewContentModeBottom;

// 添加到父控件中

[self.viewaddSubview:imageView];

contentMode屬性

帶有scale單詞的：圖片有可能會拉伸

UIViewContentModeScaleToFill

將圖片拉伸至填充整個imageView

圖片顯示的尺寸跟imageView的尺寸是一樣的

帶有aspect單詞的：保持圖片原來的寬高比

UIViewContentModeScaleAspectFit

： 保證剛好能看到圖片的全部

UIViewContentModeScaleAspectFill

：拉伸至圖片的寬度或者高度跟imageView一樣

沒有scale單詞的：圖片絕對不會被拉伸，保持圖片的原尺寸

UIViewContentModeCenter

UIViewContentModeTop

UIViewContentModeBottom

UIViewContentModeLeft

UIViewContentModeRight

UIViewContentModeTopLeft

UIViewContentModeTopRight

UIViewContentModeBottomLeft

UIViewContentModeBottomRight


3.UIButton

UIButton建立

UIButton*btn=[[UIButtonalloc] init];

UIButton基本設(shè)置

// 設(shè)置btn在正常狀況下加載的圖片

[btn setImage:[UIImageimageNamed:@"圖片名稱"] forState:UIControlStateNormal];

// 設(shè)置btn在高亮狀態(tài)下加載的圖片

[btn setImage:[UIImageimageNamed:@"圖片名稱"] forState:UIControlStateHighlighted];

// 設(shè)置btn在正常狀態(tài)下的背景圖片

[btn setBackgroundImage:[UIImageimageNamed:@"圖片名稱"] forState:UIControlStateNormal];

// 設(shè)置btn在高亮狀態(tài)下的背景圖片

[btn setBackgroundImage:[UIImageimageNamed:@"圖片名稱"] forState:UIControlStateHighlighted];

// 設(shè)置btn在正常狀態(tài)下顯示的文字

[btn setTitle:@"點我啊"forState:UIControlStateNormal];

// 設(shè)置btn在高亮狀態(tài)下顯示的文字

[btn setTitle:@"神經(jīng)病"forState:UIControlStateHighlighted];

// 設(shè)置btn在正常狀態(tài)下文字顏色

[btn setTitleColor:[UIColorredColor] forState:UIControlStateNormal];

// 設(shè)置btn位置與大小

btn.frame=CGRectMake(100,100,100,30);

// 監(jiān)聽事件

[btn addTarget:selfaction:@selector(buttonClick:) forControlEvents:UIControlEventTouchUpInside];

// 將btn添加到父控件中

[self.viewaddSubview:btn];

注意點

不能直接修改：OC對象的結(jié)構(gòu)體屬性的成員

下面的寫法是錯誤的

imageView.frame.size= imageView.image.size;

正確寫法

CGRect tempFrame = imageView.frame;

tempFrame.size= imageView.image.size;

imageView.frame = tempFrame;

initWithImage:方法

利用這個方法創(chuàng)建出來的imageView的尺寸和傳入的圖片尺寸一樣

修改frame的3種方式

直接使用CGRectMake函數(shù)

imageView.frame = CGRectMake(100,100,200,200);

利用臨時結(jié)構(gòu)體變量

CGRect tempFrame = imageView.frame;

tempFrame.origin.x =100;

tempFrame.origin.y =100;

tempFrame.size.width =200;

tempFrame.size.height =200;

imageView.frame = tempFrame;

使用大括號{}形式

imageView.frame = (CGRect){{100,100}, {200,200}};

抽取重復(fù)代碼

將相同代碼放到一個新的方法中

不用的東西就變成方法的參數(shù)

圖片的加載方式

有緩存

UIImage*image = [UIImageimageNamed:@"圖片名"];

使用場合：圖片比較小论咏、使用頻率較高

建議把需要緩存的圖片直接放到Images.xcassets

無緩存

NSString*file = [[NSBundlemainBundle] pathForResource:@"圖片名"ofType:@"圖片的擴展名"];

UIImage*image = [UIImageimageWithContentsOfFile:@"圖片文件的全路徑"];

使用場合：圖片比較大、使用頻率較小

不需要緩存的圖片不能放在Images.xcassets

放在Images.xcassets里面的圖片颁井，只能通過圖片名去加載圖片

延遲做一些事情

[abcperformSelector:@selector(stand:)withObject:@"123"afterDelay:10];

//10s后自動調(diào)用abc的stand:方法厅贪，并且傳遞@"123"參數(shù)

音頻文件的簡單播放

// 創(chuàng)建一個音頻文件的URL(URL就是文件路徑對象)

NSURL*url = [[NSBundlemainBundle] URLForResource:@"音頻文件名"withExtension:@"音頻文件的擴展名"];

// 創(chuàng)建播放器self.player= [AVPlayerplayerWithURL:url];

// 播放[self.playerplay];

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市雅宾，隨后出現(xiàn)的幾起案子养涮，更是在濱河造成了極大的恐慌，老刑警劉巖眉抬，帶你破解...
    沈念sama閱讀 218,755評論 6贊 507
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件贯吓，死亡現(xiàn)場離奇詭異，居然都是意外死亡蜀变，警方通過查閱死者的電腦和手機悄谐，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,305評論 3贊 395
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來库北，“玉大人爬舰，你說我怎么就攤上這事『撸” “怎么了情屹？”我有些...
    開封第一講書人閱讀 165,138評論 0贊 355
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長杂腰。 經(jīng)常有香客問我屁商，道長，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 58,791評論 1贊 295
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任蜡镶，我火速辦了婚禮雾袱，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘官还。我一直安慰自己芹橡，他們只是感情好，可當(dāng)我...
    茶點故事閱讀 67,794評論 6贊 392
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布望伦。 她就那樣靜靜地躺著林说，像睡著了一般。 火紅的嫁衣襯著肌膚如雪屯伞。 梳的紋絲不亂的頭發(fā)上腿箩，一...
    開封第一講書人閱讀 51,631評論 1贊 305
  • 城市分裂傳說
    那天，我揣著相機與錄音劣摇，去河邊找鬼珠移。 笑死，一個胖子當(dāng)著我的面吹牛末融，可吹牛的內(nèi)容都是我干的钧惧。 我是一名探鬼主播，決...
    沈念sama閱讀 40,362評論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼勾习，長吁一口氣：“原來是場噩夢啊……” “哼浓瞪！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起巧婶，我...
    開封第一講書人閱讀 39,264評論 0贊 276
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤乾颁，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后艺栈，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體英岭，經(jīng)...
    沈念sama閱讀 45,724評論 1贊 315
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,900評論 3贊 336
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年眼滤，在試婚紗的時候發(fā)現(xiàn)自己被綠了巴席。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片历涝。...
    茶點故事閱讀 40,040評論 1贊 350
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡诅需，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出荧库，到底是詐尸還是另有隱情堰塌，我是刑警寧澤，帶...
    沈念sama閱讀 35,742評論 5贊 346
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布分衫，位于F島的核電站场刑，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏蚪战。R本人自食惡果不足惜牵现，卻給世界環(huán)境...
    茶點故事閱讀 41,364評論 3贊 330
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一铐懊、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧瞎疼，春花似錦科乎、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,944評論 0贊 22
  • 一樁弒父案茅茂，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至太抓，卻和暖如春空闲，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背走敌。 一陣腳步聲響...
    開封第一講書人閱讀 33,060評論 1贊 270
  • 情欲美人皮
    我被黑心中介騙來泰國打工碴倾， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人悔常。 一個月前我還...
    沈念sama閱讀 48,247評論 3贊 371
  • 代替公主和親
    正文 我出身青樓影斑，卻偏偏與公主長得像，于是被迫代替她去往敵國和親机打。 傳聞我的和親對象是個殘疾皇子矫户，可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,979評論 2贊 355

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