小波说雨燕 第三季 构建 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迅速转换为结果, ...
随机推荐
- 说说你所熟知的MSSQL中的substring函数
说说你所熟知的MSSQL中的substring函数 *:first-child { margin-top: 0 !important; } body>*:last-child { margin- ...
- 开放产品开发(OPD):OPD框架
在 开放产品开发(OPD):开篇 中讲了一下OPD是什么,以及它主要指引的方法,这篇文字将给大家介绍一下OPD框架. 一个公司有三种经营模式,像游戏代理的属于运营型,做企业定制项目管理软件的属于项目型 ...
- JS魔法堂:关于元素位置和鼠标位置的属性
一.关于鼠标位置的属性 1. 触发鼠标事件的区域 盒子模型中的border,padding,content区域会触发鼠标事件,点击margin区域将不触发鼠标事件. 2. 鼠标事件对象Mous ...
- dos系统
实验一 命令解释程序的编写 一.目的和要求 1. 实验目的 (1)掌握命令解释程序的原理: (2)掌握简单的DOS调用方法: (3)掌握C语言编程初步. 2.实验要求 编写类似于DOS,UNIX的命 ...
- 0406.复利计算器5.0版-release
复利计算器5.0-release 目录 项目简介 Github链接推送 客户需求 新增需求分析 项目设计 效果演示 操作说明 程序结构 结对分工 合作照片 总结 1.项目简介 项目名称:复利计算器 目 ...
- 三分套三分 --- HDU 3400 Line belt
Line belt Problem's Link: http://acm.hdu.edu.cn/showproblem.php?pid=3400 Mean: 给出两条平行的线段AB, CD,然后一 ...
- Access-Control-Allow-Origin: Dealing with CORS Errors in Angular
https://daveceddia.com/access-control-allow-origin-cors-errors-in-angular/ Getting this error in you ...
- java猜数字游戏
import java.util.Scanner; //导入包 class GuessNum { public static void main(String[] args) { int num = ...
- 【Asphyre引擎】学习笔记(一)
先来说说一下几个最基本的对象: TGraphicsDeviceProvider:这个对象决定我们的游戏是用什么来渲染的,比如DX或者OpenGL,DX还有多个版本可以选择. TCustomSwapCh ...
- JVM中显示锁基础AbstractQueuedSynchronizer
在研究AbstractQueuedSynchronizer的时候我是以ReentrantLock入手的.所以理所当然会设计到一些ReentrantLock的方法.因为网上已经有很多关于AQS的文章了, ...