我在寫書找資料的過程中,找到如何做出旋鈕的方法。本來以為很難的,沒想到非常簡單。如果想在應用程式中加入旋鈕的大家,歡迎參考,也歡迎分享!

***** 問題確定 *****
想要做出旋鈕的功能不難。只有兩個問題要確定:

Knob01
A.第一個問題:確定距離
首先要確定目前觸碰螢幕的地方是否在旋鈕的範圍內。希望達到手指在旋鈕的範圍內才能旋轉旋鈕。
B.第二個的問題:確定角度
接著在使用者手指在畫面上移動觸發 touchMoved withEvent方法時,用locationInView及previousLocationInView方法得到當前移動的座標與之前的移動座標,求得這兩個座標相對於旋鈕的角度、讓選鈕照著旋轉角度旋轉即可。

 

***** 專案介紹 *****
範例假設大家已經開啟了一個專案。畫面上面有一顆旋鈕,並且已經把這顆旋鈕連結到了程式碼裡面,命名成knob。
除此以外也加入了一個型別為CGFloat的屬性nowAngle,來記錄旋鈕的旋轉角度,一開始是零。

 

***** 解決第一個問題 *****
先來解決之前提到的第一個問題:確定手指的範圍是否在旋鈕範圍之間。
在類別裡面新增一個方法。用這個方法來偵測畫面上兩點的距離。
要求得畫面上兩點的距離,其實是求原點到 (x2-x1,y2-y1)這點的距離。
基礎的三角函式可知,距離是x座標的二次方加上y座標的二次方之後,再把結果開根號。
所以距離是(x2-x1)的二乘方加上(y2-y1)的二乘方的結果再開根號。

Knob02
懂了這個,請回到程式碼,新增一個方法,偵測畫面上兩點的距離。

Knob03
之後如果要知道螢幕上兩點的距離,
就呼叫這個方法,
把兩個點的座標帶入,
就可以得到其中的距離。

 

***** 解決第二個問題 *****
現在要處理角度的問題。
如果畫面上有一條線。想要知道這條線跟x方向的角度的話,其實就是求原點到 (x2-x1,y2-y1)這點連成的線跟x軸的角度,這個角度可以用atan2函數得到,這個角度是atan2(x2-x1,y2-y1)。

Knob04
所以如果從某一點滑動手指到另外一點的話,可以把第一點跟參考點連成的線相對於x軸的角度,減掉第二點跟參考點連成的線相對於x軸的角度,就可以知道
滑動手指的過程中,兩點連成的線造成的夾角。

Knob05

 

寫成程式碼的話,

atanA-atanB就得到相差的角度,這個角度目前是徑度,如果要變成我們平常使用的角度,就要先乘上 180,然後除以M_PI,把M_PI轉型成CGFloat,回傳結果。

 

***** 實際製作旋鈕功能 *****
準備工作做完之後,現在來做出旋鈕的功能。
請覆寫touchMoved,

Knob06
1.程式碼裡面,先用touch.first.locaitonInView(self.view)就可以知道目前觸碰的座標。把這個座標存在常數nowPoint中。
2.用touch.first.previousLocationInView(self.view)就可以知道上次呼叫touchMoved方法時觸碰的座標,把這個座標存在常數 previousPoint中。
3.接著用knob.center得到畫面上旋鈕的中心座標。
4.用distanceBetweenPoints(),就可以求得目前觸碰點跟旋鈕中心的距離。把這個距離存在常數distance中。
5.希望做到的功能是有觸碰到旋鈕、旋鈕才會有作用。寫成程式碼的話,是觸碰的位置距離旋鈕中心的distance 要小於旋鈕的半徑,也就是小於 knob.bounds.size.width/2
6.如果符合這樣的條件。用angleBetweenLines求角度。得到每次呼叫touchMoved時觸碰兩點的角度差。
7.把目前旋鈕的角度加上這個角度差,存回nowAngle裡面,這個nowAngle就是旋鈕要旋轉的角度,
8.要讓旋鈕旋轉,就設定knob.transform。因為這邊要帶入的參數是經度,所以要乘上 M_PI,轉型成CGFloat,除上180這樣就可以讓旋鈕選轉到正確的角度了。

以上就是製作做出旋鈕的方法。歡迎分享~。

 

 

相關連結
***********************************************
最完整的線上中文 iPhone開發課程 [課程連結]
Swift和Objectuive混用方法 [教學連結]
Xcode7 免費實機測試方法 [教學連結]

(537)

superstardj

been a DJ, a rapper, a musician and a recording artist... a novel-writer, a language-book author, and a chief editor... a painter, a book-cover designer and many more... right now a programmer who designs mobile application, both iOS and Android devices...

Leave a Reply

Your email address will not be published. Required fields are marked *