作為一個初學者,我們無法立即“認識”一個事物的本質,只能去“感知”它.
只有當對事物的認知以一種更高的形式存在的時候,我們才能脫離“感知”,真正的“認識”它.
如上所述,視覺上的感知是我們接觸iOS的最好的切入點.
問:什么是UI?
答:User Interface,用戶界面,用來顯示內容或者作為容器儲存其他UI.我們在手機上看得到的都是UI.問:誰來管理UI?
答:Controller-控制器.控制器作為UI的靈魂,它負責管理UI的生命周期(創(chuàng)建/添加/銷毀等),監(jiān)聽并響應用戶與UI之間的交互.
Demo01:加法計算器
- 我們采用storyboard與代碼結合的方式來理解這個Demo:storyboard負責界面布局,代碼負責邏輯實現.
1.在Main.storyboard中拖入UI控件:
TestField 監(jiān)聽用戶輸入數字
屬性:Placeholder 負責在用戶輸入之前顯示提示信息,占位.
Keyboard Type 設置彈出鍵盤的類型(數字鍵盤,全鍵盤等)Label 負責顯示文本,比如本個Demo的加號,等號和計算結果
屬性:Font 字體大小
Lines 文字行數(如果設置為0,表示自動換行)
Alignment 文字對齊方式Button 點擊計算/清空內容
屬性:根據State Config來設置
2.關聯(lián)storyboard和Controller
Command+option+enter 打開輔助編譯器
Command+enter 關閉輔助編譯器
按住control建立storyboard和Controller的聯(lián)系
3.代碼實現計算邏輯
通過連線創(chuàng)建屬性
@interface ViewController ()
//創(chuàng)建屬性
@property (weak, nonatomic) IBOutlet UITextField *textNum1;
@property (weak, nonatomic) IBOutlet UITextField *textNum2;
@property (weak, nonatomic) IBOutlet UILabel *labelText;
@end
通過連線創(chuàng)建按鈕的點擊事件
- (IBAction)calculator:(UIButton *)sender {
//記錄TextField數字并計算結果
int n1=[self.textNum1.text intValue];
int n2=[self.textNum2.text intValue];
int sum=n1+n2;
//修改label
self.labelText.text=[NSString stringWithFormat:@"%d",sum];
//撤銷第一擁有者身份 隱藏鍵盤
[self.textNum1 resignFirstResponder];
[self.textNum2 resignFirstResponder];
}
- (IBAction)removeAll:(UIButton *)sender {
//清空
self.textNum1.text=@"";
self.textNum2.text=@"";
self.labelText.text=@"0";
//隱藏鍵盤
[self.view endEditing:YES];
}
總結:
至此,我們的第一個Demo計算器就完成了,期間我們接觸到了一個新名詞:第一響應者.
問:什么是第一響應者
答:當前響應用戶觸摸的屏幕上的對象,在APP生命周期內,First Responder負責用戶與UI之間的交互.用戶觸摸TextField的時候,它就變成了第一響應者,并且成為活動的文本區(qū)域(可以輸入).
- 問:撤銷第一響應者
答:我用了兩種方法
[self.textNum1 resignFirstResponder];
[self.view endEditing:YES];
都可以用來撤銷TextField的第一響應者身份,達到隱藏鍵盤的效果.
問:連線的屬性為什么不放到.h中?
答:放入延展類,防止外部對象訪問,達到私有化效果問:連線方法為什么不放到類擴展中?
答:沒有必要聲明方法問:什么是IBOutlet和IBAction?
答:IBOutlet表示連線的是一個屬性
IBAction表示連線的是一個方法問:控件為什么用weak修飾?
答:weak表示弱引用,相關內容在UI基礎-02中詳細解答
Tips:
1.刪除方法的時候,一定要把storyboard中的連線刪除
2.快捷鍵:
顯示/隱藏左側導航區(qū)域 Command+0
顯示/隱藏右側實用工具欄Command+option+0
打開/關閉輔助編譯器
打開 Command+option+enter
關閉 Command+enter
查找頭文件 shift+Command+o
離線文檔 shift+Command+0
Demo02:小飛機
點擊方向鍵,讓小飛機移動
1.設置界面
- (void)viewDidLoad {
[super viewDidLoad];
//設置背景
UIImageView *backgroundImage=[[UIImageView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width,self.view.frame.size.height)];
//創(chuàng)建UIImage
UIImage *image=[UIImage imageNamed:@"background"];
//修改屬性
backgroundImage.image=image;
//添加到屏幕上
[self.view addSubview:backgroundImage];
//2.設置小飛機
UIButton *plane=[[UIButton alloc]initWithFrame:CGRectMake(0, 0, 48,48)];
self.button=plane;
plane.center=CGPointMake(self.view.frame.size.width/2, self.view.frame.size.height/2);
[plane setBackgroundImage:[UIImage imageNamed:@"hero2"] forState:UIControlStateNormal];
[plane setBackgroundImage:[UIImage imageNamed:@"hero1"] forState:UIControlStateHighlighted];
[self.view addSubview:plane];
//3.添加方向鍵
UIButton *arrow=[[UIButton alloc] initWithFrame:CGRectMake(100, 100, 48,48)];
[arrow setBackgroundImage:[UIImage imageNamed:@"top_normal"] forState:UIControlStateNormal];
[arrow setBackgroundImage:[UIImage imageNamed:@"top_highlighted"] forState:UIControlStateHighlighted];
[self.view arrow];
//添加按鈕的監(jiān)聽
[arrow addTarget:self action:@selector(clickButton:) forControlEvents:UIControlEventTouchUpInside];
}
2.實現按鈕的點擊事件
-(void)clickButton:(UIButton *)button{
CGRect tempFrame=self.button.frame;
tempFrame.origin.y-=10;
self.button.frame=tempFrame;
}
Tips
1.按鈕的狀態(tài)和相關設置:
Default:默認
Highlighted:被點擊高亮
Selected:id類型的Sender就是表示按鈕本身,按鈕selected屬性,默認為No,修改為YES表示被選中,isSelected屬性判斷是否被選中
Disable:enabled屬性,默認值為YES,可以接收用戶點擊事件,修改為NO,不可以接收用戶點擊事件,isEnabled判斷是否能夠點擊
background image和image:
設置background image和title:background image在底層,title在圖片上層
設置image和title:image在左側,title在右側(默認狀態(tài),可以通過offset修改位置)
設置background image:圖片按照按鈕尺寸
設置按鈕的image:按鈕按照圖片尺寸
按鈕使用注意:image/backgroundimage/title,一定要分狀態(tài)設置
2.OC中的坐標系
我們以這個項目為例
frame:表示子view在父view的位置
center:子view中心在父view的位置,根據frame確定
bounds:view相對于自身,左上角為坐標原點,根據frame確定
修改frame:不能直接修改對象結構體中的內容
基本實現:獲取對象的frame賦值給臨時frame-修改臨時frame-給frame賦值
CGRect tempFrame=self.OBJect.frame;
CGRect tempFrame=self.OBJect.frame;
self.NSObject.frame=tempFrame;
3.UIView的Tag:view的標記
