IOS 開發筆記-基礎 UI(3)按鈕的使用(放大縮小、改變位置,首尾式動畫)和學習案例,iosui
UIKit架構提供了非常多的UI控制項,但並不是每一個都很常用,有些控制項可能1年內都用不上,有些控制項天天用,比如UIButton、UILabel、UIImageView、UITableView等等,按鈕控制項是非常重要且比較基礎的一個UI控制項---UIButton,一般情況下,點擊某個控制項後,會做出相應反應的都是按鈕,按鈕的功能比較多,既能顯示文字,又能顯示圖片,還能隨時調整內部圖片和文字的位置。 案例:
功能分析
(1)左下角4個方向按鈕,控制頭像按鈕的位置(2)右下角分別是放大、縮小按鈕,控制頭像的尺寸(3)頭像按鈕既有背景圖片,又有文字
步驟分析
(1)搭建UI介面(2)監聽按鈕點擊(3)修改頭像按鈕的屬性來調整位置和尺寸 1、先準備素材Xcode5之後,都是把圖片素材,統一放到點擊,拖拽即可 2、進行 UI 設計 按鈕的點擊狀態 在 ios7之後,出現的一個設定,在屬性查看器裡,type 下預設選擇的是 system,就是讓系統去改變,如果改為 custom,就是自訂,可以自己定義變化,而不讓系統去幫我們改變。比如:設計一個圖片式的按鈕之後,點的刹那是高亮的,鬆開就是恢複到原樣。點擊之前的樣子 點擊下去的樣子,按鈕顯式高亮狀態,鬆開之後,回複到原樣 把屬性 type 改為 custom ,進行自訂的修改,同時修改state config 選項,也就是要修改 高亮狀態,還有同時修改文本標題,文本顏色,按鈕的背景等。如下:運行,再次點擊下去,高亮就不是以前那樣了,改變為:鬆開之後,恢複原樣。 設定上下左右四個方向鍵(當相同的控制項很多的時候,使用複製,粘貼,比較省事),同時記得修改高亮狀態下背景,點擊下,變為綠色。連線,進行監聽先設定 up 方向,學習修改控制項屬性的過程三步驟:
@property(nonatomic) CGRect frame;
控制項所在矩形框在父控制項中的位置和尺寸(以父控制項的左上方為座標原點),可以定義位置(origin),大小(size),frame 本身是結構體,裡面的成員都是結構體屬性的成員。
1 // 2 // ViewController.m 3 // 按鈕使用1 4 // 5 // Created by 大帥 on 15-2-28. 6 // Copyright (c) 2015年 dashuai. All rights reserved. 7 // 8 9 #import "ViewController.h"10 11 @interface ViewController ()12 @property (weak, nonatomic) IBOutlet UIButton *HeadImageView;13 14 @end15 16 @implementation ViewController17 //up方向鍵進行連線18 -(IBAction)move19 {20 //使用 frame 修改headimageview 的位置21 //注意,在 oc 中,不可以直接修改"對象"的"結構體屬性"的"成員"22 //frame 是結構體,裡面的 orign 等等都是結構體23 //並且,這裡 orign 是 frame 的成員,不能直接去修改,如下寫法在 oc 是不對的24 25 // self.HeadImageView.frame.origin.y = self.HeadImageView.frame.origin.y - 10;26 27 //應該間接修改28 //1、取出結構體屬性29 CGRect rect = self.HeadImageView.frame;30 //2、修改結構體裡面的成員,此時取出之後,frame已經不是對象了31 rect.origin.y -= 20;32 //3、把值賦回來,就是這三個步驟。必須有這步。33 self.HeadImageView.frame = rect;34 }35 36 @end
三步驟:取出結構體屬性,修改結構體的成員,把值賦回來。
好嘞,熟悉之後,重新串連四個控制項,把 move 對象方法修改為帶參數
-(IBAction)move:(UIButton *)button
刪掉舊的串連,重新串連新的 move 方法,點擊上下左右,都可以調用 move 方法,只要能區分就行了。使用 tag:
@property(nonatomic) NSInteger tag;
控制項的ID(標識),父控制項可以通過tag來找到對應的子控制項,在屬性查看器裡,依次設定修改即可讓控制項 button 通過 tag 的值,找到不同的子控制項。
button.tag
魔法數位概念(避免寫入程式碼)
術語:其他程式員看到後,不能見名知意的數字,不是好習慣,在程式開發中需要避免出現魔法數字(Magic Number),在 oc ,可以使用枚舉類型,宏定義來避免在程式中出現魔法數字。 在其它一些程式設計語言裡,也類似,要避免寫入程式碼。
1> 枚舉類型實質上就是一個整數,其作用就是用來替代魔法數字
2> 枚舉類型中,指定了第一個整數之後,後面的數字會遞增
記住,定死的一些東西,統一放到程式主體的上面,統一定義,避免寫入程式碼
1 #import "ViewController.h" 2 3 //10是 up,11是 down,12是 left,13是 right 4 //枚舉, 5 typedef enum 6 { 7 kMovingDirTop = 10, 8 kMovingDirBottom, 9 kMovingDirLeft,10 kMovingDirRight11 } kMovingDir;12 //宏定義 位移量13 #define kMovingDelta 2014 15 @interface ViewController ()16 @property (weak, nonatomic) IBOutlet UIButton *HeadImageView;17 18 @end19 20 @implementation ViewController21 //方向鍵進行連線22 -(IBAction)move:(UIButton *)button23 {24 //1、取出結構體屬性25 CGRect rect = self.HeadImageView.frame;26 //2、修改結構體裡面的成員,此時取出之後,frame已經不是對象了27 switch (button.tag) {28 case kMovingDirTop:29 rect.origin.y -= kMovingDelta;30 break;31 case kMovingDirBottom:32 rect.origin.y += kMovingDelta;33 break;34 case kMovingDirLeft:35 rect.origin.x -= kMovingDelta;36 break;37 case kMovingDirRight:38 rect.origin.x += kMovingDelta;39 break;40 default:41 break;42 }43 //3、把值賦回來,就是這三個步驟。必須有這步。44 self.HeadImageView.frame = rect;45 }
效果如下 :
繼續,放大縮小的功能實現不要和 move 的方法混在一起,因為做的是兩類事情,分來實現。類似位置的改變,orign
//該位置是 orign,改大小是 size屬性- (IBAction)zoom:(UIButton *)button { CGRect rect = self.HeadImageView.frame; //如果為1,則是放大,否則縮小 if (button.tag) { rect.size.height += kMovingDelta; rect.size.width += kMovingDelta; } else { rect.size.height -= kMovingDelta; rect.size.width -= kMovingDelta; } self.HeadImageView.frame = rect;}
oc 從 Xcode4.6開始,有了一個自動布局系統 autolayout,由於這個系統,一些設定和改變,就不會起效,蘋果規定,當使用了自動布局系統之後,就不要在使用代碼控制位置了。在程式運行中,每個控制項的大小和位置,都應該交給自動布局系統來決定。所以不會發生改變。 把它勾掉,就可以起效了 那麼問題來了,縮小放大的時候原點不變。因為改變的是 size 屬性,沒有改變原點位置,記住:
1> frame可以修改對象的位置和尺寸
2> bounds可以修改對象的尺寸(這裡使用 bounds 可以實現四周的增大縮小,而不是原點不變了,bounds 的寬高和邊框是相等的!先記住。)
3> center可以修改對象的位置
- (IBAction)zoom:(UIButton *)button { CGRect rect = self.HeadImageView.bounds; //如果為1,則是放大,否則縮小 if (button.tag) { rect.size.height += kMovingDelta; rect.size.width += kMovingDelta; } else { rect.size.height -= kMovingDelta; rect.size.width -= kMovingDelta; } self.HeadImageView.bounds = rect;}
這樣修改之後效果就是四周的變大縮小,而不是原點不變
介紹一個動畫效果:首尾式動畫效果代碼實現
// beginAnimations表示此後的代碼要“參與到”動畫中[UIView beginAnimations:nil context:nil];// setAnimationDuration用來指定動畫期間[UIView setAnimationDuration:2.0];self.headImageView.bounds = rect;......// commitAnimations,將beginAnimation之後的所有動畫提交並產生動畫[UIView commitAnimations];
有了動畫效果之後,是先修改寬和高,再修改中心點,可以設定持續的時間。不加動畫之前,看不出來,很快。
//該位置是 orign,改大小是 size屬性- (IBAction)zoom:(UIButton *)button { CGRect rect = self.HeadImageView.bounds; //如果為1,則是放大,否則縮小 if (button.tag) { rect.size.height += kMovingDelta; rect.size.width += kMovingDelta; } else { rect.size.height -= kMovingDelta; rect.size.width -= kMovingDelta; } //動畫開始,以後的代碼全部參與到動畫裡 [UIView beginAnimations:nil context:nil]; //設定動畫期間2秒 [UIView setAnimationDuration:2.0]; self.HeadImageView.bounds = rect; //oc裡透明度,1是完全看見,0是完全看不見,變變化大小,邊消失的效果 self.HeadImageView.alpha = 0; //提交,並產生動畫 [UIView commitAnimations];}
也可以使用 center 屬性改變對象位置(只能改變位置,不能改變大小,而 orign 可以改變大小和位置)
關於 git
點擊中的標誌,可以查看和上次提交的版本不一樣的地方,也就是修改的情況的查看
通過此操作,來實現代碼的版本提交
如下,檔案後面有 m 表示這個檔案被修改過。
一旦 xcode 退出後,在使用撤銷就不管用了,那麼此時 git 出來了,通過查看和上次版本的變化,很有用,協助提高開發效率,和改錯,回顧。故建立項目的時候,要勾選 git,當階段性開發告一段落,選擇提交到 git,餅編寫注釋,下次通過版本查看即可。即使關閉 xcode,開啟之後還能撤銷上次的修改,很方便。 小結:1、cmd+shift+h 是模擬器裡 home 健的快速鍵2、當相同的控制項很多的時候,使用複製,粘貼,比較省事,但是注意,這樣也會把相應的連線給一起複製。3、oc中,大多數控制項的監聽方法的第一個參數就是控制項本身,也就是 sender 寄件者,且回憶,方法名是name:,不要丟冒號。4、UIView的常見屬性@property(nonatomic,readonly) UIView *superview;獲得自己的父控制項對象 @property(nonatomic,readonly,copy) NSArray *subviews;獲得自己的所有子控制項對象(一個父親可 u 有多個兒子,但是一個兒子只有一個父親) @property(nonatomic) NSInteger tag;控制項的ID(標識),父控制項可以通過tag來找到對應的子控制項 @property(nonatomic) CGAffineTransform transform;控制項的形變屬性(可以設定旋轉角度、比例縮放、平移等屬性) @property(nonatomic) CGRect frame;控制項所在矩形框在父控制項中的位置和尺寸(以父控制項的左上方為座標原點)可以定義位置(origin),大小(size) @property(nonatomic) CGRect bounds;控制項所在矩形框的位置和尺寸(以自己左上方為座標原點,所以bounds的x、y一般為0,這個屬性很神奇,暫時先這麼理解,以後鑽研)可以定義大小(size),無法定義位置 @property(nonatomic) CGPoint center;控制項中點的位置(以父控制項的左上方為座標原點)可以定義位置,無法定義大小 UIView的常見方法- (void)addSubview:(UIView *)view;添加一個子控制項view- (void)removeFromSuperview;從父控制項中移除- (UIView *)viewWithTag:(NSInteger)tag;根據一個tag標識找出對應的控制項(一般都是子控制項) 5、注意指標的問題,修改屬性,不是指標和是指標的區別,比如:
//應該間接修改 //1、取出結構體屬性 CGRect rect = self.HeadImageView.frame; //2、修改結構體裡面的成員,此時取出之後,frame已經不是對象了 rect.origin.y -= 20; //3、把值賦回來,就是這三個步驟。必須有這步。 self.HeadImageView.frame = rect;
如果沒有第三步,則無法成功修改屬性,因為 rect 不是指標,地址和 frame 的地址不一樣,修改完畢,必須重新賦值回去,才會生效。
修改結構體屬性的成員方法如下:
1> 使用臨時變數記錄對象的結構體屬性
2> 修改臨時變數的屬性
3> 將臨時變數重新設定給對象的結構體屬性
6、同一個項目中,盡量不要重複的代碼去完成類似的功能,不要經常性的複製一樣的代碼。造成很大冗餘。要盡量精簡。
7、Xcode5之後,經常會有一些莫名其妙的問題出現,解決不了,可以嘗試退出重新開啟,再看看。 8、在 oc 中,不可以直接修改"對象"的"結構體屬性"的"成員",要三部曲間接修改。 9、switch 語句中的default當變數的取值不在分支裡任何一個case的情況下,語句要做的處理,其實也是一種case,只不過就是指“除了指定的幾個case以外的其他情況”,是一個中安全的編程方式。 10、注意魔法數位問題避免,枚舉的作用,宏定義 11、圖片素材統一放到images.xcassets裡面,從Xcode5開始,圖片資源都放到Images.xcassets中進行管理 12、注意三個屬性的用處
1> frame可以修改對象的位置和尺寸
2> bounds可以修改對象的尺寸
3> center可以修改對象的位置
13、首尾式動畫效果,透明度的設定alpha,記住蘋果裡,動畫是廉價的,很容易就能實現非常絢麗的效果。
14、git 入門
15、如果發現通過代碼無法修改控制項的位置或者尺寸時,應該去掉storyboard裡面的autolayout功能,這是自iOS6開始出現的特性,顧名思義,autolayout是用來自動布局的,用來束縛控制項的位置和尺寸。去掉這個功能,控制項的位置和尺寸就不再有一些固定的束縛。
16、UIButton的狀態
normal(普通狀態)預設情況(Default)對應的枚舉常量:UIControlStateNormal highlighted(高亮狀態)按鈕被按下去的時候(手指還未鬆開)對應的枚舉常量:UIControlStateHighlighted disabled(失效狀態,不可用狀態)如果enabled屬性為NO,就是處於disable狀態,代表按鈕不可以被點擊對應的枚舉常量:UIControlStateDisabled 17、設定按鈕在不同狀態下的背景圖片時,為了保證高亮狀態下的圖片正常顯示,必須設定按鈕的type為custom(自訂)