天天看點

iOS開發UI篇—Quartz2D(自定義UIImageView控件)

一、實作思路

quartz2d最大的用途在于自定義view(自定義ui控件),當系統的view不能滿足我們使用需求的時候,自定義view。

使用quartz2d自定義view,可以從模仿系統的imageview的使用開始。

需求驅動開發:模仿系統的imageview的使用過程

1.建立

2.設定圖檔

3.設定frame

4.把建立的自定義的view添加到界面上(在自定義的view中,需要一個image屬性接收image圖檔參數->5)。

5.添加一個image屬性(接下來,拿到image之後,應該把拿到的這個image給渲染出來。怎麼渲染?自定義的view怎麼把圖檔顯示出來?->把圖檔給畫出來,是以需要重寫自定義view的drawrect:方法)。

6.重寫自定義view的drawrect:方法,在該方法内部畫出圖形。

二、代碼實作

  系統自帶的imageview的使用

iOS開發UI篇—Quartz2D(自定義UIImageView控件)
iOS開發UI篇—Quartz2D(自定義UIImageView控件)

實作效果:

iOS開發UI篇—Quartz2D(自定義UIImageView控件)

使用quartz2d自定義view,代碼如下:

建立一個自定義的類,讓其繼承自uiview,yyimageview.h檔案代碼如下:

iOS開發UI篇—Quartz2D(自定義UIImageView控件)
iOS開發UI篇—Quartz2D(自定義UIImageView控件)

  在自定義類的實作中,重寫drawrect:方法繪制并渲染圖形。yyimageview.m檔案代碼如下:

iOS開發UI篇—Quartz2D(自定義UIImageView控件)
iOS開發UI篇—Quartz2D(自定義UIImageView控件)

在主要制器中,模仿系統自帶的uiimageview的使用過程,實作同樣的效果。

iOS開發UI篇—Quartz2D(自定義UIImageView控件)
iOS開發UI篇—Quartz2D(自定義UIImageView控件)

三、完善

存在的問題?

在界面上,添加一個按鈕,要求點選按鈕,能夠實作圖檔的切換。

iOS開發UI篇—Quartz2D(自定義UIImageView控件)
iOS開發UI篇—Quartz2D(自定義UIImageView控件)

點選按鈕後,實作圖檔的切換。

iOS開發UI篇—Quartz2D(自定義UIImageView控件)

說明:系統的uiimage可以替換。而自定義imageview不會變換,因為自定義的view要想換圖檔,需要重新繪制并渲染一次圖檔。是以在拿到替換圖檔的時候,需要重新繪制一次圖檔,重寫setimage方法。

完善後的代碼如下:

主要制器中,yyviewcontroller.m檔案的代碼:

iOS開發UI篇—Quartz2D(自定義UIImageView控件)
iOS開發UI篇—Quartz2D(自定義UIImageView控件)

yyimageview.m檔案的代碼:

iOS開發UI篇—Quartz2D(自定義UIImageView控件)
iOS開發UI篇—Quartz2D(自定義UIImageView控件)

繼續閱讀