iOS-学习笔记-UI-第十一天-CSDN博客

本文链接：https://blog.csdn.net/wanqijian2015/article/details/46565661

回顾:

1.UITableViewController

列表的形式显示

2.UICollectionViewController

a. 自定义布局

继承自 UICollectionViewLayout

继承自 UICollectionViewFlowLayout

b. 自定义item的内容

继承自UICollectionViewCell

1)在cell的init方法中创建两个用于显示内容的控件,其中imageView做为背景图片控件,label做为文本的显示控件

2)重写了连个公开的属性的set方法

公开的第一个属性:存背景图的名

公开的第二个属性:存显示的文本

只要外界已给名和文本赋值,那么就为两个控件设置要显示的内容

3.UITabBarController(并列)

4.UINavigationController(层层深入)

今天:

故事板storyboard

1.故事板

1.1 为什么有故事板?

使用大量xib制作界面时,很难第一时间掌握xib的行进路线,同时控制器中会有大量的initWithNibName这样的语句用于创建控制器的实例,当有一定变化时,就需要修改所有创建xib的语句

1.2 故事板的好处?

在一个文件中,体现所有界面的行进路线,并且,在路线行进的过程中,按照箭头指向的控制器创建实例的工作也交由系统来完成,不再出现initWithNibName这样的语句了

1.3 故事板的使用

创建一个工程

[Demo1_Storyboard]

a)如何启动?

读取配置文件Main Interface中的Main—>加载Main.storyboard—>将文件中启动箭头指向的那个控制器创建出实例—>将实例设置为window的根视图—>显示

b)如何修改启动界面?

方式一:直接拖拽箭头到其他控制器上

方式二:选中要设定的vc,在第四个检查其中,勾选 Is Initial View Controller复选框即可

注意:xcode5,启动箭头不会随着删除第一个vc而消失,但是 xcode6,如果删除过箭头指向的vc后,那么箭头会消失,一定要再指定新的vc为启动界面,某则运行会报错

c)新拖拽到故事板中的场景(Scene)需要为其绑定自定义的控制器,实现步骤:

选中场景 (选中小黄球,场景外围会被蓝色线条包围)—>第三个检查器—>改变Class后面的类即可

d)如何在故事板中快速的实现不同场景之间的跳转?

step1:在第一个场景中添加一个按钮做跳转的触发源头

step2:选中按钮,按住control,按下鼠标左键,向第二个场景连线,在弹出的菜单中选择跳转方式

如果此时有导航:选push

如果此时没有导航:选model

如果某些版本的xcode6中弹出的菜单不是三项,而是好多项时,首先忽略掉下面的那几个标识着deprecated的选项,此处意味着抛弃项,只选择上面中写着 …push …present的选项即可

2.UINavigationController UITabBarController的配置

2.1 导航栏的配置

[Demo2_Navigation]

添加:

方式一:从右侧的资源库中拖拽导航对应的小黄球,如果根vc是表视图,那就保留,不是表视图就将默认自带的表视图删掉,再从资源中拖拽一个普通的小黄球,选中,navi,按下control,连线到旁边的普通vc上,在弹出的菜单中选择 relationship segue下面的 root view即可

方式二:如果对于故事板中已经存在的一个vc需要添加导航的话,那么,选中vc—>点击菜单Editor—>Embed In—>Navigation Controller

配置导航栏的左中右:

左右可以添加按钮:直接从资源库中拖拽Bar Button Item到导航栏的左或右部分,添加响应事件时,选中item,连线即可

中间可以添加文本或视图:双击导航栏的中间部分,编辑标题文字,或者是从资源库中拖拽一个控件放入到导航的中间位置即可

配置导航栏的工具条

选中导航控制器—>在第四个检查器中勾选—> shows tool bar即可

某一个vc推出时不想看到工具条

选中这个不想显示toolbar的vc—>在第四个检查器中勾选—> hide bottom bars on push即可

2.2 标签控制器的配置

添加:

实现方式一:直接从资源库中拖拽

实现方式二:选中已经存在vc,点击菜单 editor—>Embed In ->Tab Bar Controller

[Demo3_TabBar]

配置标签项上显示的文字及图片:

文字的设置:找到具体的vc—>双击场景下方的item可以直接修改—>或者是选中具体的场景中得底部的tabbar—>第四个检查器中修改 title和image属性

图片的设置:同上

被选中时图片的设置:

方法一:在场景绑定的具体的vc类中,initWithCoder方法内用代码的方法设置self.tabBarItem.selectedImage

方法二:(前提是xcode6)选中具体的vc下方的tabBar—>第三个检查器—>在keyPath下方点击加号—>修改增加的一项的三个部分—>keyPath这一项手写为selectedImage—>type这一项选择Image—>value这一项手写为具体的图片名称即可

配置navi混合tabBar:

最外层是tabBar—>下一层是navi—>下一层才是具体的vc

3.UITableViewController的配置

3.1 静态表格的配置

[Demo4_TableView_Static]

选中TableView,第四个检查器可以设置content为static Cells,设置sections为需要的分区总数,设置style为grouped分组样式

选中某一个分区,在第四个检查器中设置rows为该分区的行数,header为分区的头 footer为分区的尾

选中某一行,在第四个检查器重,设置style为自定义或其他系统定义的四种样式之一,设置accessory为系统的某种样式,如果需要自定义辅助视图为switch,则拖拽一个switch到场景的条目(小黄球所在那个条目)上,选中cell,第6个检查器,找到accessoryview,在后面的空心圆圈中按住加号,连线到条目上得switch即可

新建一个类,继承自UITableViewController,选中场景,在第三个检查器中关联这个类,然后到这个类的m文件中,删除所有的三问

如果表格中某标签或某控件需要被访问,则进入到拆分视图下,将表格中需要被访问的控件连线到m文件中即可

3.2 动态表格的配置

[Demo5_TableView_Dynamic]

a.使用系统提供的样式做cell的原型

step1:选中tableView,第四个检查器中查看content是否为dynamic,查看prototype cell的数目是否是1

step2:选中cell,第四个检查器中设置 style为除custom以外的一种

step3:重要的一步:对选中的cell原型在第四个检查器中一定要设置 identifier,这一步等同于以前的注册

step4:新建一个类,继承自UITableViewController,选中故事板中的场景,在第三个检查器中与这个类绑定在一起

step5:回答三问

b.使用自定义的cell样式做cell的原型

step1:检查tableView的content为dynamic,prototype的数目为1