第三方登录模块

这样我们的登录界面大致就完成了。下面还有一个第三方登录模块。首先是“使用第三方账号登录”的标签。这是一个Label，直接从控件库里拖出来，然后修改一下内容，颜色，调整字体，接下来添加两个约束就行了。一个是屏幕内水平方向居中，另一个是距离上面的登录按钮40。宽度和高度会根据内容自己判断，不需要添加。

在上图中的第4步中的修改字体，当我们点击Font输入框中的灰色箭头后会出现一个Popup，里面的第一个下拉框是Font ，当我们点击展开时，就能看到很多选项了，默认选择的是system。

再讲一些关于标签（Label）的问题，一个是我在“添加Label”这个图上用红色框框起来的AutoShrink（自动缩放）。通常我们都会遇到这样的情况：标签的内容特别多显示不下时，多出来的内容都会被自动截掉，用省略号代替，有时候省略掉的甚至是比较重要的信息。而这个AutoShirnk就是来解决这个问题的，你可以设置一个最小字号或者一个最小缩放比例。当页面变化而导致内容显示不下时，你的标签的字号首先会自动缩小，直到缩小到你规定的最小值时才会将多出的内容省略掉。

另一种方式是多行显示，同样在“添加Label”这个图上用红色框框起来的Lines输入框，默认的是1，就代表只显示一行，你可以在这里设置显示的行数，如果你将它改为0，则代表显示多行。

Tips：在设计iOS软件时应优先考虑使用Dynamic Type，在设计Label时（几乎每个App 都会用到），应该考虑各种极限情况，并给出相应适配策略。如当文字显示不下时是让文字缩小还是省略掉多出来的内容。

回来继续说下面三个第三方登录按钮。我的要求是他们之间的间隙随着屏幕的宽度变化而变化。屏幕宽度越小它们之间靠的就越近，反之则分的越开。想要达到这样的效果，我们可以先将他们编一个组，让这个组的宽度随着屏幕变化而变化。

首先我们先拖出一个UIView，这是一个最基础的视图，将它当做放按钮的容器，也就是上面说的组（这里其实可以用Stack View 作为这个容器，使用起来更简单，我在下篇会详细介绍Stack View ）。

按照上图的要求添加好约束后，我们会发现一个问题，因为选择的是Equal Widths ，导致这个组的宽度是和屏幕是一样宽的，这显然不是我们要的效果。双击这个等宽的约束后，我们能看到我在上一篇里讲过的Multiplier了，只需要修改这个约束的Multipier，将它改为0.6，这样，这个组的宽度就一直是屏幕宽度的60%了。

接下来我们只要将三个按钮固定在这个组里的最左边，中间，最右边就行了。这样就能到达我们要的效果了。

添加完成后UpdateFrame，就能看到下图的效果了。最后我们只要将这个作为容器的View 的背景改为透明就行了。

这样，我们的登录界面就完成了，现在这个页面就能根据我们的要求适配各个屏幕尺寸了。我们可以选择不同的模拟器，查看它在不同设备上的运行效果，无论横屏和竖屏它都能跟着调整。需要注意一下的是在横屏情况下可能会有一部分界面超出屏幕范围，本来所有元素都应该放在一个ScrollView里，这样超出屏幕的部分就能向上滑动了，这里为了方便演示并没有加。

下面就是它不同设备上的运行效果。

可以看到，它不仅支持iPhone，还支持iPad，而且横屏竖屏都行，应对iPad的多任务显示也不在话下。很多人觉得如果要支持iPad 就需要重新开发一个App。实际上在本文的开头，你在创建项目的时候会让你选择支持的设备，默认的是Univerasl（全平台），也就是说你要是适配得好，一个安装包就能同时支持iPhone 和 iPad，而不需重新开发。

好了，这篇就讲到这里，下一篇我会介绍一下Stack View 以及更多AutoLayout 的相关知识和实际应用。

本文作者：董浩龙（点融黑帮），来自点融设计中心（DDC），是一名交互设计师，现在主要在做动效和原型，有空会学习一下代码，了解页面实现的原理。