iOS原生搭建一个App骨架

发表于 | 分类于 | 阅读次数
字数统计: 864 | 阅读时长 ≈ 4

此篇是从简书移至本博客, 简书地址：https://www.jianshu.com/u/e79d7856d1ff

主流的方式搭建一个App骨架

先看效果图

底部按钮

UITabBarController实现底部按钮
本文章的内容为：学会搭建类似于QQ界面框架

第一步：设置窗口的主视图，在AppDelegate.m中didFinishLaunchingWithOptions:方法中将TabBarViewController的对象作为窗口主视图。(TabBarViewController是自己创建的一个类，同时继承UITabBarController) 

1
2
3
4
5
6
7
8
9
10
11
 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    //创建窗口，并初始化
    _window = [[UIWindow alloc]initWithFrame:[UIScreen mainScreen].bounds];
    //创建一个TabBarViewController对象
    TabBarViewController * tabBar = [[TabBarViewController alloc]init];
    //将TabBarViewController对象作为窗口的根控制器
    _window.rootViewController = tabBar;
    //显示窗口
    [_window makeKeyAndVisible];
    return YES;
}

第二步：创建对应的控制器（UIViewController）
下图是我的文件结构目录
动态、联系人、消息文件就是对应的ViewController

这是我的文件结构

✨✨核心部分✨✨
当前搭建底部导航栏的主流方式
在TabBarViewController.m中

1.先导入头文件

1
2
3
4
#import "TabBarViewController.h"
#import "MessageViewController.h"
#import "ContactViewController.h"
#import "DynamicViewController.h"

2.以下是对应代码以及参数的释义

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//创建一个视图对象
MessageViewController * messageView = [[MessageViewController alloc]init];
/**
 * UITabBarItem类实现一个项目在UITabBar对象.
 * 也就是说UITabBar上的多个按钮其实就是UITabBarItem
 *
 * Title: tabBar上item的标题
 * image: tabBar上item普通状态下的图片
 * selectedImage: tabBar上item选中状态下的图片
 * imageWithRenderingMode: item的图片始终绘制为原始状态
 */
UITabBarItem * messageItem = [[UITabBarItem alloc]initWithTitle:@"消息" image:[UIImage imageNamed:@"message"] selectedImage:[[UIImage imageNamed:@"message_press"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]];
//将设置好的item赋值给视图上的tabBarItem
messageView.tabBarItem = messageItem;
//创建一个导航栏对象，将视图对象作为导航栏的根控制器
UINavigationController * navMessage = [[UINavigationController alloc]initWithRootViewController:messageView];
//设置视图的导航栏标题
messageView.navigationItem.title = @"消息";
//将导航栏对象作为子视图添加到TabBarController上
[self addChildViewController:navMessage];

//其他同理

拓展：也许会看得出，这样写代码的耦合性(代码重复性)很高，上面的代码是可以封装的，封装全文代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
#import "TabBarViewController.h"
#import "MessageViewController.h"
#import "ContactViewController.h"
#import "DynamicViewController.h"
@interface TabBarViewController ()

@end

@implementation TabBarViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    [self setAllChildView];
}
-(void)setAllChildView
{
    //创建一个消息视图对象
    MessageViewController * messageView = [[MessageViewController alloc]init];
    [self addChildViewController:messageView tabBarItemTitle:@"消息" itemImgName:@"message" itemSelectedImgName:@"message_press"];
    
    //创建一个联系人视图对象
    ContactViewController * contactView = [[ContactViewController alloc]init];
    [self addChildViewController:contactView tabBarItemTitle:@"联系人" itemImgName:@"contact" itemSelectedImgName:@"contact_press"];
    
    //创建一个动态视图对象
    DynamicViewController * dynamicView = [[DynamicViewController alloc]init];
    [self addChildViewController:dynamicView tabBarItemTitle:@"动态" itemImgName:@"dynamic" itemSelectedImgName:@"dynamic_press"];
}
-(void)addChildViewController:(UIViewController *)viewController tabBarItemTitle:(NSString *)title itemImgName:(NSString *)itemImgName itemSelectedImgName:(NSString *)itemSelectedImgName{
    /**
     * UITabBarItem类实现一个项目在UITabBar对象.
     * 也就是说UITabBar上的按钮其实就是多个UITabBarItem对象组成的
     *
     * Title: tabBar上item的标题
     * image: tabBar上item普通状态下的图片
     * selectedImage: tabBar上item选中状态下的图片
     * imageWithRenderingMode: item的图片始终绘制为原始状态
     */
    UITabBarItem * messageItem = [[UITabBarItem alloc]initWithTitle:title image:[UIImage imageNamed:itemImgName] selectedImage:[[UIImage imageNamed:itemSelectedImgName] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]];
    //将设置好的item赋值给视图上的tabBarItem
    viewController.tabBarItem = messageItem;
    //创建一个导航栏对象，将视图对象作为导航栏的根控制器
    UINavigationController * navMessage = [[UINavigationController alloc]initWithRootViewController:viewController];
    //设置视图的导航栏标题
    viewController.navigationItem.title = title;
    //将导航栏对象作为子视图添加到TabBarController上
    [self addChildViewController:navMessage];
}

Demo地址: https://git.oschina.net/My_Ip/TabBarItem

0%