控件的基本使用-iOS—UI筆記

1.【掌握】第一個UI項目

2.【掌握】控件連線

3.【掌握】按鈕的基本操作

4.【掌握】控件的常用屬性

UI (User Interface)也是就使用者界面，是App的根基。一個App應該是先有UI界面，然後在UI界面的基礎上增加實用功能，在開發中的絕大部分時間都在處理UI。UI界面上的每一個元素都是一個對象，我們可以利用類建立對象，将對象顯示到螢幕上，或者利用系統提供的封裝好的控件，直接添加到界面上，擺放好位置就可以了。

UIKit架構：UIKit架構中提供了很多可視化元件元素，我們界面上的很多控件都是UIKit架構。

iOS開發過程：添加系統內建好的架構->代碼編寫->運作

建立第一個應用：Greate

a new Xcode

project -> iOS -> Application -> Single

View Application

建立好項目後先設定好類字首，這裡的類字首用于自己建立的類自動加上字首，然後進串聯圖開始拖控件吧

拖拽好合适的控件并設定其對應屬性

我們來運作看看，是什麼效果呢

我們沒有編寫任何代碼，第一個簡單的圖形界面應用就這樣輕松的完成了。

通過拖拽控件，設定控件的屬性我們可以完成一個簡單的QQ登陸界面，但僅僅這樣是遠遠不夠的。比如怎麼擷取文本框中的資料，點選登陸按鈕後會有啥反應？是以我們需要将代碼和控件進行關聯，也就是控件連線。

按住control

+ 滑鼠左鍵，将View清單中需要連線的控件拖到ViewController.m檔案中的匿名分類中，也就是聲明私有屬性、方法。

Connection：Outlet 是連線後生成屬性

Name：txtQQ 屬性名

Type：UITextField 屬性類型

Storage：強類型指針、弱類型指針，和我們之前學習的weak參數沒差別，注意UI控件全部用弱類型

+ 滑鼠左鍵直接從控件上拖拽，注意當顯示出上圖中的藍色橫線後松開手指。

或者先手動編寫代碼，然後按住command

+ 滑鼠左鍵可以将代碼連線到控件上。

Connection：Action 連線後生成方法

Name：login 方法名

Argument：None 方法無參數

最終通過拖拽控件生成的屬性、方法聲明是：

//每一個Text文本框控件都是一個UITextField對象

@property (weak, nonatomic) IBOutlet UITextField *txtQQ;

@property (weak, nonatomic) IBOutlet UITextField *txtPassword;

//點選登陸按鈕後會觸發的單擊事件

- (IBAction)login;

控件連線完成後，實作login方法，并設定控件的屬性。

- (IBAction)login {

    //将擷取到的文本存到字元串對象中

    NSString *txtQQString =

self.txtQQ.text;

    NSString *txtPassword =

self.txtPassword.text;

    //在控制台輸出文本中的字元串

    NSLog(@"QQ:%@

 密碼:%@",txtQQString,txtPassword);

    //收起鍵盤

    [self.view

endEditing:YES];

}

輸入QQ、密碼後點選登入按鈕，會觸發單擊事件調用login方法，最終輸出文本框中的資料，并收起鍵盤。

注意：

1.定義為IBOutlet的屬性才能進行屬性的連線，定義為IBAction的方法才能進行方法的連線。

2.屬性或者方法前面是空心的小圓圈說明還沒有進行連線，成功連線後屬性或者方法的前面是實心的小圓圈。

通過一個實際例子來介紹按鈕Button的各種屬性和基本操作，下面無碼動态美女圖就是完成後的應用。

不難看出此應用的圖檔是一個可點選的按鈕，并且實作了移動、縮放、旋轉。是以，再此之前我們需要了解一些基本的UI常識，也就是一個控件想要顯示到螢幕上，至少他會有坐标(x、y坐标)和寬高(width、height)，還有這裡會設定按鈕的預設狀态、高亮狀态背景圖。

首先建立一個Single

View Application項目，建立好項目先去掉Use

Auto Layout、Use

Size Classes勾選，這是自動布局。如果不去掉勾選我們将不能通過frame來修改控件的大小。

導入應用需要的素材圖檔，注意如果是Xcode6.x版本是叫Images.xcassets，素材圖檔格式為png。

拖入一個Button控件，并點選右上角的小尺子，設定Width、Height為100。這裡尺寸随意，我是根據素材大小來設定的。

然後類型選擇Custom，去掉Button預設檔案并設定Default(預設)下的背景圖檔。如下圖所示，我将蒼老師設定為背景圖。

然後再選擇State

Config選項裡的Highlighted(高亮狀态，就是按鈕被點選後沒有松開的期間)，并設定背景圖。

按照同樣的方式拖入一堆Button控件，并設定對應的各種屬性值，來表示移動、縮放、旋轉的按鈕。

為各個移動、縮放Button的Tag設定一個不同的值，這裡的Tag就相當于這個控件的一個标記，可以通過這個标記間接通路這個控件。

拖線，因為我們要操蒼老師，是以就把蒼老師設為屬性供其他按鈕通路并操作。移動、縮放的按鈕都拖到一個帶參數的方法裡，參數類型為UIButton，因為是将按鈕本身作為參數傳遞。而旋轉按鈕則單獨拖線一個方法，并且可以不用設定參數。

控件拖線完成後，實作move:和rotate方法。

#import "ViewController.h"

@interface ViewController ()

//圖檔按鈕

@property (weak, nonatomic) IBOutlet UIButton *btnPic;

//控制圖檔移動、縮放的方法

- (IBAction)move:(UIButton *)sender;

//控制圖檔旋轉的方法

- (IBAction)rotate;

@end

@implementation ViewController

- (void)viewDidLoad {

    [super viewDidLoad];

    // Do any additional setup

after loading the view, typically from a nib.

- (void)didReceiveMemoryWarning {

    [super

didReceiveMemoryWarning];

    // Dispose of any resources

that can be recreated.

- (IBAction)move:(UIButton *)sender {

    CGRect picFrame =

self.btnPic.frame;

    switch (sender.tag) {

  case 10:

//上移,y坐标減少,x坐标不變

picFrame.origin.y -= 30;

      break;

  case 20:

//下移,y坐标增加,x坐标不變

picFrame.origin.y += 30;

  case 30:

//左移,x坐标減少,y坐标不變

picFrame.origin.x -= 30;

  case 40:

//右移x坐标增加,y坐标不變

picFrame.origin.x += 30;

  case 50:

//增大,寬、高增大,以圖檔左上角坐标為基點增大

picFrame.size.width += 30;

picFrame.size.height += 30;

  case 60:

//縮小,寬、高減少,以圖檔左上角坐标為基點縮小

picFrame.size.width -= 30;

picFrame.size.height -= 30;

    }

    //修改圖檔按鈕的frame時增加動畫效果

    [UIView

animateWithDuration:0.5 animations:^{

  self.btnPic.frame = picFrame;

    }];

- (IBAction)rotate {

//    //再改變transform的時候增加動畫效果

//    [UIView

//      

 //以圖檔中心點為基點增大、縮小。當參數為正數就是增大，負數縮小

//    //對控件在之前大小基礎上進行大小縮放

 self.btnPic.transform =

CGAffineTransformScale(self.btnPic.transform, 1.5, 1.5);

//    }];

 //對控件在之前位置基礎上進行位置變換,x、y坐标同時變化

CGAffineTransformTranslate(self.btnPic.transform, 30, 30);

    //再改變transform的時候增加動畫效果

//對控件在之前角度基礎上進行角度旋轉變換，注意IOS中的旋轉不是以度數做機關，而是以弧度做為機關。

  //弧度制的書寫方式：M_PI=180度

 M_PI_2：90度，正值表示順時，負值逆時

  self.btnPic.transform =

CGAffineTransformRotate(self.btnPic.transform, -M_PI_4);

    }]; 

至此，這個應用就完成了，效果圖就是我前面截圖的第一張。

default：按鈕添加後還沒有進行任何操作時的狀态

hightLighted：按鈕被點選時還沒有松開滑鼠時的狀态

disabled：按鈕不可用狀态

image：顯示與文字一起存在的小圖 ，通常它不會填滿整個按鈕。

backgroundImage：顯示整個按鈕的背影圖檔，一般它會填滿整個按鈕。

按鈕在高亮狀态下設定的backgroundImage會變灰，這是它的系統自帶屬性決定的，如果想不顯示系統預設的樣式，則需要将Type設定為custom

通過修改frame.origin、frame.size來控制控件的位置和大小，以左上角的坐标為控件原點坐标。

//frame屬性的使用

- (IBAction)btnAction {

    CGRect btnFrame =

self.btn.frame;

    btnFrame.origin.x += 50;

    btnFrame.origin.y += 50;

    self.btn.frame =

btnFrame;

center代表控件的幾何中心點，由于表示一個點，就是類型是CGPoint，裡面有兩個屬性CGFloat x，CGFloat

y分别代碼控件的x、y軸方向的坐标值，是以通過修改center也能達到修改控件坐标的目的。

//center屬性的使用

    CGPoint btnPoint =

self.btn.center;

    btnPoint.x += 50;

    btnPoint.y += 50;

    self.btn.center =

btnPoint;

bounds描述控件的邊界，類型是CGRect，類似于frame，我們也可以通過個性bounds屬性的值來修改控件的大小。注意bounds是以中心點做為參考來進行變化的，這點與frame不一樣，frame是以左上角做為參考原點的。注意不要使用bounds屬性修改控件的坐标值。

//bounds屬性的使用

    CGRect btnBounds =

self.btn.bounds;

    btnBounds.size.width +=

20;

    btnBounds.size.height +=

    self.btn.bounds =

btnBounds;

transform稱為矩陳變換，它可以實作控件的旋轉綻放等操作。如果隻是普通的移動，一般會考慮使用frame，如果是旋轉操作，那麼一般會考慮transform。transform是參考控件的原始坐标進行變換的，在多次變換的時候每一次變換的基礎需要建立在前一次變換的基礎之上。

弧度制的書寫方式：M_PI=180度 M_PI_2：90度，正值表示順時針，負值表示逆時針。

transform常用的三個常用函數：

//對控件在之前位置基礎上進行位置變換

CGAffineTransform CGAffineTransformTranslate(CGAffineTransform

t,CGFloat tx, CGFloat ty);

//對控件在之前大小基礎上進行大小縮放

CGAffineTransform CGAffineTransformScale(CGAffineTransform

t,CGFloat sx, CGFloat sy);

CGAffineTransform CGAffineTransformRotate(CGAffineTransform

t,CGFloat angle);

為變換添加動畫效果

1.開啟動畫：

[UIView beginAnimations:nil context:nil];

2.設定動畫完成所需要的時間：

[UIView setAnimationDuration:5];//以秒做為機關。

3.建立需要執行動畫的代碼：

self.iconView.transform=CGAffineTransformRotate(self.iconView.transform,

M_PI);

4.送出動畫：

[UIView commitAnimations];

也可以使用UIView的animateWithDuration:adnimations:方法

[UIView animateWithDuration: animations:^{

  //需要有動畫效果的代碼

歡迎學習本文，未經部落客許可，禁止轉載！