IOS開發UI篇--常用UI控制項的基本使用

標籤：

一. UIButton概述：

UIKit架構提供了非常多的UI控制項，其中有些控制項天天使用，比如UIButton、UILabel、UIImageView、UITableView等。

UIButton，俗稱“按鈕”，通常點擊某個控制項後，會做出相應反應的都是按鈕.按鈕的功能較多，既能顯示圖片又能顯示漢字還能隨時調整圖片的文字和位置，如下面兩個圖團購和音樂播放器的app:下面本文通過一個執行個體總結一下它們的基本使用。二. 按鈕的基本設定按鈕既可以通過mainstoryboard建立也可以通過代碼建立，下文內容個都是基於main.storyboard使用的情況，在此檔案中國選中按鈕右側即可設定各種屬性二. UIButton的狀態狀態的設定，對應state Config欄位1. normal(普通狀態)預設情況（Default）即為此狀態碼中對應的枚舉常量為：：UIControlStateNormal 2. highlighted（高亮狀態）當按鈕被按下去的時候處於此狀態碼中對應的枚舉常量為：UIControlStateHighlighted 3. disabled（失效狀態，不可用狀態）如果enabled屬性為NO，就是處於disable狀態，代表按鈕不可以被點擊，預設情況是可以點擊的。對應的枚舉常量：UIControlStateDisabled三. 按鈕設定背景圖片與文字按鈕可以設定不同狀態下的背景圖片：普通狀態下和高亮狀態下背景圖片和文字的設定              五. 簡單動畫的添加此處的動畫指的是，在屬性值的改變是一種漸層的過程，不是突然一下子就變開發人員可自由設定屬性改變需要的時間，比如x值本來是20，然後x值突然改為了100，系統會通過平移動畫的方式讓x值慢慢從10變到100。系統會根據某個屬性值的改變自動形成動畫。簡易動畫大致有三種方式：1.頭尾式

    // 0.動畫（頭部）    [UIView beginAnimations:nil context:nil];        // 1.設定動畫的執行時間    [UIView setAnimationDuration:1.0];    /** 需要執行動畫的代碼 **/    // 動畫尾部（結束動畫）    [UIView commitAnimations];

2. Block式一，此種用法不需要在添加頭部和尾部

[UIView animateWithDuration:1.0 animations:^{        /** 此處為需要執行動畫的代碼 */ }];

3. block式二，是 Block式一的擴充，執行動畫完畢後接著執行其他代碼

[UIView animateWithDuration:1.0 animations:^{        /** 此處為需要執行動畫的代碼 */    } completion:^(BOOL finished) {        /** 此處為動畫執行完後需要執行的代碼 */    }]；

 

四.按鈕使用執行個體一個執行個體實踐按鈕的基本使用和UIView常用屬性的使用。1.介面描述：上、下、左、右四個按鈕控製圖片的上下左右的移動，左旋轉、右旋轉控製圖片的旋轉，每次旋轉45度，放大縮小按鈕可對圖片進行放大和縮小2.步驟分析1）搭建介面(本文使用main.storyboard方式)2）監聽按鈕的點擊3）根據不同搞的按鈕，更改圖片的位置和尺寸屬性 3.要點分析1）如何區分不同的按鈕點擊？1>為每個按鈕寫一個方法監聽特定按鈕的點擊也可以2>使用一個方法通過設定不同的tag區分本文使用d2）改變控制項的位置1》frame屬性2》center屬性3）如何旋轉和放大縮小使用形變屬性transform4.代碼如下：

#import "ViewController.h"#define kDelta 50typedef enum Tag {    moveUp = 1,  // 上移    moveRight,   // 右移    moveDown,    // 下移    moveLeft,    // 左移    rotateLeft,  // 左旋轉    rotateRight, // 右旋轉    changeSmall, // 變小    changebig    // 變大}btnTag;@interface ViewController ()// 顯示圖片@property (weak, nonatomic) IBOutlet UIButton *btn;// 上下左右移動- (IBAction)move:(UIButton *)sender;// 旋轉監聽- (IBAction)Rotate:(UIButton *)sender;// 放大縮小- (IBAction)scale:(UIButton *)sender;// 回複初始狀態,清空所有的形變屬性- (IBAction)reset:(UIButton *)sender;@end

move方法實現:用以監聽上下左右四個按鈕

- (IBAction)move:(UIButton *)sender{    // 添加動畫此處使用block式    [UIView animateWithDuration:1.0 animations:^{        // 1. 取出frame結構        /* OC文法規定不允許直接修改 某個對象中結構體的成員,必須對整體(整個結構體)進行修改 */        //CGRect tempFram = _btn.frame;        CGPoint tempCenter = _btn.center;        // 2. 改變frame,根據不同的tag來決定將位置改為什麼        NSInteger tag  = [sender tag];// 取出tag        switch (tag)        {            case moveUp:                //tempFram.origin.y -= kDelta;                tempCenter.y  -= kDelta;                break;                            case moveRight:                //tempFram.origin.x += kDelta;                tempCenter.x  += kDelta;                break;            case moveDown:                //tempFram.origin.y += kDelta;                tempCenter.y  += kDelta;                break;            case moveLeft:                //tempFram.origin.x -= kDelta;                tempCenter.x  -= kDelta;                break;            default:                               break;                        }        //3. 將新的frame寫回        //_btn.frame = tempFram;        _btn.center= tempCenter;    }];  }

Rotate方法實現：

用以監聽左旋轉和右旋轉，修改控制項的transform屬性，也是用了簡單的動畫，旋轉時是漸層的。

 1 - (IBAction)Rotate:(UIButton *)sender 2 { 3      4     // 弧度 3.14 -pi 5     // 角度 180 6     //_angle -= M_PI_4; 7     //_btn.transform = CGAffineTransformMakeRotation(_angle); 8  9     [UIView animateWithDuration:1.0 animations:^{10         // 修改元素的形變屬性11         _btn.transform = CGAffineTransformRotate(_btn.transform, M_PI_4 *([sender tag] == rotateLeft ? -1:1));12     }];13     14 }

scale方法實現：

用以監聽放大縮小按鈕，修改控制項的transform屬性，也是用了簡單的動畫，旋轉時是漸層的。

1 - (IBAction)scale:(UIButton *)sender2 {3     [UIView animateWithDuration:1.0 animations:^{4         // 在原來形變基礎上修改形變屬性5         CGFloat scale = [sender tag] == changebig ? 1.2 :0.8;6         _btn.transform = CGAffineTransformScale(_btn.transform, scale, scale);7     }];8 }

reset方法實現：

- (IBAction)reset:(UIButton *)sender {        // 清空之前所有的形變屬性    _btn.transform = CGAffineTransformIdentity;}

小結：

♦?修改控制項的位置和尺寸的方法：

1.修改位置：

1）frame.origin2）center2. 修改尺寸1）frame.size2) bounds.size♦?OC文法規定：不允許直接修改對象的結構體屬性的成員下面這行代碼是錯誤的：self.headBtn.frame.origin.y -= 10;           

IOS開發UI篇--常用UI控制項的基本使用