1. 程式人生 > >IOS開發學習筆記四 實現按鈕的移動和縮放

IOS開發學習筆記四 實現按鈕的移動和縮放

首先看一我們要實現的效果:demo下載

demo效果圖

開始我們的操作

1、拷貝圖片素材,下載demo裡面的圖片素材,然後把Assets.xcassets資料夾下面Arrow,Icon,Other複製貼上到自己的專案裡面,關於圖片的規格和尺寸什麼的先不用考慮。

2、為按鈕新增預設圖片背景和被按下時候的圖片背景

  • 我們從控制元件欄拿過來一個Button,然後選中該按鈕,發現右側的status config預設為default,我們設定background的值為btn_01。

  • 然後重新選擇status config 為HighLighted,同時設定background的值為btn_02,這樣就實現了按鈕預設和按下不同背景的效果。

  • 不過這時候我們發現按鈕按下的時候還有個灰色效果,非常難看,需要我們修改按鈕的style為custom。
    01
    02

3、用同樣的方式,我們再新增四個箭頭和加減號留個按鈕

  • 分別為這些個按鈕設定預設和高亮兩種狀態不同的背景圖片。

  • 為這些按鈕分別新增moveLeft,moveTop,moveRight,moveBottom,subSize,addSize點選事件方法。

4、獲取最上方按鈕對應的物件,並修改該按鈕的位置

  • 為圖片按鈕新增對應的btnClick物件,IOS介面是一個x座標從左向右增大,y座標從上向下增大的座標系,要想修改一個按鈕的位置,需要獲取該按鈕的frame物件,然後增加或者減少該按鈕的x,y座標值。

  • 以moveLeft為例,moveLeft的具體程式碼如下:

- (IBAction)moveLeft {
    NSLog(@"按鈕向左移動");
    //獲取當前btnClick的frame物件
    CGRect frame = self.btnCliclk.frame;
    //對frame.origin.x進行減少操作
    frame.origin.x -= 10;
    //重新把frame賦值給btnClick.frame,IOS不允許對self.btnCliclk.frame.originxy進行直接操作
    self.btnCliclk.frame = frame;
}
  • 向上,向下,向右都是同樣的原理,分別為他們新增程式碼

5、獲取最上方按鈕對應的物件,並修改該按鈕的大小

  • 想要修改按鈕的大小,我們需要修改按鈕物件frame.size的大小

  • 以subSize為例,實現按鈕縮小的具體程式碼如下:

- (IBAction)subSize {
    NSLog(@"減少按鈕大小");
    //獲取當前btnClick的frame物件
    CGRect frame = self.btnCliclk.frame;
    //對frame.size.height和frame.size.width進行減少操作
    frame.size.height -= 5;
    frame.size.width -= 5;
    //重新把frame賦值給btnClick.frame,IOS不允許對self.btnCliclk.frame.size的width和height進行直接操作
    self.btnCliclk.frame = frame;
}
  • 同理可以也可以實現按鈕的放大

6、上面程式碼為六個按鈕每個都添加了一個點選事件,我們完全可以把上面的六個方法封裝成兩個方法,move()和scale()方法。但是為了區分,我們需要傳入當前觸發點選事件的button所對應的物件,並提前為每個button物件新增tag標記。然後在move()方法裡面進行判斷處理:

  • 按下control鍵,然後使用滑鼠拖拽事件線到對應的viewController裡面,命名type為UIButton,Name為move,
    03

  • 為“左移”按鈕新增tag
    04

  • 依次對其他幾個按鈕進行此操作,操作完畢,貼上程式碼:

- (IBAction)move:(UIButton *)sender {
    CGRect frame = self.btnCliclk.frame;
    switch (sender.tag) {
        case 10:
            frame.origin.x -= 10;
            self.btnCliclk.frame = frame;
            break;
        case 20:
            frame.origin.x += 10;
            self.btnCliclk.frame = frame;
            break;
        case 30:
            frame.origin.y -= 10;
            self.btnCliclk.frame = frame;
            break;
        case 40:
            frame.origin.y += 10;
            self.btnCliclk.frame = frame;
            break;
        default:
            break;
    }
}

- (IBAction)scale:(UIButton *)sender {
    CGRect frame = self.btnCliclk.frame;
    switch (sender.tag) {
        case 100:
            NSLog(@"減少按鈕大小");
            frame.size.height -= 5;
            frame.size.width -= 5;
            self.btnCliclk.frame = frame;
            break;
        case 200:
            NSLog(@"增大按鈕大小");
            frame.size.height += 5;
            frame.size.width += 5;
            self.btnCliclk.frame = frame;
            break;

        default:
            break;
    }
}