腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

在Swift程序中實(shí)現(xiàn)手勢識(shí)別的方法

更新時(shí)間：2015年07月16日 09:24:00 投稿：goldensun

這篇文章主要介紹了在Swift程序中實(shí)現(xiàn)手勢識(shí)別的方法,蘋果的Swift語言即將進(jìn)入2.0開源階段,人氣爆棚中:D 需要的朋友可以參考下

在這次IOS應(yīng)用開發(fā)教程中，我們打算實(shí)現(xiàn)手勢識(shí)別。正如你所知道的，IOS支持大量的手勢操作，它們能提供了很好的應(yīng)用控制和出色用戶體驗(yàn)。
讓我們開始吧!

首先需要在Xcode中創(chuàng)建一個(gè)新的Single View Application:

201571691750591.png (731×431)

然后點(diǎn)擊Next，彈出的窗口要求你填寫項(xiàng)目設(shè)置。在第一欄 (“Product name”) 中填入項(xiàng)目名稱后，點(diǎn)擊Next.

確保語言選擇的是 “Swift”.

201571691820643.png (733×432)

設(shè)計(jì)界面

點(diǎn)擊 “Main.storyboard” 文件，拖出6個(gè) UIViews放到視圖中.把視圖排列成如圖所示的樣子.當(dāng)你排列UIViews時(shí)，在每個(gè)view下面添加一個(gè)UILabel并依圖設(shè)定文本值。

201571691840146.png (1024×698)

我們開始寫代碼吧.

是時(shí)候編輯實(shí)現(xiàn)文件了 (在我們的案例 “ViewController.swift” ).

為了聲明一些我們將會(huì)用到的變量，要在 “class ViewController: UIViewController “塊中添加如下代碼.

復(fù)制代碼代碼如下:

class ViewController: UIViewController {

    @IBOutlet var tapView: UIView

    @IBOutlet var swipeView: UIView

    @IBOutlet var longPressView: UIView

    @IBOutlet var pinchView: UIView

    @IBOutlet var rotateView: UIView

    @IBOutlet var panView: UIView

    var lastRotation = CGFloat()

    let tapRec = UITapGestureRecognizer()

    let pinchRec = UIPinchGestureRecognizer()

    let swipeRec = UISwipeGestureRecognizer()

    let longPressRec = UILongPressGestureRecognizer()

    let rotateRec = UIRotationGestureRecognizer()

    let panRec = UIPanGestureRecognizer()

}

在第2 – 7行，我們聲明了在之前界面里排列過的 UIViews.

在第8行，我們聲明了實(shí)現(xiàn)旋轉(zhuǎn)手勢要用到的變量(lastRotation).

在第 9 – 14行，我們?yōu)槊總€(gè)view聲明了一個(gè)手勢識(shí)別對象.

注意: 在 Swift中，我們用let關(guān)鍵字聲明常量，這意味著它的值在程序運(yùn)行時(shí)不可改變。關(guān)鍵字var則聲明普通變量。

當(dāng)聲明完應(yīng)用需要的主要變量后，在viewDidLoad 方法中添加如下代碼.

復(fù)制代碼代碼如下:

override func viewDidLoad() {

    super.viewDidLoad()

    tapRec.addTarget(self, action: "tappedView")

    pinchRec.addTarget(self, action: "pinchedView:")

    swipeRec.addTarget(self, action: "swipedView")

    longPressRec.addTarget(self, action: "longPressedView")

    rotateRec.addTarget(self, action: "rotatedView:")

    panRec.addTarget(self, action: "draggedView:")

    tapView.addGestureRecognizer(tapRec)

    swipeView.addGestureRecognizer(swipeRec)

    pinchView.addGestureRecognizer(pinchRec)

    longPressView.addGestureRecognizer(longPressRec)

    rotateView.addGestureRecognizer(rotateRec)

    panView.addGestureRecognizer(panRec)

    rotateView.userInteractionEnabled = true

    rotateView.multipleTouchEnabled = true

    pinchView.userInteractionEnabled = true

    pinchView.multipleTouchEnabled = true

    tapView.userInteractionEnabled = true

    swipeView.userInteractionEnabled = true

    longPressView.userInteractionEnabled = true

    panView.userInteractionEnabled = true

}

第 3 – 8行，為每個(gè)視圖設(shè)定手勢識(shí)別的目標(biāo)。所謂的目標(biāo)，就是每個(gè)view中的手勢完成后要調(diào)用的方法。

第 9 -14行，把手勢識(shí)別添加到視圖中.

第15 – 22行，把每個(gè)視圖的 userInteractionEnabled 屬性設(shè)為ture，并把擁有需要多點(diǎn)觸控(rotateView and pinchView)的手勢所在的視圖的multipleTouchEnabled 屬性設(shè)為true.

現(xiàn)在，我們編寫每個(gè)手勢識(shí)別器要調(diào)用的方法 (第3 – 8行設(shè)置的目標(biāo)方法 ).

添加如下代碼:

復(fù)制代碼代碼如下:

func tappedView(){

    let tapAlert = UIAlertController(title: "Tapped", message: "You just tapped the tap view", preferredStyle: UIAlertControllerStyle.Alert)

    tapAlert.addAction(UIAlertAction(title: "OK", style: .Destructive, handler: nil))

    self.presentViewController(tapAlert, animated: true, completion: nil)

}

func swipedView(){

    let tapAlert = UIAlertController(title: "Swiped", message: "You just swiped the swipe view", preferredStyle: UIAlertControllerStyle.Alert)

    tapAlert.addAction(UIAlertAction(title: "OK", style: .Destructive, handler: nil))

    self.presentViewController(tapAlert, animated: true, completion: nil)

}

func longPressedView(){

    let tapAlert = UIAlertController(title: "Long Pressed", message: "You just long pressed the long press view", preferredStyle: UIAlertControllerStyle.Alert)

    tapAlert.addAction(UIAlertAction(title: "OK", style: .Destructive, handler: nil))

    self.presentViewController(tapAlert, animated: true, completion: nil)

}

這三種方法都很好地完成同一件事.每次在手勢在相應(yīng)的視圖中完成后，每種方法都彈出一個(gè)對話框.

所以 tappedView() 方法在用戶滑動(dòng)視圖時(shí)彈出一個(gè)對話框，swipedView() 方法在用戶觸摸滑動(dòng) swipe視圖時(shí)彈出對話框，而longPressedView() 方法則在用戶長按long press view時(shí)彈出對話框.

另兩種手勢 (rotate and pinch ) 的代碼稍微有點(diǎn)復(fù)雜.

為旋轉(zhuǎn)手勢添加如下代碼:

復(fù)制代碼代碼如下:

func rotatedView(sender:UIRotationGestureRecognizer){

    var lastRotation = CGFloat()

    self.view.bringSubviewToFront(rotateView)

    if(sender.state == UIGestureRecognizerState.Ended){

    lastRotation = 0.0;

    }

    rotation = 0.0 - (lastRotation - sender.rotation)

    var point = rotateRec.locationInView(rotateView)

    var currentTrans = sender.view.transform

    var newTrans = CGAffineTransformRotate(currentTrans, rotation)

    sender.view.transform = newTrans

    lastRotation = sender.rotation

}

這個(gè)方法包含 sender:UIRotationGestureRecognizer 參數(shù). sender 參數(shù)( UIRotationGestureRecognizer 類型) 含有這個(gè)方法(在這個(gè)案例中是rotateRec)調(diào)用的手勢識(shí)別器的值.

第2行聲明了 lastRotation.

第3行我們把 rotateView放到前面.

接下來，在 if語句中，我們檢查手勢是否完成，如果沒有完成，我們就將視圖旋轉(zhuǎn)。

第 8 – 10行，我們計(jì)算rotate view的旋轉(zhuǎn)程度，第10行，我們設(shè)置rotate view的旋轉(zhuǎn)程度。

On line 12 we set the lastRotation 作為旋轉(zhuǎn)手勢識(shí)別器的當(dāng)前旋轉(zhuǎn).

現(xiàn)在我們添加pinch 手勢的代碼:

復(fù)制代碼代碼如下:

func pinchedView(sender:UIPinchGestureRecognizer){

    self.view.bringSubviewToFront(pinchView)

    sender.view.transform = CGAffineTransformScale(sender.view.transform, sender.scale, sender.scale)

    sender.scale = 1.0

}

在之前方法的第1行中，我們把pinch視圖放到了頂端。然后設(shè)置每個(gè)pinch視圖的transform，并把pinchRec的scale設(shè)為1.

然后是實(shí)現(xiàn) pan (drag) 手勢. 添加如下代碼:

復(fù)制代碼代碼如下:

func draggedView(sender:UIPanGestureRecognizer){

    self.view.bringSubviewToFront(sender.view)

    var translation = sender.translationInView(self.view)

    sender.view.center = CGPointMake(sender.view.center.x + translation.x, sender.view.center.y + translation.y)

    sender.setTranslation(CGPointZero, inView: self.view)

}

第2行，我們把 drag視圖放到頂端 (和前面的方法一樣).

然后我們聲明變量translation，并用 sender.translationInView(self.view)的值給它賦值。完成后，把sender.view object (panRec) 的center屬性設(shè)為計(jì)算出來的新center ( 通過CGPointMake(sender.view.center.x + translation.x, sender.view.center.y + translation.y) 計(jì)算) 并把translation 設(shè)為 sender (panRec).

現(xiàn)在，代碼部分算是完成了!

回到界面設(shè)計(jì).

現(xiàn)在我們回到 “Main.storyboard” 文件. 選擇視圖控制器并把聲明的每個(gè)UIView連接到相應(yīng)的視圖，如下圖所示.

201571692025493.png (1024×697)