小波说雨燕 第三季 构建 swift UI 之 度假清单 学习笔记
最终的效果:




<1>第一个场景:

1.本地化 界面简体中文化
Supporting Files - info.plist
Localization native development region 本地的编程的地区

选择China,这样的话,用到系统的UI组件,就会变成中文的样式。

2.文本框占位符
属性:Placeholder
另外需要积累的是:Clear Button

Appears while editing :当你输入的时候会出现这个(清除)按钮
3.自动布局
添加文本框顶部,左侧和右侧间距约束
距离左边的:

距离顶部的:

距离右边的:

距离底部的:

<2>第二个场景:

1.从控件库中添加Table View Controller之后,因为要打开app第一个界面就是度假清单的列表,所以要:
选择这个is initial view controller(初始场景控制器),然后就会出现剪头的位置在Table View Controller之前:
这样调换场景秩序完成。
<其实也可以直接拖拽那个剪头到你想要作为开头场景的视图控制器之前,可以试试看>
2.静态数据
设置表格视图属性内容-静态单元格样式-基本(带标签)
Dynamic Prototypes(动态)就是在程序代码中 设置表格有哪些内容。Static Cells静态。
然后选中Table View Cell然后在属性中找到stye改成Basic基本样式:

然后双击界面显示的title,可以输入文字,比如“北京”,然后如果要复制列表,就按着option,然后选择一个列表框,拖拽复制一个列表。

<3>场景间的转场-过渡(segue)

然后双击导航条,可以输入文字:

找到这个Bar Button item组件,略看英文就知道,这个组件可以添加到导航条上使用:
然后拖拽到导航条上:
然后选择style,选中add,item就会显示 + 的符号:

先来运行一下看看:

同样的为第一次做的界面视图(通过设置场景秩序已经不是第一个开启的界面了:)增加一个导航条:

然后是为按钮添加事件:
(deprecated是废弃的意思,这里两个废弃的是之前ios7的功能)
在这里我们选择show,因为show是堆栈,可以返回的,为了显示出返回按钮,要把,第二个显示的新增度假地视图的上面的两个按钮删除,然后选中这个第一个度假地列表的视图上的导航条,然后在右边属性的back button后面添加:退出 (或者返回两字),也就是说这里的back button的作用对象是选中的导航条,而不是在选中的导航条上添加back button作用的按钮组件。

然后运行,点击+之后就会出现(这里我后面改成"返回"了):

然后,我们把第二个视图按钮添加回到导航条上,编辑和添加作用的两个按钮,然后重新为第一个导航条上的添加按钮重新设置事件:
选中:persent modally,然后注意剪头上的图标变化成简单的正方体了:

然后运行操作的时候,就会发现第二个视图是从下往上出现的。好了,视图转场我们先到这里。
<4>定制视图控制器

添加一个类来自定义定制视图控制器:



将第二个视图(新增度假地)绑定到这个自定义的类:

然后同样的为第一个表格控制器绑定一个类:


<5>反向过渡

在VacationListTableViewController.swift添加一个反向事件:

注意:上面注释的地方就有一样的部分,如果不记得具体怎么写,可以参考或者拷贝。
然后回到viewcontroller:
然后就可以绑定到前面写的方法了。
同样的,为右边add按钮也添加绑定到那个方法:

这样做的目的就是实现:当我们按取消就退出这个页面到前面一个页面,或者按add按钮也能退出到前面一个页面。从而实现了取消当前新增业务或者完成当前新增业务的同时都能回到前面一个页面的逻辑。
这样就完成了一个反向过渡。
<6>完整界面
将第一个列表界面的table view选中,然后将之间静态模式改为动态模式,这样就可以通过代码来操作列表。

<7>实现(implement)使用设计模式
目标-操作(windows里叫 事件-驱动)
接下来我们设计MVC中的C,也就是数据存储结构的设计。









import Foundation
class Vacation {
//两个属性
var place = ""
var visited = false
}
import UIKit
class VacationListTableViewController: UITableViewController {
//度假地数组
var vacationList = [Vacation]()
func loadInitData(){
addVacetion("南昌")
addVacetion("鹰潭")
addVacetion("婺源")
addVacetion("上饶")
addVacetion("赣州")
}
func addVacetion(place:String){
let vac = Vacation()
vac.place = place
vacationList.append(vac)
}
override func viewDidLoad() {
super.viewDidLoad()
//6.载入的时候能够引用自身的组件
self.navigationItem.leftBarButtonItem = self.editButtonItem()
//1.思考一下,应用程序的流程中的最开始,一运行是不是就要加载要显示的数据,这个数据来源可以是网络,也可以是本地磁盘,也可以是自定义数据的类中(model)
loadInitData()
// Uncomment the following line to preserve selection between presentations
// self.clearsSelectionOnViewWillAppear = false
// Uncomment the following line to display an Edit button in the navigation bar for this view controller.
// self.navigationItem.rightBarButtonItem = self.editButtonItem()
}
//7.设置表格编辑时的动画
override func setEditing(editing: Bool, animated: Bool) {
super.setEditing(editing, animated: true)
tableView.setEditing(editing, animated: true)
}
//8.
override func tableView(tableView: UITableView, commitEditingStyle editingStyle: UITableViewCellEditingStyle, forRowAtIndexPath indexPath: NSIndexPath) {
if editingStyle == UITableViewCellEditingStyle.Delete{
//删除度假数组所在行
vacationList.removeAtIndex(indexPath.row)
//删除单元格所在行
tableView.deleteRowsAtIndexPaths([indexPath], withRowAnimation: UITableViewRowAnimation.Top)
}
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
// MARK: - Table view data source
//******************************表格的部分数**********************************************//
override func numberOfSectionsInTableView(tableView: UITableView) -> Int {
// #warning Potentially incomplete method implementation.
// Return the number of sections.
//2.返回表格的数量,这里表格有一个部分,我就return 1
return
}
//******************************表格的部分数**********************************************//
override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
// #warning Incomplete method implementation.
// Return the number of rows in the section.3.返回的是表格的行数,这里就是我们使用的数组的长度
return vacationList.count
}
override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCellWithIdentifier("PCell", forIndexPath: indexPath) as! UITableViewCell//4.这里加载的是单元格的样式,这里呢我们就用已有的单元格的样式
let v = vacationList[indexPath.row]
// Configure the cell...
cell.textLabel?.text = v.place
if v.visited {
cell.accessoryType = UITableViewCellAccessoryType.Checkmark//☑️
}else{
cell.accessoryType = UITableViewCellAccessoryType.None
}
return cell
}
//添加的方法
override func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
//5.这里的方法就是按下单元格的一行,就会执行的方法
// let v1 = vacationList[indexPath.row]
// v1.visited = !v1.visited
setVisited(indexPath.row)
//这里要显示勾选和未勾选的状态
tableView.deselectRowAtIndexPath(indexPath, animated: false)
tableView.reloadData()//重新加载数据
}
func setVisited(n:Int){
let v = vacationList[n]
v.visited = !v.visited
println(v.place+"\(v.visited)")
}
/*
// Override to support conditional editing of the table view.
override func tableView(tableView: UITableView, canEditRowAtIndexPath indexPath: NSIndexPath) -> Bool {
// Return NO if you do not want the specified item to be editable.
return true
}
*/
/*
// Override to support editing the table view.
override func tableView(tableView: UITableView, commitEditingStyle editingStyle: UITableViewCellEditingStyle, forRowAtIndexPath indexPath: NSIndexPath) {
if editingStyle == .Delete {
// Delete the row from the data source
tableView.deleteRowsAtIndexPaths([indexPath], withRowAnimation: .Fade)
} else if editingStyle == .Insert {
// Create a new instance of the appropriate class, insert it into the array, and add a new row to the table view
}
}
*/
/*
// Override to support rearranging the table view.
override func tableView(tableView: UITableView, moveRowAtIndexPath fromIndexPath: NSIndexPath, toIndexPath: NSIndexPath) {
}
*/
/*
// Override to support conditional rearranging of the table view.
override func tableView(tableView: UITableView, canMoveRowAtIndexPath indexPath: NSIndexPath) -> Bool {
// Return NO if you do not want the item to be re-orderable.
return true
}
*/
/*
// MARK: - Navigation
// In a storyboard-based application, you will often want to do a little preparation before navigation
override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {
// Get the new view controller using [segue destinationViewController].
// Pass the selected object to the new view controller.
}
*/
@IBAction func unwindToList(segue: UIStoryboardSegue){
//这个方法就是视图退回到这个方法所属的视图的时候,就会执行的方法
//然后我们通过这个方法获取退回视图的前一个视图的内容
let source = segue.sourceViewController as! AddVacationViewController
let v1 = source.vacation
println(v1.place)
if v1.place != "" {
vacationList.append(v1)
}
println(vacationList)
//然后要刷新表格,但是表格会自动刷新
// loadInitData()
tableView.reloadData()
}
}
import UIKit
class AddVacationViewController: UIViewController {
@IBOutlet weak var textField: UITextField!
@IBOutlet weak var doneButton: UIBarButtonItem!
//1.初始化
var vacation = Vacation()
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
// MARK: - Navigation
// In a storyboard-based application, you will often want to do a little preparation before navigation
override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {
// Get the new view controller using segue.destinationViewController.
// Pass the selected object to the new view controller.过渡前的准备
if sender as! NSObject == doneButton{
if (!textField.text.isEmpty) {
vacation.place = textField.text
println(vacation.place)
}
}
}
}
小波说雨燕 第三季 构建 swift UI 之 度假清单 学习笔记的更多相关文章
- 小波说雨燕 第三季 构建 swift UI 之 UI组件集-视图集(六)Picker View视图 学习笔记
想对PickerView进行操作,只能在代码中操作. 下面 ,再添加三个label组件,然后将所有组件配置到代码中(看代码),然后要实现对PickerView的操作,就要实现它的DataSource协 ...
- 小波说雨燕 第三季 构建 swift UI 之 UI组件集-视图集(五)Image View视图 学习笔记
留下两个问题:1.后面涉及到的异常不知道原因.2.动态图片到了程序里面就不动了. 然后: 上面是有问题的,下面是没有问题的了. 代码(另外简单写的代码,纠正了那个错误): imp ...
- 小波说雨燕 第三季 构建 swift UI 之 UI组件集-视图集(四)Alert View视图 学习笔记
当我们的应用电量不足的时候,就需要警告提示,那么我们可以用Alert View视图 实现:
- 小波说雨燕 第三季 构建 swift UI 之 UI组件集-视图集(三)Activity Indicators视图 学习笔记
当我们应用程序执行一个比较耗时的操作,我们需要给用户一个提示,那么这个提示比较好的方式方法呢就是 进度条 或者 一个齿轮转.我们就需要Activity Indicators组件 Indicato ...
- 小波说雨燕 第三季 构建 swift UI 之 UI组件集-视图集(二)ActionSheet视图 学习笔记
action动作 sheet表 其实就是一种菜单 参数:1代理:谁去代理它2取消按钮标题3这个按钮标题会自动变成红色4添加设置其他按钮(不想加,设置为nil) 然后我们为这些按钮添加点击事件: ...
- 小波说雨燕 第三季 构建 swift UI 之 UI组件集-视图集(一)视图共性 学习笔记
如果想进行自定义的配置,可以继承基类UIView. 地图app中需要多点触动Multiple Touch, opaque不透明的 hidden隐藏的 比如下载的进度条,如果下载完毕,可以通过设置这个属 ...
- DirectX 9 UI三种设计学习笔记:文章4章Introducing DirectInput+文章5章Wrapping Direct3D
本文从哈利_创.转载请注明出处.有问题欢迎联系本人! 邮箱:2024958085@qq.com 上一期的地址: DX 9 UI设计学习笔记之二 第4章 Introducin ...
- BZOJ 2038: [2009国家集训队]小Z的袜子(hose)【莫队算法裸题&&学习笔记】
2038: [2009国家集训队]小Z的袜子(hose) Time Limit: 20 Sec Memory Limit: 259 MBSubmit: 9894 Solved: 4561[Subm ...
- 从零开始构建并编写神经网络---Keras【学习笔记】[1/2]
Keras简介: Keras是由纯python编写的基于theano/tensorflow的深度学习框架. Keras是一个高层神经网络API,支持快速实验,能够把你的idea迅速转换为结果, ...
随机推荐
- HMM 自学教程(二)生成模型
本系列文章摘自 52nlp(我爱自然语言处理: http://www.52nlp.cn/),原文链接在 HMM 学习最佳范例,这是针对 国外网站上一个 HMM 教程 的翻译,作者功底很深,翻译得很精彩 ...
- Mysql 修改密码及重置密码方法
修改密码: //选择数据库 use mysql; //修改密码 update user set password=password('新密码') where user='root'; //立即生效 f ...
- XPATH使用总结
最近公司里需要写一些爬虫项目,所以去接触学习了xpath的内容.在w3c上给出了xpath的语法,但是我感觉不全,而且讲得也不详细,我又去网上找了一些文章,总结一下. 这几个都是比较常用的,能解决基本 ...
- Lambda表达式和匿名内部类(I)
本文git地址 前言 Java Labmda表达式的一个重要用法是简化某些匿名内部类(Anonymous Classes)的写法.实际上Lambda表达式并不仅仅是匿名内部类的语法糖,JVM内部是通过 ...
- sed之打印特定行与连续行
接分号,表示打印特定行,如下命令只会打印出第一行与第十行 sed -n '1p;10p' test.txt 接逗号,表达连续的行娄,如下命令打印出第一行到第十行 sed -n '1,10p' tes ...
- 重构第12天 分解依赖(Break Dependencies)
理解:“分解依赖” 是指对部分不满足我们要求的类和方法进行依赖分解,通过装饰器来达到我们需要的功能. 详解:今天我们所讲的这个重构方法对于单元测试是非常有用的.如果你要在你的代码中加入单元测试但有一部 ...
- DataGridView隐藏列用CSS实现
隐藏DataGridView某一列,用CSS控制 CSS Code: .hidden{ display:none;} c# Code: <asp:BoundField DataField=&qu ...
- SqlServer知识点记录分享
知识点介绍 双向检索:这里就不大话概念了,直接说它的作用 ISNULL()函数:判断函数是否有值,如果变量没有赋值就给定指定的值,下面的例子就是如果@TOTALCOUNT变量为NULL那么就赋值为空字 ...
- iis到w3wp的数据流及工作原理
HTTP.sys->IO线程-CLR线程池中的worker线程处理 IO线程只负责把请求交给Worker线程或者放入进程池级别的队列,然后又去HTTP.SYS的队列中处理其它的请求
- PHP常规模板引擎中与CSS/JSON冲突的解决
主要针对对象:Smarty/Dwoo 参考:http://developer.51cto.com/art/201009/224929.htm 其实以前都不怎么关注模板引擎,觉得没必要使用.但随着年龄的 ...