搭建主流框架界面

  • 0.达成效果

    Snip20150904_5.png
    • 我们玩iPhone应用的时候,有没发现大部分的应用都是上图差不多的结构,下面的TabBar控制器可以切换子控制器,上面又有Navigation导航条
    • 我们本文主要是搭建主体的框架,数据暂时没有添加

分析做项目的基本流程

  • 1.搭建项目主框架

    • (1)先搭建tabBarController(下面有一条)
    • (2)再搭建NavigationController(上面有一条,并且每个子控制器的不一样)
  • 2.思考开发方式
    • (1)storyboard搭建(界面很少的时候使用)
    • (2)纯代码搭建(界面超过5个的时候使用,易于管理,商业项目中,一般都使用这种方式)

从0开始搭建主流框架(纯代码)

1.准备工作

  • 环境部署

Snip20150904_11.png

2.初步搭建基本界面

  • 第一步 设计目录(根据模块化+MVC思想,创建基本文件目录与文件)

    • 模块化思想创建目录路径(一般先在真实路径下创建,再拖到项目中)
    • 自定义TabBarController

Snip20150904_4.png
  • 第二步 上代码(在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]; }
  • 进行到这里,我们已经把框架搭起来了,是不是很简单?效果如图:

Snip20150904_8.png
  • 但你可能会忍不住吐槽了,这些全是冗余的垃圾代码,没有可读性,下面就来抽取一下代码吧

  • 第四步,抽取重复代码

    • 由于上文的所有代码都写在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];
}

十分钟搭建App主流框架的更多相关文章

  1. 10分钟搭建 App 主流框架

    搭建主流框架界面 0.达成效果 我们玩iPhone应用的时候,有没发现大部分的应用都是上图差不多的结构,下面的TabBar控制器可以切换子控制器,上面又有Navigation导航条 我们本文主要是搭建 ...

  2. 搭建App主流框架_纯代码搭建(OC)

    转载自:http://my.oschina.net/hejunbinlan/blog/529778?fromerr=EmSuX7PR 搭建主流框架界面 源码地址在文章末尾 达成效果 效果图 注:本文部 ...

  3. 十分钟搭建微服务框架(SpringBoot +Dubbo+Docker+Jenkins源码)

    本文将以原理+实战的方式,首先对“微服务”相关的概念进行知识点扫盲,然后开始手把手教你搭建这一整套的微服务系统. 这套微服务框架能干啥? 这套系统搭建完之后,那可就厉害了: 微服务架构 你的整个应用程 ...

  4. 十分钟搭建和使用ELK日志分析系统

    前言 为满足研发可视化查看测试环境日志的目的,准备采用EK+filebeat实现日志可视化(ElasticSearch+Kibana+Filebeat).题目为“十分钟搭建和使用ELK日志分析系统”听 ...

  5. 十分钟搭建个人网站:Jekyll主题BoHu

    最近花了三天时间制作了我的第一个jekyll theme--BoHu.一款知乎风格的模板,使用jekyll模板引擎,十分钟就能搭建属于你自己的静态博客网站. 本主题的特征为: 知乎风格 分页导航使用的 ...

  6. 基于Laravel开发博客应用系列 —— 十分钟搭建博客系统

    1.创建文章数据表及其模型(0:00~2:30) 我们已经在上一节中为博客项目完成了大部分准备工作,现在首先要做的就是为这个项目创建一个新的文章表 posts及该表对应的模型类 Post,使用如下Ar ...

  7. WordPress多本小说主题–WNovel主题发布,十分钟搭建小说站! 现已更新至1.2版本

    本文属于<WNovel主题操作手册>文章系列,该系列共包括以下 8 部分: WNovel主题使用手册之–主题安装及更新教程 WNovel主题使用手册之–小说管理 WNovel主题使用手册之 ...

  8. 通过Amazon AWS 十分钟搭建私人主机 自由的不要不要的

      首先承认有点标题党了,当时自己搞的时候可不止十分钟,好吧,我承认是坑太多了,所以特意开了一篇博文,就是要准备尝试的和我一样的菜鸟们,可以真正的十分钟搞定.  当然高手可能用不上十分钟. 首先,就是 ...

  9. 十分钟能学会的框架,MVC+20个常用函数

    LazyPHP(以下简称LP)是一个轻框架. 之所以开发这么一个框架,是因为其他框架给的太多.在高压力的情况下,ORM和盘根错节的对象树反而将简单的页面请求处理复杂化,在调试和性能上带来反面效果. L ...

随机推荐

  1. Android studio Unable to run mksdcard SDK tool

    /******************************************************************************************** * Andr ...

  2. 字符串转Unicode码

    var str = '中'; var charCode = str.charCodeAt(0); console.log(charCode); // => 20013; str.charCode ...

  3. 【转】创建和使用ANDROID LIBRARY工程

    原文网址:http://www.cnblogs.com/Greenwood/archive/2011/06/19/2084499.html 摘要: 创建library供多个工程共享代码.资源是非常常见 ...

  4. springmvc不进入Controller导致404

    转自:https://blog.csdn.net/qq_36769100/article/details/71746449#1.%E5%90%AF%E5%8A%A8%E9%A1%B9%E7%9B%AE ...

  5. Struts2验证框架的配置及validation.xml常用的验证规则

    转自:https://blog.csdn.net/wenwenxiong/article/details/55802655

  6. 任务38:JWT 设计解析及定制

    任务38:JWT 设计解析及定制 改造jwt token token的值不放在Authorize里面,而是放在header的token里面 asp.net core的源代码 在Security的下面 ...

  7. Django学习:ORM

    Object Relational Mapping(ORM) ORM介绍 ORM概念 对象关系映射(Object Relational Mapping,简称ORM)模式是一种为了解决面向对象与关系数据 ...

  8. shell Syntax error: Bad fd number 错误解决

    最近在玩spark , 需要看一下python的spark lib 是怎么加入环境变量的. 执行: sh -x bin/pyspark 报错 + dirname bin/pyspark + cd bi ...

  9. 笔记-JavaWeb学习之旅2

    数据库的基本概念 1.数据库:DataBase 简称 DB,用于存储和管理数据的仓库 特点: 1.持久化存储数据的,其实数据库就是一个文件系统, 2.方便存储和管理数据 3.使用了统一操作数据库 -- ...

  10. profile和bashrc

    转自某不知名网友 /etc/profile,/etc/bashrc 是系统全局环境变量设定~/.profile,~/.bashrc用户家目录下的私有环境变量设定当登入系统时候获得一个shell进程时, ...