[置顶] 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
个人技术分享微信公众号，欢迎关注一起交流