IOS 開發筆記-基礎 UI(3)按鈕的使用(放大縮小、改變位置,首尾式動畫)和學習案例,iosui

來源:互聯網
上載者:User

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(自訂) 

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.