10分钟搭建 App 主流框架
搭建主流框架界面
0.达成效果
我们玩iPhone应用的时候,有没发现大部分的应用都是上图差不多的结构,下面的TabBar控制器可以切换子控制器,上面又有Navigation导航条
我们本文主要是搭建主体的框架,数据暂时没有添加
分析做项目的基本流程
1.搭建项目主框架
(1)先搭建tabBarController(下面有一条)
(2)再搭建NavigationController(上面有一条,并且每个子控制器的不一样)
2.思考开发方式
(1)storyboard搭建(界面很少的时候使用)
(2)纯代码搭建(界面超过5个的时候使用,易于管理,商业项目中,一般都使用这种方式)
从0开始搭建主流框架(纯代码)
1.准备工作
环境部署
2.初步搭建基本界面
第一步 设计目录(根据模块化+MVC思想,创建基本文件目录与文件)
模块化思想创建目录路径(一般先在真实路径下创建,再拖到项目中)
自定义TabBarController
第二步 上代码(在AppDelegate.m内设置窗口启动根控制器)
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
// 1.创建窗口
self.window = [[UIWindow alloc]initWithFrame:[UIScreen mainScreen].bounds];
// 2.设置窗口的根控制器
CYXTabBarController *tabBarVC = [[CYXTabBarController alloc]init];
self.window.rootViewController = tabBarVC;
// 3.显示窗口
[self.window makeKeyAndVisible];
return YES;
}
第三步,在CYXTabBarController.m内创建并添加子控制器
- (void)viewDidLoad {
[super viewDidLoad];
// 1.添加第一个控制器
// 1.1 初始化
CYXOneViewController *oneVC = [[CYXOneViewController alloc]init];
// 1.2 把oneVC添加为UINavigationController的根控制器
UINavigationController *nav1 = [[UINavigationController alloc]initWithRootViewController:oneVC];
// 设置tabBar的标题
nav1.title = @"首页";
[nav1.navigationBar setBackgroundImage:[UIImage imageNamed:@"commentary_num_bg"] forBarMetrics:UIBarMetricsDefault];
// 设置tabBar的图标
nav1.tabBarItem.image = [UIImage imageNamed:@"tab_home_icon"];
// 设置navigationBar的标题
oneVC.navigationItem.title = @"首页";
// 设置背景色(这些操作可以交给每个单独子控制器去做)
oneVC.view.backgroundColor = [UIColor whiteColor];
// 1.3 把UINavigationController交给UITabBarController管理
[self addChildViewController:nav1];
// 2.添加第2个控制器
CYXTwoViewController *twoVC = [[CYXTwoViewController alloc]init];
UINavigationController *nav2 = [[UINavigationController alloc]initWithRootViewController:twoVC];
nav2.title = @"技术";
nav2.tabBarItem.image = [UIImage imageNamed:@"js"];
twoVC.navigationItem.title = @"技术";
twoVC.view.backgroundColor = [UIColor blueColor];
[self addChildViewController:nav2];
// 3.添加第3个控制器
CYXThreeViewController *threeVC = [[CYXThreeViewController alloc]init];
UINavigationController *nav3 = [[UINavigationController alloc]initWithRootViewController:threeVC];
nav3.title = @"博文";
nav3.tabBarItem.image = [UIImage imageNamed:@"qw"];
threeVC.navigationItem.title = @"博文";
threeVC.view.backgroundColor = [UIColor yellowColor];
[self addChildViewController:nav3];
// 4.添加第4个控制器
CYXFourViewController *fourVC = [[CYXFourViewController alloc]init];
UINavigationController *nav4 = [[UINavigationController alloc]initWithRootViewController:fourVC];
nav4.title = @"我的江湖";
nav4.tabBarItem.image = [UIImage imageNamed:@"user"];
fourVC.navigationItem.title = @"我的江湖";
fourVC.view.backgroundColor = [UIColor grayColor];
[self addChildViewController:nav4];
}
进行到这里,我们已经把框架搭起来了,是不是很简单?效果如图:
但你可能会忍不住吐槽了,这些全是冗余的垃圾代码,没有可读性,下面就来抽取一下代码吧
第四步,抽取重复代码
由于上文的所有代码都写在viewDidLoad里面且重复代码过多,造成代码冗余,可扩展性不高的问题,下面让我们来对代码进行初步优化。
这里提取两个方法,一个是添加所有子控制器的方法,另一个是添加每一个子控制器的方法
- (void)viewDidLoad {
[super viewDidLoad]; [self setUpAllChildViewController];
}/**
* 添加所有子控制器方法
*/- (void)setUpAllChildViewController{ // 1.添加第一个控制器
CYXOneViewController *oneVC = [[CYXOneViewController alloc]init];
[self setUpOneChildViewController:oneVC image:[UIImage imageNamed:@"tab_home_icon"] title:@"首页"]; // 2.添加第2个控制器
CYXTwoViewController *twoVC = [[CYXTwoViewController alloc]init];
[self setUpOneChildViewController:twoVC image:[UIImage imageNamed:@"js"] title:@"技术"]; // 3.添加第3个控制器
CYXThreeViewController *threeVC = [[CYXThreeViewController alloc]init];
[self setUpOneChildViewController:threeVC image:[UIImage imageNamed:@"qw"] title:@"博文"]; // 4.添加第4个控制器
CYXFourViewController *fourVC = [[CYXFourViewController alloc]init];
[self setUpOneChildViewController:fourVC image:[UIImage imageNamed:@"user"] title:@"我的江湖"];
}/**
* 添加一个子控制器的方法
*/- (void)setUpOneChildViewController:(UIViewController *)viewController image:(UIImage *)image title:(NSString *)title{ UINavigationController *navC = [[UINavigationController alloc]initWithRootViewController:viewController];
navC.title = title;
navC.tabBarItem.image = image;
[navC.navigationBar setBackgroundImage:[UIImage imageNamed:@"commentary_num_bg"] forBarMetrics:UIBarMetricsDefault]; viewController.navigationItem.title = title; [self addChildViewController:navC];
}
转自: http://www.cocoachina.com/cms/wap.php?action=article&id=13351
10分钟搭建 App 主流框架的更多相关文章
- 十分钟搭建App主流框架
搭建主流框架界面 0.达成效果 Snip20150904_5.png 我们玩iPhone应用的时候,有没发现大部分的应用都是上图差不多的结构,下面的TabBar控制器可以切换子控制器,上面又有Navi ...
- 搭建App主流框架_纯代码搭建(OC)
转载自:http://my.oschina.net/hejunbinlan/blog/529778?fromerr=EmSuX7PR 搭建主流框架界面 源码地址在文章末尾 达成效果 效果图 注:本文部 ...
- 10分钟搭建一个小型网页(python django)(hello world!)
10分钟搭建一个小型网页(python django)(hello world!) 1.安装django pip install django 安装成功后,在Scripts目录下存在django-ad ...
- 十分钟搭建微服务框架(SpringBoot +Dubbo+Docker+Jenkins源码)
本文将以原理+实战的方式,首先对“微服务”相关的概念进行知识点扫盲,然后开始手把手教你搭建这一整套的微服务系统. 这套微服务框架能干啥? 这套系统搭建完之后,那可就厉害了: 微服务架构 你的整个应用程 ...
- Hexo博客框架10分钟搭建个人博客
首先是先给大家打个招呼 最近看网上看到了很多的的关于搭建博客的视频,我自己也学着自己搭建了一个博客"我自己的博客链接"(欢迎大家来我的博客跟我深入交♂流),今天我把搭建的过程记录下 ...
- iOS -App主流框架UINavigationController && UITabBarController的简单使用
一个iOS app几乎没有由一个控制器组成,除非这个app非常简单. 当app中有多个控制器的时候,就需要对这些控制器进行管理,用1个控制器去管理其他多个控制器: 如图所示: ...
- 【转】10分钟搭建NDK的Android开发环境
原文网址:http://blog.csdn.net/u012176591/article/details/23018913 作者:金良(golden1314521@gmail.com) csdn博客: ...
- 花10分钟搞懂开源框架吧 - 【NancyFx.Net】
NancyFx是什么? Nancy是一个轻量级的独立的框架,下面是官网的一些介绍: Nancy 是一个轻量级用于构建基于 HTTP 的 Web 服务,基于 .NET 和 Mono 平台,框架的目标是保 ...
- 10分钟搭建Kubernetes容器集群平台【转】
官方提供3种方式部署Kubernetes minikube Minikube是一个工具,可以在本地快速运行一个单点的Kubernetes,尝试Kubernetes或日常开发的用户使用.不能用于生产环境 ...
随机推荐
- 学JS的心路历程-JS支持面向对象?(一)
昨天在看Prototype看到JS支持面向对象,被前辈问到说那什么是面向对象?JS是面向对象语言吗? 便开始了一连串艰辛爬文过程,今天就来看一下两者有什么差异吧(rgwyjc)! 首先面向对象有三大特 ...
- javascript中scrollTop和offsetTop的区别
scrollTop是指某个可滚动区块向下滚动的距离,offsetTop则是元素的上边框与父元素的上边框的绝对距离. 1.offsetTop : 当前对象到其上级层顶部的距离. 不能对其进行赋值.设 ...
- JS-cookie和正则表达式
一 cookie 1 什么是cookie? 会话跟踪技术 2 作用 验证身份,存储信息. 3 特点 大小限制,最多存4k: 每个域下只能存50个cookie: 有时间限制: 只能存放字符串: 只能访问 ...
- js 生成随机颜色
var getRandomColor = function(){ return '#'+(Math.random()*0xffffff<<0).toString(16); } <&l ...
- flex-direction
[flex-direction] The flex-direction CSS property specifies how flex items are placed in the flex con ...
- Using Service Workers
[Using Service Workers] 1.This is an experimental technology Because this technology's specification ...
- create-react-app之proxy
[create-react-app之proxy] create-react-app可以用于一键创建web_client环境,默认使用webpack-dev-server.但在开发过程中,往往需要cli ...
- Unity中的四个路径
Application.database:当前工程的Assets文件夹(编辑器) Application.StreamingAssets:IO流路径 当前工程的StreamingAssets文件夹(编 ...
- 申请ssl证书报提示caa提示
申请ssl证书报下面提示caa提示,这和dns有关,换一组dns重新申请 send challenge err[acme error 'urn:acme:error:connection': DNS ...
- VIM初掌握
Vim 是 Linux 系统上的最著名的文本/代码编辑器,也是早年的 Vi 编辑器的加强版.它的最大特色是完全使用键盘命令进行编辑,脱离了鼠标操作虽然使得入门变得困难,但上手之后键盘的各种巧妙组合操作 ...