第一个Xcode项目(1)-Navigation Controller

首先我们先来看下设计稿(设计稿来自某强)

看起来还不错的设计图

然后我们需要分析一下:

只有两个页面,乍一看......还挺简单的

头部的颜色是一样的

其它暂时也没想到

然后根据这个我们需要先把大概的框架搭一下

首先,因为头部风格是统一的,所以要用Navigation Controller来做根页面,所以我们在SB(Main.storyboard)里面拖入一个Navigation Controller控件

Navigation Controller拖入以后进行一堆设置

然后我们删除拖进来时候自带的第二个页面,然后自己拖入一个View Controller

删除自带的第二个页面,添加一个View Controller,关联Navigation Controller

弹出框选择root view controller

好!!我们现在已经把统一导航的页面建好了

然后我们要把样式调成跟设计稿一样的颜色

设置标题栏的样式

接着把标题栏的按钮和名称设置好

设置标题栏的左右按钮和标题名称

标题栏的左右按钮还是默认的Item文字,我们要把它换成图标,所以我们先要把图标的部分设置好,接下来看图...

把图标资源添加到Assets.xcassets文件夹下 (关于@2x,@3x可以去百度下,大概意思就是适配各个版本的设备)

图标添加完成以后的是这样的效果

图标已经准备好了,那就赶紧用起来吧,啪嗒啪嗒...

设置好标题栏的左右图标

到这里第一个页面的头部已经做好了,然后我们需要把第二个页面也添加上 (现有左边那里页面是控制头部样式的跟页面,我们在运行APP的时候是不会单独显示它的,所以它不算事一个页面)

拖入新的View Controller,建立页面关系

页面连接方式选择Show,一连接起来,头部是不是一下子就变成一样的了呢

设置新页面的控件

到此我们的两个页面都做好了,Command+R 来运行下我们的APP吧

做好后模拟器上运行的效果图

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • [相关信息:Xcode7.2 ; Swift2.0] 首先我们先来看下设计稿 (设计稿来自某强) 只有两个页面,乍...
    P_T阅读 8,016评论 3 6
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,976评论 25 709
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 14,425评论 4 61
  • "砰"地一声,是她关门出去的声音,亦是他愤怒的闸门打开的声音。我知道他自打早上醒来便没说一句话,可憋坏了。...
    泠泠昔阅读 2,435评论 0 0
  • 九月,特别喜欢闹小脾气 带着两张硬座车票,看了三四个站点的风景 从现实里逃之夭夭,在人流中南来北往 坏心情像是被留...
    高山子阅读 1,787评论 3 1

友情链接更多精彩内容