Fork me on GitHub

UI第十四讲(上) UI高级可视化设计 (XIB, Storyboard, AutoLayout, SIzeClass )

一、Interface Builder 可视化编程(简称IB)
    1.概念:什么是Interface Builder 简称IB,是Mac OS X和iOS平台下⽤用于设计和测试用户界面的
 应用程序。
          提供了拖放面板,可以将控件拖放到屏幕上。
    2. .xib 和 .nib
      IB创建.xib文件,包括视图布局,以XML格式存储。
      程序运行后,.xib文件中的内容编译为.nib文件(二进制文件), 存储在工程包中。
   注意:XIB就相当于一个View
        实际上在编译的时候编译成nib,格式就是XML的。最早的可视化编程工具。
   3.插座变量
      插座变量。用于控制IB中的UI控件。
      IBOutlet,外联指针。连接插座变量和IB中的UI控件
      设置:选中控件,按住command,向类中拖放,设置变量名。
 
 
 
 
   4.动作
     动作。用于响应UI控件的触发事件。
     IBAction。连接方法和IB中的UI控件
     设置:选中控件,按住command,向类中拖放,设置方法名。
 
 
    5.代理
 
 
二、Storyboard可视化编程
 
   1.Storyboard界面:
  

 

 

     2.对于可视化编程只要实际操作,操作和搭建界面的速度比较快,这是其长处.在其中最为重要的就是

使用Storyboard可视化编辑中的自适应布局(AutoLayout),通过调整约束,来调整布局和位置.

 

    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:对屏幕中各种元素进行约束(位置\尺寸)

 

 

SizeClass的详解

 

 

posted @ 2015-09-25 21:18  DengHuiCheng  阅读(282)  评论(0编辑  收藏  举报