通过使用导航条(UINavigationBar)与导航条控制器(UINavigationController)可以方便的在主页面和多层子页面之间切换。下面通过一个简单“组件效果演示”的小例子来说明如何通过代码来进行页面的切换。
功能如下:
1、在AppDelagete.swift入口文件中把首页ViewController做了导航控件的封装
2、首页是一个表格列出几个Swift控件的名称
3、点击表格项即切换到对应组件展示页面,顶部的导航条标题变为该控件的名称,同时导航条左侧还有返回按钮
4、在展示页中,给导航条右侧添加了“效果/代码”切换的按钮,点击分别展示组件的效果和代码
代码如下:
--- 入口文件 AppDelegate.swift ---
// 把起始ViewController作为导航控件封装,我们在ViewController里就能调用导航条进行页面切换了
let rootViewController = ViewController()
let rootNavigationController = UINavigationController(rootViewController: rootViewController)
self.window!.rootViewController = rootNavigationController
--- 主页面 ViewController.swift ---
import UIKit
class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
// 表格加载
var tableView:UITableView?
// 控件类型
var ctrls = ["UILabel", "UIButton", "UIImageView", "UISlider", "UIWebView"]
override func viewDidLoad() {
super.viewDidLoad()
self.title = "Swift控件演示"
self.tableView = UITableView(frame:self.view.frame, style:UITableView.Style.plain)
self.tableView!.delegate = self
self.tableView!.dataSource = self
self.tableView!.register(UITableViewCell.self, forCellReuseIdentifier: "SwiftCell")
self.view.addSubview(self.tableView!)
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
// UITableViewDataSource协议方法
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int
{
return self.ctrls.count
}
// UITableViewDataSource协议方法
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell
{
let cell = tableView.dequeueReusableCell(withIdentifier: "SwiftCell", for:indexPath as IndexPath)
as UITableViewCell
cell.accessoryType = UITableViewCell.AccessoryType.disclosureIndicator
cell.textLabel?.text = self.ctrls[indexPath.row]
return cell
}
// UITableViewDelegate协议方法,点击时调用
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath)
{
// 跳转到detailViewController,取消选中状态
self.tableView!.deselectRow(at: indexPath as IndexPath, animated: true)
// 创建DetailViewController
let detailViewController = DetailViewController()
// 传递控件的title,在detailView里用于判断生成响应的控件
detailViewController.title = self.ctrls[indexPath.row]
// navigationController跳转到detailViewController
self.navigationController!.pushViewController(detailViewController, animated:true)
}
}
--- 子页面 DetailViewController.swift ---
import UIKit
class DetailViewController: UIViewController
{
override func viewDidLoad()
{
super.viewDidLoad()
//设置背景色
self.view.backgroundColor = UIColor.white
//按title加载控件
loadControl(ctrl: self.title!)
//设置代码和控件展示切换按钮,增加到导航条的右侧
//这里采用了navigationController不能增加navigationItem
let btn = UIBarButtonItem(title:"代码", style: .plain, target: self,
action: #selector(DetailViewController.btnCodeClicked(sender:)))
self.navigationItem.rightBarButtonItem = btn
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
//构建控件并加载到界面
func loadControl(ctrl:String)
{
switch (ctrl) {
case "UILabel":
let label = UILabel(frame: self.view.bounds)
label.backgroundColor = UIColor.clear
label.textAlignment = NSTextAlignment.center
label.font = UIFont.systemFont(ofSize: 36)
label.text = "Hello, 小驴拉磨"
self.view.addSubview(label)
case "UIButton":
let button = UIButton(frame: CGRect(x: 110,y: 120,width: 100,height: 60))
button.backgroundColor = UIColor.blue
button.setTitleColor(UIColor.red, for: UIControl.State.normal)
button.setTitleColor(UIColor.white, for: UIControl.State.highlighted)
button.setTitle("点击我", for: .normal)
button.addTarget(self, action: #selector(DetailViewController.buttonClicked(sender:)),
for: UIControl.Event.touchUpInside)
self.view.addSubview(button)
case "UIImageView":
let image = UIImage(named: "播放记录简单流程")
let imageView = UIImageView(frame:
CGRect(x: (self.view.bounds.width - image!.size.width) / 2.0, y: 120.0,
width: image!.size.width, height: image!.size.height))
imageView.image = image!
self.view.addSubview(imageView)
case "UISlider":
let slider = UISlider(frame:CGRect(x: 60.0, y: 120.0, width: 200.0, height: 30.0))
self.view.addSubview(slider)
case "UIWebView":
let webView = UIWebView(frame:self.view.bounds)
let url = NSURL(string: "https://www.jianshu.com/u/adedbfe99f1c")
let request = NSURLRequest(url: url! as URL)
webView.loadRequest(request as URLRequest)
self.view.addSubview(webView)
default:
print("control name: \(ctrl)")
}
}
//显示控件的代码
func loadCode(ctrl:String)
{
var str:String
switch (ctrl) {
case "UILabel":
str = "let label = UILabel(frame: self.view.bounds)\n"
str += "label.backgroundColor = UIColor.clearColor()\n"
str += "label.textAlignment = NSTextAlignment.Center\n"
str += "label.font = UIFont.systemFontOfSize(36)\n"
str += "label.text = \"Hello, 小驴拉磨\"\n"
str += "self.view.addSubview(label)"
case "UIButton":
str = "UIButton"
case "UISlider":
str = "let slider = UISlider(frame:CGRectMake(60.0, 120.0, 200.0, 30.0))\n"
str += "self.view.addSubview(slider)"
default:
str = "other ctrl"
}
//在导航条下方位置显示源代码
let txt = UITextView(
frame: CGRect(x: 0, y: 60, width: self.view.bounds.size.width,
height: self.view.bounds.size.height - 60))
txt.text = str
self.view.addSubview(txt)
}
//清空所有子视图
func clearViews()
{
for v in self.view.subviews as [UIView] {
v.removeFromSuperview()
}
}
@objc func buttonClicked(sender:AnyObject)
{
print("you clicked button")
}
//显示控件的代码
@objc func btnCodeClicked(sender:AnyObject)
{
print("title: \(String(describing: self.title))")
clearViews()
if self.navigationItem.rightBarButtonItem!.title == "代码" {
loadCode(ctrl: self.title!)
self.navigationItem.rightBarButtonItem!.title = "效果"
}
else {
self.navigationItem.rightBarButtonItem!.title = "代码"
loadControl(ctrl: self.title!)
}
}
}
如果使用StoryBoard实现更加简单
AppDelegate.swift都不需要修改。打开Main.storyboard。
(1)点击首页的Scene,选择Editor -> Embed In -> Navigation Controller 即可。
image.png
(2)从首页单元格拖“show”的关联Segue到详细页,或从首页View Controller拖手动关联Segue到详细页
image.png
(3)定义上面刚添加的Segue的Indentifier(比如detail)
image.png
这样,点击单元格跳转的代码有所改变,是根据刚才定义Segue的Indentifier来跳转
// UITableViewDelegate协议方法,点击时调用
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath)
{
// 跳转到detailViewController,取消选中状态
self.tableView!.deselectRow(at: indexPath, animated: true)
//更具定义的Segue Indentifier进行跳转
self.performSegue(withIdentifier: "detail", sender: self.ctrls[indexPath.row])
}
//在这个方法中给新页面传递参数
override func prepare(for segue: UIStoryboardSegue, sender: Any?){
if segue.identifier == "detail"{
let controller = segue.destination as! DetailViewController
controller.title = sender as? String
}
}
总结
纯代码:self.navigationController!.pushViewController(detailViewController, animated:true)
StoryBoard:self.performSegue(withIdentifier: "detail", sender: self.ctrls[indexPath.row])
根距标识跳转
原文出自:www.hangge.com 转载请保留原文链接:https://www.hangge.com/blog/cache/detail_586.html
网友评论