ios官方菜单项目重点剖析附项目源码
原版教程:https://developer.apple.com/library/content/referencelibrary/GettingStarted/DevelopiOSAppsSwift/index.html
项目知识重点:
1,使用堆栈视图实现自动布局。
2,自定义控件的创建与使用。
3,调用手机系统图片库。
开发环境:工具:Xcode8.2测试版,语言:swift3.0.1(由于环境原因,流程略微不同)
一,项目功能介绍及预览
主体功能:对一个菜单列表进行展示,删除,修改,添加操作
界面预览:
二,自定义控件
我们创建工程后先将我们的新增页面构建好,从预览图中可以看出是由一个导航条,文本框,和一个图片视图,还有五颗星构成。相信前几个控件都没什么问题,关键在于这个自定义控件。
我们都知道每一个控件都是会默认关联一个类的,所以:我们这个五角星评价控件(下文称rating)如出一辙的需要关联一个自定义的类。
1 // 2 //RatingControl.swift3 //Food4 // 5 //Created by C02 on 2016/12/14.6 //Copyright © 2016年 Aida. All rights reserved.7 //8 9 import UIKit10 11 /* 12 自定义星级评价控件13 */ 14 classRatingControl: UIView {15 16 let spacing = 5//星星间距 17 let ratingCount = 5//星星个数 18 var filledArr = [UIButton]()//filled星星数组 19 var rating = 0{20 didSet{21 setNeedsLayout()22 }23 }24 25 required init?(coder aDecoder: NSCoder) {26 super.init(coder: aDecoder)27 28 for _ in 0..<ratingCount{29 let btn =UIButton()30 btn.setImage(UIImage(named:"empty"), for: .normal)31 btn.setImage(UIImage(named: "filled"), for: .selected)32 btn.setImage(UIImage(named: "filled"), for: [.highlighted,.selected])33 btn.adjustsImageWhenHighlighted = false 34 //控件单击事件 35 btn.addTarget(self, action: #selector(RatingControl.ratingClicked(sender:)), for:.touchDown)36 filledArr +=[btn]37 self.addSubview(btn)38 }39 }40 41 func ratingClicked(sender:UIButton){42 rating = filledArr.index(of: sender)! + 1 43 updateBtnStar()44 }45 46 func updateBtnStar(){47 for(index,btn) infilledArr.enumerated(){48 btn.isSelected = index <rating49 }50 }51 52 overridefunc layoutSubviews() {53 let size =Int(self.frame.height)54 for (index,btn) infilledArr.enumerated() {55 btn.frame = CGRect(x: index * (size + spacing), y: 0, width: size, height: size)56 }57 updateBtnStar()58 }59 60 //返回此控件大小 61 override varintrinsicContentSize: CGSize {62 //控件默认高度44 63 let ratingHeight =Int(self.frame.height)64 //控件宽度=星星数*(控件高度+间距) 65 let ratingWidth = ratingCount*(ratingHeight+spacing)66 returnCGSize(width: ratingWidth, height: ratingHeight)67 }68 69 }
View Code
三,使用自定义控件
解析:在我们的视图控制器中加入文本框和图片后,再添加一个view视图,然后将这个view关联我们上一步定义的RatingControl类。
此时运行模拟器,便可以看到我们的rating控件,大小与位置我们稍后再做调整。
四,使用堆栈视图实现自动布局。
我们都知道我们的应用可能会运行在不同分辨率,不同尺寸,横屏,竖屏等状态下,所以布局自然不能一成不变。
1,选中三个控件->Xcode工具栏Editor->Embed In->StakeView将其嵌入到堆栈视图中,或者使用视图下方的快捷工具。
2,添加合适的约束
我们要将我们的控件在各种情况下都可以得到正常的显示,可以将整个视图分割成若干个子视图,把子视图位置调整好。同理,一种层层处理方式再继续调整每一个控件。
显而易见,本例中我们先需要将栈调整。
选中StackView首先对上左右三个方向进行约束,但是此时并不能确定StackView的高度,在确定StackView中每一个控件的高度后,自然这个栈的所有约束也就完成了。
注意:在我们的ImageView和Rating控件需要固定大小需要如此设置
为了有良好的交互性,因此我们这里设置了一个默认的图片,以及控件之间的间距。
五,调用手机系统图库及配置手势操作
在新增项的时候我们需要通过点击视图中的默认图片添加一个手机图库中的图片。
注意:此时我们需要拖入一个UITapGestureRecognizer控件在ImageView上,要让点击有效此时必须启用用户交互,如图所示。
接下来就是将这个控件关联到我们的代码中
1 // 2 //ViewController.swift3 //Food4 // 5 //Created by Aida on 2016/12/14.6 //Copyright © 2016年 Aida. All rights reserved.7 //8 9 import UIKit10 11 classViewController: UIViewController ,UITextFieldDelegate,UIImagePickerControllerDelegate,UINavigationControllerDelegate{12 13 @IBOutlet weak var nameText: UITextField! 14 15 @IBOutlet weak var photoImg: UIImageView! 16 17 @IBOutlet weak var ratingControl: RatingControl! 18 @IBOutlet weak var saveOutlet: UIBarButtonItem! 19 20 var meal:Meal? 21 overridefunc viewDidLoad() {22 super.viewDidLoad()23 self.nameText.delegate =self24 25 26 }27 28 overridefunc didReceiveMemoryWarning() {29 super.didReceiveMemoryWarning()30 //Dispose of any resources that can be recreated. 31 }32 33 //MARK: 手势识别方法 34 @IBAction func selectPhoto(_ sender: UITapGestureRecognizer) {35 let imagePickerController =UIImagePickerController()36 37 imagePickerController.sourceType =.photoLibrary38 39 imagePickerController.delegate =self40 41 present(imagePickerController, animated: true, completion: nil)42 }43 44 //图片选择之前取消事件 45 func imagePickerControllerDidCancel(_ picker: UIImagePickerController){46 47 dismiss(animated: true, completion: nil)48 }49 50 //选中图片事件 51 func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [String : AnyObject]){52 53 let selectedImage = info[UIImagePickerControllerOriginalImage] as!UIImage54 55 //Set photoImageView to display the selected image. 56 photoImg.image =selectedImage57 58 //Dismiss the picker. 59 dismiss(animated: true, completion: nil)60 }
View Code
用户授权:由于应用要使用手机图库需要经过授权,因此需要在项目的info.plist文件中配置相关字段。
<key>Privacy - Photo Library Usage Description</key><string>您允许我们访问相册吗</string>
小结:到这一步,这个小项目的几个重点就介绍完了。有任何问题可以联系:QQ:1016882435.
另附项目完整源码:https://pan.baidu.com/s/1boDcwgB 密码:acsy
转载于:https://www.cnblogs.com/1016882435AIDA/p/6171471.html
ios官方菜单项目重点剖析附项目源码相关推荐
- SpringBoot+SpringCloud+Mybatis+Vue 电商项目实战,附视频+源码+文档,包含所有主流技术栈。...
大家好,我是树哥. 今天给大家分享一个电商项目--- 畅购商城.项目采用前后端分离的技术架构. 采用SpringBoot+SpringCloud+Mybatis+Vue为主要技术栈,包括了大型商城的主 ...
- SpringBoot+SpringCloud+Mybatis+Vue电商项目实战,附视频+源码+文档,包含所有主流技术栈...
今天给大家分享一个电商项目--- 畅购商城.项目采用前后端分离的技术架构. 采用SpringBoot+SpringCloud+Mybatis+Vue为主要技术栈,包括了大型商城的主要功能.难点功能以及 ...
- 基于Spring+Jsp+MySQL的Java项目-家教系统 附:源码课件
项目描述 家教信息管理系统主要用于协助工作人员进行系统内部数据管理并为系统用户提供在线沟通.资源共享等服务.本论文分析了当前国内家教公司的核心业务内容和主流家教管理平台的功能,在传统家教公司管理软件单 ...
- 基于SSM的旅游景点门票管理系统,高质量毕业论文范例(可直接使用),附送源码和数据库脚本,项目导入运行视频教程,论文撰写教程
目录 1.项目技术栈 2.适合对象 3.适合课题 4.项目功能概述 4.1 功能汇总 4.2 功能介绍 5.高质量论文范例 6.毕业设计撰写视频教程 7.部分运行截图 1.项目技术栈 前端必学三个基础 ...
- 知识图谱实战案例完全剖析(附完整源码和数据集)-张子良-专题视频课程
知识图谱实战案例完全剖析(附完整源码和数据集)-2070人已学习 课程介绍 课程定位:系统学习知识图谱的佳实践: 系统学习:完全覆盖知识建模.图数据库.知识应用和知识获取: 实战指引: ...
- java期末项目实验答辩毕业设计工程项目源码
java期末项目实验答辩毕业设计工程项目源码 自己收集的各行各业的都有,这一套源码吃遍所有作业项目! 1.BBS论坛系统(jsp+sql) 2.ERP管理系统(jsp+servlet) 3.OA办公自 ...
- Java实战项目之人力资源管理系统【源码+课后指导】_Java毕业设计/计算机毕业设计
对就业和毕业都有帮助的Java实战项目来咯--人力资源管理系统!Java实战项目之人力资源管理系统[源码+课后指导]_Java毕业设计/计算机毕业设计https://www.bilibili.com/ ...
- java课程设计纸牌游戏_java练习项目之纸牌游戏实例源码
java应用练习项目之纸牌游戏实例源码.java纸牌项目练习题目要求: 定义纸牌的花色 定义纸牌的大小2A 花色与数字组成一张牌 组成一整副纸牌 构造玩家 发牌 题目 : 创建一副扑克牌,这副牌是标准 ...
- Android实战项目: 视频资讯APP,源码在文章里免费分享
文章目录 一.环境搭建 1.资源下载 2.视频地址 3.项目开发情况 二.项目展示 1.首页 2.资讯页面 3.个人中心 4.收藏页面实现 三.配置过程详解 1.导入Mysql数据库 2.Mongdb ...
最新文章
- 数据科学家线性规划入门指南
- [转] 视频直播前端方案
- linux tar打包、压缩、解压到指定目录
- 【python】数据结构与算法—哈希表
- Python-functools (reduce,偏函数partial,lru_cache)
- 测试使用skywalking_skywalking初体验
- 做好数据挖掘模型的9条经验总结
- C#使用Xamarin开发可移植移动应用(3.Xamarin.Views控件)附源码
- Python爬虫学习第一天--uillib库和request库
- django新建utils文件夹与导入方法
- [BZOJ2820]YY的GCD
- 一行Python代码去除照片背景
- oracle数据库数据导入导出步骤
- MATLAB——多元函数的极值
- 数字电路和模拟电路-10时序逻辑电路的分析和设计
- [Swift]LeetCode334. 递增的三元子序列 | Increasing Triplet Subsequence
- 【纯音的世界】系列---【静音吧】爱.请给我时间.
- 团队管理之—— 架构设计:治理好系统复杂度才最务实
- Spark基础练习系列
- 从GDC下载数据集、svs无损转png
热门文章
- css3 Gradient背景
- 阻止默认事件event.preventDefault();
- quick-cocos2d-x 游戏开发——StateMachine 状态机
- dokcer 容器启动报错
- jQuery formValidator表单校验代码生成器ver1.1,一键产生所有代码
- 深度学习---之bias
- deeplab v3+---Encoder-Decoder with Atrous Separable Convolution for Semantic Image Segmentation
- Tensorflow随笔——命令行参数
- a和a的区别、二维数组的本质及多维数组
- mysql 表变量_在MySQL中创建表变量