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

时间: 2024-11-09 19:03:47

10分钟搭建 App 主流框架的相关文章

十分钟搭建App主流框架_纯代码搭建(OC),你不知道的框架

十分钟搭建App主流框架_纯代码搭建(OC),你不知道的框架java学习爱好者 2019-06-11 14:28搭建主流框架界面 需要源码的可以私信我达成效果 效果图ps :需要源码的可以加群,668041364导读 我们玩iPhone应用的时候,有没发现大部分的应用都是上图差不多的结构,下面的TabBar控制器可以切换子控制器,上面又有Navigation导航条我们本文主要是讨论主体框架的搭建,数据暂时没有添加分析做项目的基本流程 1.搭建项目主框架(1)先搭建tabBarController

十分钟搭建App主流框架

搭建主流框架界面 0.达成效果 Snip20150904_5.png 我们玩iPhone应用的时候,有没发现大部分的应用都是上图差不多的结构,下面的TabBar控制器可以切换子控制器,上面又有Navigation导航条 我们本文主要是搭建主体的框架,数据暂时没有添加 分析做项目的基本流程 1.搭建项目主框架 (1)先搭建tabBarController(下面有一条) (2)再搭建NavigationController(上面有一条,并且每个子控制器的不一样) 2.思考开发方式 (1)storyb

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

转载自:http://my.oschina.net/hejunbinlan/blog/529778?fromerr=EmSuX7PR 搭建主流框架界面 源码地址在文章末尾 达成效果 效果图 注:本文部分图标及效果图来自[IT江湖] https://github.com/itjhDev/itjh 导读 我们玩iPhone应用的时候,有没发现大部分的应用都是上图差不多的结构,下面的TabBar控制器可以切换子控制器,上面又有Navigation导航条 我们本文主要是讨论主体框架的搭建,数据暂时没有添

五分钟搭建App设置页面

原文出处: 陈燕翔(@燕翔de专注)   欢迎分享原创到伯乐头条 本节主题(Storyboard/模型思想搭建设置页面) 设置(Setting)页面的搭建(实现效果) 开发方式(这里提供两种,个人感觉第二种重用性较高,推荐使用.但第一种较为简单,视开发需求选择) (1)纯代码 + StoryBoard混合 开发 (2)纯代码 + 模型 思想 设置页面的搭建 假设你已经搭建出了这个基本框架<十分钟搭建App主流框架>但这毕竟是个空壳,下面让我们把设置页面简单的搭建一下吧 注:本文仅仅提供简略的搭

AliOS Things+阿里云 10分钟搭建智慧农业解决方案

摘要: AliOS Things+阿里云 10分钟搭建智慧农业解决方案 1.1 样品介绍 在工业.农业物联网布线场景中以MODBUS类型为主,样品提供MODBUS类型传感器硬件和软件快速接入方案,并将传感器数据上传到阿里云物联网平台,在云端table store数据库存储,在datav数据大屏上可视化展示. AliOS Things+阿里云 10分钟搭建智慧农业解决方案1.1 样品介绍在工业.农业物联网布线场景中以MODBUS类型为主,样品提供MODBUS类型传感器硬件和软件快速接入方案,并将传

花10分钟搞懂开源框架吧 - 【NancyFx.Net】

原文:花10分钟搞懂开源框架吧 - [NancyFx.Net] NancyFx是什么? Nancy是一个轻量级的独立的框架,下面是官网的一些介绍: Nancy 是一个轻量级用于构建基于 HTTP 的 Web 服务,基于 .NET 和 Mono 平台,框架的目标是保持尽可能多的方式,并提供一个super-duper-happy-path所有交互. Nancy 设计用于处理 DELETE, GET, HEAD, OPTIONS, POST, PUT 和 PATCH 等请求方法,并提供简单优雅的 DS

10分钟搭建你的第一个图像识别模型(附步骤、代码)

翻译:王威力 校对:丁楠雅 本文约3400字,建议阅读10分钟. 本文介绍了图像识别的深度学习模型的建立过程,通过陈述实际比赛的问题.介绍模型框架和展示解决方案代码,为初学者提供了解决图像识别问题的基础框架. 序言 “几分钟就可以建立一个深度学习模型?训练就要花几个小时好吗!我甚至没有一台足够好的机器.”我听过无数次有抱负的数据科学家这样说,他们害怕在自己的机器上构建深度学习模型. 其实,你不必在谷歌或其他大型科技公司工作,就可以训练深度学习数据集.你完全可以用几分钟的时间从头搭建起你自己的神经

【转】10分钟搭建NDK的Android开发环境

原文网址:http://blog.csdn.net/u012176591/article/details/23018913 作者:金良([email protected]) csdn博客:http://blog.csdn.net/u012176591 1. 安装JDK. 1.1 去官网http://www.oracle.com/technetwork/java/javase/downloads/index.html下载JDK7软件包,我下载的是jdk-7u51-windows-i586.exe.

安卓日记——利用include和Framelayout搭建app UI框架

layout也可以include不听说过没呢 include就是将某个写好的layout添加到另一个layout里 include好处有: 减少在主布局文件中的代码量,看起来更加清晰. 把各部分独立开来,方便管理. 可以多处复用 然后我们通常都会写个头部和脚部吧 在主的layout中 最好不要直接include 最好加一层Linearlayout 然后再设置他们是靠顶部还是靠底部 如 <?xml version="1.0" encoding="utf-8"?&