自动布局是如何工作的

一直没搞明白iOS是如何设计界面的,看到有两篇不错的教程,Beginning Auto Layout Tutorial in iOS 7: Part 1 Part 2,针对Auto Layout做了很好的示例,把其中的一小节翻译了一下,算是加深印象。

As you’ve seen in the test drive above, the basic tool in Auto Layout is the constraint. A constraint describes a geometric relationship between two views. For example, you might have a constraint that says:
就像你在上面的例子中所看到的,自动布局(Auto Layout)的基本工具是约束。一个约束描述了两个视图间的几何关系。比如你可以这样描述一个约束:

“The right edge of label A is connected to the left edge of button B with 20 points of empty space between them.”
“标签A的右侧和按钮B的左侧相连,两者间距20个点。”

Auto Layout takes all of these constraints and does some mathematics to calculate the ideal positions and sizes of all your views. You no longer have to set the frames of your views yourself – Auto Layout does that for you, entirely based on the constraints you have set on those views.
自动布局获取所有的约束,然后计算得到所有视图的大小和理想位置。你不在需要自己设置视图的框架,自动布局基于你在视图上设置的约束为你实现了。

Before Auto Layout, you always had to hard-code the frames of your views, either by placing them at specific coordinates in Interface Builder, by passing a rectangle into initWithFrame:, or by setting the view’s frame, bounds or center properties.
在自动布局前,你始终不得不硬编码视图的框架,要么在Interface Builder中指定绝对坐标,要么传递一个矩形到initWithFrame中,要么设置视图的框架、边距和中心等属性。

For the app that you just made, you specifically set the frames to:
对于你刚设计的应用,你明确地设置框架:

You also set autosizing masks on each of these views:
你也会设置对这些视图自动改变大小的修饰:

That is no longer how you should think of your screen designs. With Auto Layout, all you need to do is this:
而使用自动布局,你需要做的是这样的:

The sizes and positions of the views are no longer important; only the constraints matter. Of course, when you drag a new button or label on to the canvas it will have a certain size and you will drop it at a certain position, but that is only a design aid that you use to tell Interface Builder where to put the constraints.
视图的大小和位置不再重要,只需要关注约束。当然当你把一个按钮或标签拖动到画布中,它会有一定的大小,你也会把它放置在一定的位置,但是要注意这只是一个设计上的辅助功能,用来帮助你告诉Interface Builder在哪里放置约束。

Designing like you mean it
The big advantage of using constraints is that you no longer have to fiddle with coordinates to get your views to appear in the proper places. Instead, you can describe to Auto Layout how the views are related to each other and Auto Layout will do all the hard work for you. This is called designing by intent.
使用约束的最大优点是你不再需要和坐标打交道来让视图出现在正确的位置上,取而代之的是使用自动布局描述视图间的关系,自动布局会为你完成硬编码工作。这被称为基于目的设计(designing by intent)。

When you design by intent, you’re expressing what you want to accomplish but not necessarily how it should be accomplished. Instead of saying: “the button’s top-left corner is at coordinates (20, 230)”, you now say:
当你基于目的设计,你表达的是你想要实现什么,而不是它应该如何被实现。你不会说“这个按钮的左上角坐标是(20,230)”,你会说:

“The button is centered vertically in its superview, and it is placed at a fixed distance from the left edge of the superview.”
“这个按钮在它的父视图中垂直居中,并且被放在父视图的左侧固定的位置。”

Using this description, Auto Layout can automatically calculate where your button should appear, no matter how big or small that superview is.
使用这样的描述,自动布局能自动计算你的按钮出现的位置,而无需考虑父视图的大小。

Other examples of designing with intent (and Auto Layout can handle all of these instructions):
其他基于目的设计的例子(自动布局能处理这些指令):

“These two text fields should always be the same size.”
“These two buttons should always move together.”
“These four labels should always be right-aligned.”
“这两个文本框大小相同。”
“这两个按钮同时移动。”
“这四个标签保持右对齐。”

This makes the design of your user interfaces much more descriptive. You simply define the constraints, and the system calculates the frames for you automatically.
这让你的用户界面设计更有描述性。你只需要简单定义约束,系统会为你自动计算框架。

You saw in the first section that even a layout with just a few views needs quite a bit of work to layout properly in both orientations. With Auto Layout you can skip all that effort. If you set up your constraints properly, then the layout should work without any changes in both portrait and landscape.
在第一节中你已经看到即使一个只有少数视图的布局也需要大量的工作以保证设备在不同方向下布局正确。使用自动布局,你可以忽略这些工作。如果你正确地设置好约束,那么布局会在肖像模式和风景模式都运行正常。

Another important benefit of using Auto Layout is internationalization. Text in German, for example, is infamous for being very long and getting it to fit into your labels can be a headache. Again, Auto Layout takes all this work out of your hands, because it can automatically resize your labels based on the content they need to display – and have everything else adapt with constraints.
另一点使用自动布局的好处是国际化。举个例子,德语中的文字是臭名昭著的长,很难和你的标签保持合适。而自动布局能很好地解决问题,因为它可以基于要显示的内容,根据要适应的约束,自动调整标签大小,。

Adding support for German, French, or any other language is now simply a matter of setting up your constraints, translating the text, and… that’s it!
增加对德语、法语或其他语言的支持,只需要设置约束,翻译文字…就可以了!

The best way to get the hang of Auto Layout is to play with it, so that’s exactly what you will do in the rest of this tutorial.
要熟悉自动布局最好的方法就是使用它,这也是你在接下来的教程中会学到的。

国航vs南航的会员里程补登



最近出差有点多,9月内蒙,10月广州,现在又到了北京,当然和众多飞人比起来纯属小巫见大巫,只是对我这种居家男人来说,感觉都很少有一年飞那么多次的。

不过既然飞了,LP就提醒我说积个里程吧,反正飞也飞了。我想也是,原先办过国航的会员,是凤凰知音卡,上次去内蒙的航班就自动给我登记里程了。而去广州坐的是南航,索性南航也办个会员,登录南航的网站,注册明珠会员,也挺方便的,还提醒我可以用手机号码作为会员卡号的后面几位,一下子拉近好多。

接着是补登里程,当看到南航的补登里程申请后,再回想之前国航的里程补登,立马觉得南航的系统服务和设计能力要超出国航,于是登陆国航,两相对照。虽然界面都比较简陋,但南航在产品的人性化和处理效率上更胜一筹。

先看国航凤凰知音会员里程补登界面,需要一共输入七项,八个输入项,而且都是必选,而这里最坑爹的就是机票号码和座位号。也就是说如果你不是拿着机票或登机牌,你是不可能完成的。

国航凤凰知音会员里程补登界面

反过来再看南航明珠会员里程补登界面,显示有七项,两项是显示确认信息无需填写,涂掉的会员卡号后面的位数就是我的手机号码,剩余填写五项,四项为必填,机票号码是可选项。这就大大降低了补登的难度,我只需要提供航班号和日期,以及从哪到哪即可。(当然我觉得有了航班号和航班日期是否就可以唯一确定了?)

南航明珠会员里程补登界面

除了这个关键性的功能外,细节地方南航也胜出,看来国航的产品经理需要改进啊。

1. 机票号码的输入,同样都是13位,但南航缺省给出了前3位。
2. 航班号南航给出了缺省的CZ,而国航需要列表选择,多了一个输入项。不过考虑国航的航班号比较多,也能接受。
3. 航班日期,国航“仅限补录14天以前,6个月以内的机票”,而南航“仅支持3天以前,6个月内的机票”。这里又说明系统在内部数据的同步上南航系统效率更胜一筹。
4. 我提交乘坐广州的两次南航航班信息后,信息补登立即成功,响应速度挺快,并短信提醒。而记得之前国航的补登似乎要经过一定周期的确认,时间有点久了,不太确认,或许现在改进了也未可知。