转自 http://www.jianshu.com/p/695f357ab9fd
首先我们先来看下设计稿 (设计稿来自某强)
![](https://i-blog.csdnimg.cn/blog_migrate/5d6475c63d5888cc240314a609c3b7c5.webp?x-image-process=image/format,png)
看起来还不错的设计图
然后我们需要分析一下:
- 只有两个页面,乍一看......还挺简单的
- 头部的颜色是一样的
- 其它暂时也没想到
然后根据这个我们需要先把大概的框架搭一下
首先,因为头部风格是统一的,所以要用Navigation Controller来做根页面,所以我们在SB (Main.storyboard) 里面拖入一个Navigation Controller控件
![](https://i-blog.csdnimg.cn/blog_migrate/905e62a32c0c34da6a795d51adfe19db.webp?x-image-process=image/format,png)
Navigation Controller拖入以后进行一堆设置
然后我们删除拖进来时候自带的第二个页面,然后自己拖入一个View Controller
![](https://i-blog.csdnimg.cn/blog_migrate/b1de786319e33d3c528046d68885be2c.webp?x-image-process=image/format,png)
删除自带的第二个页面,添加一个View Controller,关联Navigation Controller
![](https://i-blog.csdnimg.cn/blog_migrate/28853d7bf646af6693b805fbc105480c.webp?x-image-process=image/format,png)
弹出框选择root view controller
好!!我们现在已经把统一导航的页面建好了
然后我们要把样式调成跟设计稿一样的颜色
![](https://i-blog.csdnimg.cn/blog_migrate/cc4beb80256f4a93f383b4c2fbd51889.webp?x-image-process=image/format,png)
设置标题栏的样式
接着把标题栏的按钮和名称设置好
![](https://i-blog.csdnimg.cn/blog_migrate/26b6e3a0f2a305ae8b59fe9c3724985b.webp?x-image-process=image/format,png)
设置标题栏的左右按钮和标题名称
标题栏的左右按钮还是默认的Item文字,我们要把它换成图标,所以我们先要把图标的部分设置好,接下来看图...
![](https://i-blog.csdnimg.cn/blog_migrate/1ab77f8a29b7579a6eac6a0586a067be.webp?x-image-process=image/format,png)
把图标资源添加到Assets.xcassets文件夹下 (关于@2x,@3x可以去百度下,大概意思就是适配各个版本的设备)
![](https://i-blog.csdnimg.cn/blog_migrate/b4d6514eb8bef2d11f31417bfced8a40.webp?x-image-process=image/format,png)
图标添加完成以后的是这样的效果
图标已经准备好了,那就赶紧用起来吧,啪嗒啪嗒...
![](https://i-blog.csdnimg.cn/blog_migrate/0cd3c41b94b9dfaca66caa85eb813f3d.webp?x-image-process=image/format,png)
设置好标题栏的左右图标
到这里第一个页面的头部已经做好了,然后我们需要把第二个页面也添加上 (现有左边那里页面是控制头部样式的跟页面,我们在运行APP的时候是不会单独显示它的,所以它不算事一个页面)
![](https://i-blog.csdnimg.cn/blog_migrate/6516eaade6dfbd543ff1fcf3269eefb4.webp?x-image-process=image/format,png)
拖入新的View Controller,建立页面关系
![](https://i-blog.csdnimg.cn/blog_migrate/f809f07e6a64fba12188eb32a0efffd5.webp?x-image-process=image/format,png)
页面连接方式选择Show,一连接起来,头部是不是一下子就变成一样的了呢
![](https://i-blog.csdnimg.cn/blog_migrate/b8f50c85303ee599035b2417509940af.webp?x-image-process=image/format,png)
设置新页面的控件
到此我们的两个页面都做好了,Command+R 来运行下我们的APP吧
![](https://i-blog.csdnimg.cn/blog_migrate/599021b39957f96128a07c97160c107e.webp?x-image-process=image/format,png)
做好后模拟器上运行的效果图
文/P_T(简书作者)
原文链接:http://www.jianshu.com/p/695f357ab9fd
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。
原文链接:http://www.jianshu.com/p/695f357ab9fd
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。