小波说雨燕 第三季 构建 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,也就是数据存储结构的设计。

复制代码
1 import Foundation
2 3 class Vacation {
4 //两个属性 5 var place = "" 6 var visited = false 7 }
复制代码
复制代码
 1 import UIKit
 2  3 class VacationListTableViewController: UITableViewController {
 4  5 //度假地数组  6 var vacationList = [Vacation]()
 7  8  func loadInitData(){
 9 addVacetion("南昌")
 10 addVacetion("鹰潭")
 11 addVacetion("婺源")
 12 addVacetion("上饶")
 13 addVacetion("赣州")
 14  }
 15  func addVacetion(place:String){
 16 let vac = Vacation()
 17 vac.place = place
 18  vacationList.append(vac)
 19  }
 20  21 override func viewDidLoad() {
 22  super.viewDidLoad()
 23  24 //6.载入的时候能够引用自身的组件  25 self.navigationItem.leftBarButtonItem = self.editButtonItem()
 26  27 //1.思考一下,应用程序的流程中的最开始,一运行是不是就要加载要显示的数据,这个数据来源可以是网络,也可以是本地磁盘,也可以是自定义数据的类中(model)  28  loadInitData()
 29  30 // Uncomment the following line to preserve selection between presentations
 31 // self.clearsSelectionOnViewWillAppear = false
 32  33 // Uncomment the following line to display an Edit button in the navigation bar for this view controller.
 34 // self.navigationItem.rightBarButtonItem = self.editButtonItem()  35  }
 36 //7.设置表格编辑时的动画  37 override func setEditing(editing: Bool, animated: Bool) {
 38 super.setEditing(editing, animated: true)
 39 tableView.setEditing(editing, animated: true)
 40  }
 41 //8.  42 override func tableView(tableView: UITableView, commitEditingStyle editingStyle: UITableViewCellEditingStyle, forRowAtIndexPath indexPath: NSIndexPath) {
 43 if editingStyle == UITableViewCellEditingStyle.Delete{
 44 //删除度假数组所在行  45  vacationList.removeAtIndex(indexPath.row)
 46 //删除单元格所在行  47  tableView.deleteRowsAtIndexPaths([indexPath], withRowAnimation: UITableViewRowAnimation.Top)
 48  }
 49  }
 50 override func didReceiveMemoryWarning() {
 51  super.didReceiveMemoryWarning()
 52 // Dispose of any resources that can be recreated.  53  }
 54  55 // MARK: - Table view data source
 56 //******************************表格的部分数**********************************************//
 57 override func numberOfSectionsInTableView(tableView: UITableView) -> Int {
 58 // #warning Potentially incomplete method implementation.
 59 // Return the number of sections.
 60 //2.返回表格的数量,这里表格有一个部分,我就return 1  61 return 1  62  }
 63 //******************************表格的部分数**********************************************//
 64 override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
 65 // #warning Incomplete method implementation.
 66 // Return the number of rows in the section.3.返回的是表格的行数,这里就是我们使用的数组的长度  67 return vacationList.count
 68  }
 69  70  71 override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
 72 let cell = tableView.dequeueReusableCellWithIdentifier("PCell", forIndexPath: indexPath) as! UITableViewCell//4.这里加载的是单元格的样式,这里呢我们就用已有的单元格的样式  73 let v = vacationList[indexPath.row]
 74 // Configure the cell...  75 cell.textLabel?.text = v.place
 76  77 if v.visited {
 78 cell.accessoryType = UITableViewCellAccessoryType.Checkmark//  79 }else{
 80 cell.accessoryType = UITableViewCellAccessoryType.None
 81  }
 82  83 return cell
 84  }
 85 //添加的方法  86 override func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
 87 //5.这里的方法就是按下单元格的一行,就会执行的方法
 88 // let v1 = vacationList[indexPath.row]
 89 // v1.visited = !v1.visited  90  setVisited(indexPath.row)
 91  92 //这里要显示勾选和未勾选的状态  93 tableView.deselectRowAtIndexPath(indexPath, animated: false)
 94 tableView.reloadData()//重新加载数据  95  }
 96  func setVisited(n:Int){
 97 let v = vacationList[n]
 98 v.visited = !v.visited
 99 println(v.place+"\(v.visited)")
100  }
101 /* 102  // Override to support conditional editing of the table view.
103  override func tableView(tableView: UITableView, canEditRowAtIndexPath indexPath: NSIndexPath) -> Bool {
104  // Return NO if you do not want the specified item to be editable.
105  return true
106  }
107 */ 108 109 /* 110  // Override to support editing the table view.
111  override func tableView(tableView: UITableView, commitEditingStyle editingStyle: UITableViewCellEditingStyle, forRowAtIndexPath indexPath: NSIndexPath) {
112  if editingStyle == .Delete {
113  // Delete the row from the data source
114  tableView.deleteRowsAtIndexPaths([indexPath], withRowAnimation: .Fade)
115  } else if editingStyle == .Insert {
116  // Create a new instance of the appropriate class, insert it into the array, and add a new row to the table view
117  } 
118  }
119 */ 120 121 /* 122  // Override to support rearranging the table view.
123  override func tableView(tableView: UITableView, moveRowAtIndexPath fromIndexPath: NSIndexPath, toIndexPath: NSIndexPath) {
124 125  }
126 */ 127 128 /* 129  // Override to support conditional rearranging of the table view.
130  override func tableView(tableView: UITableView, canMoveRowAtIndexPath indexPath: NSIndexPath) -> Bool {
131  // Return NO if you do not want the item to be re-orderable.
132  return true
133  }
134 */ 135 136 /* 137  // MARK: - Navigation
138 139  // In a storyboard-based application, you will often want to do a little preparation before navigation
140  override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {
141  // Get the new view controller using [segue destinationViewController].
142  // Pass the selected object to the new view controller.
143  }
144 */ 145  @IBAction func unwindToList(segue: UIStoryboardSegue){
146 //这个方法就是视图退回到这个方法所属的视图的时候,就会执行的方法
147 //然后我们通过这个方法获取退回视图的前一个视图的内容 148 let source = segue.sourceViewController as! AddVacationViewController
149 let v1 = source.vacation
150  println(v1.place)
151 if v1.place != "" {
152  vacationList.append(v1)
153  }
154  println(vacationList)
155 //然后要刷新表格,但是表格会自动刷新
156 // loadInitData() 157  tableView.reloadData()
158  }
159 160 }
复制代码
复制代码
 1 import UIKit
 2  3 class AddVacationViewController: UIViewController {
 4 @IBOutlet weak var textField: UITextField!
 5  6 @IBOutlet weak var doneButton: UIBarButtonItem!
 7 //1.初始化  8 var vacation = Vacation()
 9 10 11 override func viewDidLoad() {
12  super.viewDidLoad()
13 14 // Do any additional setup after loading the view. 15  }
16 17 override func didReceiveMemoryWarning() {
18  super.didReceiveMemoryWarning()
19 // Dispose of any resources that can be recreated. 20  }
21 22 // MARK: - Navigation
23 24 // In a storyboard-based application, you will often want to do a little preparation before navigation 25 override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {
26 // Get the new view controller using segue.destinationViewController.
27 // Pass the selected object to the new view controller.过渡前的准备 28 if sender as! NSObject == doneButton{
29 if (!textField.text.isEmpty) {
30 31 vacation.place = textField.text
32  println(vacation.place)
33  }
34  }
35  }
36 }
复制代码

相关文章
|
5月前
|
存储 开发框架 JavaScript
深入探讨Flutter中动态UI构建的原理、方法以及数据驱动视图的实现技巧
【6月更文挑战第11天】Flutter是高效的跨平台移动开发框架,以其热重载、高性能渲染和丰富组件库著称。本文探讨了Flutter中动态UI构建原理与数据驱动视图的实现。动态UI基于Widget树模型,状态变化触发UI更新。状态管理是关键,Flutter提供StatefulWidget、Provider、Redux等方式。使用ListView等可滚动组件和StreamBuilder等流式组件实现数据驱动视图的自动更新。响应式布局确保UI在不同设备上的适应性。Flutter为开发者构建动态、用户友好的界面提供了强大支持。
99 2
|
2月前
|
JavaScript 前端开发 开发工具
使用vue3+element-ui plus 快速构建后台管理模板
本文介绍了如何使用Vue 3和Element UI Plus快速构建后台管理模板的步骤,包括安装Vue 3脚手架、Element UI Plus以及如何全局配置Element UI Plus。然后详细讲解了如何使用Element UI Plus构建布局,包括Header组件、Aside组件和HomeView视图的创建和样式调整,以及App.vue和main.css的修改,最后提供了项目的文件结构图和效果展示。
使用vue3+element-ui plus 快速构建后台管理模板
|
3月前
|
容器 iOS开发 Linux
震惊!Uno Platform 响应式 UI 构建秘籍大公开!从布局容器到自适应设计,带你轻松打造跨平台完美界面
【8月更文挑战第31天】Uno Platform 是一款强大的跨平台应用开发框架,支持 Web、桌面(Windows、macOS、Linux)及移动(iOS、Android)等平台,仅需单一代码库。本文分享了四个构建响应式用户界面的最佳实践:利用布局容器(如 Grid)适配不同屏幕尺寸;采用自适应布局调整 UI;使用媒体查询定制样式;遵循响应式设计原则确保 UI 元素自适应调整。通过这些方法,开发者可以为用户提供一致且优秀的多设备体验。
140 0
|
3月前
|
前端开发 开发者 C#
深度解析 Uno Platform 中的 MVVM 模式:从理论到实践的全方位指南,助你轻松掌握通过 C# 与 XAML 构建高效可维护的跨平台应用秘籍
【8月更文挑战第31天】本文详细介绍如何在优秀的跨平台 UI 框架 Uno Platform 中实施 MVVM(Model-View-ViewModel)模式,通过一个简单的待办事项列表应用演示其实现过程。MVVM 模式有助于分离视图层与业务逻辑层,提升代码组织性、易测性和可维护性。Uno Platform 的数据绑定机制使视图与模型间的同步变得高效简便。文章通过构造 `TodoListViewModel` 类及其相关视图,展示了如何解耦视图与模型,实现动态数据绑定及命令处理,从而提高代码质量和开发效率。通过这一模式,开发者能更轻松地构建复杂的跨平台应用。
53 0
|
3月前
|
测试技术 Swift iOS开发
探索iOS自动化测试:使用Swift编写UI测试
【8月更文挑战第31天】在软件开发的海洋中,自动化测试是保证船只不偏离航线的灯塔。本文将带领读者启航,深入探索iOS应用的自动化UI测试。我们将通过Swift语言,点亮代码的灯塔,照亮测试的道路。文章不仅会展示如何搭建测试环境,还会提供实用的代码示例,让理论知识在实践中生根发芽。无论你是新手还是有经验的开发者,这篇文章都将是你技能提升之旅的宝贵指南。
|
3月前
|
前端开发 JavaScript 开发者
Angular Material 超厉害!与传统自定义 UI 大对比,构建美观一致 UI 的绝佳选择!
【8月更文挑战第31天】在前端开发中,构建美观一致的用户界面至关重要。Angular Material 是一个基于 Material Design 规范的强大 UI 组件库,提供丰富的预定义组件和设计指南。本文通过对比 Angular Material 和传统自定义 UI,展示了前者在设计理念、组件丰富度、响应式设计及主题定制方面的显著优势。
53 0
|
6月前
|
安全 Swift Android开发
构建移动应用:Swift vs Kotlin —— 两大主流语言的对决
【5月更文挑战第11天】Swift与Kotlin在移动应用开发中各有优势。Swift是iOS开发的首选,以其简洁语法、高性能和类型安全著称;而Kotlin是Android的官方推荐语言,以其与Java的无缝互操作、空安全特性和简洁代码受到青睐。两者在语法简洁性、性能和社区支持上表现优秀,但平台兼容性不同。开发者应根据项目需求和目标平台选择合适的语言。
|
6月前
|
机器学习/深度学习 数据采集 TensorFlow
【Swift开发专栏】Swift与机器学习:构建智能应用
【4月更文挑战第30天】本文探讨了使用Swift开发机器学习应用,分为三个部分:机器学习基础(定义、类型及应用),Swift在机器学习中的作用(Swift for TensorFlow、Core ML及性能优势),以及实践技巧(数据预处理、特征工程、模型训练与部署、性能优化和用户界面集成)。通过学习,开发者能掌握构建智能应用的技能,利用Swift的性能和安全性提升应用效率。随着深入学习,开发者可探索更多高级特性和技术,如深度学习和复杂数据分析。
112 2
|
6月前
|
安全 Swift iOS开发
【Swift 开发专栏】Swift 与 UIKit:构建 iOS 应用界面
【4月更文挑战第30天】本文探讨了Swift和UIKit在构建iOS应用界面的关键技术和实践方法。Swift的简洁语法、类型安全和高效编程模型,加上与UIKit的紧密集成,使开发者能便捷地创建用户界面。UIKit提供视图、控制器、布局、动画和事件处理等功能,支持灵活的界面设计。实践中,遵循设计原则,合理组织视图层次,运用布局和动画,以及实现响应式设计,能提升界面质量和用户体验。文章通过登录、列表和详情界面的实际案例展示了Swift与UIKit的结合应用。
294 1
|
6月前
|
开发框架 前端开发 JavaScript
【Flutter前端技术开发专栏】Flutter中的动态UI构建与数据驱动视图
【4月更文挑战第30天】Flutter是一款高效跨平台移动开发框架,以其热重载、高性能渲染和丰富组件库著称,简化了动态UI和数据驱动视图的实现。本文深入讨论了动态UI构建原理,包括基于Widget树模型的UI更新和状态管理,如使用StatefulWidget和数据流库(如Provider、Redux)。此外,文中还介绍了实现技巧,如使用ListView等可滚动组件、StreamBuilder进行数据流驱动的UI更新,以及应用响应式布局以适应不同设备。Flutter为开发者提供了构建高效动态界面的强大工具。
177 0
【Flutter前端技术开发专栏】Flutter中的动态UI构建与数据驱动视图