UI常用的控件

#iOS开发之UI篇#iOS开发之UI篇

#常用控件介绍1##

#UI第09天：滚动视图#

##UIScrollView入门##

移动设备的屏幕⼤小是极其有限的,因此直接展⽰在⽤户眼前的内容也相当有限，当展⽰的内容较多超出一个屏幕时，用户可通过滚动操作来查看屏幕以外的内容，普通的UIView不具备滚动功能,不能显⽰过多的内容。UIScrollView是一个能够滚动的视图控件，可以⽤用来展⽰大量的内容，并且可以通过滚动查看所有的内容。

UIScollView的常用属性和方法：

- contentOffset属性：UIScrollView滚动的位置

- contentSize属性：UIScrollView内容的尺⼨寸（相当于滚动的范围）

- bounces属性：设置UIScrollView是否需要弹簧效果

- alwaysBounceVertical属性：设置垂直方向是否有弹簧效果（必须在bounces设置为YES的前提下设置才有效）

- alwaysBounceHorizontal属性：设置水平方向是否有弹簧效果（必须在bounces设置为YES的前提下设置才有效）

- pagingEnabled属性：设置UIScrollView的滚动方式是否为翻页效果

- scrollEnabled属性：设置UIScrollView是否能滚动

- showsHorizontalScrollIndicator属性：是否显示水平方向的滑动条

- showsVerticalScrollIndicator属性：是否显示垂直方向的滑动条

- scrollIndicatorInsets属性：设置滚动条的位置，可以通过UIEdgeInsetsMake函数来指定该位置

- indicatorStyle属性：设置滚动条的风格，有三个可选项：UIScrollViewIndicatorStyleDefault（灰）、UIScrollViewIndicatorStyleBlack（黑）、UIScrollViewIndicatorStyleWhite（白）

- decelerationRate属性：减速的速率

- scrollsToTop属性：设置点击状态栏是否滑动到scrollView的顶部

- -setContentOffset:animated:方法：设置scrollView的位置

- -scrollRectToVisible:animated:方法：将指定的区域滚动到可视范围之内，如果该地区已经在可视区域，则什么都不做。

UITextView退出键盘几种方式：

1. 如果应用有导航条的，可以在导航条上面加多一个Done的按钮，用来退出键盘，当然要先实UITextViewDelegate

2. 如果UITextView中不使用回车键，可以把回车键当做退出键盘的响应键

3. 自定义其他加载键盘上面用来退出，比如在弹出的键盘上面加一个view来放置退出键盘的Done按钮

4. 点击其他区域收起键盘

UITextView相当于是高级版本的UILabel和UITextField的合体。

UITextView的常用属性：

-  editable属性：设置UITextView能否编辑，如果不编辑就当做UILabel显示，可以设置自动识别电话号码、地址、邮箱，该属性默认为YES

-  dataDetectorTypes属性：设置UITextView是否支持识别电话号码、地址、邮箱等内容

-  inputView：当UITextView成为第一响应者时显示的输入视图

-  inputAccessoryView：当UITextView成为第一响应者时显示的输入辅助视图，在inputView的上方

下面的例子演示了如何使用UITextView以及如何进行数据侦测和拼写检查。

###事件概述###

事件是当用户手指触击屏幕及在屏幕上移动时，系统将事件按照特定的路径传递给可以对其进行处理的对象。在iOS中，一个UITouch对象表示一个触摸，一个UIEvent对象表示一个事件。事件对象中包含与当前多点触摸序列相对应的所有触摸对象，还可以提供与特定视图或窗口相关联的触摸对象。

响应者对象是可以响应事件并对其进行处理的对象。UIResponder是所有响应者对象的基类，它不仅为事件处理，而且也为常见的响应者行为定义编程接口。UIApplication、UIView和所有从UIView派生出来的UIKit类（包括UIWindow）都直接或间接地继承自UIResponder类。第一响应者是应用程序中当前负责接收触摸事件的响应者对象（通常是一个UIView对象）。UIWindow对象以消息的形式将事件发送给第一响应者，使其有机会首先处理事件。如果第一响应者没有进行处理，系统就将事件（通过消息）传递给响应者链中的下一个响应者，看看它是否可以进行处理。

试着点击屏幕上圈出来的几个区域，看看会发生什么并解释为什么。


###响应者链处理原则###

1. 点击检测视图或者第一响应者传递事件或动作消息给它的视图控制器(如果它有的话)；如果没有一个视图控制器，就传递给它的父视图。

2. 如果一个视图或者它的视图控制器不能处理这个事件或动作消息，它将传递给该视图的父视图。

3. 在这个视图层次中的每个后续的父视图遵循上述的模式，如果它不能处理这个事件或动作消息的话。

4. 最顶层的视图如果不能处理这个事件或动作消息，就传递给UIWindow对象来处理。

5. 如果UIWindow 对象不能处理，就传给单件应用程序对象UIApplication。

6. 如果应用程序对象也不能处理这个事件或动作消息，将抛弃它。

##iOS中的手势操作##

手势操作是通过使用者的手指触控，计算手指移动轨迹、坐标，然后对程序做相应处理的过程。手势操作需要添加手势识别器，所有手势识别器公共的父类是UIGestureRecognizer。

###各种手势的使用###

- 点击手势：UITapGestureRecognizer

- 长按手势：UILongPressGestureRecognizer

- 旋转手势：UIRotationGestureRecognizer

- 捏合手势：UIPinchGestureRecognizer

- 滑动手势：UISwipeGestureRecognizer

- 拖动手势：UIPanGestureRecognizer

###事件的分发机制###

**问题：**当有多个重叠的UIView时，谁是第一响应者

1. 默认的点击顺序是按照UIView中subviews的逆顺序

2. 如果UIView的同级别subviews中有重叠的部分，则优先检查顶部的subview，如果顶部的subview返回nil，再检查底部的subview。

###事件的分类###

1. Touch Events（多点触摸事件）

- touchesBegan:withEvent:方法：一个或多个手指置于视图或窗口上

- touchesMoved:withEvent:方法：一个或多个手指在移动

- touchesEnded:withEvent:方法：一个或多个手指离开视图或窗口

- touchesCancelled:withEvent:方法：如果其他系统事件（如内存不足警告）使得触摸被取消

2. Motion Events（运动事件）

- motionBegan:withEvent:方法：运动事件开始

- motionEnded:withEvent:方法：运动事件结束

- motionCancelled:withEvent:方法：运动事件取消

>**说明：**如果要摇一摇之类的应用，就可以使用运动事件进行处理，代码如下所示。

###UISegmentControl###


###UISlider###


###UISwitch###


###UIActivityIndicatorView###


###UIProgressView###


###UIStepper###


###UIDatePicker###


##常用控件介绍2##

###UIWebView和JavaScript调用###

UIWebView用于在App中嵌入网页内容，通常情况下是html格式的网页，也支持pdf文档等其他格式（这取决于浏览器内核，手机上的浏览器内核通常为WebKit）。

##UIToolbar##

每个导航控制器，还配备了工具条(44坐标高)，默认隐藏，可以通过将导航视图控制器的toolBarHidden属性设置为NO使其显示。工具条属于UINavigationController，一个导航控制器，只有一个工具条。工具条上的toolBarItem属于每个视图控制器，每个视图控制器可以单独定制工具条上的每个项。

###显示UINavigationController自带的UIToolbar###

- toolBarHidden属性：设置为NO可以显示自带的工具条

###创建导航控制器###

- -initWithRootViewController:：在创建导航控制器时指定根视图控制器

- -initWithNavigationBarClass:toobarClass:：用指定的导航条创建导航视图控制器

###控制器的入栈和出栈###

- -pushViewController:animated:方法：将一个视图控制器压入栈中

- -popViewControllerAnimated:方法：从栈中弹出一个视图控制器

- -popToRootViewControllerAnimated:方法：从栈中直接弹出根视图控制器

- -popToViewController:animated:方法：从栈中弹出指定的视图控制器


可以通过UINavigationController的viewControllers属性获得其栈中保存的所有视图控制器；topViewController可以获得栈顶的视图控制器。

##UINavigationBar##

一个导航视图控制器通常是由以下几个部分构成的：


###导航条半透明以及相关坐标计算###

导航视图控制器会维持一个导航条(UINavigationBar)，这个导航条被所有的视图控制器共享，可以通过UINavigationController对象navigationBar属性获得导航条，再通过下面的属性设置其半透明效果，注意对导航条的设置将对所有的视图控制器生效。

- translucent属性：设置导航条是否半透明，默认值是YES。对此属性的设置会影响到坐标的计算，因为导航条有44点的高度。例如在视图控制控制器中放置一个按钮，其frame属性的第二个参数设置为100，那么在设置半透明为YES和NO的情况下按钮的呈现效果如下图所示。可以看出设置半透明后的按钮坐标计算是以窗口顶端为参考系的，而不透明的时候按钮坐标是相对于导航条的，相差了44个点。

  

###设置背景图片###

- -setBackgroundImage:forBarMetrics:

- -setBackgroundImage:forBarPosition:barMetrics:

>**说明：**UIBarPostion和UIBarMetrics都是枚举类型，前者表示导航栏的位置；后者表示导航栏的外观。前者可能的取值包括：UIBarPositionAny(不指定位置)、UIBarPositionBottom(位于视图底部)、UIBarPositionTop(位于视图顶部)和UIBarPositionTopAttached(位于屏幕顶部同时也在其视图的顶部)；后者可能的取值包括：UIBarMetricsDefault(设备默认的外观)、UIBarMetricsCompact(手机尺寸的外观)等。

###隐藏和显示导航条###

- navigationBarHidden属性：是否隐藏导航控制栏

##UINavigationItem##

通过视图控制器的navigationItem属性可以获得和视图控制器对应的导航栏项，该属性是只读的，但是通过它的子属性可以对UINavigationItem进行定制。可以定制的内容包括：

- leftBarButtonItem/leftBarButtonItems属性：定制左侧导航项

- rightBarButtonItem/rightBarButtonItems属性：定制右侧导航项

- backBarButtonItem属性：定制返回项

- title属性：导航项的标题

- prompt属性：导航项的提示

- titleView属性：导航项标题视图，该属性可以是任意UIView及其子类型，因此可以在此随意定制自己想要的东西

>**说明：**由于navigationItem是每个视图持有自己的navigationItem，因此可以为每个视图定制不同的导航项。

如果当前视图控制器通过navigationItem设置了leftBarButtonItem，则显示当前视图控制器设置好的leftBarButtonItem；如果当前视图控制器没有设置leftBarButtonItem，且当前视图控制器不是根视图控制器，显示上一层的backBarButtonItem；如果上一层没有指定backBarButtonItem，系统将根据上一层视图控制器的标题自动生成一个返回按钮；如果当前视图控制器没有设置leftBarButtonItem且当前视图控制器是根视图控制器，则左边不显示任何东西。

如果当前视图控制器通过navigationItem属性定制了titleView，那么将会显示自定义的titleView，titleView的高度不应该超过导航条的高度；如果当前视图控制器没有定制titleView，系统会根据当前视图控制器的标题或者navigationItem的标题创建一个UILabel来显示此标题；navigationItem的标题优于视图控制器的标题。

>**强调：**UINavigationController本身并不显示无需定制，UINavigationBar属于导航控制器(子对象)，它使被多个视图共享的，当你切换视图控制器时，导航栏并没有切换，如果需要定制导航视图控制器就需要定制导航栏以及导航栏上的项目UINavigationItem。我们可以让每个视图控制器都有自己的UINavigationItem，并按照自己的意愿来创建它。

#UITextField控件##

###UITextFiled常用属性和方法###

UITextField是常用的文本输入控件，比如我们用的QQ的登录界面，词典输入要查询的单词都使用了文本框控件，如下图所示。之前介绍的UILabel可以在界面中显示文本，但用户无法选择或编辑UILabel中的文本，想接受用户输入文本，就可以使用UITextField控件。当我们在用户界面上点击文本框时，屏幕底部会弹出键盘，用于向文本框中输入文字。

- borderStyle属性：边框样式（UITextBorderStyleNone, UITextBorderStyleBezel, UITextBorderStyleLine, UITextBorderStyleRoundedRect）

- background属性：背景图

- backgroundColor属性：背景色

- placeHolder属性：没有输入内容时的占位符

- text属性：文字

- textColor属性：文字颜色

- textAligment属性：对齐方式

- font属性：字体

- enabled属性：是否可编辑

- secureTextEntry属性：是否使用掩码

- adjustsFontSizeToFitWidth属性：是否调整字体大小适应宽度

- leftView / leftViewMode属性：左视图（可以定制文本框）/ 左视图模式

- rightView / rightViewMode属性：右视图（可以定制文本框，可能会覆盖掉清除文字的按钮）/ 右视图模式

- inputView / inputAccessoryView属性：输入/辅助视图（可以完成键盘的定制，可以在原始的键盘上设置二级键盘）

- -becomeFirstResponder方法：成为第一响应者

- -resignFirstResponder方法：放弃第一响应者

#CALayer##

###UIView和CALayer的关系###

UIView和CALayer是相互依赖的关系，UIView依赖与CALayer提供的内容，CALayer依赖UIView提供的容器来显示绘制的内容。CALayer基于图像管理内容并允许你在这些内容上创建动画。如果没有CALayer，UIView自身也不会存在，UIView是一个特殊的CALayer实现，添加了响应事件的能力。一言以蔽之，UIView来自CALayer，高于CALayer，是CALayer高层实现与封装；UIView的很多特性都源于CALayer对它的支持。

###通过CALayer改变UIView的形状###

- borderColor属性：边框颜色。

- borderWidth属性：边框宽度。

- cornerRadius属性：边框转角半径（实现圆角效果）。

###通过CALayer添加动画效果###

- transforms属性：指定对CALayer中的内容做怎样的变换，支持3D效果和动画。

##UIImageView的使用##

UIImageView对象提供了一个基于视图的容器来展示一张或者一系列图像，同时也支持以动画的方式来呈现一组图像（可以指定播放间隔和频率）。简单的说，UIImageView就是UIImage对象的承载者，当需要将UIImage呈现在UIView上时就需要UIImageView。二者的关系就像UILabel和NSString之间的关系。

###UIImageView的创建和使用###

- - initWithImage:方法：这种方式适合创建小图片，尤其是素材类图片。

###UIImageView的常用属性和方法##

- contentMode属性：图片的填充模式。（继承自UIView）

- clipsToBounds属性：修剪超出边界的部分。（继承自UIView）

- animationImages属性：装在用于动画的图像的数组。

- animationDuration属性：动画播放的持续时间。

- animationRepeatCount属性：动画的重复次数，0表示循环播放。

- - startAnimating方法：开始播放动画。

- - stopAnimating方法：停止播放动画。

- - isAnimating方法：返回BOOL值表示动画是否正在播放中。

#UIView的基本属性和方法

与UIView外观相关的属性：

之前我们说过，UIView可以代表屏幕上的一块矩形区域，它负责内容的显示、定位以及响应用户的触摸事件，是用户和应用进行交互的主要方式，我们再来看看UIView的属性和方法。

绘制和更新视图的方法

- -drawRect:方法：绘图(可以使用贝塞尔曲线进行绘图)

- -setNeedsDisplay方法：让整个视图重绘

- -setNeedsDisplayInRect:方法：让视图指定的矩形区域重绘

管理手势操作的方法

- -addGestureRecognizer:方法：添加手势识别器

- -removeGestureRecognizer:方法：删除手势识别器

使用Block语法设置动画的类方法

- +animateWithDuration:animations:类方法：用指定的持续时间完成通过Block指定的动画

为视图添加动画效果的类方法

- + beginAnimations:context:类方法：开始一个动画

- + commitAnimations类方法：执行动画

- + setAnimationStartDate:类方法：设置动画开始时间

- + setAnimationDuration:类方法：设置动画持续时间

- + setAnimationDelay:类方法：设置延迟多少时间播放动画

- + setAnimationRepeatCount:类方法：设置动画重复播放次数

- + setAnimationRepeatAutoreverses:类方法：设置是否反向执行动画

- + setAnimationTransition:forView:cache:类方法：设置动画的执行效果以及作用于哪个视图

- backgroundColor：背景颜色

- hidden属性：是否隐藏

- alpha属性：透明程度

- opaque属性：是否不透明

- clipsToBounds:是否剪裁超出边界的部分

- layer属性：渲染视图的CA层

设置视图尺寸位置的属性：

- frame属性：视图相对于窗口的坐标和尺寸

- bounds属性：视图相对于自己坐标和尺寸

- center属性：视图的中心点

管理视图层次结构的属性和方法：

- window属性：视图所在的窗口对象

- superview属性：当前视图的父视图

- subviews属性：视图的直接子视图

- addSubview:方法：添加子视图

- removeFromSuperview:方法：将视图从父视图中移除

- bringSubviewToFront:方法：将指定的子视图移到层次的顶层

- sendSubviewToBack:方法：将指定的子视图放回到层次的底层

- insertSubview:atIndex:方法：在指定的层次位置插入子视图

- insertSubview:aboveSubview:方法：在指定的视图层上面添加子视图

- insertSubview:belowSubview:方法：在指定的视图层下面添加子视图

- exchangeSubviewAtIndex:withSubviewAtIndex:方法：交换两个子视图的层次

- isDescendantOfView:方法：判断一个视图是不是另一个视图的子视图

配置视图大小改变时行为的属性和方法：

- autoresizingMask属性：当父视图改变大小时子视图如何改变

- autoresizesSubviews属性：是否自动调整子视图大小

- contentMode属性：视图大小改变时如何呈现其内容

- sizeToFit方法：调整视图大小以适应其子视图

>**说明：**当父视图的尺寸发生变化时，子视图应该发生怎样的变化可以通过子视图在父视图中的停靠模式来进行设置，对应的属性叫做autoresizingMask，它可能的取值包括 UIViewAutoresizingNone、UIViewAutoresizingFlexibleLeftMargin、UIViewAutoresizingFlexibleWidth、UIViewAutoresizingFlexibleRightMargin、UIViewAutoresizingFlexibleTopMargin、UIViewAutoresizingFlexibleHeight、UIViewAutoresizingFlexibleBottomMargin。如果希望同时满足多个值可以通过按位或运算来实现。

#UILabel的常用属性

- text属性：标签上的文字

- textColor属性：文字的颜色

- textAlignment属性：文字的对齐方式

- font属性：字体

- lineBreakMode属性：指定如何换行及截断标签上的文字

- enabled属性：是否允许绘制标签上的文字

和文字大小相关的属性：

- adjustsFontSizeToFitWidth属性：调整文字大小适应标签宽度

- adjustsLetterSpacingToFitWidth属性：调整字符间距来适应文字宽度

- numberOfLines属性：显示的行数，设置成0表示不限制行数

- minimumScaleFactor属性：最小的伸缩因子

- minimumFontSize属性：最小字体大小

和阴影效果相关的属性：

- shadowColor属性：阴影颜色

- shadowOffset属性：阴影偏移量

#创建和使用UIButton对象

**buttonWithType**：类方法，在创建按钮时指定按钮的类型。（iOS 7开始取消了圆角矩形按钮类型，但是仍然可以通过其他方式做出圆角矩形的按钮，因为很多时候按钮都是以图片的形态呈现，有了这个圆角矩形反而不方便定制）

###UIButton常用属性和方法###

配置按钮标题的属性和方法：

- titleLabel属性：按钮标题的标签

- titleForState:方法：指定状态下的按钮标题

- setTitle:forState:方法：设置指定状态下按钮的标题

- titleColorForState:方法：指定状态下的按钮标题颜色

- setTitleColor:forState:方法：设置指定状态下按钮标题的颜色

- setTitleShadowColor:forState:方法：设置指定状态下按钮标题阴影的颜色

配置按钮显示的方法：

- backgroundImageForState:方法：获得指定状态下的背景图

- setBackgroundImage:forState:方法：设置指定状态下的背景图

- imageForState:方法：获得指定状态下的按钮图片

- setImage:forState:方法：设置指定状态下的按钮图片

配置边距的属性：

- contentEdgeInsets属性：内容的边距

- titleEdgeInsets属性：标题的边距

- imageEdgeInsets属性：图片的边距

获取按钮当前状态的属性：

- buttonType属性：可能的取值包括UIButtonTypeCustom、UIButtonTypeSystem、UIButtonTypeDetailDisclosure、UIButtonTypeInfoLight、UIButtonTypeInfoDark、UIButtonTypeContactAdd、UIButtonTypeRounedRect（过时）。

- currentTitle属性：按钮上当前显示的标题

- currentTitleColor属性：当前标题颜色

- currentImage属性：按钮上当前显示的图片

- currentBackgroundImage属性：按钮上当前显示的背景图片

- imageView属性：按钮上的图片视图

继承自UIControl的属性和方法：

- addTarget:action:forControlEvents:方法：将为事件添加的消息接受者和对应的动作加入事件派发表，简而言之就是为控件绑定事件处理的回调方法

- removeTarget:action:forControlEvents:方法：与上面方法的作用相反

- enabled属性：控件是启动还是禁用

- state属性：控件所处的状态

##UIButton的常用事件和状态

我们先说一下UIControl的所有可能的事件。

事件类型|说明

:--|:--

UIControlEventTouchDown|单点触摸按下事件，用户点触屏幕，或者又有新手指落下的时候

UIControlEventTouchDownRepeat|多点触摸按下事件，点触计数大于1：用户按下第二、三、或第四根手指的时候

UIControlEventTouchDragInside|当一次触摸在控件窗口内拖动时

UIControlEventTouchDragOutside|当一次触摸在控件窗口之外拖动时

UIControlEventTouchDragEnter|当一次触摸从控件窗口之外拖动到内部时

UIControlEventTouchDragExit|当一次触摸从控件窗口内部拖动到外部时

UIControlEventTouchUpInside|所有在控件之内触摸抬起事件

UIControlEventTouchUpOutside|所有在控件之外触摸抬起事件(点触必须开始与控件内部才会发送通知)

UIControlEventTouchCancel|所有触摸取消事件，即一次触摸因为放上了太多手指而被取消，或者被上锁或者电话呼叫打断

UIControlEventValueChanged|当控件的值发生改变时，发送通知。用于滑块、分段控件、以及其他取值的控件。你可以配置滑块控件何时发送通知，在滑块被放下时发送，或者在被拖动时发送

UIControlEventEditingDidBegin|当文本控件中开始编辑时发送通知

UIControlEventEditingChanged|当文本控件中的文本被改变时发送通知

UIControlEventEditingDidEnd|当文本控件中编辑结束时发送通知

UIControlEventEditingDidOnExit|当文本控件内通过按下回车键（或等价行为）结束编辑时，发送通知

UIControlEventAlltouchEvents|通知所有触摸事件

UIControlEventAllEditingEvents|通知所有关于文本编辑的事件

UIControlEventAllEvents|通知所有事件

对于UIButton来说，可能绝大多数处理的都是UIControlEventTouchUpInside事件，简单的说就是按钮点击的事件。

#UIImage对象的属性

- **size**属性：图像的大小，得到一个CGSize结构体，其中包括了宽度（width）和高度（height）。

###绘制图像###

- **drawAtPoint:**方法：从指定的左上角坐标处绘制图像。

- **drawInRect:**方法：在指定的矩形区域内绘制整个图像。

##UIViewController入门##

###概念和作用###

UIViewController可以管理一屏的内容，如果说UIWindow是一副画的画框，那么UIViewController就是画框中植入的一张画布。我们并不建议将所有的视图对象或子视图都直接置于UIWindow对象中，因为UIWindow对象是唯一的，如果要想改变用户界面就会非常的麻烦。如果使用UIViewController来管理用户界面的话，在切换用户界面时只需要更换一个视图控制器就可以了。

它定义了一系列和生命周期相关的方法。下面的图展示了UIViewController的生命周期，详细的内容我们在后续的课程中跟大家分享。

视图控制器加载：


视图控制器收到内存警告：


###如何将UIViewController和UIWindow关联###

我们可以创建一个视图控制器并将第一个例子中在UIWindow上放置的按钮和标签放到视图控制器中，再通过UIWindow对象的rootViewController属性将视图控制器设置为窗体对象的根视图控制器，代码如下所示