交互：利用滚动视图创建用户注册界面

交互App设计：

1.1利用滚动视图创建用户注册界面：

　　绝大部份的应用的注册界面一般包含：用户名,密码,头像等必填信息。下面我们将具体讲解如何创建注册界面。

　　step1：从对象库中拖拽一个Scroll View（滚动视图）到故事板中间的控制器视图，并调整其大小为整个屏幕的尺寸。

　　之所以在视图中添加一个滚动视图，是因为当用户在注册页面输入用户信息的时候，弹出的虚拟键盘会遮挡底部的Text Field（尽管现在还没有创建它们），这将严重影响用户输入信息的体验。

　　Scroll View是用来在屏幕上显示那些在有限区域内放不下的内容。例如，在屏幕上显示内容丰富的网页或者表单，亦或是很大的图片。在这种情况下，需要用户对屏幕进行拖动或缩放来查看屏幕或窗口区域外的内容。

　　所以，Scroll View应该首先有一个窗口用来显示内容。其次，还要有内容本身。这个显示窗口就是Scroll View,这个窗口可以是整个手机屏幕，也可以只是手机屏幕的一部分区域。内容视图(Content View)则是需要填写的表单,查看的图片或者网页等信息的完整视图。通常，其大小会超过这个屏幕，正因为如此，我们才需要使用Scroll View。

　　在滚动视图对象中，内容视图会储存完整的图片信息，而在滚动视图窗口中只会显示出一部分内容，我们必须借助平移手势来调整内容视图的偏移量(Content Offset)，或者是通过掐捏手势调整内容视图的大小。

　　在滚动视图对象里有几个属性需要大家了解：

　　contentSize:它描述了有多大范围的内容需要使用Scroll View的窗口来显示，其默认值为CGSizeZero，也就是宽和高都是0。当contentSize小于当前scrollView的大小时，意味着用户要显示的内容在窗口范围内是可以全部显示的。这时，通常内容视图是拖不动的（内容可以全部显示）。之所以说是"通常"，是因为通过某些设置，还是可以拖得动的，后面的滚动视图回弹机制会解释。所以要让视图可以拖动，我们得设置一个contentSize。

　　contentOffset:描述了内容视图相对于Scroll View窗口的位置（相对于左上角的偏移量）。默认值是CGPointZero，也就是(0,0)。当视图被拖动时，系统会不断修改该值。也可以通过setContentOffset(_:animated:)方法让图片到达某个指定的位置。

　　contentInset：表示Scroll View的内边距，也就是内容视图边缘和Scroll View的边缘的留空距离，默认值是UIEdgeInsetsZero，也就是没间距。这个属性用得不多，通常在需要刷新内容时才用得到。

 

　　//对滚动视图的Outlet关联

　　@IBOutlet weak var scrollerView:UIScrollerView!

　　如果不方便对滚动视图 （ScrollerView）进行Outlet关联操作的话，可以在大纲视图中拖拽相应的界面元素Item到SignUPVC类中，效果是完全一样的。对于复杂的用户界面来说，经常会用到这种方法。因为有些时候往往是几个视图嵌套在一起，或者是排列得很紧密，不方便直接进行拖拽

 

 

 

　　step2:在Outlet属性声明的下方，为SignUPVC类再添加一个属性scrollViewHeight变量，利用该属性可以在虚拟键盘出现和消失时，改变滚动视图contentSize属性的高度，使其向上滚动，从而提供更好的用户体验。

　　@IBOutlet weak var scrollerView:UIScrollerView!

　　//根据需要，设置滚动视图的高度

　　var scrollViewHeight:CGFloat = 0

　　可以想象，当用户单击Text Field以后会从屏幕底部滑出虚拟键盘，而键盘的高度正好会遮挡住位于下方的两个按钮和最下面的Text Field，这为我们信息的输入和检视带来了不小的麻烦。因此这里我设计用户界面的时候，就添加了滚动视图。当虚拟键盘出现时，可以增加滚动视图contentSize属性的高度，同时将需要显示的部分移动到虚拟键盘的顶部，这样就会给用户带来非常舒服的使用体验。

 

 

 

　　step3:在scrollViewHeight属性的下面再添加一个属性变量keyboard，利用该变量获取虚拟键盘在出现时候的大小。

　　@IBOutlet weak var scrollerView:UIScrollerView!

　　//根据需要，设置滚动视图的高度

　　var scrollViewHeight:CGFloat = 0

　　//获取虚拟键盘的大小

　　var keyboard:CGRect = CGRect()

　　该属性是CGRect结构体类型，它包含了矩形的位置和大小信息。如果你按照command键并单击CGRect的话，编辑窗口会直接跳转到CGRect的声明文件，从CGRect结构的声明中可以发现，它包含了origin(CGPoint结构)和size(CGSize结构)两个重要属性。在iOS平台上，矩形用origin提供的店（矩形的左上角在父视图中的位置），再通过size属性提供的width和height来确定它的位置和大小。

 

 

　　step4:获取当前的屏幕尺寸

　　在注册视图中，我们需要编写一些代码来解决虚拟键盘出现以后的视图滚动问题。但首先要获取屏幕的尺寸，并且将该尺寸作为滚动视图的大小。

　　1.在所在控制器中viewDidLoad添加如下代码：

　　//滚动视图的窗口尺寸

　　scrollView.frame = CGRect(x:0,y:0,width:self.view.frame.width,height:self.view.frame.height)

　　viewDidLoad()方法在整个控制器的生存周期中只会被调用一次，就是在控制器视图载入完成以后，之后就不会再被调用了。直到控制器对象被销毁，再次创建一个新的控制器对象时，才会再次调用该方法。如果我们需要每次在控制器视图重新出现到屏幕的时候执行一些代码，则需要重写viewWillAppear(_:)方法，它会在视图将要呈现到屏幕时被调用，比如在导航控制器中比压入栈的控制器重新呈现出来的时候。

转载于:https://www.cnblogs.com/jerry-q1/articles/6493565.html