iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 22
0

一樣是在專案開發內遇到的小功能,想要點擊照片觸發一些動作,但是後來發現照片無法加上動作(addTarget),於是靈機一動,想到可以加上手勢,觸發手勢後去呼叫動作。


一樣是使用Programmatic UI,首先先刻出一個UIImageView,這次做的小範例是點擊UIImageView觸發方法,然後更改背景顏色,觸發的方法可以寫任何東西,只是為了簡單我這邊就寫更改背景顏色而已。

先刻出一個UIImageView:

class ViewController: UIViewController {
    let myImageView: UIImageView =
    {
        let screenSize = UIScreen.main.bounds
        let imageView = UIImageView()
        imageView.frame = CGRect(x: screenSize.width * 0.25, y: screenSize.height * 0.25, width: screenSize.width * 0.5, height: screenSize.height * 0.5)
        imageView.backgroundColor = .lightGray
        return imageView
    }()
    override func viewDidLoad() {
        super.viewDidLoad()
        view.addSubview(myImageView)
    }
}

現在打開模擬器運行,可以看到畫面已經完成了:
https://ithelp.ithome.com.tw/upload/images/20201007/20129144ntkMNKUbv1.png


現在需要為這個UIImageView加上手勢,我打算用點擊的手勢,也就是說點一下就會更換背景顏色,先實例化一個手勢,我將這些代碼使用一個func來包裝。

func addTapGestureToImageView()
    {
        let tap = UITapGestureRecognizer(target: self, action: #selector(self.tapAction))
        
        self.myImageView.addGestureRecognizer(tap)
        
    }

上述代碼中,target指的是作用的對象,由於我是要在這個Controller內動作,所以我用self,而action則是我要觸發的方法,需要注意的是只能觸發Objective-C語法的方法,所以寫法會比較不一樣,前綴加上#selector


另外需要定義要被觸發的方法,我在方法內寫一個三元運算子來更改圖片背景顏色,需要注意的是剛剛提到的只能使用Objective-C的方法,所以func前要加上@objc

 @objc func tapAction()
    {
        self.myImageView.backgroundColor = (self.myImageView.backgroundColor == .lightGray) ? .blue : .lightGray
    }

現在看上去幾乎完成了,打模擬器運行看看,你會發現這個UIImageView根本不聽你的命令,點到手斷掉也不會更改顏色,那是什麼原因導致它抗命呢?

其實很簡單,由於UIImageView預設是不能與使用者互動的,所以我們要去更改它的屬性,讓它可以跟使用者互動,把以下行程式碼加在最一開始初始化UIImageView的地方就可以了,它將成為你最聽話的士兵,叫它往東它不敢往西。

imageView.isUserInteractionEnabled = true

另外一提,如果是使用StoryBoard,屬性檢閱器也有isUserInteractionEnabled屬性可以勾選。

現在已經完成了加上手勢的功能了,你的UIImageView已經擁有手勢動作了,之後可以根據需要加上滑動之類的動作。
點擊圖片更改顏色


上一篇
Day21-在同一個頁面顯示不同UICollectionView之同時顯示兩個CollectionView
下一篇
Day23-自訂iOS App內的字型很簡單,但有坑啊!!
系列文
想知道自己iOS具現化系能力有多強嗎?實作幾個App就知道了30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言