仿新浪微博IOS用戶端（v5.2.8）——設定導覽列外觀

標籤：ios   仿新浪微博   uinavigationcontroll   

轉載請標明出處：http://blog.csdn.net/android_ls/article/details/45849447

聲明：仿新浪微博項目，所用所有圖片資源都來源於官方新浪微博IOS用戶端，編寫本應用的目的在於學習交流，如涉及侵權請告知，我會及時換掉用到的相關圖片。

一、 在Xcode6下添加.pch檔案       對於使用慣了之前版本Xcode的朋友來說，在系統提醒之下升級到Xcode 6之後，發現建立項目後Xcode不再幫我們建立.pch檔案了。可是我們已經習慣了，把一些在很多地方都用的宏寫到.pch檔案中，那麼沒有這個檔案該如何添加一個呢？下面先給我們的仿新浪微博項目添加一個.pch檔案，具體步驟如下：1、選中Supporting Files右鍵New File...，如

2、接下來選擇建立一個PCH檔案，如：

3、選擇Next、Create就建立完畢了。接下來修改設定檔，在搜尋方塊中輸入“Prefix Header”，在Prefix Header這一項，填寫上一步建立的pch檔案的相對路徑，修改完後如：

二、在上一篇的基礎上，設定導覽列外觀，具體實現如下：

1、建立WBNavigationController類，讓其繼承自UINavigationController。用我們自訂的WBNavigationController替換掉上一講中使用UINavigationController類的地方，具體代碼如下：

    // 使用系統預設的UINavigationController    //[self addChildViewController:[[UINavigationController alloc] initWithRootViewController:childViewController]];        // 使用我們自訂的導覽列(WBNavigationController繼承自UINavigationController)    WBNavigationController * navigationController = [[WBNavigationController alloc]initWithRootViewController:childViewController];    [self addChildViewController:navigationController];

2、在WBNavigationController.m檔案中添加，設定整個項目中所有UIBarButtonItem的外觀樣式，具體代碼如下：

#pragma mark 在運行時僅被觸發一次#pragma mark 值得注意的是在此之前，父類的方法已經被執行過一次了，所以不需要調用super的該函數。+ (void)initialize{    // 設定整個項目中所有UIBarButtonItem的外觀樣式    UIBarButtonItem *item = [UIBarButtonItem appearance];        // 設定在UIControlStateNormal下，導覽列文字的大小和顏色    [item setTitleTextAttributes:@{NSForegroundColorAttributeName:kColor(64, 64, 64),                                   NSFontAttributeName:[UIFont systemFontOfSize:15]}                                forState:UIControlStateNormal];        // 設定在UIControlStateHighlighted下，導覽列文字的大小和顏色    [item setTitleTextAttributes:@{NSForegroundColorAttributeName:kColor(253, 109, 10),                                   NSFontAttributeName:[UIFont systemFontOfSize:15]}                                forState:UIControlStateHighlighted];}

3、攔截所有push進來的控制器，設定除根控制器外的控制器的導覽列外觀，具體實現如下：

#pragma mark 重寫這個方法目的：能夠攔截所有push進來的控制器#pragma mark viewController這個參數是即將push進來的控制器- (void)pushViewController:(UIViewController *)viewController animated:(BOOL)animated{    if (self.viewControllers.count > 0) {        // 如果push進來的控制器viewController，不是根控制器                // 自動顯示和隱藏tabbar        viewController.hidesBottomBarWhenPushed = YES;                // 設定導覽列上左邊的返回按鈕        viewController.navigationItem.leftBarButtonItem = [UIBarButtonItem itemWithTarget:self action:@selector(back)            image:@"navigationbar_back_withtext"            highImage:@"navigationbar_back_withtext_highlighted"            title:self.title];    }        [super pushViewController:viewController animated:animated];}- (void)back{    [self popViewControllerAnimated:YES];}

4、設定首頁導覽列上的按鈕，具體實現如下：

////  HomeViewController.m//  SinaWeibo////  Created by android_ls on 15/5/17.//  Copyright (c) 2015年 android_ls. All rights reserved.////  首頁動態列表控制器#import "HomeViewController.h"#import "UIBarButtonItem+Category.h"#import "FriendAttentionStatusViewController.h"@interface HomeViewController ()@end@implementation HomeViewController- (void)viewDidLoad {    [super viewDidLoad];        // 設定導覽列左側的按鈕    self.navigationItem.leftBarButtonItem = [UIBarButtonItem leftBarButtonItemWithTarget:self         action:@selector(friendsearch)         image:@"navigationbar_friendsearch"         highImage:@"navigationbar_friendsearch_highlighted"];        // 設定導覽列右側的彈出下拉式功能表按鈕    self.navigationItem.rightBarButtonItem = [UIBarButtonItem rightBarButtonItemWithTarget:self         action:@selector(pop)         image:@"navigationbar_pop"         highImage:@"navigationbar_pop_highlighted"];}#pragma mark 開啟好友關注動態控制器-(void)friendsearch{    MyLog(@"使用者點擊了左側按鈕");        FriendAttentionStatusViewController *friendAttentionStatusVC = [[FriendAttentionStatusViewController alloc]init];    [self.navigationController pushViewController:friendAttentionStatusVC animated:YES];}#pragma mark 彈出下拉式功能表-(void)pop{    MyLog(@"使用者點擊了右側彈出下拉式功能表按鈕");    }@end

5、已實現的如下：

   

點擊首頁左側按鈕後：

    

點擊底部ToolBar中的我，如下：

點擊導覽列設定按鈕後，如下：

三、目前用到的其它檔案

1、自訂的UIView的分類，UIView+Category.h代碼如下：

////  UIView+Category.h//  SinaWeibo////  Created by android_ls on 15/5/19.//  Copyright (c) 2015年 android_ls. All rights reserved.//#import <UIKit/UIKit.h>@interface UIView (Category)@property (nonatomic, assign) CGFloat x;@property (nonatomic, assign) CGFloat y;@property (nonatomic, assign) CGFloat width;@property (nonatomic, assign) CGFloat height;@property (nonatomic, assign) CGPoint origin;@property (nonatomic, assign) CGSize size;@property (nonatomic, assign) CGFloat centerX;@property (nonatomic, assign) CGFloat centerY;@end

UIView+Category.m代碼如下：

////  UIView+Category.m//  SinaWeibo////  Created by android_ls on 15/5/19.//  Copyright (c) 2015年 android_ls. All rights reserved.//#import "UIView+Category.h"@implementation UIView (Category)- (void)setX:(CGFloat)x{    CGRect frame = self.frame;    frame.origin.x = x;    self.frame = frame;}- (CGFloat)x{    return self.frame.origin.x;}- (void)setY:(CGFloat)y{    CGRect frame = self.frame;    frame.origin.y = y;    self.frame = frame;}- (CGFloat)y{    return self.frame.origin.y;}- (void)setWidth:(CGFloat)width{    CGRect frame = self.frame;    frame.size.width = width;    self.frame = frame;}- (CGFloat)width{    return self.frame.size.width;}- (void)setHeight:(CGFloat)height{    CGRect frame = self.frame;    frame.size.height = height;    self.frame = frame;}- (CGFloat)height{    return self.frame.size.height;}- (void)setOrigin:(CGPoint)origin{    CGRect frame = self.frame;    frame.origin = origin;    self.frame = frame;}- (CGPoint)origin{    return self.frame.origin;}- (void)setSize:(CGSize)size{    CGRect frame = self.frame;    frame.size = size;    self.frame = frame;}- (CGSize)size{    return self.frame.size;}- (void)setCenterX:(CGFloat)centerX{    CGPoint center = self.center;    center.x = centerX;    self.center = center;}- (CGFloat)centerX{    return self.center.x;}- (void)setCenterY:(CGFloat)centerY{    CGPoint center = self.center;    center.y = centerY;    self.center = center;}- (CGFloat)centerY{    return self.center.y;}@end

2、自訂的UIBarButtonItem的分類，UIBarButtonItem+Category.h 代碼如下：

////  UIBarButtonItem+Category.h//  SinaWeibo////  Created by android_ls on 15/5/19.//  Copyright (c) 2015年 android_ls. All rights reserved.//#import <UIKit/UIKit.h>@interface UIBarButtonItem (Category)#pragma mark 設定左側文字和圖片組成的按鈕的外觀樣式+ (UIBarButtonItem *)itemWithTarget:(id)target action:(SEL)action image:(NSString *)image highImage:(NSString *)highImage title:(NSString *)title;#pragma mark 設定左側按鈕的外觀樣式（只有圖片）+ (UIBarButtonItem *)leftBarButtonItemWithTarget:(id)target action:(SEL)action image:(NSString *)image highImage:(NSString *)highImage;#pragma mark 設定右側按鈕的外觀樣式（只有圖片）+ (UIBarButtonItem *)rightBarButtonItemWithTarget:(id)target action:(SEL)action image:(NSString *)image highImage:(NSString *)highImage;@end

UIBarButtonItem+Category.m代碼如下：

////  UIBarButtonItem+Category.m//  SinaWeibo////  Created by android_ls on 15/5/19.//  Copyright (c) 2015年 android_ls. All rights reserved.//#import "UIBarButtonItem+Category.h"@implementation UIBarButtonItem (Category)#pragma mark 設定左側文字和圖片組成的按鈕的外觀樣式+ (UIBarButtonItem *)itemWithTarget:(id)target action:(SEL)action image:(NSString *)image highImage:(NSString *)highImage title:(NSString *)title{    UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];    [btn addTarget:target action:action forControlEvents:UIControlEventTouchUpInside];    [btn setContentHorizontalAlignment:UIControlContentHorizontalAlignmentLeft];        [btn.titleLabel setFont:[UIFont systemFontOfSize:15]];    [btn setTitle:title?title:@"返回" forState:UIControlStateNormal];    [btn setTitle:title?title:@"返回" forState:UIControlStateHighlighted];    [btn setTitleColor:kColor(64, 64, 64) forState:UIControlStateNormal];    [btn setTitleColor:kColor(253, 109, 10) forState:UIControlStateHighlighted];        [btn setImage:[UIImage imageNamed:image] forState:UIControlStateNormal];    [btn setImage:[UIImage imageNamed:highImage] forState:UIControlStateHighlighted];        // 設定尺寸    btn.size = CGSizeMake(60, 44);        // 調整UIBarButtonItem左側的外邊距    CGFloat left = -8;    btn.imageEdgeInsets = UIEdgeInsetsMake(0, left, 0, 0);    btn.titleEdgeInsets = UIEdgeInsetsMake(0, left, 0, 0);        return [[UIBarButtonItem alloc] initWithCustomView:btn];}#pragma mark 設定左側按鈕的外觀樣式（只有圖片）+ (UIBarButtonItem *)leftBarButtonItemWithTarget:(id)target action:(SEL)action image:(NSString *)image highImage:(NSString *)highImage{    UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];    [btn setContentHorizontalAlignment:UIControlContentHorizontalAlignmentLeft];    [btn addTarget:target action:action forControlEvents:UIControlEventTouchUpInside];        [btn setImage:[UIImage imageNamed:image] forState:UIControlStateNormal];    [btn setImage:[UIImage imageNamed:highImage] forState:UIControlStateHighlighted];        // 設定尺寸    btn.size = CGSizeMake(60, 44);        // 調整UIBarButtonItem右側的外邊距    CGFloat left = -8;    btn.imageEdgeInsets = UIEdgeInsetsMake(0, left, 0, 0);    return [[UIBarButtonItem alloc] initWithCustomView:btn];}#pragma mark 設定右側按鈕的外觀樣式（只有圖片）+ (UIBarButtonItem *)rightBarButtonItemWithTarget:(id)target action:(SEL)action image:(NSString *)image highImage:(NSString *)highImage{    UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];    [btn setContentHorizontalAlignment:UIControlContentHorizontalAlignmentRight];    [btn addTarget:target action:action forControlEvents:UIControlEventTouchUpInside];    [btn setImage:[UIImage imageNamed:image] forState:UIControlStateNormal];    [btn setImage:[UIImage imageNamed:highImage] forState:UIControlStateHighlighted];        // 設定尺寸    btn.size = CGSizeMake(60, 44);        // 調整UIBarButtonItem右側的外邊距    CGFloat right = -8;    btn.imageEdgeInsets = UIEdgeInsetsMake(0, 0, 0, right);    return [[UIBarButtonItem alloc] initWithCustomView:btn];}@end

3、info.pch檔案內容如下：

////  info.pch//  SinaWeibo////  Created by android_ls on 15/5/19.//  Copyright (c) 2015年 android_ls. All rights reserved.//#ifndef SinaWeibo_info_pch#define SinaWeibo_info_pch#ifdef __OBJC__#import <UIKit/UIKit.h>#import <Foundation/Foundation.h>#pragma mark 匯入UIView的擴充類#import "UIView+Category.h"#endif// 獲得RGB顏色#define kColor(r, g, b) [UIColor colorWithRed:(r)/255.0 green:(g)/255.0 blue:(b)/255.0 alpha:1]// 日誌輸出宏定義#ifdef DEBUG// 調試狀態#define MyLog(...) NSLog(__VA_ARGS__)#else// 發布狀態#define MyLog(...)#endif#endif

4、ProfileViewController.m檔案的源碼如下：

<span style="font-size:14px;">////  ProfileViewController.m//  SinaWeibo////  Created by android_ls on 15/5/17.//  Copyright (c) 2015年 android_ls. All rights reserved.//#import "ProfileViewController.h"#import "SettingViewController.h"@interface ProfileViewController ()@end@implementation ProfileViewController- (void)viewDidLoad {    [super viewDidLoad];         // 設定導覽列右側的設定按鈕     UIBarButtonItem * barButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"設定" style:0 target:self action:@selector(setting)];    [barButtonItem setTitleTextAttributes:@{NSForegroundColorAttributeName:kColor(253, 109, 10),                                   NSFontAttributeName:[UIFont systemFontOfSize:15]}                        forState:UIControlStateNormal];    self.navigationItem.rightBarButtonItem = barButtonItem;        }- (void)setting{    MyLog(@"使用者點擊了設定按鈕");    SettingViewController * settingViewController = [[SettingViewController alloc]init];    [self.navigationController pushViewController:settingViewController animated:YES];}@end</span><span style="font-size:18px;color: rgb(0, 132, 0);"></span>

時候不早了，今天就先到這裡，晚安。

源碼：http://download.csdn.net/detail/android_ls/8718359

仿新浪微博IOS用戶端（v5.2.8）——設定導覽列外觀