iOS新聞客戶端教程5-Home主頁

在iOS App中，常用的主頁佈局是上面是導航欄，下面是TabBar。本教程將介紹如何開發一款這樣的新聞主頁。

導航欄

打開之前基類裏的BaseController類，在.m文件中增加下面代碼
BaseController.m

-(void)viewDidLoad
{
    [super viewDidLoad];
    [self setNavigationLeft:@"NavigationBell.png" sel:nil];
    [self setNavigationRight:@"NavigationSquare.png"];
    //[self setNavigationTitleImage:@"NavBarIcon.png"];
}

-(void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated];
    [self setNavBarImage];
    [[UIApplication sharedApplication] setStatusBarHidden:NO];
    [self setStatusBarStyle:UIStatusBarStyleLightContent];

}

- (void)setNavBarImage
{
    UIImage *image = [UIImage imageNamed:[Global isSystemLowIOS7]?@"NavigationBar44.png":@"NavigationBar64.png"];
    [self.navigationController.navigationBar setBackgroundImage:image forBarMetrics:UIBarMetricsDefault];
    [self.navigationController.navigationBar setTintColor:[UIColor whiteColor]];

    NSDictionary *attribute = @{
        NSForegroundColorAttributeName:[UIColor whiteColor],
        NSFontAttributeName:[UIFont systemFontOfSize:18]
        };

    [self.navigationController.navigationBar setTitleTextAttributes:attribute];
}

- (void)setNavigationLeft:(NSString *)imageName sel:(SEL)sel
{
    UIBarButtonItem *item = [[UIBarButtonItem alloc] initWithCustomView:[self customButton:imageName selector:sel]];

    self.navigationItem.leftBarButtonItem = item;
}

- (void)setNavigationRight:(NSString *)imageName
{
    UIBarButtonItem *item = [[UIBarButtonItem alloc] initWithCustomView:[self customButton:imageName selector:@selector(doRight:)]];

    self.navigationItem.rightBarButtonItem = item;
}

- (UIButton *)customButton:(NSString *)imageName
                  selector:(SEL)sel
{
    UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];

    btn.frame = CGRectMake(0, 0, 44, 44);
    [btn setImage:[UIImage imageNamed:imageName] forState:UIControlStateNormal];
    [btn addTarget:self action:sel forControlEvents:UIControlEventTouchUpInside];

    return btn;
}

這樣每個繼承BaseController子類，會在初始化的時候，就設置它的navigationBar了。這裏再一次證明了封裝的好處。

TabBar

TabBar主要是爲了在有限的空間上展示更多的內容，類似Web界面的選項卡。我們主頁有5個tab，分別是 新聞 - 閱讀 - 視聽 - 發現 - 我。那麼我們首先要定義5個ViewController來分別代表這個5個tab。
新建以下幾個類，都繼承BaseController
NewsController
ReaderController
VoiceController
DiscoveryController
MyController
暫時這5個類什麼都不做

爲了更好的維護TabBar，我們定義TabBar加載的類在plist文件中，在Resources下新建TabBarControllers.plist，輸入以下內容：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<array>
    <dict>
        <key>ClassName</key>
        <string>NewsController</string>
        <key>Title</key>
        <string>新聞</string>
        <key>Image</key>
        <string>NewsIcon.png</string>
        <key>SelectImage</key>
        <string>NewsIconSelect.png</string>
    </dict>
    <dict>
        <key>ClassName</key>
        <string>ReaderController</string>
        <key>Title</key>
        <string>閱讀</string>
        <key>Image</key>
        <string>ReaderIcon.png</string>
        <key>SelectImage</key>
        <string>ReaderIconSelect.png</string>
    </dict>
    <dict>
        <key>ClassName</key>
        <string>VoiceController</string>
        <key>Title</key>
        <string>視聽</string>
        <key>Image</key>
        <string>VoiceIcon.png</string>
        <key>SelectImage</key>
        <string>VoiceIconSelect.png</string>
        <key>UnLoad</key>
        <false/>
    </dict>
    <dict>
        <key>ClassName</key>
        <string>DiscoveryController</string>
        <key>Title</key>
        <string>發現</string>
        <key>Image</key>
        <string>DiscoveryIcon.png</string>
        <key>SelectImage</key>
        <string>DiscoveryIconSelect.png</string>
    </dict>
    <dict>
        <key>ClassName</key>
        <string>MyController</string>
        <key>Title</key>
        <string>我</string>
        <key>Image</key>
        <string>MyIcon.png</string>
        <key>SelectImage</key>
        <string>MyIconSelect.png</string>
    </dict>
</array>
</plist>

這樣以後要增加一個tab，只需要增加一個dict配置就可以了。
現在各個tab的類都有了，那麼我們還差一個主頁，新建一個主頁HomeController，注意，HomeController要繼承UITabBarViewController

-(id)init
{
    if(self = [super init]){
        [self addTabControllers];
    }
    return self;
}

-(void)addTabControllers
{
    self.tabBar.tintColor = [UIColor redColor];
    self.viewControllers = [PageInfo pageControllers];

}

將加載每個Tab對應類的操作，封裝在Model層的PageInfo類中。
新建PageInfo類

-(instancetype) initWithDict:(NSDictionary *)dict
{
    PageInfo *info = [[PageInfo alloc] init];

    info.ID = [dict objectForKey:@"ClassName"];
    info.name = [dict objectForKey:@"Title"];
    info.image = [dict objectForKey:@"Image"];
    info.selectImage = [dict objectForKey:@"SelectImage"];
    info.unLoad = [[dict objectForKey:@"UnLoad"] boolValue];

    return info;
}
//從plist中讀取要加載的類
+(NSArray *)pages
{
    NSString *configFile = [[NSBundle mainBundle] pathForResource:@"TabBarPages" ofType:@"plist"];
    NSArray *configs = [NSArray arrayWithContentsOfFile:configFile];
    NSMutableArray *pages = [[NSMutableArray alloc] init];

    if(configs.count <=0){
        BASE_INFO_FUN(@"TabBarConfig未設置");
    }
    for (NSDictionary *dict in configs) {
        [pages addObject:[PageInfo infoWithDict:dict]];
    }
    return pages;
}

+ (NSArray *)pageControllers
{
    NSMutableArray *controllers = [[NSMutableArray alloc] init];
    NSArray *pages = [self pages];
    UINavigationController *nav = nil;
    UIViewController *pageController = nil;

    for (PageInfo *pageInfo in pages) {
        if(pageInfo.unLoad){
            if(pageInfo.unLoad){
                continue;
            }
        }
        pageController = [[NSClassFromString(pageInfo.ID) alloc] init];
        nav = [[UINavigationController alloc]initWithRootViewController:pageController];
        pageController.title = pageInfo.name;
        pageController.tabBarItem.image = [UIImage imageNamed:pageInfo.image];
        [controllers addObject:nav];
    }
    return controllers;
}

這裏PageInfo從plist文件中讀取需要加載的類，非常靈活，方便擴展。

接下來，我們修改App加載廣告後，啓動Home頁
AppDelegate.m

-(void) showHomePage
{
    HomePage *homePage = [[HomePage alloc] init];
//    UINavigationController *navController = [[UINavigationController alloc] initWithRootViewController:homePage];
    self.window.rootViewController = homePage;
    [self.window makeKeyAndVisible];
}

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    //創建程序window
    self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
    [self showHomePage];
    [self.window makeKeyAndVisible];
    return YES;
}

Command + R 運行下，我們看到如下界面：


這樣，我們一個主頁就開發完成了。

github源碼：https://github.com/tangthis/NewsReader
個人技術分享微信公衆號，歡迎關注一起交流