ios developer tiny share-20160714

本文介绍如何使用Interface Builder (IB) 在iOS应用中绘制用户界面布局。内容包括拖拽元素到画布上、调整位置、设置文本等基本操作;利用Inspectors进行详细属性配置;通过Auto Layout设置约束以确保不同设备上的适配效果;以及如何查看故事板中的视图层级结构。

今天分享具体使用IB来绘制布局,都是一些inspector的控制,类似PS的操作,非常简单,具体如下:

Drag all of the objects you want in your UI to the canvas. Reposition the objects by dragging them to where you want using the gridlines to help align and center the objects. To change text (for example, enter a button title), double-click the object and enter the text.
The File inspector () and Quick Help inspector () in the utilities area are available throughout your project and display information depending on what you select in the navigator and editor areas. The other inspectors are specific to what is selected on the canvas. To edit the attributes of an object, select the object on the canvas and open the Attributes inspector (). To get information about the size and position of a view, click the Size inspector ().
To view the UI on different device types, click the “View as” button below the canvas and select a device. To further configure the device, select an orientation and adaptation. For tvOS apps, select an interface style.


If the UI objects in the canvas don’t appear in the location you expect, set some rules for how the objects should scale and reposition using Auto Layout constraints. To center an object in a view, select the object and click the align icon in the lower right corner of the canvas. To place the object in the center of the view, select “Horizontally in Container” and “Vertically in Container”, and click Add 2 Constraints in the align tool popover.


Similarly, set the position of other objects and optionally, set the position relative to an adjacent object. To pin the bottom of a label to the top of a button, select the label, click the pin icon (next to the align icon). In the pin tool popover, select the dashed red line below the box, and click Add 1 Constraint. To check the constraints, change the device configuration below the canvas or run the app in Simulator again.


The outline view provides a hierarchical view of your objects in the storyboard. If the outline view is collapsed, click the toggle () below the canvas to expand it. You should be able to see the objects you added to the canvas under View Controller Scene. The outline view also shows Auto Layout errors. Click the red arrow to see the details of what went wrong and then click an error to highlight the associated view.


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值