天天看點

iOS開發不借助第三方控件實作側邊欄效果

最近在研究ios程式的側邊欄,因為發現漸漸的ios的程式也開始走側邊欄的風格了,qq,今日頭條,path(path算最早出現側邊欄的app了,是以也把側邊欄效果說成是path效果),是以就研究了下。

然後發現git hub上有很多側邊欄的控件,這些控件效果也都挺玄的,但是我想找到不用第三方控件自己實作側邊欄呢?後來參照這篇blog,然後自己搞了下,算搞清楚了。下面詳細介紹一下吧。

1. 

首先我們需要在storyboard裡面建立3個view controlle,這裡也可以是navigation controller,但是我還是習慣直接用view controller就可以了,跳轉都自己來實作。

2. 

接下來需要建立3個類,

iOS開發不借助第三方控件實作側邊欄效果

containerviewcontroller是一個容器類的vc,作用是放置mainvc和sidevc,就好比tabbarviewcontroller一樣,它隻是一個容器,真正調整頁面的是在其他vc中。

3. 

先不用管這3個viewcontroller如何實作,我們轉到storyboard中,分别把設定3個viewcontroller的identifier,像這個樣子

iOS開發不借助第三方控件實作側邊欄效果

containerviewcontroller可以不設定storyboard,但是mainvc和sidevc一定要設定好storyboard id,然後你還可以自己編輯一下main vc和sidevc,這樣可以更清晰地看到側邊欄的效果。

最終的storyboard是這樣的:

最上面是containerviewcontroller,接下來從右到左分别是mainviewcontroller和sideviewcontroller。

iOS開發不借助第三方控件實作側邊欄效果

4. 

好了,接下來我們就開始coding把。我這裡想要做的效果是滑屏或者點選mainvc左上角的按鈕都可以打開側邊欄,然後當側邊欄顯示的時候,滑屏或者點選右側的mainvc,都能隐藏側邊欄。

我們一步一步來分析代碼吧:

其實主要是containerviewcontroller

containerviewcontroller.h

我們import了mainvc和sidevc,然後定義了兩個property和兩個method

containerviewcontroller.m

在viewdidload方法裡面,我們從storyboard中擷取到兩個viewcontroller,注意我的sideviewcontroller起的名字是leftviewcontroller,也就是在storyboard id裡面要寫成這個名字。

然後添加進去了滑屏手勢,分别是向左滑和向右滑

接下裡在滑屏的代理裡面定義了滑屏的動作。這裡為什麼要把顯示/隐藏sideview單獨做成兩個method呢?因為一會我們要實作在mainvc裡面點選頭像的時候能夠調用containervc裡的這兩個函數!

接下來看看mainvc如何實作吧

mainviewcontroller.h

注意這裡用@class來引入containervc,不在頭檔案裡面#import是為了防止循環引用。

然後我們定義一個property,fatherviewcontroller,它是一個containerviewcontroller的執行個體。

showsideview的ibaction是頭像那個button的點選動作。

mainviewcontroller.m

這樣在mainviewcontroller的點選頭像button的動作就能調用fatherviewcontroller,也就是containerviewcontroller裡面的showsideview動作了。

touchesbegan是當點選mainviewcontroller的時候,隐藏側邊欄的。

以為sideviewcontroller都是在storyboard裡面拖入控件完成的,是以不需要寫什麼代碼。

當然,這裡僅僅是左側的側邊欄,想要看兩側的側邊欄方法,查閱這裡。