A.搭建基本环境
项目结构:
![[iOS微博项目 - 1.0] - 搭建基本框架 [iOS微博项目 - 1.0] - 搭建基本框架](https://image.miaokee.com:8440/aHR0cHM6Ly9pbWFnZXMwLmNuYmxvZ3MuY29tL2Jsb2cvNjQ4NDczLzIwMTUwMi8wMTAwMTUxMzM5NDQ1MTIucG5n.png?w=700&webp=1)
1.使用代码构建UI,不使用storyboard
![[iOS微博项目 - 1.0] - 搭建基本框架 [iOS微博项目 - 1.0] - 搭建基本框架](https://image.miaokee.com:8440/aHR0cHM6Ly9pbWFnZXMwLmNuYmxvZ3MuY29tL2Jsb2cvNjQ4NDczLzIwMTUwMi8wMTAwMTUxODE1OTEzMDMucG5n.png?w=700&webp=1)
AppDelegate:
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
// Override point for customization after application launch. // 启动后显示状态栏
UIApplication *app = [UIApplication sharedApplication];
app.statusBarHidden = NO; // 设置window
self.window = [[UIWindow alloc] init];
self.window.frame = [UIScreen mainScreen].bounds; [self.window makeKeyAndVisible]; return YES;
}
2.使用LaunchImage作为启动图,不使用xib
![[iOS微博项目 - 1.0] - 搭建基本框架 [iOS微博项目 - 1.0] - 搭建基本框架](https://image.miaokee.com:8440/aHR0cHM6Ly9pbWFnZXMwLmNuYmxvZ3MuY29tL2Jsb2cvNjQ4NDczLzIwMTUwMi8wMTAwMTUyMjU1MDE1NzcucG5n.png?w=700&webp=1)
3.配置图标AppIcon
![[iOS微博项目 - 1.0] - 搭建基本框架 [iOS微博项目 - 1.0] - 搭建基本框架](https://image.miaokee.com:8440/aHR0cHM6Ly9pbWFnZXMwLmNuYmxvZ3MuY29tL2Jsb2cvNjQ4NDczLzIwMTUwMi8wMTAwMTUyNjY3NTE1MzcucG5n.png?w=700&webp=1)
不使用系统渲染图标
![[iOS微博项目 - 1.0] - 搭建基本框架 [iOS微博项目 - 1.0] - 搭建基本框架](https://image.miaokee.com:8440/aHR0cHM6Ly9pbWFnZXMwLmNuYmxvZ3MuY29tL2Jsb2cvNjQ4NDczLzIwMTUwMi8wMTAwMTUyOTg3ODc1ODIucG5n.png?w=700&webp=1)
4.设置屏幕方向-->只有竖向
5.启动时隐藏状态栏
![[iOS微博项目 - 1.0] - 搭建基本框架 [iOS微博项目 - 1.0] - 搭建基本框架](https://image.miaokee.com:8440/aHR0cHM6Ly9pbWFnZXMwLmNuYmxvZ3MuY29tL2Jsb2cvNjQ4NDczLzIwMTUwMi8wMTAwMTUzNDQ0MTkxNDIucG5n.png?w=700&webp=1)
B.项目分层 & 创建PCH
1.项目分层
为了让在Finder中显示跟Xcode中显示都是分层效果,首先在Finder中建文件目录层次
![[iOS微博项目 - 1.0] - 搭建基本框架 [iOS微博项目 - 1.0] - 搭建基本框架](https://image.miaokee.com:8440/aHR0cHM6Ly9pbWFnZXMwLmNuYmxvZ3MuY29tL2Jsb2cvNjQ4NDczLzIwMTUwMi8wMTAwMTUzNzUxOTg5MTYucG5n.png?w=700&webp=1)
再把文件目录拖入Xcode
![[iOS微博项目 - 1.0] - 搭建基本框架 [iOS微博项目 - 1.0] - 搭建基本框架](https://image.miaokee.com:8440/aHR0cHM6Ly9pbWFnZXMwLmNuYmxvZ3MuY29tL2Jsb2cvNjQ4NDczLzIwMTUwMi8wMTAwMTU0MTA5NzY3NzYucG5n.png?w=700&webp=1)
2.创建并配置一个pch文件,来用声明全局公共宏命令
![[iOS微博项目 - 1.0] - 搭建基本框架 [iOS微博项目 - 1.0] - 搭建基本框架](https://image.miaokee.com:8440/aHR0cHM6Ly9pbWFnZXMwLmNuYmxvZ3MuY29tL2Jsb2cvNjQ4NDczLzIwMTUwMi8wMTAwMTU0NTkyNTQzNTEucG5n.png?w=700&webp=1)
配置:
![[iOS微博项目 - 1.0] - 搭建基本框架 [iOS微博项目 - 1.0] - 搭建基本框架](https://image.miaokee.com:8440/aHR0cHM6Ly9pbWFnZXMwLmNuYmxvZ3MuY29tL2Jsb2cvNjQ4NDczLzIwMTUwMi8wMTAwMTU1MDcwNjY5MTIucG5n.png?w=700&webp=1)
C.添加子控制器
1.为每个Tab创建一个集成UITableViewController的类
分别是:首页、信息、发现、我
2.创建一个集成UITabBarController的类作为window的rootViewController
AppDelegate:
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
// Override point for customization after application launch. // 启动后显示状态栏
UIApplication *app = [UIApplication sharedApplication];
app.statusBarHidden = NO; // 设置window
self.window = [[UIWindow alloc] init];
self.window.frame = [UIScreen mainScreen].bounds; // 创建根控制器
HVWTabBarViewController *tabVC = [[HVWTabBarViewController alloc] init];
self.window.rootViewController = tabVC; [self.window makeKeyAndVisible]; return YES;
}
3.在上述的TabBarController中创建并添加子控件
HVWTabBarViewController.m :
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view. // 添加子控制器
// 首页
HVWHomeViewController *homeVC = [[HVWHomeViewController alloc] init];
homeVC.view.backgroundColor = [UIColor redColor];
homeVC.title = @"首页";
[self addChildViewController:homeVC]; // 消息
HVWMessageViewController *messageVC = [[HVWMessageViewController alloc] init];
messageVC.view.backgroundColor = [UIColor blueColor];
messageVC.title = @"消息";
[self addChildViewController:messageVC]; // 发现
HVWDiscoverViewController *discoverVC = [[HVWDiscoverViewController alloc] init];
discoverVC.view.backgroundColor = [UIColor yellowColor];
discoverVC.title = @"发现";
[self addChildViewController:discoverVC]; // 我
HVWProfileViewController *profileVC = [[HVWProfileViewController alloc] init];
profileVC.view.backgroundColor = [UIColor greenColor];
profileVC.title = @"我";
[self addChildViewController:profileVC];
}
![[iOS微博项目 - 1.0] - 搭建基本框架 [iOS微博项目 - 1.0] - 搭建基本框架](https://image.miaokee.com:8440/aHR0cHM6Ly9pbWFnZXMwLmNuYmxvZ3MuY29tL2Jsb2cvNjQ4NDczLzIwMTUwMi8wMTAwMTU1NTY3NTc1MzAucG5n.png?w=700&webp=1)
4.为tab添加图片
1.需求:要区分iOS7之前及之后的系统,使用不同的图片
这里创建一个UIImage的分类,新写一个加载图片的的方法,用来自动检测系统版本并加载不同的图片
(1)iOS6使用普通图片, iOS7及以上系统版本使用的是带有"_os7"结尾的图片
![[iOS微博项目 - 1.0] - 搭建基本框架 [iOS微博项目 - 1.0] - 搭建基本框架](https://image.miaokee.com:8440/aHR0cHM6Ly9pbWFnZXMwLmNuYmxvZ3MuY29tL2Jsb2cvNjQ4NDczLzIwMTUwMi8wMTAwMTU1ODgwMDIzMTgucG5n.png?w=700&webp=1)
(2)添加一条用来判别系统版本的宏
HVWWeibo-Prefix.pch:
#ifndef HVWWeibo_HVWWeibo_Prefix_pch
#define HVWWeibo_HVWWeibo_Prefix_pch // Include any system framework and library headers here that should be included in all compilation units.
// You will also need to set the Prefix Header build setting of one or more of your targets to reference this file. // 判别是否iOS7或以上版本系统
#define iOS7 ([UIDevice currentDevice].systemVersion.doubleValue >= 7.0) #endif
(3)创建UIImage+Extension分类
UIImage+Extension.m:
#import "UIImage+Extension.h" @implementation UIImage (Extension) + (UIImage *) imageWithNamed:(NSString *) imageName {
UIImage *image = nil; // 如果是iOS7或以上版本
if (iOS7) {
image = [UIImage imageNamed:[NSString stringWithFormat:@"%@_os7", imageName]];
} // 如果是iOS6
if (nil == image) {
image = [UIImage imageNamed:imageName];
} return image;
} @end
(4)添加tab图标
封装一下创建子控制器的代码
HVWTabBarViewController.m:
#import "HVWTabBarViewController.h"
#import "HVWHomeViewController.h"
#import "HVWMessageViewController.h"
#import "HVWDiscoverViewController.h"
#import "HVWProfileViewController.h"
#import "UIImage+Extension.h" @interface HVWTabBarViewController () @end @implementation HVWTabBarViewController - (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view. // 添加子控制器
// 首页
HVWHomeViewController *homeVC = [[HVWHomeViewController alloc] init];
[self addChildViewController:homeVC WithTitle:@"首页" image:@"tabbar_home" seletectedImage:@"tabbar_home_selected"]; // 消息
HVWMessageViewController *messageVC = [[HVWMessageViewController alloc] init];
[self addChildViewController:messageVC WithTitle:@"消息" image:@"tabbar_message_center" seletectedImage:@"tabbar_message_center_selected"]; // 发现
HVWDiscoverViewController *discoverVC = [[HVWDiscoverViewController alloc] init];
[self addChildViewController:discoverVC WithTitle:@"发现" image:@"tabbar_discover" seletectedImage:@"tabbar_discover_selected"]; // 我
HVWProfileViewController *profileVC = [[HVWProfileViewController alloc] init];
[self addChildViewController:profileVC WithTitle:@"我" image:@"tabbar_profile" seletectedImage:@"tabbar_profile_selected"]; } /** 添加tab子控制器 */
- (void) addChildViewController:(UIViewController *) viewController WithTitle:(NSString *) title image:(NSString *) imageName seletectedImage:(NSString *) selectedImageName { // 设置随机背景色
viewController.view.backgroundColor = [UIColor colorWithRed:arc4random_uniform()/255.0 green:arc4random_uniform()/255.0 blue:arc4random_uniform()/255.0 alpha:1.0]; // 设置标题
viewController.title = title;
// 设置图标
viewController.tabBarItem.image = [UIImage imageWithNamed:imageName]; // 被选中时图标
UIImage *selectedImage = [UIImage imageWithNamed:selectedImageName];
// 如果是iOS7,不要渲染被选中的tab图标(iOS7中会自动渲染成为蓝色)
if (iOS7) {
selectedImage = [selectedImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
}
viewController.tabBarItem.selectedImage = selectedImage; // 添加子控制器
[self addChildViewController:viewController];
} @end
![[iOS微博项目 - 1.0] - 搭建基本框架 [iOS微博项目 - 1.0] - 搭建基本框架](https://image.miaokee.com:8440/aHR0cHM6Ly9pbWFnZXMwLmNuYmxvZ3MuY29tL2Jsb2cvNjQ4NDczLzIwMTUwMi8wMTAwMTYwMTkyNTYxMDYucG5n.png?w=700&webp=1)
D.添加导航控制器
1.只是在每个tab的controller上包装了一个UINavigationController
HVWTabBarViewController.m:
/** 添加tab子控制器 */
- (void) addChildViewController:(UIViewController *) viewController WithTitle:(NSString *) title image:(NSString *) imageName seletectedImage:(NSString *) selectedImageName { // 设置随机背景色
viewController.view.backgroundColor = [UIColor colorWithRed:arc4random_uniform()/255.0 green:arc4random_uniform()/255.0 blue:arc4random_uniform()/255.0 alpha:1.0]; // 设置标题,直接设置title可以同时设置tabBarItem和navigationItem的title
// viewController.tabBarItem.title = title;
// viewController.navigationItem.title = title;
viewController.title = title; // 设置图标
viewController.tabBarItem.image = [UIImage imageWithNamed:imageName]; // 被选中时图标
UIImage *selectedImage = [UIImage imageWithNamed:selectedImageName];
// 如果是iOS7,不要渲染被选中的tab图标(iOS7中会自动渲染成为蓝色)
if (iOS7) {
selectedImage = [selectedImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
}
viewController.tabBarItem.selectedImage = selectedImage; // 添加子控制器
UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController:viewController];
[self addChildViewController:nav];
}
![[iOS微博项目 - 1.0] - 搭建基本框架 [iOS微博项目 - 1.0] - 搭建基本框架](https://image.miaokee.com:8440/aHR0cHM6Ly9pbWFnZXMwLmNuYmxvZ3MuY29tL2Jsb2cvNjQ4NDczLzIwMTUwMi8wMTAwMTYwNDY3NTkwNzkucG5n.png?w=700&webp=1)
2.进入非NavigationController的rootViewController的时候,隐藏底部的TabBar
自定义一个集成UINavigationController的类,代替原来的原生类
重写pushViewController方法,当push的时候隐藏TabBar
#mark:此方法可以作用与所有的非rootViewController,非常好用
![[iOS微博项目 - 1.0] - 搭建基本框架 [iOS微博项目 - 1.0] - 搭建基本框架](https://image.miaokee.com:8440/aHR0cHM6Ly9pbWFnZXMwLmNuYmxvZ3MuY29tL2Jsb2cvNjQ4NDczLzIwMTUwMi8wMTAwMTYwOTUwMzY2NTUuZ2lm.gif?w=700&webp=1)
HVWNavigationViewController.m:
#import "HVWNavigationViewController.h" @interface HVWNavigationViewController () @end @implementation HVWNavigationViewController - (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
} - (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
} /** 重写push方法 */
- (void)pushViewController:(UIViewController *)viewController animated:(BOOL)animated {
// 如果不是根控制器,隐藏TabBar
if (self.viewControllers.count > ) {
// 注意这里不是self(navigationController),是push出来的ViewContoller隐藏TabBar
viewController.hidesBottomBarWhenPushed = YES;
} // 最后一定要调用父类的方法
[super pushViewController:viewController animated:animated];
} @end
E.添加导航栏按钮
需要给各个Tab还有其下的页面添加导航栏按钮
1.在pch文件添加一个随机颜色宏定义和一个debug模式下的log函数
// HVWWeibo-Prefix.pch
#ifndef HVWWeibo_HVWWeibo_Prefix_pch
#define HVWWeibo_HVWWeibo_Prefix_pch // Include any system framework and library headers here that should be included in all compilation units.
// You will also need to set the Prefix Header build setting of one or more of your targets to reference this file. #ifdef __OBJC__
#import <UIKit/UIKit.h>
#import <Foundation/Foundation.h>
#import "UIImage+Extension.h"
#endif // 测试用log
#ifdef DEBUG
#define HVWLog(...) NSLog(__VA_ARGS__)
#else
#define HVWLog(...)
#endif // 判别是否iOS7或以上版本系统
#define iOS7 ([UIDevice currentDevice].systemVersion.doubleValue >= 7.0) // 随机颜色
#define RandomColor [UIColor colorWithRed:arc4random_uniform(256)/255.0 green:arc4random_uniform(256)/255.0 blue:arc4random_uniform(256)/255.0 alpha:1.0] #endif
使用宏定义的log函数,只有在debug模式下才会转化成为NSLog,release的时候会转为空
/** 寻找朋友按钮事件 */
- (void) searchFriend {
HVWLog(@"searchFriend");
}
这里可以修改运行模式:
![[iOS微博项目 - 1.0] - 搭建基本框架 [iOS微博项目 - 1.0] - 搭建基本框架](https://image.miaokee.com:8440/aHR0cHM6Ly9pbWFnZXMwLmNuYmxvZ3MuY29tL2Jsb2cvNjQ4NDczLzIwMTUwMi8wMTAwMTYxNDU1MDk1MjkucG5n.png?w=700&webp=1)
![[iOS微博项目 - 1.0] - 搭建基本框架 [iOS微博项目 - 1.0] - 搭建基本框架](https://image.miaokee.com:8440/aHR0cHM6Ly9pbWFnZXMwLmNuYmxvZ3MuY29tL2Jsb2cvNjQ4NDczLzIwMTUwMi8wMTAwMTYxNzk0MTQ2MzIucG5n.png?w=700&webp=1)
2.创建一个集成UIBarButtonItem的分类,用来创建使用UIButton作为按钮图标的item
//
// UIBarButtonItem+Extension.m
// HVWWeibo
//
// Created by hellovoidworld on 15/1/31.
// Copyright (c) 2015年 hellovoidworld. All rights reserved.
// #import "UIBarButtonItem+Extension.h" @implementation UIBarButtonItem (Extension) + (instancetype) itemWithImage:(NSString *) imageName hightlightedImage:(NSString *) highlightedImageName target:(id)target selector:(SEL)selector {
UIBarButtonItem *item = [[self alloc] init]; // 创建按钮
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
UIImage *image = [UIImage imageNamed:imageName];
[button setImage:image forState:UIControlStateNormal];
[button setImage:[UIImage imageNamed:highlightedImageName] forState:UIControlStateHighlighted]; // 一定要设置frame,才能显示
button.frame = CGRectMake(, , image.size.width, image.size.height); // 设置事件
[button addTarget:target action:selector forControlEvents:UIControlEventTouchUpInside]; item.customView = button;
return item;
} @end
3.sample:在“首页”页面加上导航栏按钮
![[iOS微博项目 - 1.0] - 搭建基本框架 [iOS微博项目 - 1.0] - 搭建基本框架](https://image.miaokee.com:8440/aHR0cHM6Ly9pbWFnZXMwLmNuYmxvZ3MuY29tL2Jsb2cvNjQ4NDczLzIwMTUwMi8wMTAwMTYyMTI1MzIxNzgucG5n.png?w=700&webp=1)
// HVWHomeViewController.m
- (void)viewDidLoad {
[super viewDidLoad]; // 添加导航控制器按钮
// 左边按钮
self.navigationItem.leftBarButtonItem = [HVWBarButtonItem itemWithImage:@"navigationbar_friendsearch" hightlightedImage:@"navigationbar_friendsearch_highlighted" target:self selector:@selector(searchFriend)]; // 右边按钮
self.navigationItem.rightBarButtonItem = [HVWBarButtonItem itemWithImage:@"navigationbar_pop" hightlightedImage:@"navigationbar_pop_highlighted" target:self selector:@selector(pop)];
} /** 左边导航栏按钮事件 */
- (void) searchFriend {
HVWLog(@"searchFriend");
} /** 右边导航栏按钮事件 */
- (void) pop {
HVWLog(@"pop");
}
4.给所有非rootViewController加上“返回”按钮和“直接回到rootViewController”按钮
在HVWNavigationViewController的push方法中实现
#mark:由于是在NavigationController中实现,可以一举实现在所有非rootViewController中的效果。
![[iOS微博项目 - 1.0] - 搭建基本框架 [iOS微博项目 - 1.0] - 搭建基本框架](https://image.miaokee.com:8440/aHR0cHM6Ly9pbWFnZXMwLmNuYmxvZ3MuY29tL2Jsb2cvNjQ4NDczLzIwMTUwMi8wMTAwMTYyMzM2MjgzMjEuZ2lm.gif?w=700&webp=1)
// HVWNavigationViewController.m
/** 重写push方法 */
- (void)pushViewController:(UIViewController *)viewController animated:(BOOL)animated {
// 如果不是根控制器,隐藏TabBar
if (self.viewControllers.count > ) {
// 注意这里不是self(navigationController),是push出来的ViewContoller隐藏TabBar
viewController.hidesBottomBarWhenPushed = YES; // 加上“返回上一层”按钮和“直接回到根控制器”按钮
viewController.navigationItem.leftBarButtonItem = [UIBarButtonItem itemWithImage:@"navigationbar_back" hightlightedImage:@"navigationbar_back_highlighted" target:self selector:@selector(back)]; viewController.navigationItem.rightBarButtonItem = [UIBarButtonItem itemWithImage:@"navigationbar_more" hightlightedImage:@"navigationbar_more_highlighted" target:self selector:@selector(more)];
} // 最后一定要调用父类的方法
[super pushViewController:viewController animated:animated];
} /** 返回上一层 */
- (void) back {
[self popViewControllerAnimated:YES];
} /** 返回根控制器 */
- (void) more {
[self popToRootViewControllerAnimated:YES];
}