學(xué)Swift掙美元UI篇之11 Gesture recognizers 手勢識別器

之前的文章主要介紹swift的語法,本篇將帶領(lǐng)大家從UI層面學(xué)習(xí)iOS開發(fā)

學(xué)Swift掙美元UI篇之Gesture recognizers 手勢識別器

手勢識別器比觸摸操作更為強大煤痕。手勢識別器能夠以更貼近人類操作屏幕內(nèi)容。iOS基礎(chǔ)框架的好處讓我們無需編程或理解定義手勢識別算法的復(fù)雜基礎(chǔ)代碼, 就可以在自己的應(yīng)用里面檢測和響應(yīng)各種復(fù)雜的預(yù)定義手勢。

由于我們采用了蘋果提供的標(biāo)準(zhǔn)的手勢識別器(gesture recognizers),因此我們可以和微信臭埋、淘寶弱睦、京東等app擁有相同的體驗百姓。

手勢識別器

實戰(zhàn)

下面,我們通過創(chuàng)建一個簡單的圖像查看器應(yīng)用程序來探索手勢的可能性况木。在此應(yīng)用中, 您將平移瓣戚、縮放和旋轉(zhuǎn)圖像, 或點擊以查看下一張圖像。

代碼下載

請大家先下載一下初始代碼
https://github.com/wangdazhi/ImageViewer

01 將文件拖拽入項目

Image Views是用于現(xiàn)實存在項目中的圖片控件焦读。

在我們項目中子库,可以看到一個images文件夾,直接將這個文件拖拽入項目中矗晃。具體操作可以參考下面視頻:

視頻教程:如何將文件拖拽入項目

02 添加Pan gesture recognizer

(1) 從Object Library中拖拽Pan Gesture Recognizer到storeboard仑嗅,然后拖著到image view上:參考視頻
視頻教程之添加Pan Gesture Recognize

(2)在平移手勢識別器的 "屬性檢查器" 中, 將最大觸點調(diào)整為2。您將創(chuàng)建一個響應(yīng)平移手勢的操作张症。


Jietu20190409-100633@2x.jpg

下面(3)至(6)的具體操作請看視頻
視頻教程之手勢3至7添加action

(3)打開Assistant Editor


Jietu20190409-100822@2x.jpg

(4)按住control鍵仓技,將pan gesture recognizer拖拽到view controller源碼的viewDidLoad方法下面
(5)修改action的名稱為“handlePan”
(6)修改Type為“UIPanGestuerRecognizer”
(7)添加imageview 的outlet。handlePan函數(shù)可以響應(yīng)用戶移動手勢俗他,其中包含開始脖捻、更改、結(jié)束或是失敗兆衅。
視頻教程之手勢07添加iamgeview的outlet

(8)聲明一個坐標(biāo)轉(zhuǎn)換器translation

let translation = sender.translation(in: self.view)
Jietu20190409-103702@2x.jpg

(9)可以將此 x, y 坐標(biāo)添加到圖像視圖的當(dāng)前位置以移動圖像地沮。使用 view 的中心屬性設(shè)置圖像視圖的當(dāng)前位置:

 imageView.center = CGPoint(
    x:imageView.center.x + translation.x,
    y:imageView.center.y + translation.y
  )
Jietu20190409-104121@2x.jpg

(10)重置手勢識別器

sender.setTranslation(CGPoint.zero, in: self.view)
Jietu20190409-104638@2x.jpg

(11)給imageview設(shè)置一張圖片


Jietu20190409-104901@2x.jpg
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市羡亩,隨后出現(xiàn)的幾起案子摩疑,更是在濱河造成了極大的恐慌,老刑警劉巖畏铆,帶你破解...
    沈念sama閱讀 223,126評論 6 520
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件雷袋,死亡現(xiàn)場離奇詭異,居然都是意外死亡辞居,警方通過查閱死者的電腦和手機楷怒,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,421評論 3 400
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來瓦灶,“玉大人鸠删,你說我怎么就攤上這事∫邪幔” “怎么了冶共?”我有些...
    開封第一講書人閱讀 169,941評論 0 366
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我捅僵,道長家卖,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,294評論 1 300
  • 正文 為了忘掉前任庙楚,我火速辦了婚禮上荡,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘馒闷。我一直安慰自己酪捡,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 69,295評論 6 398
  • 文/花漫 我一把揭開白布纳账。 她就那樣靜靜地躺著逛薇,像睡著了一般。 火紅的嫁衣襯著肌膚如雪疏虫。 梳的紋絲不亂的頭發(fā)上永罚,一...
    開封第一講書人閱讀 52,874評論 1 314
  • 那天,我揣著相機與錄音卧秘,去河邊找鬼呢袱。 笑死,一個胖子當(dāng)著我的面吹牛翅敌,可吹牛的內(nèi)容都是我干的羞福。 我是一名探鬼主播,決...
    沈念sama閱讀 41,285評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼蚯涮,長吁一口氣:“原來是場噩夢啊……” “哼治专!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起恋昼,我...
    開封第一講書人閱讀 40,249評論 0 277
  • 序言:老撾萬榮一對情侶失蹤看靠,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后液肌,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,760評論 1 321
  • 正文 獨居荒郊野嶺守林人離奇死亡鸥滨,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,840評論 3 343
  • 正文 我和宋清朗相戀三年嗦哆,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片婿滓。...
    茶點故事閱讀 40,973評論 1 354
  • 序言:一個原本活蹦亂跳的男人離奇死亡老速,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出凸主,到底是詐尸還是另有隱情橘券,我是刑警寧澤,帶...
    沈念sama閱讀 36,631評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站旁舰,受9級特大地震影響锋华,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜箭窜,卻給世界環(huán)境...
    茶點故事閱讀 42,315評論 3 336
  • 文/蒙蒙 一毯焕、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧磺樱,春花似錦纳猫、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,797評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至块差,卻和暖如春物遇,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背憾儒。 一陣腳步聲響...
    開封第一講書人閱讀 33,926評論 1 275
  • 我被黑心中介騙來泰國打工询兴, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人起趾。 一個月前我還...
    沈念sama閱讀 49,431評論 3 379
  • 正文 我出身青樓诗舰,卻偏偏與公主長得像,于是被迫代替她去往敵國和親训裆。 傳聞我的和親對象是個殘疾皇子眶根,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,982評論 2 361

推薦閱讀更多精彩內(nèi)容