iOS 主流APP的搭建
2015-09-13 本文已影响363人
BUn_7
看着身边的朋友都在写技术博客,我也谈不上什么技术大牛.也只是一个晚辈.所以大多还是自己平时开发中遇到问题的一些总结.希望大牛多提提意见.
之前没接触iOS时候,就喜欢用markdown去写一些笔记之类的东西,感觉挺方便的.大家可以自己百度,了解下markdown的语法,你也会爱上写作的.
第一次写,也不知道写一些什么东西好.我们就来说说主流的这些APP吧.我的iPhone里面虽然APP很多,但是每天用得APP就那几个,微博,微信,淘宝,支付宝,滴滴出行和公司的产品.
我们今天就先来了解一下微博主要界面如何去搭建吧.
微博.png
这是我随便在微博截图下来的,大家可以看到其实就是顶部一个导航栏,底部一个tabBar.
Snip20160307_4.png
这张图可以很好说明他们之间的关系了
接下来,我们就来说说UITabBarController和UINavigationController这两个控制器.
UITabBarController
在AppDelegate.m中简单实现
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
// Override point for customization after application launch.
self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
UITabBarController *tabBarController = [[UITabBarController alloc] init];
self.window.rootViewController = tabBarController;
UIViewController *vc1 = [[UIViewController alloc] init];
vc1.view.backgroundColor = [UIColor redColor];
vc1.title = @"首页";
[tabBarController addChildViewController:vc1];
UIViewController *vc2 = [[UIViewController alloc] init];
vc2.view.backgroundColor = [UIColor yellowColor];
vc2.title = @"消息";
[tabBarController addChildViewController:vc2];
UIViewController *vc3 = [[UIViewController alloc] init];
vc3.view.backgroundColor = [UIColor blueColor];
vc3.title = @"发现";
[tabBarController addChildViewController:vc3];
UIViewController *vc4 = [[UIViewController alloc] init];
vc4.view.backgroundColor = [UIColor grayColor];
vc4.title = @"我";
[tabBarController addChildViewController:vc4];
[self.window makeKeyAndVisible];
return YES;
}
Snip20160307_5.png
我们创建了四个控制器做为UITabBarController的子控制器,这样子我们就可以在下面的TabBar中来回切换不同的控制器了.但是我们还差导航栏,其实很简单.我们只需要包装一个导航控制器做为UITabBarController的子控制器就可以.
UIViewController *vc1 = [[UIViewController alloc] init];
UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController:vc1];
vc1.view.backgroundColor = [UIColor redColor];
vc1.title = @"首页";
[tabBarController addChildViewController:nav];
效果如下:
Snip20160307_6.png
说一下tabBar的一些属性
//这个是标题
vc1.tabBarItem.title = @"精华";
//这个是没选中的图片
vc1.tabBarItem.image = [UIImage imageNamed:@"tabBar_essence_icon"];
//这个是选中的图片
vc1.tabBarItem.selectedImage = [UIImage imageNamed:@"tabBar_essence_click_icon"];
- 设置item属性
- 通过appearance来统一设置(可以查看查看头文件是否有UI_APPEARANCE_SELECTOR的属性或方法)
// UIControlStateNormal状态下的文字属性
NSMutableDictionary *normalAttrs = [NSMutableDictionary dictionary];
// 文字颜色
normalAttrs[NSForegroundColorAttributeName] = [UIColor grayColor];
// 文字大小
normalAttrs[NSFontAttributeName] = [UIFont systemFontOfSize:12];
// UIControlStateSelected状态下的文字属性
NSMutableDictionary *selectedAttrs = [NSMutableDictionary dictionary];
// 文字颜色
selectedAttrs[NSForegroundColorAttributeName] = [UIColor darkGrayColor];
// 统一给所有的UITabBarItem设置文字属性
// 只有后面带有UI_APPEARANCE_SELECTOR的属性或方法, 才可以通过appearance对象来统一设置
UITabBarItem *item = [UITabBarItem appearance];
[item setTitleTextAttributes:normalAttrs forState:UIControlStateNormal];
[item setTitleTextAttributes:selectedAttrs forState:UIControlStateSelected];
这样子我们基本框架就搭建起来了,但是这样子的代码略为垃圾.这种重复的代码还是想想怎么样去封装起来比较好,自己看起来也会比较开心点.
- 我们写一个方法去包装一下
- 同时包装一个导航控制器
- 设置子控制器的tabBarItem
/**
* 添加一个子控制器
* @param title 文字
* @param image 图片
* @param selectedImage 选中时的图片
*/
- (void)setupChildVc:(UIViewController *)vc title:(NSString *)title image:(NSString *)image selectedImage:(NSString *)selectedImage
{
// 包装一个导航控制器
UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController:vc];
[self addChildViewController:nav];
}
// 设置子控制器的tabBarItem
nav.tabBarItem.title = title;
nav.tabBarItem.image = [UIImage imageNamed:image];
nav.tabBarItem.selectedImage = [UIImage imageNamed:selectedImage];
设置导航栏item
- 设置导航栏的标题
self.navigationItem.title = @"我的";
- 设置导航栏的标题是View
self.navigationItem.titleView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"MainTitle"]];
- 这个方法创建的跟图片尺寸一样大
[[UIImageView alloc] initWithImage:[UIImage imageNamed:@""]];
- 设置导航栏的按钮
- 需要自适应图片的大小
[button sizeToFit];
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button setBackgroundImage:[UIImage imageNamed:@"MainTagSubIcon"] forState:UIControlStateNormal];
[button setBackgroundImage:[UIImage imageNamed:@"MainTagSubIconClick"] forState:UIControlStateHighlighted];
[button sizeToFit];
[button addTarget:self action:@selector(tagClick) forControlEvents:UIControlEventTouchUpInside];
self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:button];
- 设置多个按钮的时候可以把按钮添加到left/rightBarButtonItems
self.navigationItem.rightBarButtonItems = @[
[[UIBarButtonItem alloc] initWithCustomView:settingButton],
[[UIBarButtonItem alloc] initWithCustomView:moonButton]
];
- 封装UIBarButtonItem的创建
+ (instancetype)itemWithImage:(NSString *)image highImage:(NSString *)highImage target:(id)target action:(SEL)action
{
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button setBackgroundImage:[UIImage imageNamed:image] forState:UIControlStateNormal];
[button setBackgroundImage:[UIImage imageNamed:highImage] forState:UIControlStateHighlighted];
[button sizeToFit];
[button addTarget:target action:action forControlEvents:UIControlEventTouchUpInside];
return [[self alloc] initWithCustomView:button];
}
导航栏返回键的统一设置和返回手势
- 通过这个- (void)pushViewController:(UIViewController *)viewController animated:(BOOL)animated发放可以拦截所有PUSH进来的子控制器
- 需要把根控制器排除做一个判断
- 通过设置contentEdgeInsets可以使按钮向右偏移
- super的push方法一定要写到最后面
/**
* 拦截所有push进来的子控制器
* @param viewController 每一次push进来的子控制器
*/
- (void)pushViewController:(UIViewController *)viewController animated:(BOOL)animated
{
// if (不是第一个push进来的子控制器) {
if (self.childViewControllers.count >= 1) {
// 左上角的返回
UIButton *backButton = [UIButton buttonWithType:UIButtonTypeCustom];
[backButton setTitle:@"返回" forState:UIControlStateNormal];
[backButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[backButton setTitleColor:[UIColor redColor] forState:UIControlStateHighlighted];
[backButton setImage:[UIImage imageNamed:@"navigationButtonReturn"] forState:UIControlStateNormal];
[backButton setImage:[UIImage imageNamed:@"navigationButtonReturnClick"] forState:UIControlStateHighlighted];
[backButton sizeToFit];
[backButton addTarget:self action:@selector(back) forControlEvents:UIControlEventTouchUpInside];
backButton.contentEdgeInsets = UIEdgeInsetsMake(0, -20, 0, 0);
viewController.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:backButton];
viewController.hidesBottomBarWhenPushed = YES; // 隐藏底部的工具条
}
// super的push方法一定要写到最后面
// 一旦调用super的pushViewController方法,就会创建子控制器viewController的view
// 也就会调用viewController的viewDidLoad方法
[super pushViewController:viewController animated:animated];
}
- (void)back
{
[self popViewControllerAnimated:YES];
}
- 如果重写了push方法返回手势就会失效(没了返回手势,用户体验真心就垃圾了)
- 需要重写下面的代理方法
- <UIGestureRecognizerDelegate> 别忘记了设置代理
- 切记需要过滤掉根控制器
self.interactivePopGestureRecognizer.delegate = self;
/**
* 每当用户触发[返回手势]时都会调用一次这个方法
* 返回值:返回YES,手势有效; 返回NO,手势失效
*/
- (BOOL)gestureRecognizerShouldBegin:(UIGestureRecognizer *)gestureRecognizer
{
// 如果当前显示的是第一个子控制器,就应该禁止掉[返回手势]
// if (self.childViewControllers.count == 1) return NO;
// return YES;
return self.childViewControllers.count > 1;
}
状态栏的设置
- 让状态栏样式为白色
- (UIStatusBarStyle)preferredStatusBarStyle
{
// UIStatusBarStyleDefault
return UIStatusBarStyleLightContent;
}
第一次总结,写得好乱好乱.下次会注意点的.谢谢你能看到这里
