主流移动应用快速构建指南

时间：10-28 神话故事提交错误

大家好，如果您还对主流移动应用快速构建指南不太了解，没有关系，今天就由本站为大家分享主流移动应用快速构建指南的知识，包括的问题都会给大家分析到，还望可以解决大家的问题，下面我们就开始吧！

它们有一个类似的基本界面骨架，如下所示：首先，界面有一些组件。 TabBar切换不同的导航控制器（界面）。点击NavigationBar上的BarButtonItem跳转（push）到下一个界面。

那么我们如何构建这样一个基本的界面骨架呢？

iPhone项目开始时候要处理注意的地方

APP名称设置

搭建流程思考

1.自定义TabBarController

添加四个子控制器，并设置四个子控制器的相关属性（TabBarItem内部图片和文字的设置） 2.自定义NavigationController（重写push:方法，封装返回键）

这里对返回键的封装（设置）非常有用、通用、方便。一旦掌握了，以后在项目中直接使用就可以了。但在这里我们首先构建基本骨架。总结在我的另一篇文章《项目开发中封装一个返回键--很实用》《项目开发中封装一个BarButtonItem类别-很实用》这里我们可以选择storyboard来搭建界面，不过这个一般是在界面比较少的时候使用。

当我们的界面很多，需要通过各种方式在界面之间跳转时，如果仍然使用storyboard来构建，在几十个控制器之间跳转会很混乱。

所以当接口很多的时候我们选择代码创建

这里我会选择代码创建让大家有个大概的思路

在AppDelegate.m 文件中重新创建，而不使用Main.storyboard。首先创建根控制器- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

//1. 创建窗口

self.window=[[UIWindow alloc] init];

self.window.frame=[UIScreen 主屏幕].bounds;

//2.设置窗口的根控制器

self.window.rootViewController=[[CYTabbarController alloc] init];

//3.显示窗口

[self.window makeKeyAndVisible];

返回是；

}创建一个新的（自定义）TabBarController#import "CYTabbarController.h"

@接口CYTabbarController ()

@结尾

@实现CYTabbarController

- (void)viewDidLoad {

[超级viewDidLoad];

//UIControlState正常情况下的文本属性

NSMutableDictionary *normalAtrrs=[NSMutableDictionary 字典];

//文字颜色

normalAtrrs[NSForegroundColorAttributeName]=[UIColor greyColor];

//UIControlStateSelected案例的文本属性

NSMutableDictionary *selectedAtrrs=[NSMutableDictionary 字典];

//文字颜色

selectedAtrrs[NSForegroundColorAttributeName]=[UIColor darkGrayColor];

UITabBarItem *item=[UITabBarItem 外观];

[项目setTitleTextAttributes:normalAtrrs forState:UIControlStateNormal];

[item setTitleTextAttributes:selectedAtrrs forState:UIControlStateSelected];

//添加四个子控制器

UIViewController *vc1=[[UIViewController 分配] init];

vc1.tabBarItem.title=@"精华";

vc1.tabBarItem.image=[UIImage imageNamed:@"tabBar_essence_icon"];

vc1.tabBarItem.selectedImage=[UIImage imageNamed:@"tabBar_essence_click_icon"];

vc1.view.backgroundColor=[UIColor greenColor];

[自我添加ChildViewController:vc1];

UIViewController *vc2=[[UIViewController 分配] init];

vc2.tabBarItem.title=@"新帖子";

vc2.tabBarItem.image=[UIImage imageNamed:@"tabBar_new_icon"];

vc2.tabBarItem.selectedImage=[UIImage imageNamed:@"tabBar_new_click_icon"];

vc2.view.backgroundColor=[UIColor 灰色颜色];

[自我添加ChildViewController:vc2];

UIViewController *vc3=[[UIViewController 分配] init];

vc3.tabBarItem.title=@"关注";

vc3.tabBarItem.image=[UIImage imageNamed:@"tabBar_friendTrends_icon"];

vc3.tabBarItem.selectedImage=[UIImage imageNamed:@"tabBar_friendTrends_click_icon"];

vc3.view.backgroundColor=[UIColor 蓝色];

[自我添加ChildViewController:vc3];

UIViewController *vc4=[[UIViewController 分配] init];

vc4.tabBarItem.title=@"I";

vc4.tabBarItem.image=[UIImage imageNamed:@"tabBar_me_icon"];

vc4.tabBarItem.selectedImage=[UIImage imageNamed:@"tabBar_me_click_icon"];

vc4.view.backgroundColor=[UIColor 黄色颜色];

[自我添加ChildViewController:vc4];

}

@end创建成功。你认为会更快吗？当然不可能有这么多代码。我将提取以下运行模式：

代码的抽取

#import "CYTabbarController.h"

@接口CYTabbarController ()

@结尾

@实现CYTabbarController

- (void)viewDidLoad {

[超级viewDidLoad];

//开始提取代码：

[自我设置项目]；

[自我setUpChildVc];

/**

* 设置Item的属性

- (void)setUpItem

{

//UIControlState正常情况下的文本属性

NSMutableDictionary *normalAtrrs=[NSMutableDictionary 字典];

//文字颜色

normalAtrrs[NSForegroundColorAttributeName]=[UIColor greyColor];

//UIControlStateSelected案例的文本属性

NSMutableDictionary *selectedAtrrs=[NSMutableDictionary 字典];

//文字颜色

selectedAtrrs[NSForegroundColorAttributeName]=[UIColor darkGrayColor];

//统一设置所有UITabBatItems的文本属性

//只有具有UI_APPEARANCE_SELECTOR方法的才可以通过appearance进行设置。

UITabBarItem *item=[UITabBarItem 外观];

[项目setTitleTextAttributes:normalAtrrs forState:UIControlStateNormal];

[item setTitleTextAttributes:selectedAtrrs forState:UIControlStateSelected];

}

/**

* 设置setUpChildVc的属性并添加所有子控件

- (void)setUpChildVc

{

[self setUpChildVc:[UIViewController 类] title:@"essence" image:@"tabBar_essence_icon" selectedImage:@"tabBar_essence_click_icon"];

[self setUpChildVc:[UIViewController 类] title:@"新帖子" image:@"tabBar_new_icon" selectedImage:@"tabBar_new_click_icon"];

[self setUpChildVc:[UIViewController 类] title:@"关注" image:@"tabBar_friendTrends_icon" selectedImage:@"tabBar_friendTrends_click_icon"];

[self setUpChildVc:[UIViewController 类] title:@"I" image:@"tabBar_me_icon" selectedImage:@"tabBar_me_click_icon"];

////添加四个子控制器

//UIViewController *vc1=[[UIViewController alloc] init];

//vc1.tabBarItem.title=@"essence";

//vc1.tabBarItem.image=[UIImage imageNamed:@"tabBar_essence_icon"];

//vc1.tabBarItem.selectedImage=[UIImage imageNamed:@"tabBar_essence_click_icon"];

//vc1.view.backgroundColor=[UIColor greenColor];

//[self addChildViewController:vc1];

//UIViewController *vc2=[[UIViewController alloc] init];

//vc2.tabBarItem.title=@"新帖子";

//vc2.tabBarItem.image=[UIImage imageNamed:@"tabBar_new_icon"];

//vc2.tabBarItem.selectedImage=[UIImage imageNamed:@"tabBar_new_click_icon"];

//vc2.view.backgroundColor=[UIColor greyColor];

//[self addChildViewController:vc2];

//UIViewController *vc3=[[UIViewController alloc] init];

//vc3.tabBarItem.title=@"关注";

//vc3.tabBarItem.image=[UIImage imageNamed:@"tabBar_friendTrends_icon"];

//vc3.tabBarItem.selectedImage=[UIImage imageNamed:@"tabBar_friendTrends_click_icon"];

//vc3.view.backgroundColor=[UIColor blueColor];

//[self addChildViewController:vc3];

//UIViewController *vc4=[[UIViewController alloc] init];

//vc4.tabBarItem.title=@"I";

//vc4.tabBarItem.image=[UIImage imageNamed:@"tabBar_me_icon"];

//vc4.tabBarItem.selectedImage=[UIImage imageNamed:@"tabBar_me_click_icon"];

//vc4.view.backgroundColor=[UIColor YellowColor];

//[self addChildViewController:vc4];

}

- (void)setUpChildVc:(Class)vcClass title:(NSString *)title image:(NSString *)image selectedImage:(NSString *)selectedImage

{

UIViewController *vc=[[UIViewController 分配] init];

vc.tabBarItem.title=标题；

vc.tabBarItem.image=[UIImage imageNamed:image];

vc.tabBarItem.selectedImage=[UIImage imageNamed:selectedImage];

//创建随机颜色

vc.view.backgroundColor=[UIColor colorWithRed:arc4random_uniform(100)/100.0 green:arc4random_uniform(100)/100.0 blue:arc4random_uniform(100)/100.0 alpha:1.0];

[自我添加ChildViewController:vc];

}

@end 在微博和简书APP中，TabBar中间有一个加号按钮。对于发布或其他功能来说，这是一个非常重要的按钮。我们如何实施呢？首先，上面系统的TabBar不能满足我们，所以我们只能自定义一个TabBar。自定义完TabBar后，我们需要开始在上面布局子控件，修改它们的位置，重写initWithFrame:方法和LayoutSubViews:方法，布局子控件在自定义的CYTabBarController中//

//CYTabbarController.m

//聪明与否

#import "CYTabbarController.h"

#import "CYEssenceViewController.h"

#import "CYFocusViewController.h"

#import "CYPublishViewController.h"

#import "CYNewPostViewController.h"

#import "CYMeViewController.h"

#import "CYTabBar.h"

#import "CYNavigationController.h"

@接口CYTabbarController ()

@结尾

@实现CYTabbarController

- (void)viewDidLoad {

[超级viewDidLoad];

//开始提取代码：

//提取项目属性

[自我设置项目]；

//布局子控件

[自我setUpChildVc];

//处理tabBar

[自行设置TabBar];

}

/**

* 处理tabBar

- (void)setUpTabBar

{

[self setValue:[[CYTabBar alloc] init] forKey:@"tabBar"];

}

/**

* 设置Item的属性

- (void)setUpItem

{

//UIControlState正常情况下的文本属性

NSMutableDictionary *normalAtrrs=[NSMutableDictionary 字典];

//文字颜色

normalAtrrs[NSForegroundColorAttributeName]=[UIColor greyColor];

//UIControlStateSelected案例的文本属性

NSMutableDictionary *selectedAtrrs=[NSMutableDictionary 字典];

//文字颜色

selectedAtrrs[NSForegroundColorAttributeName]=[UIColor darkGrayColor];

//统一设置所有UITabBatItems的文本属性

//只有具有UI_APPEARANCE_SELECTOR方法的才可以通过appearance进行设置。

UITabBarItem *item=[UITabBarItem 外观];

[项目setTitleTextAttributes:normalAtrrs forState:UIControlStateNormal];

[item setTitleTextAttributes:selectedAtrrs forState:UIControlStateSelected];

}

/**

* 设置setUpChildVc的属性并添加所有子控件

- (void)setUpChildVc

{

[self setUpChildVc:[[CYEssenceViewController alloc] init] title:@"essence" image:@"tabBar_essence_icon" selectedImage:@"tabBar_essence_click_icon"];

[self setUpChildVc:[[CYNewPostViewController alloc] init] title:@"新帖子" image:@"tabBar_new_icon" selectedImage:@"tabBar_new_click_icon"];

[self setUpChildVc:[[CYFocusViewController alloc] init] title:@"关注" image:@"tabBar_friendTrends_icon" selectedImage:@"tabBar_friendTrends_click_icon"];

[self setUpChildVc:[[CYMeViewController alloc] init] title:@"me" image:@"tabBar_me_icon" selectedImage:@"tabBar_me_click_icon"];

}

- (void)setUpChildVc:(UIViewController *)vc title:(NSString *)标题image:(NSString *)图像selectedImage:(NSString *)selectedImage

{

//包装一个导航控制器

CYNavigationController *nav=[[CYNavigationController 分配] initWithRootViewController:vc];

[自我添加ChildViewController:nav];

//设置子控制器的tabBarItem

nav.tabBarItem.title=标题；

nav.tabBarItem.image=[UIImage imageNamed:image];

nav.tabBarItem.selectedImage=[UIImage imageNamed:selectedImage];

nav.view.backgroundColor=[UIColor colorWithRed:arc4random_uniform(100)/100.0 green:arc4random_uniform(100)/100.0 blue:arc4random_uniform(100)/100.0 alpha:1.0];

}

@end自定义TabBar#import "CYTabBar.h"

@接口CYTabBar()

/** 添加发布按钮*/

@property（非原子，弱）UIButton *publishButton；

@结尾

@实现CYTabBar

- (实例类型) initWithFrame:(CGRect)frame

{

我

f (self = [super initWithFrame:frame]) { // 设置背景图片 self.backgroundImage = [UIImage imageNamed:@"tabbar-light"]; UIButton *publishButton = [UIButton buttonWithType:UIButtonTypeCustom]; [publishButton setBackgroundImage:[UIImage imageNamed:@"tabBar_publish_icon"] forState:UIControlStateNormal]; [publishButton setBackgroundImage:[UIImage imageNamed:@"tabBar_publish_click_icon"] forState:UIControlStateHighlighted]; [publishButton sizeToFit]; // 监听按钮点击（发布按钮） [publishButton addTarget:self action:@selector(publishClick) forControlEvents:UIControlEventTouchUpInside]; // publishButton.center = CGPointMake(self.frame.size.width * 0.5, self.frame.size.height * 0.5); [self addSubview:publishButton]; self.publishButton = publishButton; } return self; } - (void)publishClick { NSLog(@"%s",__func__); } /** * 重写layoutSubviews方法，布局子控件 */ - (void)layoutSubviews { [super layoutSubviews]; // TabBar的尺寸 CGFloat width = self.frame.size.width; CGFloat height = self.frame.size.height; // 设置发布按钮的位置 self.publishButton.center = CGPointMake(width * 0.5, height * 0.5); // 设置索引 int index = 0; // 按钮的尺寸 CGFloat tabBarButtonW = self.frame.size.width / 5; CGFloat tabBarButtonH = self.frame.size.height; CGFloat tabBarButtonY = 0; // 设置四个TabBarButton的frame for (UIView *tabBarButton in self.subviews) { if (![NSStringFromClass(tabBarButton.class) isEqualToString:@"UITabBarButton"]) continue; // 计算按钮X的值 CGFloat tabBarButtonX = index * tabBarButtonW; if (index >= 2) { tabBarButtonX += tabBarButtonW; // 给后面2个button增加一个宽度的X值 } tabBarButton.frame = CGRectMake(tabBarButtonX, tabBarButtonY, tabBarButtonW, tabBarButtonH); index++; } }

一些细节方面的注意处理以及一些补充：

TabBarItem内部图片和文字的设置为什么要设置呢：因为不设置的话，苹果就会自动将它渲染成蓝色，而不是我们（客户）想要的样式图标高亮和正常状态是如何设置它本身的颜色Xcode中设置，一劳永逸代码实现方式（了解一下，知道的办法多一点毕竟不是坏事）：// UIImage *tempImage = [UIImage imageNamed:@"tabBar_essence_click_icon"]; // UIImage *selectedImage = [tempImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]; // vc1.tabBarItem.selectedImage = selectedImage; vc1.tabBarItem.selectedImage = [[UIImage imageNamed:@"tabBar_essence_click_icon" ]imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]; // 这里的设置可以不让系统给图片渲染成蓝色如何设置TabBarItem的文字颜色呢？只能代码了// UIControlStateNormal情况下的文字属性 NSMutableDictionary *normalAtrrs = [NSMutableDictionary dictionary]; // 文字颜色 normalAtrrs[NSForegroundColorAttributeName] = [UIColor grayColor]; // UIControlStateSelected情况的文字属性 NSMutableDictionary *selectedAtrrs = [NSMutableDictionary dictionary]; // 文字颜色 selectedAtrrs[NSForegroundColorAttributeName] = [UIColor darkGrayColor]; UITabBarItem *item = [UITabBarItem appearance]; [item setTitleTextAttributes:normalAtrrs forState:UIControlStateNormal]; [item setTitleTextAttributes:selectedAtrrs forState:UIControlStateSelected];

换肤

通过设置appearance来进行换肤，一设置，全部控件都跟着变但是有条件：// 统一给所有的UITabBatItem设置文字属性 // 只有后面带有UI_APPEARANCE_SELECTOR方法的才可以通过appearance来设置 UITabBarItem *item = [UITabBarItem appearance]; [item setTitleTextAttributes:normalAtrrs forState:UIControlStateNormal]; [item setTitleTextAttributes:selectedAtrrs forState:UIControlStateSelected];控制器之间的关系由上图的关系可以知道下面注释的代码与没注释的代码效果是一样的// 包装一个导航控制器 UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController:vc]; [self addChildViewController:nav]; nav.tabBarItem.title = title; nav.tabBarItem.image = [UIImage imageNamed:image]; nav.tabBarItem.selectedImage = [UIImage imageNamed:selectedImage]; nav.view.backgroundColor = [UIColor colorWithRed:arc4random_uniform(100)/100.0 green:arc4random_uniform(100)/100.0 blue:arc4random_uniform(100)/100.0 alpha:1.0]; // vc.tabBarItem.title = title; // vc.tabBarItem.image = [UIImage imageNamed:image]; // vc.tabBarItem.selectedImage = [UIImage imageNamed:selectedImage]; // vc.view.backgroundColor = [UIColor colorWithRed:arc4random_uniform(100)/100.0 green:arc4random_uniform(100)/100.0 blue:arc4random_uniform(100)/100.0 alpha:1.0];代码抽取里的代码严谨点替换成下面的代码/** * 设置setUpChildVc的属性，添加所有的子控件 */ - (void)setupChildVc:(UIViewController *)vc title:(NSString *)title image:(NSString *)image selectedImage:(NSString *)selectedImage { [self setUpChildVc:[[CYEssenceViewController alloc] init] title:@"精华" image:@"tabBar_essence_icon" selectedImage:@"tabBar_essence_click_icon"]; [self setUpChildVc:[[CYNewPostViewController alloc] init] title:@"新帖" image:@"tabBar_new_icon" selectedImage:@"tabBar_new_click_icon"]; [self setUpChildVc:[[CYFocusViewController alloc] init] title:@"关注" image:@"tabBar_friendTrends_icon" selectedImage:@"tabBar_friendTrends_click_icon"]; [self setUpChildVc:[CYMeViewController alloc] title:@"我" image:@"tabBar_me_icon" selectedImage:@"tabBar_me_click_icon"]; } // 包装一个导航控制器 UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController:vc]; [self addChildViewController:nav]; nav.tabBarItem.title = title; nav.tabBarItem.image = [UIImage imageNamed:image]; nav.tabBarItem.selectedImage = [UIImage imageNamed:selectedImage]; nav.view.backgroundColor = [UIColor colorWithRed:arc4random_uniform(100)/100.0 green:arc4random_uniform(100)/100.0 blue:arc4random_uniform(100)/100.0 alpha:1.0]; }下面两种方法都可以传图片// 这样传图片，它传的图片尺寸和原始尺寸一样 self.navigationItem.titleView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"MainTitle"]]; // 这两种方法所实现的效果是一样的，但是很明显用上面的 // UIImageView *titleView = [[UIImageView alloc] init]; // titleView.image = [UIImage imageNamed:@"MainTitle"]; // [titleView sizeToFit]; // self.navigationItem.titleView = titleView;打印（获取）window的三种方法：NSLog(@"%@ %@ %@", self.view.superview, self.view.window, [UIApplication sharedApplication].keyWindow);创建一个随机色nav.view.backgroundColor = [UIColor colorWithRed:arc4random_uniform(100)/100.0 green:arc4random_uniform(100)/100.0 blue:arc4random_uniform(100)/100.0 alpha:1.0];小小注意点：self.title =@"我的关注"; 相当于下面两句 self.navigationItem.title = @"我的关注"; self.tabBarItem.title = @"我的关注";