iOS 主流APP的搭建

看着身边的朋友都在写技术博客,我也谈不上什么技术大牛.也只是一个晚辈.所以大多还是自己平时开发中遇到问题的一些总结.希望大牛多提提意见.

之前没接触iOS时候,就喜欢用markdown去写一些笔记之类的东西,感觉挺方便的.大家可以自己百度,了解下markdown的语法,你也会爱上写作的.

第一次写,也不知道写一些什么东西好.我们就来说说主流的这些APP吧.我的iPhone里面虽然APP很多,但是每天用得APP就那几个,微博,微信,淘宝,支付宝,滴滴出行和公司的产品.

我们今天就先来了解一下微博主要界面如何去搭建吧.

这是我随便在微博截图下来的,大家可以看到其实就是顶部一个导航栏,底部一个tabBar.

这张图可以很好说明他们之间的关系了
接下来,我们就来说说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;
}

我们创建了四个控制器做为UITabBarController的子控制器,这样子我们就可以在下面的TabBar中来回切换不同的控制器了.但是我们还差导航栏,其实很简单.我们只需要包装一个导航控制器做为UITabBarController的子控制器就可以.

 UIViewController *vc1 = [[UIViewController alloc] init];
 UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController:vc1];
  vc1.view.backgroundColor = [UIColor redColor];    
  vc1.title = @"首页";
  [tabBarController addChildViewController:nav];

效果如下:

说一下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;
}

第一次总结,写得好乱好乱.下次会注意点的.谢谢你能看到这里