天天看點

iOS之UI--主流架構的搭建--仿制QQ的UI架構

使用xcode搭建多個控制器界面,一般在實際開發中建議超過四個控制器界面使用純代碼。

下面的執行個體其實已經超過了四個,總結詳細步驟的目的,主要是更熟悉xcode的storyboard使用細節。

先直接上我們這個主流架構要達到的效果:

iOS之UI--主流架構的搭建--仿制QQ的UI架構

首先我們需要設定應用程式的圖示:

iOS之UI--主流架構的搭建--仿制QQ的UI架構
iOS之UI--主流架構的搭建--仿制QQ的UI架構
iOS之UI--主流架構的搭建--仿制QQ的UI架構
iOS之UI--主流架構的搭建--仿制QQ的UI架構
iOS之UI--主流架構的搭建--仿制QQ的UI架構

最後記得:

iOS之UI--主流架構的搭建--仿制QQ的UI架構

然後首次啟動應用程式效果:

iOS之UI--主流架構的搭建--仿制QQ的UI架構

最後還要記得把應用圖示顯示的名字改改:

iOS之UI--主流架構的搭建--仿制QQ的UI架構

效果:

iOS之UI--主流架構的搭建--仿制QQ的UI架構

接着開始主流ui架構的搭建,去掉storyboard原來預設自帶的uiviewcontroller:

iOS之UI--主流架構的搭建--仿制QQ的UI架構

接着為tab bar viewcontroller連接配接新的子控制器

iOS之UI--主流架構的搭建--仿制QQ的UI架構

然後也要為uinavigation controller連接配接新的可編輯title的uitableviewcontroller

iOS之UI--主流架構的搭建--仿制QQ的UI架構
iOS之UI--主流架構的搭建--仿制QQ的UI架構

然後可以編輯:

iOS之UI--主流架構的搭建--仿制QQ的UI架構
iOS之UI--主流架構的搭建--仿制QQ的UI架構

總之要搭建成這樣的,其實真正搭建起來很麻煩的,因為範圍比較大,視圖比較多。

一般實際開發中建議使用純代碼搭建,或者是一個控制器代碼對應一個xib視圖。

iOS之UI--主流架構的搭建--仿制QQ的UI架構

然後接着設定圖示和标題:

在第一個消息子控制器中

iOS之UI--主流架構的搭建--仿制QQ的UI架構
iOS之UI--主流架構的搭建--仿制QQ的UI架構

在第二個"聯系人"子控制器中

iOS之UI--主流架構的搭建--仿制QQ的UI架構
iOS之UI--主流架構的搭建--仿制QQ的UI架構

在第三個"動态"子控制器中,uitableview設定為static,然後:

iOS之UI--主流架構的搭建--仿制QQ的UI架構
iOS之UI--主流架構的搭建--仿制QQ的UI架構
iOS之UI--主流架構的搭建--仿制QQ的UI架構

最後運作動态圖展示效果:

iOS之UI--主流架構的搭建--仿制QQ的UI架構

補充:隐藏底部tabbar

iOS之UI--主流架構的搭建--仿制QQ的UI架構