文档章节

Swift: 你好, AutoLayout!

chai2010
 chai2010
发布于 2016/06/23 11:11
字数 345
阅读 537
收藏 7

Xcode8已经发布,带了Swift3的预览版本,以后都是默认采用Swift3的语法。

这个例子主要是演示iOS中如何用纯代码实现自动布局,先看看效果。

iOS AutoLayout

还是先创建程序入口文件main.swift:

import UIKit

let argc = Process.argc
let argv = UnsafeMutablePointer<UnsafeMutablePointer<CChar>>(Process.unsafeArgv)

UIApplicationMain(argc, argv, NSStringFromClass(MainApp), NSStringFromClass(MainAppDelegate))

创建UI程序入口App.swift,增加了一个导航栏:

import UIKit

class MainApp: UIApplication {
	override func sendEvent(_ event: UIEvent) {
		super.sendEvent(event)
	}
}

class MainAppDelegate: UIResponder, UIApplicationDelegate {
	
	var window: UIWindow?
	
	func application(_ app: UIApplication, didFinishLaunchingWithOptions opt: [NSObject: AnyObject]?) -> Bool {
		
		self.window = UIWindow(frame: UIScreen.main().bounds)

		self.window!.rootViewController = UINavigationController(rootViewController:MainViewController())
		self.window!.backgroundColor = UIColor.white()
		self.window!.makeKeyAndVisible()
		
		return true
	}
}

然后创建视图控制器ViewController.swift, 在这里实现自动布局:

import UIKit

class MainViewController: UIViewController {

	var label0_: UILabel!
	var label1_: UILabel!
	var label2_: UILabel!

	override func viewDidLoad() {
		super.viewDidLoad()
		
		self.title = "主视图"

		self.label0_ = {
			let label = UILabel()
			label.textAlignment = .center
			label.text = "Hello, AutoLayout!"
			return label
		}()

		self.label1_ = {
			let label = UILabel()
			label.textColor = UIColor.red()
			label.textAlignment = .center
			label.text = "=== 你好, AutoLayout! ==="
			return label
		}()
		
		self.label2_ = {
			let label = UILabel()
			label.textColor = UIColor.blue()
			label.textAlignment = .center
			label.text = "=== 底部 ==="
			return label
		}()

		self.view.addSubview(self.label0_)
		self.view.addSubview(self.label1_)
		self.view.addSubview(self.label2_)

		self.view.setupAutoLayout {
			return (
				layputs: [
					("H:|-(20)-[label0]-20-|",[]),
					("H:|-(20)-[label1]-20-|",[]),
					("H:|-(20)-[label2]-20-|",[]),

					("V:|[topGuide]-(0)-[label0(20)]-20-[label1(20)]-(>=0)-[label2]-[bottomGuide]|",[])
				],
				viewsMap: [
					"topGuide": self.topLayoutGuide,
					"bottomGuide": self.bottomLayoutGuide,
					
					"label0": self.label0_,
					"label1": self.label1_,
					"label2": self.label2_
				]
			)
		}
	}
}

其中self.view.setupAutoLayout是针对UIView类型作的扩展:

extension UIView {
	func setupAutoLayout(closure: () -> (layouts: [(String,NSLayoutFormatOptions)], viewsMap: [String:AnyObject]) ) {
		let (viewsLayouts, viewsMap) = closure()
		
		// 采用自动布局
		for view in viewsMap.values {
			if let v = view as? UIView {
				v.translatesAutoresizingMaskIntoConstraints = false
			}
		}
		
		// 添加自动布局规则
		for layout in viewsLayouts {
			self.addConstraints(
				NSLayoutConstraint.constraints(
					withVisualFormat: layout.0,
					options: layout.1, metrics: nil,
					views: viewsMap
				)
			)
		}
	}
}

完成。


https://chai2010.cn/

© 著作权归作者所有

chai2010

chai2010

粉丝 428
博文 102
码字总数 81536
作品 10
武汉
程序员
私信 提问
Autolayout优秀的第三方开源库

今天才发现CSDN支持markdown了…还是给出新博客地址:Autolayout优秀的第三方开源库 最近项目开始用纯代码布局整个UI框架, 对于前一段很长时间都是xib+storyboard狂拖控件约束的我来说,每天写...

humingtao2013
2015/06/25
0
0
iOS开发技巧 autolayout自动布局

iOS开发技巧(系列十五:autolayout自动布局) 发表于3个月前(2014-06-14 13:59) 阅读(121) | 评论(1) 6人收藏此文章, 我要收藏 赞0 摘要 autolayout可以方便的进行屏幕适配 ios autola...

Daniel_s
2015/12/07
76
0
EasyIOS-Swift 2.0发布,支持FlexBox布局

EasyIOS-Swift是一套原生的IOS开发框架。适用于敏捷开发,团队协作开发,基于MVVM思想,支持实时预览,HTML布局,FlexBox布局。可以大大减轻开发者的负担,更专注于产品业务逻辑与交互体验的...

墨水
2015/10/16
2.8K
6
冰镇闪灵/EasyIOS-Swift

EasyIOS For Swift Star is the Best Way to Support EasyIOS ! On Github On OSChina 中文README IOSX - EasyIOS Official Forum EasyIOS-ObjC EasyIOS-Swift-Doc DEMO Video Features MVV......

冰镇闪灵
2015/05/27
0
0
iOS开发技巧(系列十五:autolayout自动布局)

autolayout自动布局技术在iOS6就已经推出了,但是因为很多人一开始不习惯使用xib编程,而是坚持使用代码布局控件,所以autolayout并没有普及的太快。但是现在随着越来越多的人开始使用xib,怎...

召唤攻城狮
2014/06/14
17K
2

没有更多内容

加载失败,请刷新页面

加载更多

mac下redis安装、设置、启动停止

常用命令说明 redis服务器:redis-server redis客户端:redis-cli redis性能测试工具:redis-benchmark AOF文件修复工具:redis-check-aof RDB文件修复工具:redis-check-rd redis设置临时密...

botkenni
8分钟前
3
0
好程序员web前端分享HTML5常见面试题集锦四

好程序员web前端分享HTML5常见面试题集锦四 1、为什么要初始化CSS样式? 答案:因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面...

好程序员官方
9分钟前
2
0
CDN的网络架构是什么?

CDN网络架构主要由两大部分,分为中心和边缘两部分,中心指CDN网管中心和DNS重定向解析中心,负责全局负载均衡,设备系统安装在管理中心机房,边缘主要指异地节点,CDN分发的载体,主要由Cac...

云漫网络Ruan
9分钟前
2
0
pandas入门07---可视化

01 入门 制作提供信息的可视化是数据分析的重要任务之一。首先介绍一下matplotlib库。 import matplotlib.pyplot as pltimport numpy as npdata = np.arange(10)print(data)plt.plot(da...

筠初
10分钟前
2
0
201_PyTorch中文教程:Torch与Numpy互操作

201_PyTorch中文教程:Torch与Numpy互操作 更多参考: https://morvanzhou.github.io/tutorials/ 油管频道:https://www.youtube.com/user/MorvanZhou 依赖软件包: torch numpy Torch的更多数......

openthings
11分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部