UI第十四讲(上) UI高级可视化设计 (XIB, Storyboard, AutoLayout, SIzeClass )
应用程序。
提供了拖放面板,可以将控件拖放到屏幕上。
实际上在编译的时候编译成nib,格式就是XML的。最早的可视化编程工具。
插座变量。用于控制IB中的UI控件。
IBOutlet,外联指针。连接插座变量和IB中的UI控件
设置:选中控件,按住command,向类中拖放,设置变量名。
动作。用于响应UI控件的触发事件。
IBAction。连接方法和IB中的UI控件
设置:选中控件,按住command,向类中拖放,设置方法名。
2.对于可视化编程只要实际操作,操作和搭建界面的速度比较快,这是其长处.在其中最为重要的就是
3.相关注意事项:
使用时,要指定StoryboardID
4. Segue关联按钮 利用segue去push视图控制器。
选中按钮,按住command,从按钮向下一级页⾯面连线。按钮不需要添加响应方法。
注:适用于不存在传值的页面切换。
Segue传值的实现:
1 // Segue实现传值
2 - (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
3
4 if ([segue.identifier isEqualToString:@"segne"]) {
5
6 secondViewController *secondVC = segue.destinationViewController;
7
8 secondVC.name = @"吃饭";
9
10 }
11
12 }
5.模态推出视图
1 //模态推出视图
2 - (IBAction)buttonpass:(id)sender {
3
4 // secondViewController *secondVC = [[secondViewController alloc] init];
5
6 //如果需要推出storyBoard的某个VC 需要在storyBoard里面获取个VC
7 secondViewController *secondVC = [self.storyboard instantiateViewControllerWithIdentifier:@"SceondVC"];
8
9
10 // secondVC.view.backgroundColor = [UIColor yellowColor];
11 [self presentViewController:secondVC animated:YES completion:nil];
12
13 }
storyBoard使用时的注意事项:
1>.需要使用的时候,一定要记得绑定一个ViewController类,直接继承于UIViewController的。
2>.控件绑定的时候,一个拖过来控件,只能绑定一段对应的代码。绑定的那段代码,一定要在跟这个StoryBoard关联的VC (相当于ViewConrtoller,而且相当于一堆XIB的集合)。
3>.如果在StoryBoard中的TableView拖入一个cell,需要给cell一个重用标识。不给的话会收到警告。拖过去的过程就相当于注册了一个cell。
如果一个StoryBoard绑定了一个VC,直接alloc init 这个vc 推出来的不是SB里的VC。如果一定要通过push推出,要通过storyBoardID获取。
4>.segue可以传值,把一个button跟另个一SB关联的时候,选择show的选项,如果有NAVI,会push过去,如果没有回模态过去。
segue有几个比较重要的属性:第一个:标识,标识出来时哪两个VC之间的segue,帮助我们做属性传值;第二个:存在两个VC,分别是原视图控制器和目标视图控制器。
三、Storyboard可视化编辑中的自定义单元格
自定义单元格的注意事项
1.选中Prototype Cells中的单元格后在Xcode工具的右边的检查器工具中修改单元格的标示符,注意标示符要与该表格视图的其他单元格区分
2.并且在自定义单元格类中添加了IB 修饰符修饰的属性和方法,需要在Storyboard的单元格检查器中的 Custom Class修改为自定义的类
四、Storyboard可视化编辑中的自适应布局(AutoLayout)
1.配置自动布局的方式
在Storyboard中进⾏行配置,添加约束约束:视图布局的规则。
利用约束可以指示:视图在同一水平行上对齐、调整视图大小匹配其他视图等等
注意:Autolayout的作用非常明确:帮我们确定在不同设备、不同(父view)环境下,同一个可视单元所应具有合适的位置和尺寸,因此,当一个 UIView上所施加的约束能够唯一确定它的frame(x, y, width, height)的时候我们的自动布局的使用才是正确的。
五.SizeClass
在iOS8中,新增了Size Classes特性,它是对当前所有iOS设备尺寸的一个抽象.
把屏幕的宽和高分别分成三种情况:(Compact, Regular, Any),也即紧凑、正常和任意。这样宽和高三三一整合,一共9中情况。
拓展知识:
ios8推出也有一段时间了,由于时间比较紧,所以没去学习ios8的新特性,
随着iphone6,6+的推出,ios屏幕适配是一个大问题,如何成功适配各种尺寸以及ipad呢?
苹果公司为了解决这个问题给出了新技术sizeclass
下面是我对sizeclass学习的一些笔记,希望对大家有用:
1>屏幕适配的发展历程
代码计算frame -> autoreszing(父控件和子控件的关系ios6) -> autolayout(任何控件都可以产生关系ios7) -> sizeclass(ios8)
2> sizeclass的作用:ios8中为了解决屏幕适配,引入了一个全新的概念,sizeclass 而这个使用的时候不需要判断屏幕的尺寸,也没有横屏和竖屏的概念,只有(Compact、Any,Regular)的概念!在Xcode新建的项目中,看 到的storyboard界面下面栏目中,有一个(wAny,hAny)点击之后会出现一个可选择的类似九宫格的表格,这个就是一个屏幕选择器,可以对不同屏幕进行选择!
3>.仅仅是对屏幕进行了分类, 真正排布UI元素还得使用autolayout不再有横竖屏的概念, 只有屏幕尺寸的概念
不再有具体尺寸的概念, 只有抽象尺寸的概念
把宽度和高度各分为3种情况 而3*3的组合就是9中情况
1) Compact : 紧凑(小)
2) Any : 任意
3) Regular : 宽松(大)
4) 符号代表 : Compact : Any : Regular
4>. sizeclass和autolayout的作用
sizeclass:仅仅是对屏幕进行了分类(判断屏幕)
autolayout:对屏幕中各种元素进行约束(位置\尺寸)