[UI組件基礎] 製作一個帶有底部導航以及頂部導航的single view application

標籤：

　　最近開始寫部落格了，把我學習到的東西進行匯總和總結。

　　很多初學iOS手機應用程式開發的剛開始肯定是抓頭的，搞不好，是大片大片的頭髮往下扯。

　　因為很迷茫啊，都不知道要怎麼弄，有真機有大神幫忙的人還好說，沒有機器又沒有朋友的人就慘了，完全不知道從何開始。

　　其實我覺得把，如果是真想學，最次最次，你最少弄個XCode用用看。

　　前期如果沒有XCode，沒有蘋果電腦，也可以先從基礎文法開始學起，其實oc文法也很蛋疼的，什麼*啊，alloc啊init啊。估計跟大家想象的世界完全不同，學了java的人再來看oc，會有摔鍵盤的衝動。

　　好了，開始今天的正題把，其實我想要說的是，如果想要做一個目前流行的app應用主介面架構，該如何去做？

　　先說一句，我不會拖控制項的，基本靠手打。

　　第一步，先在XCode中建立一個single view application,即視圖應用程式。

　　第二步，點擊AppDelegate.m檔案，在- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions方法中添加代碼，效果如下：

 1 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { 2     // Override point for customization after application launch. 3      4     //1.建立視窗 5     self.window = [[UIWindow alloc]init]; 6     //2.設定視窗位置，大小 7     self.window.frame = [UIScreen mainScreen].bounds; 8      9     //3.顯示視窗10     [self.window makeKeyAndVisible];11     //4.設定主window的根視圖控制器為自訂的myTabViewController（自訂的UITabBarController）12     self.window.rootViewController = [[myTabViewController alloc]init];13 14     return YES;15 }

　　這裡其實就是添加了4句代碼，作用是設定主視窗的大小，位置，並且為主視窗設定根視圖控制器。

　　第三步，自訂一個UITabBarController，所謂UITabBarController就是app應用裡常見的底部導航內容，如下所示：

　　

　　上面的圖片中紅色方框中框中的就是UITabBarController具體顯示效果，也就是大家平時接觸到看到得樣子。但是實際上，UITabBarController包含了多個子視圖控制器，即ChildViewController，而每一個ChildViewController都跟UITabBarController的大小一致，絕不是只是我上面的方框這麼點大，在上面的代碼裡面，我寫了一句代碼：self.window.rootViewController = [[myTabViewController alloc]init];  也就是說，我把自訂的UITabBarController設定成了主視窗的根視圖控制器，而主視窗和手機螢幕一樣大，所以，在這篇代碼裡面UITabBarController的大小就是和手機螢幕一樣大了，每一個ChildViewController也是和手機螢幕一樣大。

　　那麼，讓我們來添加自訂的myTabViewController把，整個添加過程我都了，對不熟悉的朋友還是有協助的：

　　

　　

　　

　　按照上面樣本圖的步驟，我們就建立好了一個自訂的UITabBarController組件myTabViewController了

 

　　第四步，點擊myTabViewController.m檔案添加代碼來實現具體細節。

　　首先，一個UITabBarController組件剛開始的時候是什麼都沒有的，如果你現在運行，你會看到一個黑色的介面，因為什麼都沒有。

　　如果你想要新增內容，就要為UITabBarController組件添加ChildViewController(子視圖控制器)，也就是底部的內容，在這裡我不止想要添加底部導航內容，我連頂部導覽列也想要設定，那麼我們就應該心裡有一個設計：首先，顯示給使用者觀看的肯定是一個UIViewController，如果想要添加頂部導覽列，那麼我們就應該將給使用者觀看和使用的這個UIViewController包到一個UINavigationController(導航視圖控制器)中去，如果想要顯示底部導航內容，那麼我們就要將包含了給使用者觀看和使用的這個UIViewController的UINavigationController作為一個ChildViewController(子視圖控制器)添加到UITabBarController中去。下面，我就將這一個過程的代碼放出來，請大家仔細觀看並閱讀注釋：

 1 #import "myTabViewController.h" 2  3 @interface myTabViewController () 4  5 @end 6  7 @implementation myTabViewController 8  9 - (void)viewDidLoad {10     [super viewDidLoad];11     12     /**13      建立3個UIViewController，1個UITableViewController，並執行封裝的addChildVC方法14      */15     UIViewController* home=[[UIViewController alloc]init];16     [self addChildVC:home title:@"首頁" image:@"tabbar_home" selectedImage:@"tabbar_home_selected"];17     18     UITableViewController* msg=[[UITableViewController alloc]init];19     [self addChildVC:msg title:@"訊息" image:@"tabbar_message_center" selectedImage:@"tabbar_message_center_selected"];20     21     UIViewController* discover=[[UIViewController alloc]init];22     [self addChildVC:discover title:@"發現" image:@"tabbar_discover" selectedImage:@"tabbar_discover_selected"];23     24     UIViewController* profile=[[UIViewController alloc]init];25     [self addChildVC:profile title:@"我" image:@"tabbar_profile" selectedImage:@"tabbar_profile_selected"];26 }27 /**28  *  為當前控制器產生並添加子控制器，該控制被包含在一個UINavigationController中，然後再被添加到當前控制器（UITabBarController）29  *30  *  @param childVc       需要進行添加的子控制器31  *  @param title         導航標題與tabbar標題32  *  @param image         普通形態下的tabbarItem的圖片33  *  @param selectedImage 高亮顯示的tabbarItem的圖片34  */35 -(void)addChildVC:(UIViewController*)childVc title:(NSString*)title image:(NSString*)image selectedImage:(NSString*)selectedImage36 {37     //設定導航標題與下標題一致38     childVc.navigationItem.title=title;39     childVc.tabBarItem.title=title;40     //childVc.title=title;//這一句可以完成上面兩句代碼的作用41     42     //設定子控制器的tabbarItem（即在下方顯示的一排導航內容）正常顯示圖片43     //imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal（圖片的表現模式:原圖顯示）44     //注意：如果直接給一張圖片會被渲染成預設的顏色，所以要設定為不要被渲染的模式45     //即imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal46     childVc.tabBarItem.image = [[UIImage imageNamed:image] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];47     //設定子控制器的tabbarItem的高亮顯示圖片48     childVc.tabBarItem.selectedImage = [[UIImage imageNamed:selectedImage] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];49     //childVc.view.backgroundColor = RandomColor;50     //設定未選中文字的樣式51     NSMutableDictionary* textAttrs=[NSMutableDictionary dictionary];52     textAttrs[NSForegroundColorAttributeName] = [UIColor blackColor];53     [childVc.tabBarItem setTitleTextAttributes:textAttrs forState:UIControlStateNormal];54     //設定選中文字的樣式55     NSMutableDictionary* seltextAttrs=[NSMutableDictionary dictionary];56     seltextAttrs[NSForegroundColorAttributeName] = [UIColor orangeColor];57     [childVc.tabBarItem setTitleTextAttributes:seltextAttrs forState:UIControlStateSelected];58     59     //將子控制器封裝到一個UINavigationController中60     UINavigationController* nav=[[UINavigationController alloc] initWithRootViewController:childVc];61     62     //將封裝好的UINavigationController添加到本控制器的子視圖控制器中63     [self addChildViewController:nav];64 }

　　通過這篇代碼，大家可以發現，OC其實確實有點蛋疼，但是，如果研究透了，你就會發現，一切都是有原因的，希望這篇部落格對大家有用，如果有什麼意見或者建議，歡迎大家來找我討論與學習：QQ:1750587828

　　再說一句把，感覺iOS開發就是這樣的，首先，你得節省記憶體使用量和流量的使用，第二，介面的設計越簡單越傻瓜越好看越好，第三，代碼方面更是，系統提供的組件解決不了就自訂，自訂如果解決麻煩就用第三方。我的一點感慨把，與大家共勉之。

 

[UI組件基礎] 製作一個帶有底部導航以及頂部導航的single view application