IOS基礎UI之(三)手寫UI和storyboard方式實現圖片移動和縮放

阿新 • • 發佈：2019-01-25

手寫UI是最早進行UI介面佈局的方法，優點是靈活自由，缺點是使程式碼看起來比較長。平時學習的時候可以多嘗試手寫ui，這樣會更深入熟悉控制元件。storyboard開發效率相對比較高。實際開發中看情況而定！！

下面用這兩種方式分別實現圖片移動和縮放。

功能描述：

1. 介面佈局

2.點選相應的按鈕，對顯示的圖片移動、縮放。

效果如下：

掌握點：

一：熟悉程式碼的描述UIButton屬性

1.UIButton狀態

UIControlStateNormal // 正常狀態

UIControlStateHighlighted //

高亮狀態

UIControlStateDisabled // 禁用狀態

UIControlStateSelected // 選中狀態

UIControlStateApplication //

UIControlStateReserved // 保留狀態

2.Uibutton型別：

UIButtonTypeCustom //自定義型別

UIButtonTypeRoundedRect //圓角型別

UIButtonTypeDetailDisclosure //細節展示按鈕

UIButtonTypeInfoLight //淺色背景的資訊按鈕

UIButtonTypeInfoDark //暗色背景的資訊按鈕

UIButtonTypeContactAdd // 新增按鈕

3.UIButton常用屬性

給按鈕設定文字時，蘋果文件說明，不能使用label物件設定文字的顏色或者陰影顏色，相反必須使用setTitleColor:forState: andsetTitleShadowColor:forState:

//設定對應狀態的標題內容default is nil. title is assumed to be single line

- (void)setTitle:(NSString *)title forState:(UIControlState)state;

//設定對應狀態的標題顏色

- (void)setTitleColor:(UIColor *)color forState:(UIControlState)state;

//設定對應狀態的標題陰影顏色

- (void)setTitleShadowColor:(UIColor *)color forState:(UIControlState)state;

//設定對應狀態的按鈕的圖片

- (void)setImage:(UIImage *)image forState:(UIControlState)state;

//設定對應狀態的按鈕背景圖片

- (void)setBackgroundImage:(UIImage *)image forState:(UIControlState)state;

新增事件

- (void)addTarget:(id)target action:(SEL)action forControlEvents:(UIControlEvents)controlEvents;

這些事件都是基於觸控、基於值、基於編輯。有如下事件會觸發。

在點選按鈕是按鈕是凹下去，然後彈起才觸發起事件，按鈕的狀態有：

UIControlEventTouchDown // 按下
UIControlEventTouchDownRepeat 多次按下
UIControlEventTouchUpInside // 在按鈕及其一定外圍內鬆開
UIControlEventTouchUpOutside // 按鈕外面鬆開

4.adjustsImageWhenDisabled

當按鈕禁用的情況下，影象的顏色會被畫深一點，預設為YES。

5.adjustsImageWhenHighlighted

當按鈕高亮的情況下，影象的顏色會被畫深一點，預設為YES。

6.showsTouchWhenHighlighted

button.showsTouchWhenHighlighted=YES;點選時的閃光效果會被前景圖片遮住中間部分；

6.contentEdgeInsets

設定按鈕的內部內容（包含按鈕圖片和標題）離按鈕邊緣上下左右的距離。

7.按鈕例項

1.有些時候我們想讓UIButton的title居左對齊，我們設定
btn.textLabel.textAlignment = UITextAlignmentLeft

是沒有作用的，我們需要設定

btn.contentHorizontalAlignment = UIControlContentHorizonAlignmentLeft;

但是問題又出來，此時文字會緊貼到左邊框，我們可以設定

btn.contentEdgeInsets = UIEdgeInsetsMake(0,10, 0, 0);

使文字距離左邊框保持10個畫素的距離。

對應的storyboard

二：frame,bounds,center

frame：描述當前檢視在其父檢視中的位置和大小。
bounds：描述當前檢視在其自身座標系統中的位置和大小。
center：描述當前檢視的中心點在其父檢視中的位置。

瞭解UIButton屬性之後，馬上動手寫純程式碼編寫ui

1.二話不說，首先把用到的圖片放到Images.xcassets資料夾中（此處存放的事png圖片，非png圖片建議放在Supporting Files下面）

2.UI程式碼。

ViewController.m

//
//  ViewController.m
//  移動和縮放(純程式碼實現)
//
//  Created by zxh on 15/8/30.
//  Copyright (c) 2015年 zxh. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    //新增控制元件
    [self addImage];
    [self addButton];
}

/**
 *  建立顯示圖片按鈕控制元件
 */
-(void)addImage{
    
    //建立UIButton
    UIButton *head = [[UIButton alloc] init];
    //設定位置
    head.frame = CGRectMake(100, 100, 100, 100);
    
    //普通狀態顯示的圖片、文字、文字顏色
    UIImage *imageNormal = [UIImage imageNamed:@"btn_01"];
    [head setBackgroundImage:imageNormal forState:UIControlStateNormal];
    [head setTitle:@"點選我" forState:UIControlStateNormal];
    [head setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
    
    //高亮狀態顯示的圖片、文字、文字顏色
    UIImage *imageHigh = [UIImage imageNamed:@"btn_02"];
    [head setBackgroundImage:imageHigh forState:UIControlStateHighlighted];
    [head setTitle:@"摸我幹啥！" forState:UIControlStateHighlighted];
    [head setTitleColor:[UIColor blueColor] forState:UIControlStateHighlighted];
    
    //字型的大小
    head.titleLabel.font = [UIFont systemFontOfSize:14];
    //設定tag
    head.tag = 10;
    
    [self.view addSubview:head];

}

/**
 *  建立上下左右移動，變大變小，旋轉按鈕
 */
-(void)addButton{
    //建立做移動按鈕
    UIButton *lefthead = [[UIButton alloc]init];
    //按鈕的顯示位置
    lefthead.frame = CGRectMake(30, 300, 30, 30);
    //普通狀態的顯示
    [lefthead setBackgroundImage:[UIImage imageNamed:@"left_normal"] forState:UIControlStateNormal];
    //高亮狀態的顯示
    [lefthead setBackgroundImage:[UIImage imageNamed:@"left_highlighted"] forState:UIControlStateHighlighted];
    //監聽按鈕的TouchUpInside事件，觸發leftheadClick方法
    [lefthead addTarget:self action:@selector(leftheadClick) forControlEvents:UIControlEventTouchUpInside];
    //設定tag的值（唯一的）
    lefthead.tag = 20;
    
    //右移動按鈕
    UIButton *righthead = [[UIButton alloc]init];
    righthead.frame = CGRectMake(100, 300, 30, 30);
    [righthead setBackgroundImage:[UIImage imageNamed:@"right_normal"] forState:UIControlStateNormal];
    [righthead setBackgroundImage:[UIImage imageNamed:@"right_highlighted"] forState:UIControlStateHighlighted];
    [righthead addTarget:self action:@selector(rightheadClick) forControlEvents:UIControlEventTouchUpInside];
    righthead.tag = 30;
    
    //上移動按鈕
    UIButton *uphead = [[UIButton alloc]init];
    uphead.frame = CGRectMake(65, 250, 30, 30);
    [uphead setBackgroundImage:[UIImage imageNamed:@"top_normal"] forState:UIControlStateNormal];
    [uphead setBackgroundImage:[UIImage imageNamed:@"top_highlighted"] forState:UIControlStateHighlighted];
    [uphead addTarget:self action:@selector(upheadClick) forControlEvents:UIControlEventTouchUpInside];
    uphead.tag = 40;
    
    //下移動按鈕
    UIButton *bottomhead = [[UIButton alloc]init];
    bottomhead.frame = CGRectMake(65, 345, 30, 30);
    [bottomhead setBackgroundImage:[UIImage imageNamed:@"bottom_normal"] forState:UIControlStateNormal];
    [bottomhead setBackgroundImage:[UIImage imageNamed:@"bottom_highlighted"] forState:UIControlStateHighlighted];
    [bottomhead addTarget:self action:@selector(bottomheadClick) forControlEvents:UIControlEventTouchUpInside];
    bottomhead.tag = 50;
    
    //變小按鈕
    UIButton *minushead = [[UIButton alloc]init];
    minushead.frame = CGRectMake(220, 280, 30, 30);
    [minushead setBackgroundImage:[UIImage imageNamed:@"minus_normal"] forState:UIControlStateNormal];
    [minushead setBackgroundImage:[UIImage imageNamed:@"minus_highlighted"] forState:UIControlStateHighlighted];
    [minushead addTarget:self action:@selector(minusheadClick) forControlEvents:UIControlEventTouchUpInside];
    minushead.tag = 60;
    
    //變大按鈕
    UIButton *plushead = [[UIButton alloc]init];
    plushead.frame = CGRectMake(280, 280, 30, 30);
    [plushead setBackgroundImage:[UIImage imageNamed:@"plus_normal"] forState:UIControlStateNormal];
    [plushead setBackgroundImage:[UIImage imageNamed:@"plus_highlighted"] forState:UIControlStateHighlighted];
    [plushead addTarget:self action:@selector(plusheadClick) forControlEvents:UIControlEventTouchUpInside];
    plushead.tag = 70;
    
    //左旋轉按鈕
    UIButton *leftRotatehead = [[UIButton alloc]init];
    leftRotatehead.frame = CGRectMake(220, 340, 30, 30);
    [leftRotatehead setBackgroundImage:[UIImage imageNamed:@"left_rotate_normal"] forState:UIControlStateNormal];
    [leftRotatehead setBackgroundImage:[UIImage imageNamed:@"left_rotate_highlighted"] forState:UIControlStateHighlighted];
    [leftRotatehead addTarget:self action:@selector(leftRotateClick) forControlEvents:UIControlEventTouchUpInside];
    leftRotatehead.tag = 80;
    
    //右旋轉按鈕
    UIButton *rightRotatehead = [[UIButton alloc]init];
    rightRotatehead.frame = CGRectMake(280, 340, 30, 30);
    [rightRotatehead setBackgroundImage:[UIImage imageNamed:@"right_rotate_normal"] forState:UIControlStateNormal];
    [rightRotatehead setBackgroundImage:[UIImage imageNamed:@"right_rotate_highlighted"] forState:UIControlStateHighlighted];
    [rightRotatehead addTarget:self action:@selector(rightRotateheadClick) forControlEvents:UIControlEventTouchUpInside];
    rightRotatehead.tag = 90;
    
    //以下是把按鈕新增到view中
    [self.view addSubview:lefthead];
    [self.view addSubview:righthead];
    [self.view addSubview:bottomhead];
    [self.view addSubview:uphead];
    [self.view addSubview:minushead];
    [self.view addSubview:plushead];
    [self.view addSubview:leftRotatehead];
    [self.view addSubview:rightRotatehead];

}

/**
 *  左移
 */
-(void)leftheadClick{
    [self moveWithTag:20];
}

/**
 *  右移
 */
-(void)rightheadClick{
    [self moveWithTag:30];
}

/**
 *  上移
 */
-(void)upheadClick{
    [self moveWithTag:40];
}

/**
 *  下移
 */
-(void)bottomheadClick{
   [self moveWithTag:50];
}

/**
 *  變小
 */
-(void)minusheadClick{
    [self moveWithTag:60];
}

/**
 *  變大
 */
-(void)plusheadClick{
    [self moveWithTag:70];
}


/**
 *  左移動
 */
-(void)leftRotateClick{
    [self moveWithTag:80];
}



/**
 *  右移動
 */
-(void)rightRotateheadClick{
    [self moveWithTag:90];
}

/**
 *  圖片移動方法
 *
 *  @param tag  按鈕標識
 */
-(void)moveWithTag:(int)tag{
    //獲取顯示圖片按鈕：viewWithTag 可類比 android 的findViewById
    UIButton *head = (UIButton *)[self.view viewWithTag:10];
    //獲取顯示圖片按鈕的frame（frame是視覺化範圍）
    CGRect tempFrame = head.frame;
    //開始動畫
    [UIView beginAnimations:nil context:nil];
    //設定動畫時間
    [UIView animateWithDuration:2 animations:nil];
    
    switch (tag) {
        case 20: //左移動
            tempFrame.origin.x -= 100;
            break;
        case 30: //右移動
            tempFrame.origin.x += 100;
            break;
        case 40: //上移動
            tempFrame.origin.y -= 100;
            break;
        case 50: //下移動
            tempFrame.origin.y += 100;
            break;
        case 60: //變小
            tempFrame.size.width -= 10;
            tempFrame.size.height -= 10;
            break;
        case 70: //變大
            tempFrame.size.width += 10;
            tempFrame.size.height += 10;
            break;
        case 80: //左旋轉
            //transform使用
            //head.transform = CGAffineTransformMakeRotation(80);//旋轉
            //head.transform = CGAffineTransformMakeScale(2,2);//比例
            //head.transform = CGAffineTransformMakeTranslation(0, -10);
            //以上三種都是在原來的基礎上變化的，因此點選第二次的時候沒有效果
             head.transform = CGAffineTransformRotate(head.transform, -M_PI_2);
            break;
        case 90: //右旋轉
            head.transform = CGAffineTransformRotate(head.transform, M_PI_4);
            break;
        
    }
    
    head.frame = tempFrame;
    //提交動畫
    [UIView commitAnimations];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
 
    
}

@end

手動編寫UI到此結束，程式碼看上去比較多也很冗餘。但是還是很容易理解的。

下面是storyboard方式實現。

1. 開啟storyboard介面，拖相應的控制元件佈局好。並連線關聯屬性和事件。

2.連線關聯之後，編輯業務程式碼

//
//  ViewController.m
//  移動和縮放
//
//  Created by zxh on 15/8/13.
//  Copyright (c) 2015年 zxh. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()

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

- (IBAction)up;
- (IBAction)down;
- (IBAction)left;
- (IBAction)right;
- (IBAction)big;
- (IBAction)small;
- (IBAction)leftRotate;
- (IBAction)rightRotate;
- (IBAction)move:(UIButton *)but;

@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.
}

#pragma mark 向上移動
- (IBAction)up {
    //不允許直接修改 物件的 結構體屬性 的成員
    //允許直接修改 物件的結構體 屬性
    CGRect tempFrame =  self.head.frame;
    tempFrame.origin.y -=10;
    self.head.frame = tempFrame;
}

#pragma mark 向下移動
- (IBAction)down {
    CGRect tempFrame = self.head.frame;
    tempFrame.origin.y += 10;
    self.head.frame = tempFrame;
}

#pragma mark 向左移動
- (IBAction)left {
    CGRect tempFrame = self.head.frame;
    tempFrame.origin.x -= 10;
    self.head.frame = tempFrame;
}

#pragma mark 向右移動
- (IBAction)right {
    CGRect tempFrame = self.head.frame;
    tempFrame.origin.x += 10;
    self.head.frame = tempFrame;
}

#pragma mark 變大
- (IBAction)big {
    CGRect tempFrame = self.head.frame;
    tempFrame.size.width +=20;
    tempFrame.size.height +=20;
    self.head.frame = tempFrame;
}

#pragma mark 縮小
- (IBAction)small {
    CGRect tempFrame = self.head.frame;
    tempFrame.size.width -= 20;
    tempFrame.size.height -= 20;
    self.head.frame = tempFrame;
}

/**
 *  左旋轉
 */
- (IBAction)leftRotate {
      self.head.transform = CGAffineTransformRotate(self.head.transform, -M_PI_2);
}

/**
 *  右旋轉
 */
- (IBAction)rightRotate {
      self.head.transform = CGAffineTransformRotate(self.head.transform, M_PI_2);
}


@end

對比手寫的方式，storyboard實現起來程式碼簡潔多了。 storyboard方式還可以進行優化，簡潔程式碼。可以同時繫結多個按鈕，同時指向同一個方法。看實際情況而定，這裡舉上下左右移動為例。
給按鈕設定tag唯一標識之後就方法傳入本身UIButton物件就可操作該物件。

#pragma mark 移動（上下左右）
- (IBAction)move:(UIButton *)but {
    CGRect tempFrame = self.head.frame;

    switch (but.tag) {
        case 10:
            tempFrame.origin.y -= 10;
            break;
        case 20:
            tempFrame.origin.x -= 10;
            break;
        case 30:
            tempFrame.origin.y += 10;
            break;
        case 40:
            tempFrame.origin.x += 10;
            break;
        
    }

－－－－－－－－－－－－－－－文章至此！！

IOS基礎UI之(三)手寫UI和storyboard方式實現圖片移動和縮放

IOS基礎UI之(三)手寫UI和storyboard方式實現圖片移動和縮放

iOS Swift 實現圖片點擊縮放回彈動畫

Tensorflow編程基礎之Mnist手寫識別實驗+關於cross_entropy的理解

Spring Boot2.0之純手寫框架

Tensorflow之MNIST手寫數字識別：分類問題（1）

Tensorflow之MNIST手寫數字識別：分類問題（2）

bash的基礎特性之三：檔名通配機制（globbing）

MySQL基礎語法之三：join語法

Python基礎知識之檔案讀寫與修改

初識GAN之MNIST手寫數字的識別

iOS基礎班之c語言學習複習查漏

Redis零基礎筆記之三 -- Redis的高階特性

python基礎學習之利用列表寫購物車程式及其優化程式

Android官方開發文件Training系列課程中文版：使用Fragment構建動態UI之構建靈活的UI

Python零基礎入門之三---（for迴圈+列表）

f2fs 學習筆記之三：寫流程

深度學習之mnist手寫數字識別入門

Spring學習之——手寫Spring原始碼V2.0(實現IOC、DI、MVC、AOP)

教你如何使用Java手寫一個基於數組實現的隊列

排序知識點小結1-手寫堆排序及STL實現

IOS基礎UI之(三)手寫UI和storyboard方式實現圖片移動和縮放

相關推薦