[Xcode10 实际操作]九、实用进阶-(25)使用Storyboard(故事版)的约束功能,使项目快速适配各种分辨率的设备

本文将演示使用故事版的约束功能,使项目快速适配各种分辨率的设备。

在项目导航区打开并编辑主故事版【Main.storyboard】。

在当前故事版中,已经存在一个适配4寸屏幕的界面,

点击设备名称,更改设备类型。在弹出的模拟器列表中,选择一款拥有4.7寸屏幕的模拟器。

然后通过系统提供的约束功能,对各尺寸屏幕进行适配。

在故事版文档框架区中的【View Controller】,点击显示【MainView】视图下的所有子元素。

该视图是添加的自定义视图,尺寸与根视图相同,并且包含了页面中的所有元素。

建立约束的原则是首先需要对父视图进行约束,然后再对子视图进行约束。

所以先对当前视图进行约束。在【MainView】视图上按下鼠标右键,然后拖动到根视图,

以创建视图与根视图之间的约束关系。在弹出的约束类型列表中,

选择【Leading Space to Container】视图左边界与容器外间距之间,保持约束关系。

即无论出于那种尺寸的屏幕,两者之间的距离都保持不变。

视图周围出现了红色边框,并且在故事版文档框架区的右上角出现了红色错误标识。

这是因为系统还不清楚视图右边界、以及宽度和高度的约束关系。

在【MainView】视图上按下鼠标右键,然后拖动到根视图,在弹出的约束类型列表中,

如果在约束名称左侧,出现一个白色圆点,则标识该约束类型已经存在。

选择【Trailing Space to Container】视图右边界与容器外间距之间,保持约束关系。

使用同样的方式,继续设置当前视图与根视图之间的约束关系。在弹出的约束类型列表中,

选择【Vertical Spacing to Top Layout Guide】视图与顶部布局参考线,保持固定的垂直距离。

即无论处于那种尺寸的屏幕,两者间距都保持不变。

使用同样的方式,继续设置当前视图与根视图之间的约束关系。在弹出的约束类型列表中,

选择【Vertical Spacing to Bottom Layout Guide】视图底部布局参考线,保持固定的垂直距离。

即无论处于那种尺寸的屏幕,两者间距都保持不变。

在模拟器中,暂时还看不到变化,因为刚刚调整的视图,与根视图具有相同的背景颜色。

不过在适配父视图之后,现在可以给子视图添加约束。

然后选择分割器子视图,也就是在视图控制器中,那条较粗的灰色横线。

在分割线视图上按下鼠标右键,然后拖动到父视图。

因为父视图与根视图,建立了约束关系,所以子视图只要和父视图机建立约束关系即可。

参照MainView拖动到根视图的操作进行。

将分割线视图的左右边界和上下边界添加约束:

【Leading Space to Container】

【Top Space to Container】

【Trailing Space to Container】

现在只要固定分割线高度即可。

按下鼠标右键,然后拖动到分割线自身的其他位置,建立自身的约束。

在弹出的约束类型列表中,选择【Height】选项,

即无论出于哪一种尺寸的屏幕,其高度始终保持不变。

【建立约束的原则】:首先需要对右向箭头所在的控件的父视图进行约束,然后再对箭头头所在的控件视图进行约束



在添加完约束后,如何修改一个控件的位置?

点击【显示和隐藏检查器】图标,打开检查器面板。

点击【尺寸检查器图标】,进入尺寸和位置设置面板。

点击右侧的垂直滚动条,跳转到下方的约束区域。

在【Constraints】区域,可以看到当前控件的所有约束信息,

点击底部间距【Buttom Space to】的【Edit】编辑图标,弹出约束编辑面板。

【Constant】:30,修改常量值。此时按钮的位置已经发生了变化。



[Xcode10 实际操作]九、实用进阶-(25)使用Storyboard(故事版)的约束功能,使项目快速适配各种分辨率的设备

原文地址:https://www.cnblogs.com/strengthen/p/10105169.html

时间: 2024-10-13 11:26:36

[Xcode10 实际操作]九、实用进阶-(25)使用Storyboard(故事版)的约束功能,使项目快速适配各种分辨率的设备的相关文章

[Xcode10 实际操作]九、实用进阶-(26)对Storyboard(故事版)中的文字标签(Label)进行本地化处理

对Storyboard(故事版)中的文字标签(Label)进行本地化处理. 点击项目名称[DemoApp]进入项目信息面板. [Build Setting]->[Localizations]本地化下方的[+]弹出语言列表 ->选择[Chinese(Simplified)(zh-Hans)]简体中文 ->点击取消选择[LaunchScreen.storyboard]启动视图左侧的复选框, 只保留对[Main.storybooard]主故事板进行本地化处理. ->点击[Finish]完

[Xcode10 实际操作]九、实用进阶-(9)陀螺仪设备的使用

本文将演示陀螺仪设备的使用. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] 1 import UIKit 2 //导入需要用到的CoreMotion框架 3 //该框架不仅提供实时的加速度值,还提供设备的三维姿态信息. 4 import CoreMotion 5 6 class ViewController: UIViewController { 7 8 //添加一个属性,该属性是框架提供的一个运动管理类. 9 //然后由这个类,去管理三种和运动相关的数据封

[Xcode10 实际操作]九、实用进阶-(18)图像人脸识别:对图片中的人像进行面部检测

本文将演示对图片中的人像,进行面部检测. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] 1 import UIKit 2 //导入要使用的CoreImage框架 3 //该框架提供了强大和高效的图片处理功能. 4 //用来对基于像素的图像进行分析.操作和特效处理 5 import CoreImage 6 7 class ViewController: UIViewController { 8 9 override func viewDidLoad() { 1

[Xcode10 实际操作]九、实用进阶-(8)实现App的Setting设置:添加和读取程序的配置信息

本文将演示如何实现添加和读取程序的配置信息. 在项目文件夹[DemoApp]上点击鼠标右键->[New File]创建一个设置束文件 ->[Settings Bundle]设置束: 如果想要通过设备的[设置]程序,来展示自定义的的偏好设置,必须先准备好一个设置束 ->[Next]->[Save As]:Setting.bundle保持默认的配置. ->保存默认的存储位置点击[Create] 在项目导航区多了一个设置束文件[Setting.bundle]. 点击下拉箭头,查看设

[Xcode10 实际操作]九、实用进阶-(10)定位设备的使用

本文将演示定位设备的使用. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] 1 import UIKit 2 //导入需要用到的定位CoreLocation框架 3 //该框架可以利用三种技术来实现定位: 4 //1.全球卫星定位系统 5 //2.蜂窝基站三角网定位 6 //3.无线网络定位服务 7 //其中,全球卫星定位系统是最精确的. 8 import CoreLocation 9 10 //添加一个地理定位的代理协议CLLocationManagerDe

[Xcode10 实际操作]九、实用进阶-(17)使用CGBlendMode改变UIImage颜色,实现对图片进行混合着色

本文将演示如何使用CGBlendMode改变UIImage颜色,实现对图片进行混合着色. 在项目文件夹[DemoApp]上点击鼠标右键 ->[New File]创建一个扩展文件->模板选择窗口:[Swift File]->[Next] ->[Save As]:ExtensionUIImage.swift->保存默认的存储位置点击[Create] 在[ExtensionUIImage.swift]添加一个针对UIImage类的扩展. 扩展可以向一个已有的类.结构体或枚举类型添加

[Xcode10 实际操作]九、实用进阶-(32)项目的打包上传和提交审核以及下架处理

本文将演示如何将一个应用程序进行打包上传,并提交审核以及下架处理. 点击项目[DemoApp]->[Build Settings]编译设置->[Provisioning Profile]证书设置区域. 在[苹果开发者管理后台],创建应用程序的开发证书和发布证书. [Debug]:首先设置应用程序的开发证书,有了开发证书后,可以在真机设备上运行和测试应用程序. 在弹出的证书列表中,列出了所有的开发证书和发布证书,这里选择开发证书. [Release]:设置应用程序的发布证书,发布证书可以让您对应

[Xcode10 实际操作]九、实用进阶-(7)使用Xcode的版本管理功能(SCM)

本文将演示系统的版本控制功能. 软件配置管理(SCM):Software configuration management 是指通过执行版本控制.变更控制的规程,以及使用合适的配置管理软件, 来保证所有配置项的完整性和可跟踪性.配置管理是对工作成果的一种有效保护. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] 添加一行代码,在控制台打印输出日志. 1 import UIKit 2 3 class ViewController: UIViewControlle

[Xcode10 实际操作]九、实用进阶-(27)字符串文件(Localizable.strings)的本地化

本文将演示字符串文件(Localizable.strings)的本地化. 在项目[DemoApp]文件夹下点击鼠标右键,弹出右键菜单 ->[New File]新建文件命令,创建一个字符串文件. ->[Strings File]字符串文件->[Next] ->[Save As]:Localizable.strings.文件名是固定的[Localizable.strings],请不要用别的名称. ->保持默认的存储位置,点击[Create] 点击[显示或隐藏检查器]图标,打开右侧