系列:iOS 開發(fā)-基礎(chǔ)控件

之前講了一大堆數(shù)據(jù)類型,當(dāng)然我只是調(diào)了幾個(gè)說說,仍然不是全部,不如時(shí)間類型NSDate......這里我也不舉例子了,數(shù)據(jù)類型的學(xué)習(xí)大致都是一樣的,我們現(xiàn)在可以不究其原理和實(shí)現(xiàn)過程,我們現(xiàn)在才剛剛開始學(xué)習(xí),那么我們先學(xué)會(huì)怎么用,等我們用熟悉了,我們?cè)偃プ鲞M(jìn)一步的探究.
好了,不說廢話了,今天開始,講一講iOS開發(fā)中除了數(shù)據(jù)類型之外,可以讓用戶看到的那些東西,基礎(chǔ)空間,比如按鈕,比如圖片,比如文本框,比如滾動(dòng)圖...
再直接一點(diǎn)就是,我們做的應(yīng)用基本上都是通過這些組合拼接..然后就呈現(xiàn)出來我們想要的界面了,
比如一個(gè)界面,左上角有個(gè)按鈕是返回,中間有個(gè)大圖,再下面是一行文字,
這是個(gè)很簡(jiǎn)單的布局,那么使用我們之前的數(shù)據(jù)類型可以么?
答案是不可以,數(shù)據(jù)類型只是給他們提供數(shù)據(jù)的,比如按鈕上面的文字,比如文本框里面的文字.
說了那么多,一個(gè)一個(gè)來吧
首先我們來看看這些

這里寫圖片描述

這里寫圖片描述

這里寫圖片描述

這里寫圖片描述

這里寫圖片描述

這么多!!!是不是嚇了一跳,
其實(shí)沒有那么可怕,我們也不需要每個(gè)都學(xué)的很透徹,常用的學(xué)習(xí)了,然后根據(jù)學(xué)習(xí)的方式,再真正使用到了其他不常用的,或者特殊的,我們?cè)龠M(jìn)一步學(xué)習(xí)就好了,
今天就講講里面的一些基礎(chǔ)的比較簡(jiǎn)單的,稍微復(fù)雜的,我們暫且不說,
循序漸進(jìn),學(xué)著學(xué)著就學(xué)完了,我們要抱著這樣的心態(tài),

首先是UILabel,
這個(gè)是什么呢?其實(shí)參照第一張圖片里面我們可以看到,它就是一個(gè)描述或者展示一些文字的東西,我們參照有道翻譯,就把它叫做標(biāo)簽,是的,他就像一個(gè)便利貼,貼在界面上,便利貼上面有一些文字,
有了他,我們很多界面上的看到的文字就可以自己做出來并且展示了,

好的我們看看這個(gè)類

這里寫圖片描述

總共就80行,學(xué)起來肯定就不費(fèi)勁啦,
直接上代碼...
//UILabel
    UILabel *label = [[UILabel alloc]init];//初始化
    label.frame = CGRectMake(0, 20, 100, 20);//位置
    label.backgroundColor = [UIColor greenColor];//背景色
    label.text = @"i am a label";//內(nèi)容
    label.font = [UIFont systemFontOfSize:16.0f];//字號(hào)
    label.textColor = [UIColor blackColor];//文字顏色
    label.shadowColor = [UIColor redColor];//陰影顏色
    label.shadowOffset = CGSizeMake(5, 5);//陰影偏移
    label.textAlignment = NSTextAlignmentCenter;//文字對(duì)齊方式
    label.numberOfLines = 1;//行數(shù)
    label.userInteractionEnabled = YES;//是否啟用用戶交互
    label.enabled = YES;//同上
    label.adjustsFontSizeToFitWidth = YES;//文字是否自適應(yīng)寬度
    [self.view addSubview:label];//添加label

大致的思路我們也都能看到,首先是初始化一個(gè)標(biāo)簽,意思就是我們撕了一張便利貼,接下來是位置,代表我們把便利貼貼在屏幕的什么地方,然后我們朝里面寫字,既然是寫字,那么再想想文字要用什么顏色的筆,文字我們要寫多大,文字是在標(biāo)簽的什么地方,是左對(duì)齊,還是居中...文字是否給它添加一些效果,比如陰影,文字有多少行.....
是的就跟我們平時(shí)在本子上寫日記一樣,就是這么簡(jiǎn)單...
全部搞定,那么我們把它貼上屏幕,

這里寫圖片描述

是的效果出來了,那么我們也基本學(xué)會(huì)了,最簡(jiǎn)單的方式,最簡(jiǎn)單的標(biāo)簽,當(dāng)然,標(biāo)簽頁不是這么簡(jiǎn)單,我們?cè)谒幕A(chǔ)上我們還可以添加一些動(dòng)畫啦,添加一些其他顯示效果,比如有的字大,有的字小,有的字是藍(lán)色,有的字是黑色,有的字下面有下劃線...這些遇到一個(gè)我們就說一個(gè)....

接下來是按鈕
UIButton
按鈕相較于標(biāo)簽就稍微復(fù)雜一點(diǎn)了,它可以看作是一個(gè)可以點(diǎn)擊的標(biāo)簽,并且有點(diǎn)擊效果,并且點(diǎn)擊之后會(huì)有相應(yīng)的操作,比如點(diǎn)擊后跳轉(zhuǎn)到一個(gè)新的界面....

//UIButton
    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];//初始化
    button.frame = CGRectMake(0, 70, 200, 80);//位置
    button.backgroundColor = [UIColor clearColor];//背景色
    [button setTitle:@"button" forState:UIControlStateNormal];//文字
    [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];//文字顏色
    [button setImage:[UIImage imageNamed:@"favorite"] forState:UIControlStateNormal];//圖片
    [button setBackgroundImage:[UIImage imageNamed:@"background"] forState:UIControlStateNormal];//背景圖片
    [button addTarget:self action:@selector(buttonClick:) forControlEvents:UIControlEventTouchUpInside];//添加點(diǎn)擊事件
    [self.view addSubview:button];//添加button

//button點(diǎn)擊事件
-(void)buttonClick:(UIButton *)btn{
    NSLog(@"button click");
}

是的按鈕上面不只能顯示文字,還能顯示圖片,或者兩個(gè)都顯示,,,至于組合方式我們可以自己定,當(dāng)然按鈕默認(rèn)的是圖片在左文字在右,那么我么可以做到文字在左,圖片在右么?可以的,有很多種方法,這里暫時(shí)也先賣關(guān)子,今天主要是學(xué)習(xí)基礎(chǔ),不是講一些特殊的效果的

[button addTarget:self action:@selector(buttonClick:) forControlEvents:UIControlEventTouchUpInside];//添加點(diǎn)擊事件

這句話可能不了解意思,簡(jiǎn)單解釋下
button就是我們那個(gè)按鈕, self是什么呢?我們這里可以理解成接受點(diǎn)擊事件的對(duì)象,這里可能是一個(gè)控制器,也可能是一個(gè)視圖, action后面的就是對(duì)應(yīng)的按鈕點(diǎn)擊的方法,表示按鈕點(diǎn)擊時(shí)就會(huì)相應(yīng)self對(duì)象里面的這個(gè)方法 至于后面的event則表示事件類型,這里我們是UIControlEventTouchUpInside,表示點(diǎn)擊并松開(想一想,按鈕點(diǎn)擊效果是不是先按下手指,然后松開?)

之后把構(gòu)造出來的按鈕添加到視圖上面去,那么我們就可以點(diǎn)擊這個(gè)按鈕,并且相應(yīng)相對(duì)應(yīng)的方法了

這里寫圖片描述

我們可以看到 我點(diǎn)擊了按鈕之后,有一段文字輸出...

是不是很簡(jiǎn)單,就學(xué)會(huì)了好幾個(gè)控件了?
那么之前給的那么多的控件,學(xué)起來需要很久么?你肯定現(xiàn)在不用那么擔(dān)心了吧?

ok,言歸正傳,接下來我們繼續(xù)
既然有時(shí)候有一個(gè)按鈕,那么有時(shí)候就有幾個(gè)按鈕在一起,這樣我們可以做出選擇.
我們可不可以自己用多個(gè)按鈕進(jìn)行組合呢?答案是肯定的...
當(dāng)然iOS也給我們做了一個(gè)簡(jiǎn)單的封裝,我們?cè)谛枨蟛桓叩臅r(shí)候可以直接拿來用

UISegmentedControl
是的,選擇控制器
簡(jiǎn)單貼下代碼,加點(diǎn)注釋

UISegmentedControl *segment = [[UISegmentedControl alloc]initWithItems:@[@"seg1",@"seg2"]];//初始化
    segment.frame = CGRectMake(0, 160, 200, 30);//位置
    [segment insertSegmentWithTitle:@"seg3" atIndex:2 animated:YES];//添加新的item
    [segment removeSegmentAtIndex:2 animated:YES];//移除對(duì)應(yīng)的item
    [segment setTitle:@"seg11" forSegmentAtIndex:0];//設(shè)置文字
    [segment setWidth:150 forSegmentAtIndex:0];//設(shè)置寬度
    [segment setContentOffset:CGSizeMake(5, 5) forSegmentAtIndex:1];//設(shè)置偏移
    [segment setEnabled:YES forSegmentAtIndex:1];//是否可以點(diǎn)擊
    [segment addTarget:self action:@selector(segmentSelect:) forControlEvents:UIControlEventValueChanged];//添加點(diǎn)擊事件
    [self.view addSubview:segment];//添加segment

//segment點(diǎn)擊事件
-(void)segmentSelect:(UISegmentedControl *)seg{
    NSLog(@"seg click %ld",(long)seg.selectedSegmentIndex);
}

這里可能有人會(huì)問,怎么變成UIControlEventValueChanged?不是UIControlEventTouchUpInside么? 你可以簡(jiǎn)單想一想,因?yàn)槭嵌鄠€(gè)按鈕嘛,單純的點(diǎn)擊,那么是點(diǎn)擊誰呢?原先的下標(biāo)是1 現(xiàn)在的下標(biāo)是2,這個(gè)是不是valueChange?

再接下來是文本輸入框
我們經(jīng)常在計(jì)入一個(gè)應(yīng)用的時(shí)候需要登錄賬號(hào)密碼
這個(gè)時(shí)候我們就能輸入一些文字,點(diǎn)擊一個(gè)登錄按鈕就可以進(jìn)入應(yīng)用了
我們現(xiàn)在就在講講文本輸入框
UITextField
這是一個(gè)只能輸入一行文字的框框,本身也不復(fù)雜,進(jìn)入類里面看看也是100來行的代碼,
學(xué)習(xí)的話還是直接用代碼的例子來看

//UITextField
    UITextField *textField = [[UITextField alloc]init];//初始化
    textField.frame = CGRectMake(0, 200, 200, 30);//位置
    textField.backgroundColor = [UIColor whiteColor];//背景色
    textField.font = [UIFont systemFontOfSize:17.0f];//字號(hào)
    textField.textAlignment = NSTextAlignmentLeft;//對(duì)齊方式
    textField.borderStyle = UITextBorderStyleRoundedRect;//邊框風(fēng)格
    textField.placeholder = @"請(qǐng)輸入文字";//占位符
    textField.clearsOnBeginEditing = YES;//開始輸入是否清空文字
    textField.clearButtonMode = UITextFieldViewModeWhileEditing;//清空按鈕顯示模式
    textField.delegate = self;//設(shè)置代理
    [self.view addSubview:textField];//添加textField

初始化一個(gè)文本輸入框,設(shè)定好位置等顯示信息,設(shè)置輸入文字的大小,顏色等,在沒有文字的時(shí)候是否默認(rèn)顯示一些文字占位符?輸入文字之后是否有個(gè)小叉叉,點(diǎn)擊后可以清空文字....之后添加到界面上就是一個(gè)文本輸入框了
這里又多了一個(gè)delegate的東西,我上面注釋了叫做代理?
那么代理是個(gè)什么東西呢?
這里也簡(jiǎn)單的解釋下,之后會(huì)單獨(dú)介紹
代理是一種設(shè)計(jì)模式
在iOS中有很多種消息傳遞方式,代理就是其中的一種,當(dāng)然還有很多比如通知,比如KVO,這里暫時(shí)不說,
先說說代理方便我們?cè)谶@個(gè)地方簡(jiǎn)答的學(xué)習(xí)
代理：是一種通用的設(shè)計(jì)模式合瓢，iOS中對(duì)代理支持的很好坦胶，由代理對(duì)象、委托者歪玲、協(xié)議三部分組成迁央。

我們這里可以看到textField.delegate = self;,其中textField就是一個(gè)委托者,self是代理對(duì)象,協(xié)議暫時(shí)可以理解成一個(gè)方法
意思就是textField有一些方法,但是只有方法名,但是具體干什么呢?它自己也不知道,于是就委托給self,讓self去實(shí)現(xiàn)這些方法,

比如我們開始編輯文本框,那么textField就有一個(gè)beginEdit的協(xié)議方法,表示開始編輯,但是textField并不知道開始編輯之后需要干哪些事情,于是就跟self說,你幫我把開始編輯的時(shí)候需要干什么事情干掉,
大致就是這個(gè)思路
我們看下代碼

#pragma mark --UITextFieldDelegate--
- (BOOL)textFieldShouldBeginEditing:(UITextField *)textField{
    NSLog(@"%s",__FUNCTION__);
    return YES;
}
- (void)textFieldDidBeginEditing:(UITextField *)textField{
    NSLog(@"%s",__FUNCTION__);
}
- (BOOL)textFieldShouldEndEditing:(UITextField *)textField{
    NSLog(@"%s",__FUNCTION__);
    return YES;
}
- (void)textFieldDidEndEditing:(UITextField *)textField{
    NSLog(@"%s",__FUNCTION__);
}
- (void)textFieldDidEndEditing:(UITextField *)textField reason:(UITextFieldDidEndEditingReason)reason NS_AVAILABLE_IOS(10_0){
    NSLog(@"%s",__FUNCTION__);
}
- (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string{
    NSLog(@"%s",__FUNCTION__);
    return YES;
}
- (BOOL)textFieldShouldClear:(UITextField *)textField{
    NSLog(@"%s",__FUNCTION__);
    return YES;
}
- (BOOL)textFieldShouldReturn:(UITextField *)textField{
    NSLog(@"%s",__FUNCTION__);
    return YES;
}

看到了好多,self遵守了textField的代理,那么self就能夠?qū)崿F(xiàn)textField的這些方法
舉個(gè)簡(jiǎn)單的例子,

- (BOOL)textFieldShouldBeginEditing:(UITextField *)textField{
    NSLog(@"%s",__FUNCTION__);
    return YES;
}

在開始編輯的時(shí)候,系統(tǒng)輸出一下信息,
我們就會(huì)看到

這里寫圖片描述

這里寫圖片描述

沒有點(diǎn)擊文本框的時(shí)候什么都沒有
點(diǎn)擊了文本框?qū)⒁斎胛淖值臅r(shí)候,textField知道了想要輸入了,但是其他就不知道了,讓self去實(shí)現(xiàn), 于是self就說你自己打印一下你這個(gè)方法名吧,
于是就有了輸出.....
就是這個(gè)意思
當(dāng)然這是個(gè)簡(jiǎn)單的理解,具體的邏輯會(huì)單獨(dú)拿出去講

接下來是滑塊
UISlider
直接上代碼

//UISlider
    UISlider *slider = [[UISlider alloc]init];//初始化
    slider.frame = CGRectMake(0, 250, 200, 30);//位置
    slider.minimumValue = 0;//最小值
    slider.maximumValue = 1;//最大值
    slider.value = 0.5;//當(dāng)前值
    [slider setThumbImage:[UIImage imageNamed:@"favorite"] forState:UIControlStateNormal];//設(shè)置滑塊圖片
    slider.continuous = YES;//valuechange是否全部返回
    [slider addTarget:self action:@selector(sliderValueChange:) forControlEvents:UIControlEventValueChanged];//添加滑動(dòng)事件
    [self.view addSubview:slider];//添加slider

//slider滑動(dòng)事件
-(void)sliderValueChange:(UISlider *)slider{
    NSLog(@"slider value change %f",slider.value);
}

滑塊是什么?我們有時(shí)候聽音樂是不是有個(gè)進(jìn)度條?進(jìn)度條上面是不是有個(gè)小圓點(diǎn),我們可以直接拖動(dòng)這個(gè)小圓點(diǎn)選擇當(dāng)前的播放時(shí)間?
是的,那個(gè)就是UISlider,不過為什么跟我們看到的不一樣?是的,人家做了美化,或者做了自定義.這里有會(huì)插一句自定義難不難?一句解釋會(huì)者就不難了...

簡(jiǎn)單理解下,初始化之后就生成了一個(gè)滑塊控件了,接著設(shè)置最小值,最大值,小圓點(diǎn)的樣式,當(dāng)前的位置等等,添加響應(yīng)事件,當(dāng)前的值變化了之后會(huì)觸發(fā)什么事件..
基本就是這個(gè)思路,至于左邊條什么顏色右邊條什么顏色...有需要再說....
看下效果

這里寫圖片描述

滑動(dòng)一下就會(huì)有相對(duì)應(yīng)的輸出值....
我們就能根據(jù)這些值的變化干很多事情,比如我們最小值設(shè)的是0 最大值設(shè)的是一首歌的時(shí)長(zhǎng),那么我滑動(dòng)一下,獲得一個(gè)值,代表的是什么?代表的就是我們要直接從我們選擇的那個(gè)時(shí)間點(diǎn)開始播放....

繼續(xù)說個(gè)簡(jiǎn)單的吧.
開關(guān),我們?cè)谑謾C(jī)經(jīng)常會(huì)簡(jiǎn)單很多開關(guān),流量開關(guān)啊,wifi開關(guān)啊....
當(dāng)然你也可以用兩個(gè)按鈕來自己定義,也可以用滑塊控件來自己定義,也可以完全自己自定義...
當(dāng)然,我們也可以用系統(tǒng)提供好的...
簡(jiǎn)單看下

//UISwitch
    UISwitch *aswitch = [[UISwitch alloc]init];//初始化
    aswitch.frame = CGRectMake(0, 290, 60, 30);//位置
    aswitch.backgroundColor = [UIColor blueColor];//背景色
    aswitch.onTintColor = [UIColor redColor];//打開時(shí)顏色
    aswitch.tintColor = [UIColor greenColor];//關(guān)閉時(shí)顏色
    aswitch.thumbTintColor = [UIColor yellowColor];//按鈕顏色
    [aswitch setOn:YES animated:YES];//設(shè)置是否打開
    [aswitch addTarget:self action:@selector(switchValueChange:) forControlEvents:UIControlEventValueChanged];//添加選擇事件
    [self.view addSubview:aswitch];//添加switch

//switch選擇事件
-(void)switchValueChange:(UISwitch *)aswitch{
    NSLog(@"switch value change %d",aswitch.isOn);
}

是不是很簡(jiǎn)單?
參考上面的學(xué)習(xí)方式,
首先是構(gòu)建一個(gè)開關(guān)控件,定義好位置,設(shè)定背景色,設(shè)定開關(guān)按鈕的樣式,設(shè)置打開時(shí)的顏色,關(guān)閉時(shí)的顏色...最后添加到視圖上去,當(dāng)然也要添加打開和關(guān)閉的事件,打開對(duì)應(yīng)的BOOL值就是1,關(guān)閉就是0,所以也是valueChange,所以跟slider基本上一樣,區(qū)別是slider讀的叫做value,而switch讀取的叫做on,很容易理解是不是?
那么一個(gè)簡(jiǎn)單的開關(guān)控件就學(xué)會(huì)了,我們看看效果...

這里寫圖片描述

雖然我很丑,但是你不可以否認(rèn)我就是一個(gè)正規(guī)的開關(guān)...

通常我們?cè)诩虞d網(wǎng)絡(luò)或者等待一件事情的時(shí)候,如果什么都不顯示,我們會(huì)覺得是不是就是死機(jī)了,或者是應(yīng)用卡住了還是怎么樣?所以開發(fā)通常會(huì)用個(gè)loading的動(dòng)畫來提醒你正在加載,有效的降低你的時(shí)間感官,同時(shí)也能更好的表示應(yīng)用正在干什么什么事,你現(xiàn)在最好不要?jiǎng)?否則就會(huì)出錯(cuò)....
所以一個(gè)loading是很有必要的,當(dāng)然我們一般看到的都是很好看的,都是開發(fā)者們自己定義的比較特殊的loading的動(dòng)畫效果,那么系統(tǒng)有沒有直接可以用的,比較簡(jiǎn)單的呢?
答案也是肯定的,我們或許現(xiàn)在不會(huì)自己構(gòu)造一個(gè)loading但是我們可以學(xué)習(xí)系統(tǒng)的,學(xué)會(huì)了,我們是不是就可以簡(jiǎn)單的仿造呢?大致要哪些屬性和方法,我們就能做到心里有數(shù),后期我也會(huì)單獨(dú)寫一個(gè)特殊的比較好玩的loading....
先回到正題,
我們看看系統(tǒng)是怎么給我們?cè)O(shè)計(jì)的
這個(gè)控件叫做UIActivityIndicatorView

//UIActivityIndicatorView
    UIActivityIndicatorView *actView = [[UIActivityIndicatorView alloc]initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];//初始化
    actView.frame = CGRectMake(0, 330, 50, 50);//位置
    actView.hidesWhenStopped = YES;//停止時(shí)是否隱藏
    [actView startAnimating];//開始動(dòng)畫
    [self.view addSubview:actView];//添加actView

是不是好簡(jiǎn)單?
沒有錯(cuò)就是這么簡(jiǎn)單,本身就是一個(gè)loading的效果動(dòng)畫而已,所以你只要?jiǎng)?chuàng)建了,社這號(hào)位置了,打開動(dòng)畫就好了.

這里寫圖片描述

是的就是一個(gè)小菊花...

還是不說它了,真的太簡(jiǎn)單了,上面說了slider,它是一個(gè)帶滑塊的東西,那么有沒有進(jìn)度條呢?不帶滑塊!,有!
iOS基本上都考慮到我們經(jīng)常會(huì)用到的這些東西了,都做好了一套簡(jiǎn)單的
這個(gè)進(jìn)度條是UIProgressView
名字很形象,UI表示的是視圖控件類的 progressview表示的就是進(jìn)度條視圖,合起來就是視圖控件類的進(jìn)度條視圖,所以你再回到上面看看,那些說過的名字的控件是不是都是這樣呢?
直接上代碼,

//UIProgressView
    UIProgressView *progress = [[UIProgressView alloc]init];//初始化
    progress.frame = CGRectMake(0, 390, 200, 30);//位置
    progress.backgroundColor = [UIColor blueColor];//背景色
    progress.progressViewStyle = UIProgressViewStyleDefault;//風(fēng)格
    progress.progressTintColor = [UIColor redColor];//已達(dá)到部分
    progress.trackTintColor = [UIColor greenColor];//未達(dá)到部分
    [progress setProgress:0.5 animated:YES];//設(shè)置proges的值
    [self.view addSubview:progress];//添加progress

首先它肯定是沒有slider復(fù)雜的,因?yàn)樗褪且粋€(gè)進(jìn)度條,沒有滑塊,所以他也就沒有相應(yīng)的事件,他只要設(shè)置進(jìn)度就好了,怎么設(shè)置呢?代碼里面也有了其實(shí),我單獨(dú)拿出來

[progress setProgress:0.5 animated:YES];//設(shè)置proges的值

很直接是不是,設(shè)置進(jìn)度值,是否需要?jiǎng)赢?/p>

就這樣有一個(gè)基礎(chǔ)控件學(xué)完了,
那么你可能會(huì)想到了說到現(xiàn)在我還不會(huì)單獨(dú)放一張圖片在屏幕上呢?難道用之前的那個(gè)button?
不是的,button它是一個(gè)按鈕,并不是一個(gè)圖片,它雖然能用來展示,但是肯定是大材小用了不是?
我們有最直接的UIImageView!
沒有錯(cuò),就是圖片視圖!感覺好直接!會(huì)不會(huì)有點(diǎn)假?......
我們?cè)囋嚳?

//UIImageView
    UIImageView *imageView1 = [[UIImageView alloc]init];//初始化
    imageView1.frame = CGRectMake(0, 430, 50, 50);//位置
    imageView1.image = [UIImage imageNamed:@"favorite"];
    imageView1.userInteractionEnabled = YES;//是否開啟用戶交互
    [self.view addSubview:imageView1];//添加imageView
    
    UIImageView *imageView2 = [[UIImageView alloc]init];//初始化
    imageView2.frame = CGRectMake(0, 480, 50, 50);//位置
    imageView2.animationImages = @[[UIImage imageNamed:@"favorite"],[UIImage imageNamed:@"background"]];//設(shè)置動(dòng)畫圖片
    imageView2.animationRepeatCount = 0;//動(dòng)畫重復(fù)次數(shù)
    imageView2.animationDuration = 1;//動(dòng)畫時(shí)長(zhǎng)
    [imageView2 startAnimating];//開啟動(dòng)畫
    [self.view addSubview:imageView2];//添加imageView

我怎么寫了兩個(gè)? 那是因?yàn)槲覍懥藘煞N效果,第一種就是一個(gè)靜態(tài)的圖片,什么都沒有,第二種就不是了,是放了兩張圖片,循環(huán)切換,寫到這里,你會(huì)不會(huì)想到剛才的loading?如果做一套GIF或者多個(gè)圖片,放進(jìn)一個(gè)imageView中,不停的切換,那不就是一個(gè)loading的效果的控件了么?!是的,就是這樣!! 當(dāng)然我們也可以手動(dòng)繪制自己想要的線條啦,特殊的效果啦..讓它更加豐富....
我們看看效果

這里寫圖片描述

這里寫圖片描述

原諒我只是截圖,沒有做出gif,不過你們是否可以看到最后那個(gè)小星星是在變化的呢?第一張是一個(gè)小星星,第二張就是一個(gè)方框了.......
我會(huì)把代碼上傳,你們下載運(yùn)行就可以看到效果了....
ok,繼續(xù)接下來的基礎(chǔ)控件,
上面說了textfield是一個(gè)能夠?qū)懸恍形淖值奈谋据斎肟?那么有沒有寫多行的?
label默認(rèn)是寫一行文字的,固定位置,如果文字過多怎么辦?后面變成省略號(hào)了,
能不能有一個(gè)跟網(wǎng)頁一樣的控件,可以展示文字,同時(shí)可以向下拖動(dòng)......
有的,對(duì)于單獨(dú)的文字,我們有一個(gè)控件叫做UITextView
他是一個(gè)算是集合了上面說的兩個(gè)控件于一身的控件,跟網(wǎng)頁一樣喲.不過他只能寫文字,因?yàn)槿思颐志徒凶鰐extview.

//UITextView
    UITextView *textView = [[UITextView alloc]init];//初始化
    textView.frame = CGRectMake(0, 540, 200, 100);//位置
    textView.backgroundColor = [UIColor whiteColor];//背景色
    textView.text = @"i am a textView i am a textView i am a textView i am a textView i am a textView i am a textView i am a textView i am a textView i am a textView i am a textView i am a textView i am a textView ";//文字
    textView.font = [UIFont systemFontOfSize:19.0f];//字號(hào)
    textView.textAlignment = NSTextAlignmentLeft;//對(duì)齊方式
    textView.editable = NO;//是否可編輯
    textView.selectable = NO;//是否可選擇
    textView.delegate = self;//設(shè)置代理
    [self.view addSubview:textView];//添加textView

#pragma mark --UITextViewDelegate--
- (BOOL)textViewShouldBeginEditing:(UITextView *)textView{
    NSLog(@"%s",__FUNCTION__);
    return YES;
}
- (BOOL)textViewShouldEndEditing:(UITextView *)textView{
    NSLog(@"%s",__FUNCTION__);
    return YES;
}

- (void)textViewDidBeginEditing:(UITextView *)textView{
    NSLog(@"%s",__FUNCTION__);
}
- (void)textViewDidEndEditing:(UITextView *)textView{
    NSLog(@"%s",__FUNCTION__);
}

- (BOOL)textView:(UITextView *)textView shouldChangeTextInRange:(NSRange)range replacementText:(NSString *)text{
    NSLog(@"%s",__FUNCTION__);
    return YES;
}
- (void)textViewDidChange:(UITextView *)textView{
    NSLog(@"%s",__FUNCTION__);
}

- (void)textViewDidChangeSelection:(UITextView *)textView{
    NSLog(@"%s",__FUNCTION__);
}

- (BOOL)textView:(UITextView *)textView shouldInteractWithURL:(NSURL *)URL inRange:(NSRange)characterRange interaction:(UITextItemInteraction)interaction{
    NSLog(@"%s",__FUNCTION__);
    return YES;
}
- (BOOL)textView:(UITextView *)textView shouldInteractWithTextAttachment:(NSTextAttachment *)textAttachment inRange:(NSRange)characterRange interaction:(UITextItemInteraction)interaction{
    NSLog(@"%s",__FUNCTION__);
    return YES;
}

我們看到了創(chuàng)建對(duì)象什么的都跟上面一樣.設(shè)置位置,背景色,文字等等.然后它也有跟textfield差不多的代理協(xié)議, self是一個(gè)類的隱藏屬性,表示的就是你當(dāng)前的這個(gè)類的對(duì)象, 我們把textView添加到當(dāng)前控制器的視圖中,并且讓當(dāng)前這個(gè)控制器遵守textView的代理,那么當(dāng)textView的這些協(xié)議方法響應(yīng)的時(shí)候,我們就可以進(jìn)行一些操作,當(dāng)然我們還要注意這個(gè)東西

textView.editable = NO;//是否可編輯
textView.selectable = NO;//是否可選擇

一個(gè)表示textView是否可以編輯 就是類似textfield的輸入功能,另一個(gè)是表示對(duì)其中的文字是否可以選擇,進(jìn)行復(fù)制等操作...如果這兩個(gè)都是no了,那基本就表示他沒有輸入功能了,就跟一個(gè)小說網(wǎng)頁差不多,不讓輸入,只讓閱讀,可以下拉
如果你想要類似于QQ聊天輸入框一樣,可以輸入文字,那么久需要把editable設(shè)置成YES,selectable也要設(shè)置成YES,你也可以單獨(dú)設(shè)置看看是什么效果
我們讓他能夠編輯

這里寫圖片描述

這里寫圖片描述

我們看到了一個(gè)鍵盤,可以輸入文字,代理也都有響應(yīng)了....

所以這個(gè)控件也是個(gè)簡(jiǎn)單控件!

那么我們想跟網(wǎng)頁一樣,顯示圖片,又顯示文字,還能下拉,有沒有這個(gè)控件,傳一個(gè)圖片就好了,傳一個(gè)文字就好了?
當(dāng)然沒有這么簡(jiǎn)單的了,控件再牛也不知道你的圖片在什么位置,文字在什么位置不是?word還需要你進(jìn)行排版呢.
所以我們能提供給你一個(gè)控件,類似于word的空白頁
我們朝里面添加?xùn)|西,并且設(shè)置位置就好了,
UIScrollView

//UIScrollView
    UIScrollView *scroll = [[UIScrollView alloc]init];//初始化
    scroll.frame = CGRectMake(200, 20, 100, 100);//位置
    scroll.backgroundColor = [UIColor redColor];
    for (int i=0; i<3; i++) {
        UIView *subView = [[UIView alloc]initWithFrame:CGRectMake(i*100, 0, 100, 200)];//內(nèi)部視圖初始化并且設(shè)置位置
        subView.backgroundColor = [UIColor colorWithRed:arc4random_uniform(256)/255.0 green:arc4random_uniform(256)/255.0 blue:arc4random_uniform(256)/255.0 alpha:1];//背景色
        [scroll addSubview:subView];//添加到scrollView
    }
    scroll.pagingEnabled = YES;//是否滑動(dòng)一頁
    scroll.contentSize = CGSizeMake(300, 200);//滑動(dòng)范圍
    scroll.bounces = YES;//是否有回彈效果
    scroll.showsHorizontalScrollIndicator = YES;//是否顯示橫向滑動(dòng)條
    scroll.showsVerticalScrollIndicator = YES;//是否顯示縱向滑動(dòng)條
    scroll.delegate = self;//設(shè)置代理
    [scroll setContentOffset:CGPointMake(100, 0) animated:YES];//設(shè)置當(dāng)前滾動(dòng)到的位置
    [self.view addSubview:scroll];//添加scroll

#pragma mark --UIScrollViewDelegate--
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
    NSLog(@"%s",__FUNCTION__);
}
- (void)scrollViewDidZoom:(UIScrollView *)scrollView{
    NSLog(@"%s",__FUNCTION__);
}
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{
    NSLog(@"%s",__FUNCTION__);
}
- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset{
    NSLog(@"%s",__FUNCTION__);
}
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{
     NSLog(@"%s",__FUNCTION__);
}

- (void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView{
    NSLog(@"%s",__FUNCTION__);
}
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
    NSLog(@"%s",__FUNCTION__);
}

- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView{
    NSLog(@"%s",__FUNCTION__);
}

- (nullable UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView{
    NSLog(@"%s",__FUNCTION__);
    return nil;
}

- (void)scrollViewWillBeginZooming:(UIScrollView *)scrollView withView:(nullable UIView *)view{
    NSLog(@"%s",__FUNCTION__);
}
- (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(nullable UIView *)view atScale:(CGFloat)scale{
    NSLog(@"%s",__FUNCTION__);
}

- (BOOL)scrollViewShouldScrollToTop:(UIScrollView *)scrollView{
    return YES;
}
- (void)scrollViewDidScrollToTop:(UIScrollView *)scrollView{
    NSLog(@"%s",__FUNCTION__);
}

這里稍微解釋一下,我們先不看那個(gè)for循環(huán),我們單獨(dú)看控件.初始化,設(shè)置位置,背景色等等,沒有什么需要解釋的,代理什么的暫時(shí)也參考textFiled,只是他表示的意思不一樣,滾動(dòng)開始,滾動(dòng)結(jié)束,正在滾動(dòng)....

至于pagingEnabled,表示的是一次滑動(dòng)的是否是成一頁的效果,我們看小說,一次滑動(dòng)是一個(gè)頁面,我們看一個(gè)列表,滑到什么地方就停止在什么地方,這個(gè)就是控制這個(gè)的
contentSize表示的是可以滑動(dòng)的范圍,我這里設(shè)置了寬300,高200,表示我們看到的是一個(gè)100100的界面,但是我們可以拖動(dòng)的范圍比這個(gè)大,是一個(gè)300200的范圍,當(dāng)然我們拖動(dòng)的時(shí)候只能看到在100*100這個(gè)界面內(nèi)

接著我們看for循環(huán),我們創(chuàng)建了3個(gè)view 分別加在了300*200的范圍內(nèi),

我們可以這么理解,本質(zhì)上是有一個(gè)300200的范圍,這個(gè)范圍里面有3個(gè)視圖依次布局,然后我們?cè)谶@個(gè)范圍上面蓋了一個(gè)相框,這個(gè)相框是100100的大小,我們只能夠通過這個(gè)相框看到相框中的界面,相框外的我們都看不到,
或者我們打開一個(gè)網(wǎng)頁,看看,屏幕大小的框就是那個(gè)100100的界面, 至于網(wǎng)頁內(nèi)部的內(nèi)容,就是我們那個(gè)300200的內(nèi)部?jī)?nèi)容的范圍.

這里寫圖片描述

OK,差不多說了10來種控件了,基本上我們?cè)趹?yīng)用開發(fā)的時(shí)候用到的基本控件就這些了,
你可能不相信,說我經(jīng)常看到一個(gè)banner,一個(gè)輪播圖,可以循環(huán)滾動(dòng)廣告?那個(gè)用上面的根本做不出來!
其實(shí)已經(jīng)夠了,我們就用最后學(xué)習(xí)的scrollerView加上幾張圖片試試,是不是就有那個(gè)效果了?當(dāng)然是最簡(jiǎn)單的,不能無限循環(huán),不能自動(dòng)滾動(dòng)..
無限循環(huán)暫時(shí)不說,自動(dòng)滾動(dòng)嘛,我們?cè)O(shè)置一個(gè)計(jì)時(shí)器,讓他隔幾秒就自動(dòng)滾一下,那不就OK了?怎么滾? scrollerView里面有代碼呀!

[scroll setContentOffset:CGPointMake(100, 0) animated:YES];//設(shè)置當(dāng)前滾動(dòng)到的位置

上面都已經(jīng)說了喲..
那么滾動(dòng)的時(shí)候廣告頁會(huì)有文字變化呢?
代理呀....我們可以在代理里面干很多事情啊,滾動(dòng)開始,滾動(dòng)結(jié)束.....我們都是知道的,我們可以在這些協(xié)議里面做很多我們要做的事情喲....
至于怎么做,慢慢來,以后再說...........

好了,基礎(chǔ)控件基本都說完了,接下來會(huì)詳細(xì)說一下代理,接著再說一些在這些基礎(chǔ)控件上衍生的高級(jí)一些的控件...

Demo地址:https://github.com/spicyShrimp/DEMO_OC