IOS视图之UI基础

IOS视图之基础整理

4.StoryBoard图形(可视化)界面开发方式

         4.1 是什么

                   是将很多的xib文件集中到一个文件中,这个文件就是storyBoard

                   IOS5开始支持StoryBoardxcode6以后强制使用StoryBoard

         4.2 能干什么

                   替代xib文件,负责创建和管理所有的界面(VC,Scene)及跳转,以及其它事情,使用方式和xib基本相同,只是会少写些代码。

         4.3 项目创建原理

                   (1)去掉原有AppDelegate中的代码

                   (2)创建一个storyboard文件

                   (3)设置程序的入口

                                      点击项目,main interface 选中相应storyBoard       

1.storyboard

         1.1 程序的入口

                   AppDelegate->StoryBoard->VC              指定相应的VC作为入口

                   (1)拖拽箭头

                   (2)设置相应VCinitail属性

         1.2 基本使用

                   xib -> scene(注:修改相应场景VC对应的类)

                   IBAction

                   IBOutlet

练习:点击按钮,显示HelloWorldLabel上。

         1.3 界面跳转

                   正向跳转 VC1->VC2

                   拖拽一个新的界面,并且使用按钮进行连线。

                   (1)系统自动创建了一个新界面

                   (2)系统自动进行了跳转

                   反向跳转 VC1<-VC2

                   注:不能连线的,自己手写代码(dis...)

         1.4 使用导航控制器进行跳转

                   (1)选择相应的VC,在菜单栏->Editor->Embedin->NavigationController

                            正向跳转:

                                      通过连线(push)

                            反向跳转:

                                      通过代码(pop)

                   (2)拖拽一个NavigationControllerStoryBoard 

                            删除默认生成的TableViewController,连线生成相应的RootViewController

                            其它操作同上。

                   (3)设置VCtitle

                            猛击导航栏的中部

                   (4)设置导航按钮

                            拖拽UIBarButtonItem控件即可

                            连线或者添加相应的事件方法的代码

                   (5)设置工具栏按钮

                            将隐藏的ToolBar显示出来(Navigation中设置)

                            拖拽UIBarButtonItem控件即可

                            添加相应的事件方法的代码

         1.5 Segue

                   将从一场景跳转到另一个场景的连线叫Segue

                   其实是Storboard中的一个对象,也可以在第四个查检器中设置相关属性:

                   Style: Push/Modal

                   Transition: 动画

                   Identifier: 起名字

                  

                   界面传值:

                            界面跳转前,prepareForSegue方法自动执行。

                   正向传值

                            .sourceViewController 来源控制器

                            .destinationViewController目标控制器

                            传值(类型转换)

                                                vc2.value = vc1.myTextField.text;

                            如果一个界面有多个Segue

                                               NSString *segueID = [segue identifier];

                                               if ([segueID isEqualToString:@"VC2"]) {…}

                   反向传值

                            和以前xib的方式一样。

         1.6 TableViewController

                   (1)动态TableView (模型层中取数据)

                            <1>拖拽一个UITableViewController

                            <2>自动创建了Cell对象                                               选中相应的Cell对象,在Cell控件对应的属性检查器第四个,指定一个Identifier,在代码中直接可以使用。

                                               style属性,还可以指定复用Cell的样式。

                            <3>TableView第三问中,直接对队中取出(指定identifier)Cell对象,并使用。

         注:自定义TableView视图,可以自行拖拽一个Cell控件。

                   (2)静态TableView (固定展示)

                            <1>默认TableView显示样式就是动态的,所以要修改显示样式。

                                      .content =Static Cells (TableView查检器)

                            <2>自定义TableViewCell

                                      Cell可以直接增加、删除、修改文字信息。

                   (3)自定义TableViewCell (灵活的方式)

                            <1>必须使用动态的TableView

                            <2>指定Cell并设置相应的类

                            <3>自定义Cell中的视图,需要与类相关联(联线)

                            <4>三问中的第三问,从模型层取值并赋值。

                            注:如果显示问题,要关掉AutoLayout

 

1.ipad开发基础

                   ipad的分辨率:1024*768 retina2048*1536

                   可以外接键盘,可同时支持四个方向

                   iphoneipad开发大体相同,只是V层不同,一些特殊功能不同(如:打电话、发短信(imessage))

2.UISplitViewController拆分视图

                   用来分割较大的屏幕,一般应用在大屏幕设置的应用程序,屏幕被分为左右两个控制器来显示内容。

                   类似于Iphone中的Master-Detail模板,Ipad有自己的Master-Detail模板。

                   使用步骤:

                   (1)左视图控制器

                            TableView

                                      三问 还是以前的三问

                                      (一答)

                                               点击左视图中的某个Cell,可以直接赋值给右视图。

                   (2)右视图控制器

                            设置一个视图用来显示传来的数据

                   (3)创建了一个分割视图控制器,并添加左右视图。

                   (4)设置分割视图控制器做为根视图控制器。

                   (5)设置被委托对象,可以捕捉分割视图控制器的事件方法。(隐藏、显示)

                   (6)还可以添加手势功能。

 

 

 

1.View(视图层)

         提供用户界面以及用户交互。

         绘制、贴图、手势、变形、布局、动画、动力、特效。

2.绘制

         2.1 基本概念

                   1>图像和显示器

                            显示器有很多显示晶体,每一个显示晶体都发3种颜色的光(红绿蓝),显示器上很多显示晶体。

                            640*480->1920*1080

                   2>像素

                            图片有多少像素,相当于有多少个颜色的点。

                            保存图片:

                                      1像素由4个数表示(红、绿、蓝、Alpha),共4Byte,表示一个颜色点。

                            图片的大小=分辨率*4 (bmp)

                            但现在使用的图片jpg/png,都是经过压缩过的,图片的大小会小些,图像会失真,保持图片的原样,要使用bmp

                   3>图像

                            内存中保存图像有两种方式:

                            位图(点阵图)RGB图片,照片等都使用二进制数位图。

                            矢量图,保存的不是点阵的数据,而是数学公式,函数等,点、线、面几何形状,阴影放大缩小不会失真。

                   2.2 如何绘制图形

                            绘制矢量图、绘制位图

                            2.2.1 绘制图形的API

                                      UIKitFramework            OC语言    API

                                               +Core Animation     C语言        API

                                                         +Core Graphics    C语言        API

                                                                  +System(IOS)

                            2.2.2 在哪写绘制代码

                                      在视图的类中写

                                      UIView —> drawRect 会在视图显示前自动调用

                                      类似于UIViewController —>ViewDidLoad

                                      视图类的绘制代码要写在drawRect方法中,此方法是自动调用的。

                                      如同不能主动调用VC中的viewDidLoad方法一样, 我们也不能主动调用View中的drawRect方法。

                            2.2.3 如何绘制

                                      (1)找一个画板          *得到上下文

                                      (2)勾勒形状              增加路径

                                      (3)调色                      设置颜色

                                      (4)上色                      开始画

 

图形上下文(Graphics Context):保存绘图信息、绘图的状态、决定绘制的输出目标。

绘制好一个图形(保存)->图形上下文(显示)->输出目标

可以输出BitmapPDFWindowLayerPrinter

3.UIBezierPath 贝赛尔曲线

         3.1 是什么

                   对底层Core Graphics的一部分常见的绘制api的封装类

         3.2 干什么

                   能让我们按照面向对象的方式绘制图形、直线、曲线、圆、扇形、多边型等。

         3.3 使用

                   使用与C中的函数库相类似的四步

         3.4 重要属性

                   .lineWidth 线宽

                   .lineCapStyle 线头风格

                   .lineJoinStyle 连线风格

         3.5 如何画圆弧

                   参数中心点位置  圆心 参数半径

      参数开始的弧度角度 参数结束的弧度角度

      参数顺时针逆时针

                   UIBezierPath *path = [UIBezierPathbezierPathWithArcCenter:CGPointMake(160,200) radius:80 startAngle:0 endAngle:M_PI_2 clockwise:YES];

                   2*M_PI

                   M_PI_2 四分之一圆

         3.6 定义视图

                   一个下载标记视图,圆形进度条。

                   A.计算弧度:

                            *起始弧度位置 M_PI_2*3

                            *结束弧度位置 self.value*(M_PI*2)+M_PI_2*3

                            UIBezierPath *path = [UIBezierPathbezierPathWithArcCenter:CGPointMake(160,200) radius:80 startAngle:M_PI_2*3 endAngle:self.value*(M_PI*2)+M_PI_2*3 clockwise:YES];

                   B.传值的过程

                            slider的值->slider的事件方法->自定义View->属性value(自己写代码通知视图刷新)->计算弧度方法并显示

                            视图刷新:

         <1>重新了属性的Setter方法

         <2>调用属性的Setter方法改变值时,要刷新自定义视图。

                            [selfsetNeedsDisplay];

                           

 

 

1.绘制顺序

         <1>铺背景

                   .backgroudColor 先起作用

         <2>绘制

                   drawRect

         <3>绘制子视图

                   重复12

2.绘制其它图形

         曲线、圆角矩形、椭圆

         四个重要点:开始点、结束点、控制点1、控制点2

         工厂方法,初始化方法,add...(普通方法)

3.画字符串 NSString draw

         超出视图的部分自动换行的

   超出自定义图形区域 会舍掉内容

         自适应字体的个数

         新语法要求,其属性必须是字典的方式:

         NSDictionary *attributes = @{NSFontAttributeName:[UIFontitalicSystemFontOfSize:90],NSForegroundColorAttributeName:[UIColor redColor]};

    [str drawAtPoint:CGPointMake(20,30) withAttributes:attributes];

4.画图片

            (1)在屏幕上绘制图片

            (2)可以指定一个图形,剪切图片的内容

 

5.贴图

            美化app的。

            5.1 基本概念

              ios设备              分辨率(像素)     (坐标)

              Retina

              iphone4/4S     640*960              320*480

              5/5s/5c             640*1136           320*568

              6                         750*1334           375*667

              6plus                 1242*2208         414*736

           

              new ipad,ipad4

                     ipad Air

                     ipad Air2

                     ipad mini2

                     ipad mini3      2048*1536          1024*768

                  

                     Retina

                     ipad,ipad2

                     ipad mini        1024*768             1024*768

                     iphone3GS    320*480               320*480

 

                     i6p R屏上1个点 = 3*3像素               3x

                     Retina屏上1个点 =  2*2像素           2x

                     Retina屏幕上1个点 = 1*1像素    …

         5.2 ios系统加载图片时,会对Retina相关图片进行处理。

                            ***在代码中的是:文件名.jpg

                            if(Retina…){

                                               文件名@2x.jpg;

                            }

                            else{

                                               文件名.jpg

                            }

                            原则:

                            if(当前的设备是Retina){

                                      if(资源中是否存在...@2x.jpg){

                                               加载welcome1@2x.jpg

                                      }else{

                                               加载welcome1.jpg

                                      }

                            }else{

                                      加载welcome1.jpg

                            }

                            注意:可能存在缓存问题。

                                               把项目缓存清空(Product->Clear)

                                               再清空模拟器的缓存(删除模拟器中的app或还原)

         5.3 9切片技术(9 slick)

                   (1)目的

                            解决不同尺寸,相同设计风格的图片,需要多张图片的问题。

                            如果不切图,程序就得写代码重绘(IOS6以前就这么干的),或者美重新做相应的图片,出很多图。

                   (2)用在哪里

                            消息框、新闻栏、各项目需要美化,都可以使用。

                   (3)切片原则

                            切的单位是点,切刀与边的距离。

                            三切片(横着两刀或竖着两刀)、九切片(最多四刀)            (4)两种模式

                            Tile 瓦片(复制)模式(默认)

                            Stretch 拉伸模式

 

        

         5.4 Xcode5中的9 Slicing技术

                   不写代码完成9 Slicing技术

                   (1)Xcode5新增的AssetCatalog项目组件

                            在任何项目中,都有一个images.xcassets目录,用来统一管理项目中的图片资源,还提供对图片的设置适配,高清,拉伸等支持,也提供了9Slicing的支持。

                   (2)使用Asset的好处在于,提供的资源文件不需要特别遵守文件的命名规范,另外,可以不写代码进行切片。还可以管理和适配各种需要的图片资源。

                   (3)如何使用

                            拖拽图片到images.xcassets

                            选中其中要切片的项(1x(storyboard),2x(模拟器、真机))

                            点击下方的show Slicing就可以切片了。

                  

 

         5.5 对各种控件进行贴图美化

                   UIButonUITextFieldUISliderUISwitch

                  

                   UIButton

                   按钮等控件一般有以下几种状态:

                   1>Normal 正常

                   2>Highlighted 高亮(被用户按下之后的状态)

                   3>Disabled                 .enabled = NO(按钮不可用)

                   4>Selected                           .selected = YES(按钮被选中)

 

                   可以为一个按钮的不同状态设置不同的贴图:

                   1>直接在xibstoryboard中配置

                   2>用代码来设置

                   美工提供的图片一般会如此命名:

                            XxxxYyyy.png

                            XxxxYyyy@2x.png      Normal状态下的图片

                            XxxxYyyyHL.png

                            XxxxYyyyHL@2x.png  Highlighted状态下的图片               

                  

 

1.tintColor属性

         1.1 是什么

                   是视图中的一个属性,代表自己的颜色。

         1.2 能干什么

                   可以统一管理一个视图中所有子视图和子视图的子视图的颜色。

                   可以批量修改一些视图的颜色,如果其中的子视图,不想和父视图的颜色一致,可以自行设置,优先取本视图设置的tintColor

2.UIAppearance

         2.1 是什么

                   是一个协议,遵守此协议的对象可以批量设置某种控件的外观(颜色、贴图)

         2.2 如何获取

                   任何视图类都有一个方法:

                            +(instancetype)appearance;

                   此方法返回的对象会遵守UIAppearance协议。

         2.3 如何使用

                   拿到此对象,就像对普通控件那样,设置颜色、背影等内容,来批量设置某种控件的外观。

                   如果不满意,可以单独设置。

3.应用的图标和启动画面

         images.xcassets

                   AppIcon:

                            58*58(ios6以前)

                            80*80(ios7)120*120(ios7)

                   LaunchImage

                            640*960(i4/4s)

                            640*1136(i5/i5s/i5c)

                   xcode6中,取消了LaunchImage,使用了xib文件。

                            launchScreen….xib

                   注:在项目的配置界面修改

 

4.手势(GestureRecognizer)

         4.1 什么是手势

                   用户对View进行一些触屏操作。

         4.2 有哪些手势

                   一次性手势:一次只会执行一个方法

                            Tap : 点、按

                            Swipe : 轻扫(查看图片)

                   连续性手势:不断的重复执行一个方法

                            LongPress : 长按(选择功能,复制、粘贴)

                            Pan : 拖动 (移动图标)

                            Pinch : // (放大或缩小)

                            Rotation : 旋转

         4.3 手势的本质

                   程序中,一个手势其实就是一个对象,用户对视图的操作,就会被操作系统感知,通知视图做相应的操作。

                   一次手势形成后(系统对手势识别成功),只触发一次事件,调用方法。

                   连续性手势会连续触发事件,调用多次方法。

         4.4 如何使用手势

                   (1)首先要创建手势对象

                   (2)然后设置相关属性(不同手势,属性是不同的)

                   (3)最后将手势加入到需要感知手势的视图中。

 

         每一种手势都有一个类对应,所有的手势类都继承自UIGestureRecognizer,而且子类的全名一般为:

         UIXxxxGestureRecognizer,如:

         UITapGestuteRecognizer …

        

         4.5 UITapGestureRecognizer 点、按

                   重要属性:

                            .numberOfTapsRequired点击多少次

                            .numberOfTouchesRequired用多少个手指点

        

         4.6 UISwipeGesureRecognizer 轻扫、划动

                   重要属性:

                            .numberOfTouchesRequired用多少个手指扫

                            .direction 扫的方向 左右

                                      可以同时指定多个方向(垂直、水平),需要用"|"的方式将多个方向的枚举值合并,虽然支持但无法区分添加的多个方向的手势支持多手势,使用同一个事件方法。

         4.7 UILongPressGestureRecognizer 长按

                   重要属性:

                            .numberOfTouchesRequired用多少个手指扫

                            .minimumPressDuration最短多长时间算长按,单位秒。

                            .allowableMovement 允许在手势识别期间手指可移动的范围。

         4.8 UIPinchGestureRecognizer /

                   重要属性:

                            .scale                                    /扩的倍数

                            .velocity              速度,捏扩时的速度,负(),正()

        

         4.9 UIPanGestureRecognizer 拖动

                   重要属性:

                            mininumNumberOfTouches最少几个手指

                   重要方法:

                            获取用户当前手指所在位置坐标(相对于起始位置)

                            -(CGPoint)traslationInView:(UIView*)view;

                            获取用户当前拖动的方向和速度

                            -(CGPoint)velocityInView:(UIView*)view;

                            从父类继承的方法,返回绝对位置的坐标

                            -(CGPoint)locationInView:(UIView*)view;

         4.10 UIRotationGestureRecognizer 旋转

                   重要属性:

                            .rotation 旋转的弧度(正负可分顺时针还是逆时针旋转)

                            .velocity 旋转的速度

 

         5.Transform 变形

                   5.1 变形

                            可以让一个视图进行旋转、缩放和位移的变化叫变形。改变一个视图的对象属性.transform就可以得到变形的效果。对.transform的属性做不同的改变,可以达到让视图:

                   旋转(rotation)

                   缩放(scale)

                   位移(translation) 这三种效果。

                   5.2 transform属性

                            .transform属性是一个类型为CGAffineTransform的结构体,此结构体有6个成员值(float类型),再加上3个固定值,形成了3*3矩阵(高等数学),这个矩阵中的6个值发生不同的变化,就会导致视图发生不同的变形。(计算机图形学)

                   5.3 如何使用

                            理论上,改变.transform属性中的6个值,就可以变形效果,但实际上,很难计算出这6个值,我们一般会借助api来实现变形。

                   5.4 重点强调

                            变形和自动布局(AutoLayout)技术是冲突的,所以,如果视图需要变形,那视图就无法使用自动布局。

                   5.5 具体的实现三种变形:

                            (1)旋转(rotation)

                                      CGAffineTransFromRotation创建一个旋转的transformmake的意思从0位置开始旋转。

                                      CGAffineTransFromRotate在原来旋转的基础之上进行叠加。

                            三步:

                                      先得到ViewTransform属性

                                      在原来的基础上叠加旋转的角度

                                      将计息好的transform赋值给View

                            注:将手势对象的rotation0

                           

                            (2)缩放(Scale)

                                      CGAffineTransformMakeScale创建一个缩放的transform,从1开始计算。

                                      CGAffineTransformScale(transform,scale,scale)在原来的缩放基础上进行叠加。

                                      sender.scale= 1;

                                      缩放属性通常要与Pinch手势配合使用。

                            (3)位移

CGAffineTransformTranslate(transform,translation.x,translation.y);

                            在原来的位移基础上进行叠加

                            [sendersetTranslation:CGPointZero inView:self.View];

                            CGPointZero 给结构变量赋0

                            位移通常要与Pan手势配合使用

                           

                            一个常量值:CGAffineTransformIdentity

                            系统定义好的一个常量值,是所有视图对象.transform属性的初始值。

                   6.5 手势的三种状态:

                            Began

                            Changed

                            Ended

 

 

 

1.storyboard创建手势

         工作原理参见控件操作,非常相似。

         操作步骤:

                   (1)在对象库中,拖拽相应的手势到相应视图中。

                   (2)给手势连线添加相应的事件方法。

                            注:如果要给UIImageView添加手势功能,要记得修改交互属性。

                   (3)添加相应手势事件方法的功能。(code)

                   练习:重构图片查看器。

2.手势的同时识别问题

                   默认情况下,一个视图一次只能识别一种手势,如果希望同时能识别多个手势,那么就需要一个对象(被委托对象)在多个手势之间进行沟通。

                   多个手势要向被委托对象发送消息,来确认他们是否可以同时工作。

                   (1)要求被委托对象要遵守协议

                            UIGestureRecognizerDelegate

                   (2)实现相应方法

(BOOL)shouldRecognizeSimultaneouslyWithGestureRecognizer…

                            返回值是YES支持多手势

                                                                             NO不支持

                   (3)将委托对象与被委托对象关联在一起

                   (4)方法的参数

                            有些时候,需要根据判断哪几个手势可以同时支持,需要使用参数进行判断

 

3.深入坐标系

         和坐标系的四个属性:

         .frame .bounds .transform .center

         3.1 frame属性

                   (1)是什么

                            是一个CGRect类型的结构{x,y,width,height}

                            描述一个视图在父视图中的位置和占用父视图空间的大小

                   (2)什么时候使用

                            当一个视图加入到父视图中时,需要设置这个视图的frame属性,该子视图在父视图中的位置和大小,与transform/AutoLayout技术会有冲突。

                   (3)frame属性和其它三个的关系

                            <1>frame->center

                                      直接修改frame的值会修改center

                            <2>frame->transform不会

                                      直接修改frame的值不会修改transform

                            <3>frame->bounds

                                      直接修改frame的值会修改bounds

                   (4)一般情况下,如果一个视图.transform属性值是初始值,其frame属性和bounds属性会保持一致。

         3.2 bounds属性

                   (1)是什么

                            也是一个CGRect类型的结构(x,y,width,height)

                            描述的是一个视图自身的大小,和父视图无关,由于和父视图无关,所以bounds属性中,没有位置信息,其x,y的值永远为0

                   (2)什么时候用

                            当计算子视图的坐标时,需要参考子视图本身的大小、或者父视图的大小,需要使用Bounds属性。当写一个View的子类(自定义Cell),视图的大小不同,由数据的多少决定的,计算大小时,就需要自行修改视图(自定义Cell)bounds值。

                   (3)和其它3个的关系

                            1>.bounds->frame

                            2>.bounds->center不会

                                      直接改变bounds的值,以中心点,改变大小。

                            3>.bounds->transfrom不会

         3.3 center

                   是一个视图的中心点(位置),位移...

                   (x+width/2,y+height/2)

                   和其它3个的关系:

                            center->frame

                            center->bounds 不会

                            center->transform不会

         3.4 transform

                   (1)是什么

                            是一个CGAffineTransform类型的结构体

                            描述是一个3*3矩阵,此矩阵可以让视图在.frame基础上发生变形(旋转、绽放、位移)

                   (2)什么时候用

                            视图处于AutoLayout管理下时,不可用,只有想让视图进行旋转和缩放时才用,用时需要关掉AutoLayout

                   (3)和其它3个的关系

                            <1>transform->frame

                            <2>transform->center不变

                            <3>transform->bounds不变

                   注:主动改变framebounds的值会改变,如果通过transform改变以frame的值,其bounds的值不会改变。

                   小结:

                            frame 描述两个视图的位置

                            bounds 得到某个视图宽、高值

                            center 视图移动、变化时

                            transform 变形时,配合手势

 

4.UITouch 触控

         4.1 是什么

                   是一个UITouch类型的对象,当用户touch"视图",会自动产生UITouch对象。

                   响应者对象:

                            ios中不是任何都对象都能处理事件,只有继承了UIResponder的对象,才能接收并处理事件,我们称之为响应者对象。

         4.2 如何获取UITouch对象

                   需要自定义视图类,覆盖指定的方法,在方法获取UITouch对象。

         4.3 有什么用

                   可以跟踪用户在视图上手指动的轨迹,判断用户的意图,以此进行绘图、涂鸦、手写等操作。

         4.4 怎么用

                   在视图中,覆盖父类的方法。

                   手指开始触摸视图时调用

                   touchesBegan

                   手指开始移动时调用

                   touchesMoved

                   手指离开视图时调用

                   touchesEnded

                   两个参数:

                            参数1NSSet集合 一个手指头就是一个Touch对象

                            参数2:事件->事件类型、事件的触发时间

         4.5 UITouch对象

                            通过两个对象方法,可以得到手指移动的轨迹

                   返回一个CGPoint类型的值,表示触摸在View这个视图上的位置

                   - (CGPoint)locationInView:(UIView*)view;

                   该方法记录了前一个坐标值

             - (CGPoint)previousLocationInView:(UIView *)view;

 

 

5.布局(Layout)

         5.1 是什么

                   是指一个视图中如何摆放它的子视图(安排子视图的位置和大小)

         5.2 为什么要布局

                   屏幕尺寸的大小会经常变化或不一致,当屏幕大小发生变化时,父视图的bounds会改变,父视图中的内容重新安排,安排子视图的位置和大小。

         5.3 可以导致屏幕的大小发生变化的原因:

                   1>设备不同

                            iphone4/4s 320*480

                            iphone5/5s 320*568

                            ip6…

                            ipad…

                            …

                   2>屏幕方向不同

                            iphone5s 320*568() 568*320()

                   3>状态栏

                            可以隐藏 20个点height

                            特殊状态:

                                      来电话时:绿色状态显示

                                      开启个热点:蓝色状态显示

                                      录音:红色状态栏

                   4>各种bar

                            NavigationBar 44()/32()

                            TabBar 49()/32()

                            ToolBar 44()/32()

                            ios7中,状态栏,NavigationBar会挤占VC的空间

                   5>*键盘

                            容易遮挡住重要的信息,高度不确定。

         5.4 如何布局

                   (1)纯代码布局

                            当屏幕大小发生变化时,自动执行一段代码,重新计算所有的子视图和位置的大小。

                            其本质就是计算和修改所有子视图的frame属性

                            特点:功能强大,非常繁琐。

                   (2)Autoresizing

                            ios5及以前的自动布局技术,只能选择其一。

                            如果纯代码布局(手动布局),一定不会使用AutoLayout(自动布局)autoresizing和代码布局经常在一起使用。

                            特点:操作简单,但功能有限,只能设置一些特定环境下的布局。

                   (3)***AutoLayout

                            ios6开始有,ios7中技术更加成熟。

                            也可以用代码的方式使用AutoLayout

                            其本质是创建很多对子视图的约束,从而让系统自动计算视图的位置和大小。

                            特点:操作简便,灵活度略差。

 

         6.纯代码布局

                   6.1 是什么

                            当屏幕大小发生变化时,代码改变了视图.frame属性,在显示时位置和大小的方式。

                   6.2 注意

                            一定要关掉autolayout

                   6.3 如何做

                            控制器类中,有一个方法,viewDidLayoutSubView

                            当屏幕的大小发生变化时自动调用

                            布局代码就应该写在此方法中

                           

 

 

1.viewDidLoadviewDidLayoutSubviews

         自动执行的,由系统调用。

         执行顺序是先执行:

                            第一次加载视图的时候:

                                      viewDidLoad(只会执行一次)

                                      viewDidLayoutSubviews

                            第二次包括以后,如果屏幕发生变化

                                      viewDidLayoutSubviews

2.IOS7各种bar的布局

         IOS7以前的版本是没有提供专门的解决方案,要自己写if...else...判断,VC中可以通过.topLayoutGuide.bottomLayoutGuide.length属性来获取目录VC上面的各种Bar和下面的各种Bar挤占了多少VC多少空间。

         上边所有栏所占空间的大小(nav横竖屏时,高是不一样的)

         .topLayoutGuide

         下边所有栏所占空间的大小

         .bottomLayoutGuide

         隐藏状态栏

         -(BOOL)prefersStatusBarhidden

3.绘制布局

         drawRect方法中,绘制视图后,如果关掉AutoLayout的,图形可能会出现问题,解决的方法,将视图的contentMode属性设置成Redraw

         Redraw:专门用于绘制图形的视图,当视图大小发生变化时,重新绘制视图,相当于给视图重新发送:setNeedsDisplay

         Redraw模式可以确保当屏幕大小发生变化时,绘制图形不会变形。

4.视图的自身布局

         4.1 是什么

                   VC对自己的小跟班view有布局的能力

                            UIViewController

                                      -(void)viewDidLayoutSubviews

                                      -(void)viewWillLayoutSubviews

                   其实视图本身也有布局的能力

                            UIView

                                      -(void)layoutSubviews

                                      当视图大小发生变化时,就会自动调用此方法,可以对当前视图的所有子视图进行布局。

         4.2 什么时候使用

                   一般情况,VCviewDidLayoutSubviews负责布局,但如果视图是自定义,那可以在视图内部对自己的子视图进行布局。

         4.3 注意

                   一定要关掉xib中的autolayout

                   layoutSubview方法不应该主动调用

                   当视图显示前会自动调用

                   如果需要主动调用,比如修改的内容以后希望再次布局,应该向视图对象发送消息:setNeedsLayout

                   参考:

                            VC:viewWillApear       viewDidLayoutSubviews

                                      view:setNeedsDisplay    setNeedsLayout

         4.4 调用顺序问题

                            VC:viewWillLayoutSubViews

                                      View:LayoutSubviews

                                      View:LayoutSubviews

                            VC:ViewDidLayoutSubViews

 

         实现步骤:

                   tableview->默认cell显示、默认数据->默认Cell、自定义数据显示->自定义Cell默认数据显示->自定义Cell自定义数据->重新布局

 

5.Autoresizing布局

         5.1 是什么

                   是旧版(ios5及以前)的自动布局技术

                   操作简单,api也简单,功能简单,有局限性,现在依然有效。

                   struts/spring ->Autoresizing

         5.2 干什么

                   管理子视图的一些简单布局

                   实现原理:

                            当界面大小发生变化时,根据变化的比例,对子视图也进行同比例变化。

         5.3 怎么用

                   (1)首先关半AutoLayout(不关掉看不到)

                   (2)选中需要布局的子视图

                   (3)在检查器中(5)

                   (4)点击...

                            autoresizing:选择相应的视图

                            外框(4):红线负责子视图到父视图的边距

                            选中红色,距离固定,否则弹簧效果

                            内框(2):红线负责子视图是否可以左右或上下拉伸

                   注:有些功能Autoresizing是不具备的,此时需要代码布局,进行补充。代码的方式会在Autoresizing后执行,会将Autoresinzing不足的地方,进行修改。

         5.4 Autoresizing技术也有代码的实现方式,如果需要支持多个布局方向,"|"同时处理多个方向。

                   button.autoresizingMask = …Left… | …Right …;

 

 

6.AutoLayout(自动布局)

         6.1 是什么

                   IOS6开始的一个新的布局技术

                   功能强大,操作复杂。

                   xcode5开始,已经很好用了,xcode6中加强。

         6.2 工作原理

                   两大原则:参照、约束。

                   (1)是通过一系列的"约束"(Contrait)来完成布局的。

                   (2)什么是约束

                            约束是一个对象,是一个条件。

                   (3)如何使用约束

                            我们可以创建很多约束"对象"加入到视图中,此视图会自动满足这些约束所要求的条件,从而达到自动布局目的。

                            自动布局的本质是给视图加约束,加很多约束。视图自动计算出自己满足约束条件的.frame

                   (4)如何创建约束对象

                            storyboardxib来创建,其实就是在storyboard中配置。

                            code方法来创建

                                      <1>普通代码方式创建

                                      <2>使用框架方式创建

         6.3 使用步骤(storyboard)

                   (1)打开自动布局(AutoLayout)

                   (2)选中布局中需要的视图对象

                   (3)创建相应的约束对象

         6.4 storyboard中的使用方式

                   (1)快速切换storyboard里的视图尺尺寸

                   (2)对齐约束

                            居中约束(相对于父视图)

                            相对约束(两个视图间相对关系)

                            //下面的约束针对于上面的控件

                            update frame:

                                      添加约束的同时,更新视图的frame

                   (3)位置约束

                            添加距父视图上、下、左、右边距的距离

                                      宽的约束、高的约束

                            添加相对位置约束

                                      等宽和等高

                            //?上面位置的约束针对于下面的

                   (4)批量处理

                            update Frames 根据设置的约束更新视图

                            update Contrains 根据视图位置更新约束

                            add missing … 添加缺少的不严谨的约束

                            Reset to …添加系统建议的约束

                            clear 删除所有已经设置好的约束

                  

         6.5 约束的两大原则:

                   1>描述清楚(如果不清楚,橙()色)

                   2>互不突冲(如果冲突,显示红色)

                            如果满足两大原则,蓝色。

 

7.AutoLayout的代码方式

         7.1 什么时候用

                   当子视图对象是用代码创建的,并且需要给子视图布局时,只能用代码的方式自动布局。

         7.2 怎么用

                   (1)创建约束对象

                            API->NSLayoutConstrain

                   (2)将约束对象添加到父视图类中              (3)创建一个约束对象

//参数1:给哪视图添加约束

//参数2:视图的属性

//参数3:视图与相对视图的关系

//参数4:相对视图

//参数5:相对视图的属性

//参数6:系数(是否需要父视图中属性值)

//参数7:常数

+(id)constraintWithItem:(id)view1attribute:(NSLayoutAttribute)arrt1 relateBy:(NSLayoutRelation)relationtoItem:(id)view2 attribute:(NSLayoutAttribute)arrt2multiplier:(CGFloat)mutiplier constant:(CGFlaot)c;

 

万能公式:(可以一切约束对象)

view1.attr1<relation> view2.attr2 * multiplier + constant;

button.left(leading)=self.left* 1 + 20;

button.right(trailing)=self.right* 1 + (-20);

 

 

 

www.csdn.net

www.devdiv.com

www.cocoachina.com

www.code4app.com

 

数字 问题

100

数学 100-50  基本数据类型

标识 1 110… 189… 字符串类型 isEqualToString

转换 110197007010000 字符串->数学

一、Autolayout的对齐与等宽

         1.对齐

                   两个控件都没有描述清楚,以先创建的控件为准。

                   两个控件有一个描述清楚,以描述清楚的控件为准。

         2.等宽

                   两个控件都没有描述清楚,以控件的默认宽度为准。

                   两个控件有一个描述清楚,以描述清楚的控件为准。

二、VFL (Visual FormatLanguage)

         1.是什么

                   是一个字符串,具有一定格式,代表一些约束含义。

         例:|-10-[button]-space-[button2(button1)]-right-|

         2.方法

                   constraintWithVisualFormat:option:metrics:view:

         3.如何写VFL字符串

                   | 代表父视图的边

                   H:| 代表左边 水平

                   V:| 代表上边 垂直

                   []: 代表一个子视图(或控件)

                   (): 代表一个条件(==,>=,<=)==可以省略

                   - 代表间距

 

                   [button1]-[textfiled] 标准距离8

                   [button(>=50)] 表示button的宽度

                   |-50-[button]-50-| 距父视图左边50 右边50

                   v:[topbutton]-20-[button] 两个按钮的垂直距离

三、动画(Animation)

         1.是什么

                   一般指的是"帧动画",由一帧一帧的静态的图片快速切换达到动画效果。帧代表就是一张静态图片。

                   30FPS(帧率) Frame Per Second

                   人眼是无法25帧以上的图片,感觉上就是动画。

                   连续画图片的方式叫渲染。(Rendering)

                   手机上一般也就是30帧,过快会导致费电。

         2. IOS中的动画

                   UIImage 直接支持动画

                   NSTimer  手工实现动画

                   UIView 类方法实现动画(最常用)

                  

                   Core Animation Framework 底层做动画

                   IOS7增加:

                            UIKit Dynamic(动力)

                            Motion Effects (特效,不能算动画)

                            Sprite Kit (2D引擎)

                   IOS8增加:

                            Sprite Kit (3D引擎)

                            Coscos2d(OC)/***Coscos2dx(C++)跨平台

                            Metal

         3.UIImage动画

                   最基本动画,使用UIImage对象快速切换图片形成动画效果。做小动画可以使用。

         4.NSTimer手动动画

                   4.1 是什么

                            是一个定时器类,用于定时向对象发送消息。

                   4.2 如何使用

                            [NSTimer schedule]开头的类方法创建NSTimer对象,对象创建后直接工作。

                   4.3 匀速动画

                            匀速的改变视图的一些值,就可以达到匀速动画的效果。

                            centertransform  frame alpha

                            当前值 = 开始值+当前值的帧数*(结束值-开始值)/帧率*动画时长)

                   4.4 变速动画

                            常见情况:

                                      由快到慢

                                      由慢到快

                                      由慢到快再到慢

                                      由快到慢:

                                               当前值 = 上一次值 + (目标值-上一次值)*渐变因子

                                               Y= 500 + (100-500)*0.1 = 460    …40

                                               Y= 460 + (100-460)*0.1 = 424    …36

                                               Y= 424 + (100-424)*0.1 = 392    …32

         5.UIView动画

                   5.1 是什么

                            UIKit提供专门制作动画的API,其实就是对CoreAnimation的封装。

                            可以轻松的实现动画,不需要经过计算。

                   5.2 制作动画的步骤

                            (1)设置需要动画的视图的初始属性值

                            (2)UIView类发消息,告诉UIView类需要什么样的动画。

                            (3)将动画结束的状态(属性值)写入到Block

         6.UIView高级动画

                   参数1:动画时长 参数2:延迟的时长

                   参数3:动画特征 参数4:动画结束值

                   参数5:动画结束后的处理

[UIViewanimateWithDuration:delay:option:animations:completion:]

                   option:动画效果、特征

                            UIViewAnimationOptionRepeat重复

                            UIViewAnimationOptionCurveEaseInOut  先慢再快再慢                    UIViewAnimationOptionCurveEaseIn越来越快

          UIViewAnimationOptionCurveEaseOut 越来越慢

               UIViewAnimationOptionCurveLinear 匀速   

               UIViewAnimationOptionAutoreverse反转

            可以同时支持多个动画特效,但是要使用"|"符号进行连接。

            注:动画效果会与AutoLayout冲突。

        

         老语法:

                   早期的动画api

                   A.开始动画 [UIView beginAnimations]

                   B.设置属性值 [UIView setAnimations]

                   C.结束动画 [UIView commitAnimations]

 

 

1.Core Animation

         1.1 是什么

                   是一个图形渲染和动画的底层框架,用于IOSMACOS开发。

         1.2 能干什么

                   提供更多更强大的图形渲染(显示)效果,提供专业级的动画效果,是高层图形技术的技术,有更强大的API

         1.3 如何使用

                   经常获取一个.layer属性(类型是CALayer),对此属性进行相关的操作,来达到需要的效果。(动画、渲染)

                   ios中,基本上能看得见、摸的着的基本都是UIView

                   其实UIView之所以能显示屏幕完全 是因为它内部的一个图层,在创建UIView对象时,UIView内部会自动创建一个图层(CALayer),通过UIView的属性访问它的。

                   UIView需要显示到屏幕上时,会调用drawRect:方法进行绘制,并且会将所有内容绘制在自己的图层上,绘图完毕后,系统会将图层拷贝到屏幕上,于是就完成了UIView的显示。

                   UIView本身不具备显示的能力,拥有显示功能,是它内部的图层。(CALayer)

         1.4 如何获得CALayer

                   任何UIView及子类对象都有一个属性叫.layer,此属性就是UIViewCoreAnimation层,类型是CALayer

         1.5 UIView类和CALayer

                            UIView视图                         CALayer

                                      .layer         ——>                 self.layer

                                      .frame       ——>                 .frame

                                      (3*3)                                       (4*4)

                                      .transform——>                 .transform:CATransofrm3D

                                      .center     ——>                 .postion

                   .autoresizing ——>                .autoresizing

                   +addSubViews—>                .addSubLayer

                            UIKit              ——>                 CoreAnimation

         1.6 CoreAnimation动画 是什么

                   是什么非常强大的动画处理的API,使用它能做出非常炫丽的效果,而且往往是事半功倍,也就是说,使用少量的代码就可以实现非常强大的功能。

                   CoreAnimation是跨平台,MACOSXIOS平台。

                   CoreAnimation是动画执行过程是在后台操作的,不会阻塞主线程。可以理解为在执行动的时候,还能点击按钮。

                   要注意,CoreAnimation动画,是直接操作CALayer的,而非UIView

 

框架(framework):类的集合。

                   Foundation框架:NSObjectNSValue…

                   UIKit框架:UIButtonUILabel…

Api(Applicationprogram interface):类中有哪些内容可以用。包括属性和方法。

                   UIButton类:

                            属性(backgroundColor…) 设置背景属性

                            方法(addTarget…) 设置事件方法

 

         1.7 使用步骤

                   CoreAnimation

                            CAPropertyAnimation

                                      *CAKeyframeAnimation

                                      *CABasicAnimation

                   (1)关键帧动画(CAKeyframeAnimation)

                            <1>创建动画对象

                                      参数1:动画类型

                                               position位置 transform变形 opacity透明度

                                      参数2:指定key,用来区分不同的动画对象

                                      animationWithKeyPath…

                            <2>设置重要属性

                                      .path 动画路径 可以指定运动的路径

                                      .duration 动画时长 可以指定动画的时长

                                      .removeOnCompletaion= YES 动画执行后自动删除

                            <3>将动画加入到需要执行的图层上

                                      [self.myImageView.layeraddAnimation:…];

                   (2)基础动画(CABasicAnimation)

                            keyFrameAnimation不同的是,基础动画没有路径属性(.path),根据数值来做动画效果。经常用来做旋转、缩放、透明度动画。

                            <1>创建动画对象                                     animation…类方法

                            <2>重要属性:

                                      .fromValue动画前的属性值

                                      .toValue 动画后的属性值

                                      .duration 动画的时长

                                      .removeOnCompletion= YES 动画后删除动画对象

                            <3>将动画加入到需要执行的图层上

 

                   CATransform3D

                            <1>是什么

                                      是一个结构体,是一个4*4矩阵,描述一个3D图形的变形(旋转、缩放、位移)

                                      这个变形会有3D效果,包括x,y,z三个轴的变形。

                            <2>如何使用

                                      CATransform3D…

                                                                                                        用以前的变形结果创建现在的变形(第一次)

                                                                                                                MakeAffineTransform

                                                                                                                      …旋转

                                                                                                                      MakeRotation

                                                                                                                      …缩放

                                                                                                                      MakeScale

                                                                                                                …位移

                                                                          MakeTranslation

                                      CATransform3D…

                                                                                                        在现在的基础上创建现在变形(多次,叠加)

                                                                                                                       Rotation,Scale,Translation

                                      CATransform3DIdentity任何一个layer对象的初始值

 练习:渐显或消失效果。

                  

 NSTimer手动实现动画 灵活度比较的时候。

 UIImageUIView动画 样式简单,操作方便。

 *CoreAnimation 灵活度比较高,操作方便,缺陷api名称有点长。

                   CAKeyframe… 关于图形的移动更加灵活。

                   CABasic… 基本的动画处理,更加多样。

 

2.动力 UIKit Dynamic

         2.1 是什么

                   中文翻译:动力、动力模型、动态。

                   ios7开始技术,提供了一个模拟真实世界中力学相关的动画和交互系统,比如重力、碰撞(弹力)、吸附...等。

                   Dynamic设计非常灵活,可组合、可重用。

         2.2 UIKit Dynamic 架构

                   UIDynamicAnimator(核心类)->Reference View

                   UIDynamicBehavior(具体动力)->View 行为(重力、碰撞、吸附等)

                   (1)UIDynamicAnimator(核心类)总管

                            首先需要一个Reference View(引用视图)做为坐标系的参考,控件动画引擎,维护动力行为的状态。

                   (2)UIDynamicBehavior(行为类)

                            对象动力和一个视图绑定在一起,让此视图具有某种行为。例如:重力行为对象绑定给一个视图对象后,视图就具备重力的行为特性。

                            UIGravityBehavior 重力

                                      创建两个动力对象

                                               a.总管、重力

                                               b.总管管理相应的重力对象及可

                            UICollisionBehavior 碰撞

                                               a.总管、重力、碰撞

                                                         重力:

                                                                  重力的方法:x正向左 x负向右 y正向下 y负向上

                                                                  gravityBehavior.gravityDirection = CGVectorMake(0, 1);

                                               b.碰撞:

         将引用视图的四周翻译成可碰撞的四个边

    collisionBehavior.translatesReferenceBoundsIntoBoundary= YES;

设置被委托对象 处理碰撞后的事件遵守协议 实现协议中的方法

    collisionBehavior.collisionDelegate= self;

碰撞后触发的事件方法

- (void)collisionBehavior:(UICollisionBehavior*)behaviorendedContactForItem:(id <UIDynamicItem>)item withBoundaryIdentifier:(id <NSCopying>)identifier

碰撞后相应的信息处理

-(void)collisionBehavior:(UICollisionBehavior*)behavior beganContactForItem:(id<UIDynamicItem>)item withBoundaryIdentifier:(id<NSCopying>)identifieratPoint:(CGPoint)p

             UISnapBehavior -> 瞬移

              得到一个移动的距离坐标

    CGPointpoint = [sender locationInView:self.view];

              添加新的动力(瞬移、闪)

    self.snapBehavior = [[UISnapBehavioralloc]initWithItem:self.myImageViewsnapToPoint:point];

                   UIAttachmentBehavior 吸附

                            a.创建动力对象 总管、重力、吸附

                            b.与手势配合使用

                                      根据手势的不同状态,添加或删除相应的动力。

                   UIPushBehavior 推力

                  

                  

 

 

1.MotionEffects效果、特效

         可以让视图具有移动特效,视图会随着设置的动作自动出现移动效果。IOS7新特性

         操作步骤:

                   1>MotionEffect对象,找UIMotionEffect的子类

                   2>设置属性

                   3>加入到需要这种特效的视图对象上就可以了

                  

                   UIInterpolationMotionEffect 是它的一个常见的子类

                   UIMotionEffectGroup,也是它的一个子类,此类可以将多个特效对象合关一个特效对象,然后加入到视图中。

 

真机调试,默认是不可以的,必须是开发者,申请一个开发者账号(99美元/ 宝:20(真机调试))

 

2.通知(Notification)

         在其它语言中是一个设计模式。

         2.1 是什么

                   是一种观察者模式的具体体现。

                   一个对象(A)想知道另一个对象(B)的状态是否发生了改变,在对象B上注册个观察者,当对象B的状态发生改变的时候,通知对象A,对象A进行相关的处理的一种模式。

                   广播模式:

                            类似于生活广播,比如收音机,通知就是广播模式的具体体现。

         2.2 好处

                   一个对象不用知道消息的接收者是谁,就可以将一些消息发送给需要的接收者,有时发送消息的对象无法知道哪些对象,有多少对象接收消息,也不知道这些对象是否存在。

         2.3 具体做法

                   (1)收听者,打开收音机,收听广播

                            找到一个"通知中心" (NSNotificationCenter)

                            注册 收听哪个具体的频道

                            addOberver…

                   (2)发送者

                            找到一个"通知中心"(NSNotificationCenter)

                            创建一个通知对象(NSNotification)

                            发送消息 使用通知中心发送消息                       post

                   (3)收听者

                            收到消息,处理消息(调用方法)

                   (4)停止收听

                            不需要收听消息时,找到通知中心,注销注册:

                            remove… 

                   总结:消息的发送者,不用关注消息的接收者,由通知中心协调管理。              


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值