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 ()
//標(biāo)題標(biāo)簽
@property(nonatomic,strong)UILabel *titleLable;
//左邊按鈕
@property(nonatomic,strong)UIButton *leftBtn;
//右邊按鈕
@property(nonatomic,strong)UIButton *rightBtn;
//顯示圖片
@property(nonatomic,strong)UIImageView *myImageView;
//給存入的四張圖片定義一個(gè)數(shù)組
@property(nonatomic,strong)NSArray *imageNames;
@end
@implementation ViewController
//視圖加載好時(shí)會(huì)自動(dòng)調(diào)用
- (void)viewDidLoad {
? ?[super viewDidLoad];
// ? ?創(chuàng)建并初始化標(biāo)簽
? ?self.titleLable = [[UILabel alloc]initWithFrame:CGRectMake(100, 50, 150, 30)];
// ? ?寫(xiě)入標(biāo)簽文本
self.titleLable.text = @"biaoqingdi";
// ? ?設(shè)置標(biāo)簽文本的背景顏色為紅色
self.titleLable.backgroundColor = [UIColor greenColor];
// ? ?設(shè)置標(biāo)簽文本在框中居中對(duì)齊
? ?self.titleLable.textAlignment = NSTextAlignmentCenter;
// ? ?添加標(biāo)簽到視圖上
? ?[self.view addSubview:self.titleLable];
// ? ?創(chuàng)建并初始化定義（坐標(biāo)、寬高）相框
? ?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)建并初始化定義（坐標(biāo)、寬高）左按鈕
? ?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)建并初始化定義（坐標(biāo)、寬高）右按鈕
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)聽(tīng)
[self.rightBtn addTarget:self action:@selector(rightBtnAction) forControlEvents:(UIControlEventTouchUpInside)];
// ? 左按鈕監(jiān)聽(tīng)
[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īng)顟B(tài)）
// ? ?不是為最后一張才切換到下一張
? ?if (index < 4) {
// ? ? ? ?如果index=3（即圖片從第四張切換到，第五張時(shí)）
? ? ? ?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張時(shí)）
// ? ? ? 將兩個(gè)按鈕正常狀態(tài)下的背景圖片設(shè)置為黑色圖片
? ? ? ? ? ?[self.rightBtn setBackgroundImage:[UIImage imageNamed:@"right_normal"] forState:(UIControlStateNormal)];
? ? ? ? ? ?[self.leftBtn setBackgroundImage:[UIImage imageNamed:@"left_normal"] forState:(UIControlStateNormal)];
// ? ? ? 開(kāi)啟兩個(gè)按鈕的交互
? ? ? ? ? ?self.rightBtn.userInteractionEnabled = YES;
? ? ? ? ? ?self.leftBtn.userInteractionEnabled = YES;
? ? ? ? ? ? ?}
// ? ? ? ?將標(biāo)簽titleLable內(nèi)容切換到下一張圖片的標(biāo)簽內(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) {
// ? ? 第二張切換到第一張時(shí)
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張時(shí)）
// ? ? ? 將兩個(gè)按鈕正常狀態(tài)下的背景圖片設(shè)置為黑色圖片
? ? ? ? ? ?[self.rightBtn setBackgroundImage:[UIImage imageNamed:@"right_normal"] forState:(UIControlStateNormal)];
? ? ? ? ? ?[self.leftBtn setBackgroundImage:[UIImage imageNamed:@"left_normal"] forState:(UIControlStateNormal)];
// ? ? ? 開(kāi)啟兩個(gè)按鈕的交互
? ? ? ? ? ?self.rightBtn.userInteractionEnabled = YES;
? ? ? ? ? ?self.leftBtn.userInteractionEnabled = YES;
? ? ? ?}
// ? ? ? ?將標(biāo)簽titleLable內(nèi)容切換到上一張圖片的標(biāo)簽內(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)建并初始化定義（坐標(biāo)、寬高）按鈕
UIButton *button = [[UIButton alloc]initWithFrame:CGRectMake(50, 50, 80, 80)];
// ? ? ?frame 表明了空間的坐標(biāo)和寬高(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)聽(tīng)
? ?[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];
// ? ?標(biāo)簽UIlable
UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(150, 270, 150, 30)];
// ? ?設(shè)置標(biāo)簽的文本
label.text = @"表情弟";
// ? ? ?設(shè)置居中方式（注：是將文本在標(biāo)簽框內(nèi)部居中）
label.textAlignment = NSTextAlignmentCenter;
// ? ? ? 設(shè)置標(biāo)簽的顏色為紅色
? ?label.textColor = [UIColor redColor];
// ? ? ?將標(biāo)簽顯示在視圖屏幕上
[self.view addSubview:label];
}
// ? ? ?方法調(diào)用
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
}
// ? ?調(diào)用按鈕監(jiān)聽(tīng)的方法
-(void)btnClickLister{
// ? ?在視圖屏幕中執(zhí)行按鈕操作時(shí)，代碼工程中將會(huì)打印“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ù)隨文字?jǐn)?shù)量自動(dòng)改變
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單詞的：圖片有可能會(huì)拉伸
UIViewContentModeScaleToFill
將圖片拉伸至填充整個(gè)imageView
圖片顯示的尺寸跟imageView的尺寸是一樣的
帶有aspect單詞的：保持圖片原來(lái)的寬高比
UIViewContentModeScaleAspectFit
： 保證剛好能看到圖片的全部
UIViewContentModeScaleAspectFill
：拉伸至圖片的寬度或者高度跟imageView一樣
沒(méi)有scale單詞的：圖片絕對(duì)不會(huì)被拉伸，保持圖片的原尺寸
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:@"點(diǎn)我啊"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)聽(tīng)事件
[btn addTarget:selfaction:@selector(buttonClick:) forControlEvents:UIControlEventTouchUpInside];
// 將btn添加到父控件中
[self.viewaddSubview:btn];
注意點(diǎn)
不能直接修改：OC對(duì)象的結(jié)構(gòu)體屬性的成員
下面的寫(xiě)法是錯(cuò)誤的
imageView.frame.size= imageView.image.size;
正確寫(xiě)法
CGRect tempFrame = imageView.frame;
tempFrame.size= imageView.image.size;
imageView.frame = tempFrame;
initWithImage:方法
利用這個(gè)方法創(chuàng)建出來(lái)的imageView的尺寸和傳入的圖片尺寸一樣
修改frame的3種方式
直接使用CGRectMake函數(shù)
imageView.frame = CGRectMake(100,100,200,200);
利用臨時(shí)結(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;
使用大括號(hào){}形式
imageView.frame = (CGRect){{100,100}, {200,200}};
抽取重復(fù)代碼
將相同代碼放到一個(gè)新的方法中
不用的東西就變成方法的參數(shù)
圖片的加載方式
有緩存
UIImage*image = [UIImageimageNamed:@"圖片名"];
使用場(chǎng)合：圖片比較小、使用頻率較高
建議把需要緩存的圖片直接放到Images.xcassets
無(wú)緩存
NSString*file = [[NSBundlemainBundle] pathForResource:@"圖片名"ofType:@"圖片的擴(kuò)展名"];
UIImage*image = [UIImageimageWithContentsOfFile:@"圖片文件的全路徑"];
使用場(chǎng)合：圖片比較大、使用頻率較小
不需要緩存的圖片不能放在Images.xcassets
放在Images.xcassets里面的圖片，只能通過(guò)圖片名去加載圖片
延遲做一些事情
[abcperformSelector:@selector(stand:)withObject:@"123"afterDelay:10];
//10s后自動(dòng)調(diào)用abc的stand:方法，并且傳遞@"123"參數(shù)
音頻文件的簡(jiǎn)單播放
// 創(chuàng)建一個(gè)音頻文件的URL(URL就是文件路徑對(duì)象)
NSURL*url = [[NSBundlemainBundle] URLForResource:@"音頻文件名"withExtension:@"音頻文件的擴(kuò)展名"];
// 創(chuàng)建播放器self.player= [AVPlayerplayerWithURL:url];
// 播放[self.playerplay];
