Swift UI - 工具条(UIToolbar)及工具条按钮(UIBarButtonItem)

注:代码已升级至Swift4

UIToolbar及UIBarButtonItem基本使用

UIBarButtonItem是工具条按钮,有如下5种init初始化方法:

(1)初始化为普通图片按钮

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
import UIKit

class ViewController: UIViewController {

override func viewDidLoad() {
super.viewDidLoad()

// 创建一个浏览器工具条,并设置它的大小和位置
let browserToolbar = UIToolbar(frame:CGRect(x:0, y:20, width:320, height:44))

// 将工具条添加到当前应用的界面中
self.view.addSubview(browserToolbar)

// 创建后退按钮
let btnBack = UIBarButtonItem(image:UIImage(named:"back.png"),
style:.plain, target:self,
action:#selector(ViewController.backClick(_:)))

// 第一个分隔按钮
let btnGap1 = UIBarButtonItem(barButtonSystemItem:.flexibleSpace,
target:nil,
action:nil)

// 创建前进按钮 UIBarButtonItem
let btnForward = UIBarButtonItem(image:UIImage(named:"forward.png"),
style:.plain, target:self,
action:#selector(ViewController.forwardClick(_:)))

// 第二个分隔按钮,创建一个可伸缩的UIBarButtonItem
let btnGap2 = UIBarButtonItem(barButtonSystemItem:.flexibleSpace,
target:nil,
action:nil)

// 添加按钮
browserToolbar.setItems([btnBack, btnGap1, btnForward, btnGap2], animated: false)
}

func backClick(_ sender:UIBarButtonItem) {
// 后退
print("后退按钮点击")
}

func forwardClick(_ sender:UIBarButtonItem) {
// 前进
print("前进按钮点击")
}

override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
}

(2)普通图片按钮,但提供另一个备选图像供横屏使用

1
2
3
4
let btnBack = UIBarButtonItem(image:UIImage(named:"back1.png"),
landscapeImagePhone:UIImage(named:"back2.png"),
style:.plain, target:self,
action:#selector(ViewController.backClick(_:)))

(3)普通文本按钮

1
2
let btnBack = UIBarButtonItem(title:"返回", style:.plain, target:self,
action:#selector(ViewController.backClick(_:)))

(4)使用预置按钮:如撤销,重做,编辑等(总共有25个样式)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
Custom:默认样式
Flexible Space:自动伸缩的空白占位符
Fixed Space:固定宽度的占位元素
Add:“+”加号样式
EditEdit文字样式
DoneDone文字样式
CancelCancel文字样式
SaveSave文字样式
UndoUndo文字样式
RedoRedo文字样式
Compose:背景矩形插支笔的图标样式
Reply:返回箭头的图标样式
Action:背景矩形加上一个向上箭头的图标样式
Organize:文件夹的图标样式
Trash:垃圾桶的图标样式
Bookmarks:书的图标样式
Search:放大镜的图标样式
Refresh:顺时针圆形箭头的图标样式
Stop:一个×的图标样式
Camera:一个照相机的图标样式
Play:向右三角形代表播放的图标样式
Pause:两条竖线代表播放的图标样式
Rewind:向左两个三角代表回退的图标样式
Fast Forward:向右两个三角代表快进的图标样式
Page Curl:页面旋转的图标样式

示例如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import UIKit

class ViewController: UIViewController {

override func viewDidLoad() {
super.viewDidLoad()

// 创建一个浏览器工具条,并设置它的大小和位置
let browserToolbar = UIToolbar(frame:CGRect(x:0, y:20, width:320, height:44))
// 将工具条添加到当前应用的界面中
self.view.addSubview(browserToolbar)

let btn1 = UIBarButtonItem(barButtonSystemItem:.compose,
target:nil, action:nil);
let btn2 = UIBarButtonItem(barButtonSystemItem:.add,
target:nil, action:nil);
let btn3 = UIBarButtonItem(barButtonSystemItem:.flexibleSpace,
target:nil, action:nil);
let btn4 = UIBarButtonItem(barButtonSystemItem:.reply,
target:nil, action:nil);

browserToolbar.setItems([btn1, btn2, btn3, btn4], animated: false)
}

override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
}

(5)使按钮变成任意一个UIView

使用UIBarButtonItem还可以创建间隔项

(1)弹性间隔(会尽可能往两端伸长)

1
2
let btnGap = UIBarButtonItem(barButtonSystemItem:.flexibleSpace,
target:nil, action:nil)

(2)固定间隔(自定义宽度)

1
2
3
let btnGap = UIBarButtonItem(barButtonSystemItem:.fixedSpace,
target:nil, action:nil)
btnGap.width = 50

Powered by AppBlog.CN     浙ICP备14037229号

Copyright © 2012 - 2020 APP开发技术博客 All Rights Reserved.

访客数 : | 访问量 :