[Swift通天遁地]九、拔劍吧-(5)創建Tab圖標具有多種樣式的Tab動畫
本文將演示創建動畫樣式的底部標簽條的切換效果。
Github項目地址:【animated-tab-bar】,下載項目,解壓成文件夾窗口。
將第三方類庫的標簽控制器文件夾【RAMAnimatedTabBarConroller】拖動到項目中。
在彈出的文件導入確認窗口中,點擊【Finish】完成按鈕,確認文件的導入。
在左側的項目導航區打開視圖控制器的代碼文件【Main.storyboard】
選擇故事板中的視圖控制器。依次點擊:
【Editor】編輯- >【Embed In】植入- >【Tab Bar Controller】標簽控制器
將選擇的視圖控制器,植入標簽控制器。使用快捷鍵【Command】+【D】復制最初的視圖控制器。
將復制後的視圖控制器,拖動到和第一個視圖控制器對齊的位置。
在故事板上點擊鼠標右鍵,彈出右鍵菜單。選擇【Zoom to 25%】縮小故事板的顯示比例。
使用快捷鍵【Command】+【D】復制當前的視圖控制器,並將它移動到適當的位置。
使用相同的方法,繼續復制並放置兩個新的視圖控制器。在故事板上點擊鼠標右鍵,彈出右鍵菜單。
選擇【Zoom to 100%】故事板的顯示比例恢復至原始顯示比例。
現在開始將其他四個子視圖控制器,和標簽控制器做連接,將它們置入標簽控制器。
將標簽控制器的上方,按下鼠標右鍵,然後拖動到第一個子控制器。
在彈出的選項菜單中,選擇【view controllers】視圖控制器選項,
以建立兩個控制器之間的從屬關系。使用相同的方式,將標簽控制器和另外二個子控制器,建立從屬關系。
在彈出的選項菜單中,選擇【view controllers】視圖控制器選項,
以建立兩個控制器之間的從屬關系。在標簽控制器的上方,按下鼠標右鍵,然後拖動到第三個子控制器。
在彈出的選項菜單中,選擇【view controllers】視圖控制器選項,
以建立兩個控制器之間的從屬關系。
點擊故事板右側的垂直滾動條,顯示五個子視圖控制器。
然後選擇第一個控制器標簽。點擊屬性檢查器圖標,進入屬性設置面板。
輸入標簽的文字內容,
【Titile】:User
【Image】:icon_user
選擇控制器的根視圖,設置根視圖的背景顏色。
點擊背景顏色右側的下拉箭頭,彈出顏色預設面板。
在彈出的系統顏色預設面板中, 選擇一種顏色作為視圖的背景顏色。
選擇第二個控制器的標簽,輸入標簽的文字內容,
【Titile】:Settings
【Image】:Settings
選擇控制器的根視圖,設置根視圖的背景顏色。
選擇第三個控制器的標簽,輸入標簽的文字內容,
【Titile】:Location
【Image】:icon_pin
選擇控制器的根視圖,設置根視圖的背景顏色。
選擇第四個控制器的標簽,輸入標簽的文字內容,
【Titile】:Drop
【Image】:drop
選擇控制器的根視圖,設置根視圖的背景顏色。
選擇第五個控制器的標簽,輸入標簽的文字內容,
【Titile】:Frame
【Image】:Tools_00028
選擇控制器的根視圖,設置根視圖的背景顏色。
接著將五個視圖控制器的標簽控件,綁定到由第三方類庫提供的自定義標簽類。
使它們具有動畫的屬性,首先選擇第五個視圖控制器標簽。
然後點擊身份檢查器圖標,進入身份設置面板。
【Class】:RAMAnimatedTabBarItem
選擇第四個視圖控制器標簽
【Class】:RAMAnimatedTabBarItem
選擇第三個視圖控制器標簽
【Class】:RAMAnimatedTabBarItem
選擇第二個視圖控制器標簽
【Class】:RAMAnimatedTabBarItem
選擇第一個視圖控制器標簽
【Class】:RAMAnimatedTabBarItem
給每個標簽指定不同的動畫類型,
首先需要給標簽控制器,綁定一個自定義的類文件。
選擇標簽控制器,在類名輸入框,輸入由第三方類庫提供的自定義類。
【Class】:RAMAnimatedTabBarController
現在開始給每個視圖控制器,設置不同的標簽動畫樣式。
首先點擊控件庫右側的垂直滾動條,跳轉到對象控件所在的位置。
將【Object】對象控件拖動到第一個視圖控制器。
點擊身份檢查器圖標,進入身份設置面板。
【Class】:RAMRotationAnimation
給控制器的標簽控件設置一個跳躍動畫,
點擊屬性檢查器圖標。進入屬性設置面板。
在動畫時長輸入框內,【Duration】0.8,作為跳躍動畫的時長。
【Text Selected】:設置當標簽處於焦點狀態時,標簽的文字顏色。
同樣對第二個第三個第四個視圖控制器進行相同的處理。
在此給第五個標簽控件,添加了一個幀動畫,
點擊屬性檢查器圖標,進入屬性設置面板。
點擊次數的下拉箭頭,設置標簽是否允許播放取消選擇時的動畫。
設置列表中的激活選項,當標簽取消選擇時,也會播放動畫。
【Images Path】:ToolsIsAnimation
點擊【顯示輔助編輯器】圖標,打開輔助編輯器。
選擇故事板中的標簽控制器,
在動畫屬性左側的連接圖標上按下鼠標,
並向第五個控制器的幀動畫對象拖動,
將動畫屬性和其他的動畫對象進行連接。
點擊連接圖標,可以查看該屬性共連接了哪些控件。在面板外部點擊隱藏該面板。
[Swift通天遁地]九、拔劍吧-(5)創建Tab圖標具有多種樣式的Tab動畫