IOS仿網易新聞客戶端左右側欄

左右側欄已是當前APP最流行的佈局，不少客戶端軟件都使用了左右側欄，例如網易新聞，人人網，Weico等等。

這篇博客以當前網易新聞客戶端的模式爲例仿寫了一個左右側欄架構實現。

 

先看一下Demo的實現效果

實現主要思路以及細節：

視圖控制器有三個視圖按不一樣層次排列，最上層的是主要顯示視圖_mainContentView,下面的爲左右側欄視圖；

點擊左側欄不一樣按鈕壓入不一樣的主視圖控制器；

在顯示側欄時點擊視圖空白區域閉合，利用tap手勢；

拖動主頁面根據不一樣的方向和位置進行移動和縮放， 利用pan手勢；

向右拖顯示左側欄，向左拖顯示右側欄；

 

首先，點擊左側欄時，左側欄將點擊的數據模型傳給分欄控制器，讓其更改主視圖內容

模型：

一個工廠方法，模型存入不一樣選擇下的不一樣視圖控制器的具體內容。

 

以新聞頁爲例：

ClassModel *newscm = [ClassModel classModelWithTitle:@"新聞" className:@"NewsViewController" contentText:@"新聞視圖內容" andImageName:@"sidebar_nav_news"];

 

來看主視圖切換不一樣界面的方法：

 

 

中間省略了配置導航欄的內容。

 

這個方法中又一個[_mainContentView.subviews firstObject]方法，這個方法是IOS7纔有的，按之前習慣寫[0]也好。

 

實現視圖移動動畫主要是經過仿射變換來實現的，也有的例子經過操做frame，看習慣了。

 

一個根據方向返回仿射變換值的私有方法

一個根據方向配置頁面的陰影效果的私有方法

 

點擊導航欄左側按鈕的展開側欄方法（右側相似）

 

關閉側欄返回主頁面的方法

 

 

最後是最重要的，手勢拖動的實現方法

根據不一樣的狀態設置不一樣狀態下的仿射變換值，來賦給_mainContentView,在到達臨界狀態後，該視圖的縮放再也不進行。

當拖動手勢結束後，根據拖動的位置，來肯定視圖如何進行移動。

這個例子主要的代碼都貼在了上面，這裏的素材是隨便取的。如今的網易客戶端的側欄背景爲深色視圖，左側欄欄目跟這個demo差很少。

 

 

Demo源碼：點擊打開連接

 

 

以上就是本篇博客所有內容，歡迎指正和交流。轉載註明出處~~