




已阅读5页,还剩41页未读, 继续免费阅读
版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
盐 城 师 范 学 院毕业设计 基于IOS的多功能闹钟客户端的设计与实现 学生姓名 学 院 信息科学与技术学院 专 业 网络工程 班 级 12(2) 学 号 指导教师 2015 年 5 月 16 日盐城师范学院毕业设计基于IOS的多功能闹钟客户端的设计与实现全套设计加扣 3012250582摘 要移动互联网飞速发展的今天,几乎每个人都在使用智能手机,智能手机丰富的功能给我们带来了无限的欢乐和多样的生活体验。闹钟是每一个手机都必须配备的功能,苹果商店中不乏有很多优秀的闹钟应用,但是他们功能太过简单不具备其他功能。多功能闹钟客户端一共有六个模块:闹钟主模块具有添加、修改、删除闹钟的功能;天气预报模块是向用户展示本地的天气详情、天气温度走势和未来六天天气情况;黄历模块是通过选择日期来显示指定日期的黄历详细内容;世界时间模块是用模拟时钟显示不同地区的时间;微博展示模块是通过列表来展示详细的微博动态;设置模块包含了对多功能闹钟的主题设置和应用版本的信息。与此同时,多功能闹钟使用Interface Builder来对界面美化和设计,采用ObjectiveC为编程语言,通过对每一个模块的实现与完善,让闹钟客户端可以提供丰富的功能,经过调试和运行,多功能闹钟客户端可以完美的运行于iOS系统7.0以上版本的手机。该多功能闹钟可以满足各种不同用户需求,不仅方便了用户对闹钟的使用,而且还提供了天气、黄历和微博等信息,给用户带来了生活上的方便,也丰富了用户生活的内容。【关键词】 iOS;闹钟客户端;多功能;设计;实现1The Implementation of IOS-based OpenAlarmAbstractThe mobile Internet rapid development today, almost everyone in the use of smart phones, smart phones brought us infinite joy abundant function and the diversity of life experience.The alarm clock is each function must be equipped with mobile phones, apple is not in the store has a lot of good alarm clock application, but they dont have other function function is too simple.The multi-function alarm clock client demand analysis,A total of six modules: my alarm clock main module has the function of add, modify, delete the alarm clock through a database to store has set the alarm clock; for each attribute The weather forecast module is to show the user details of local weather, weather, temperature movements and weather conditions over the next six days; Almanac module is to display the date specified by selecting the date almanac detailed content; World time module is using analog clock display in different parts of the time is its main function; Weibo display module is through the list to show the detailed weibo dynamic; Set the module contains the theme Settings and application of multi-function alarm clock version information.At the same time, the multi-function alarm clock use Interface Builder to Interface beautification and design, the Objective - C programming language, through the implementation and improvement of each module, let the alarm clock the client can provide abundant functions, after debugging and running, multi-function alarm clock client can perfect running on iOS 7.0 version of the mobile phone. With version information.The multi-function alarm clock can meet the demand of various users, the users of the alarm clock is not only easy to use, but also provides the information such as weather, zodiac and weibo, brought life convenience to the user, and enriched the contents of the users life.Key words iOS,; Alarm Client; Multi-Function,; Design; Weather; Implementation盐城师范学院毕业设计目 录1 引言11.1 设计背景11.2 设计目的和意义11.3设计内容11.3.1 组织结构22 多功能闹钟客户端的分析32.1 客户端需求分析22.2 应用性能分析42.2.1 技术分析42.2.2 市场分析42.2.3 经济分析42.3 多功能闹钟客户端的开发工具及技术介绍52.3.1 开发需要的软件52.3.2 开发需要的硬件52.3.3 开发技术介绍53 多功能闹钟客户端的设计63.1闹钟模块设计53.1.1 添加闹钟模块63.1.2 修改闹钟模块63.1.3 删除闹钟模块63.2 天气预报模块设计73.2.1 本地温度模块73.2.2 温度折线图73.2.3 未来六天天气预报模块73.3 黄历模块设计73.3.1 日期展示模块73.3.2 时间选择模块73.3.3 黄历内容模块113.4 世界时间模块设计113.5 微博模块设计113.5.1 登录模块113.5.2 新特性模块113.5.3 微博数据展示模块113.6 设置模块设计143.6.1 商店模块153.6.2 主题和语言设置模块153.6.3 应用版本信息模块154 多功能闹钟客户端界面的实现164.1 闹钟模块界面的实现164.1.1 添加闹钟模块164.1.2 修改闹钟模块和删除闹钟模块174.1.3 闹钟数据的存取和通知的注册194.1.4 iOS本地通知注意点204.2 天气预报模块204.2.1 天气预报界面实现204.2.2 天气预报数据224.3 黄历模块234.3.1 日期展示模块和时间选择模块234.3.2 黄历内容模块254.4 世界时间模块264.5 微博模块274.5.1 登录授权274.5.2 微博数据展示模块274.5.3 显示最新微博数量294.6 设置模块305 多功能闹钟客户端的测试335.1 测试目的325.2 功能测试325.3 性能测试33参考文献37致 谢381 引言1.1 设计背景智能手机快速的普及给移动互联网产业注入了活力,移动互联网成为一个飞速发展的产业。根据CAICT数据显示,2015全年我国手机出货量高达5.18亿部,较之2014年增长14.6%1。随着4G网络和WIFI网络的普及,人们可以使用智能手机观看视频,浏览网页,听音乐.智能手机方便了人们的工作和生活,提供了丰富的乐趣。闹钟应用几乎每一个手机都必备的功能,方便了人们的生活与工作。如今,人们对应用的要求不仅仅局限与功能,更是对应用的外观和使用体验有更高的要求2。根据研究公司 IDC 的最新数据显示,第一季度全球智能手机总出货量为 3.349 亿部,智能手机市场占有率为22.2%3。苹果公司生成的iphone手机成为人们热捧的产品,精美的外观,流畅的系统和丰富的应用数量。所有设计基于iOS的多功能闹钟客户端也是一种对新兴技术一次学习的过程,可以让我更快的接触应用开发领域。本闹钟客户端采用了Objective-C编程语言,使用了许多优秀的第三方库,进行了大量的网络请求。不仅提供了基本的闹钟功能还集成了天气预报、黄历和微博等功能。1.2 设计目的和意义 多功能闹钟客户端的目的是让用户可以使用一种应用获得多种信息,方便用户的使用。在用户使用闹钟的情况下,给用户提供给多的信息。设置闹钟的过程中可以查看本地天气情况,当天的黄历以及微博好友动态等信息。使用多功能闹钟应用给用户带来了生活上的方便,在相应的时间给用户一个闹钟提醒,防止用户错过重要事情。 通过对闹钟客户端的开发,对iOS开发进行一次系统的全面的学习。通过使用不同的UI来完成复杂的界面,使用不同类库,让自己对iOS库有一个很好的了解和学习。对复杂的界面自定义视图或者封装类来实现目标效果,锻炼自己处理复杂视图的能力。通过网络请求并且对请求数据进行解析来获得需要的天气、微博和黄历数据,提高自己数据处理能力。1.3 设计内容丰富的手机应用,使的人们足不出户就可以获取很多信息。我们可以在手机中看到各种类型的应用,新闻应用、天气应用、电影应用、音乐应用等等。多功能闹钟客户端旨在给用户提供了一个包含丰富内容的闹钟应用,让用户可以在使用闹钟功能的情况下获取更多的信息。从而是用户在使用工具的同时,获取的更多咨询。1.3.1 组织结构本文主要由以下6个方面介绍该教学评价系统:1.引言:本章主要介绍多功能闹钟的的设计背景和设计目的以及意义。2.多功能闹钟客户端的分析:本章主要多功能闹客户的需求分析、性能分析、开发工具及技术介绍。3.多功能闹钟客户端的设计:本章主要介绍多功能闹钟客户界面设计。4.多功能闹钟客户端界面的实现:本章主要介绍多功能闹钟客户各个模块界面的实现。5.多功能闹钟客户端的测试:本章主要介绍应用测试目的和多功能闹钟客户端功能和性能的测试6.结论:本章总结全文。总结多功能闹钟客户的功能与用户体验。2 多功能闹钟客户端的分析2.1 客户端需求分析多功能闹钟客户端是一个操作简单、创意新颖、界面美观,并且有着很好的用户体验的iOS应用。本应用具有闹钟设置、查看天气预报、查看指定日期黄历、查看世界时间和微博消息的功能。多功能闹钟客户端主要包含六个模块:闹钟模块、天气预报模块、黄历模块、世界时钟模块、微博模块和设置模块。闹钟模块主要是实现了闹钟的添加、修改和删除等功能;天气预报模块主要实现了查询天气情况、计算天气温度走势和展示未来六天天气情况的功能;黄历模块实现了时间的选择和查询黄历的功能;世界时钟模块主要实现了模拟时钟和展示指定地区日期显示的功能;微博模块主要实现了展示好友微博动态以及对微博数据的存储等功能;设置模块主要实现了对本应用的语言和背景的设置和查看本应用的版本信息功能。多功能闹钟客户端功能结构图,如图2-1所示。具体需求如下:1. 闹钟:闹钟按照设置的时间进行报时,不能出现错误报时的情况。2. 天气预报:有权限进行网络请求,获取的数据进过解析拆分后能够正确的展示天气情况。3. 黄历内容:有权限进行网络请求,根据日期获取正确的黄历内容。4. 微博内容:微博用户成功登录后获取微博数据,下拉刷新界面可以展示最新的微博数据,上拉界面展示历史数据。5. 设置:可以设置应用的语言和背景图片,可以查看应用的版本信息。功能具体分析如下:1. 闹钟功能:添加闹钟,修改或删除已经添加的闹钟,到闹钟设置好的时间手机可以播放闹钟铃声。图2-1 多功能闹钟客户端功能结构图2. 天气预报:网络请求获取本地天气预报的数据,显示本地天气、温度、空气指数、各个时间段的天气情况和未来六天的天气情况。3. 温度折线图:显示一天内的温度折线图。4. 黄历功能:显示阳历日期、阴历日期和黄历内容。5. 时间选择:两种时间选择方法,包括:具体的年月日的时间选择、前一天或者后一天的时间选择。6. 黄历内容:显示宜、忌、冲煞、彭祖百忌、五行、吉神宜趋和凶神宜忌。7. 世界时钟:显示六个不同地区的模拟时钟。8. 微博功能:确保帐号安全,登录新浪微博帐号,展示好友微博动态;9. 设置功能:显示商店、语言和背景设置、应用信息。设置背景改变整个应用的风格。2.2 应用性能分析2.2.1 技术分析 多功能闹钟客户端实质是一个iOS应用,能够根据设置的时间进行报时,通过网络请求获取本地天气、指定日期的黄历、微博好友动态。目前,iOS开发技术飞速的发展,结合市场对苹果手机的热捧导致iOS开发成为一个完整的产业链。Github库中包含了大量可以参考的案例,制作一个应用的技术在网络上都可以找到4。如今开发iOS应用的Objective-C语言也是在苹果公司的完善中提供大量的API库,开发人员只需要调用简单的方法就可以获得想要的数据。Xcode开发工具一直在不断的更新完善中,简化了程序员的开发过程,让程序员更容易开发一个应用。本人在校学习过C语言、JAVA语言、通过培训学习了Objective-C,对苹果系统的使用和iOS开发也有一定的了解。多功能闹钟客户端在制作的过程中遇到的问题,本人通过各种途径一一解决,从而实现了应用中所有的功能,完成了多功能闹钟客户端。2.2.2 市场分析 目前,移动互联网市场非常火爆,随着智能手机的普及,智能手机中丰富的应用让用户的生活充满了便捷和快乐。而闹钟应用是每一个手机都必须配备的,闹钟提醒用户不要忘记时间。天气预报是一个很多人都关心的问题,关乎我们的生活和生产。黄历和微博是一个娱乐的咨询,给用户提供了相应的信息。把这些功能结合在一个应用中,可以让用户在简单操作过程中获得他们所需要的信息。2.2.3 经济分析多功能闹钟客户端使用的是Objective-C语言,它是一门非常容易入门的语言。苹果提供了大量的iOS开发中需要使用的库,方便了开发人员的开发,让开发人员可以在较短的时间内完成复杂的项目。在遇到问题时,网上有着大量的教程和丰富的资源可以供我们参考学习,可以帮组我们解决这些问题。网上有着大量的API库,在我们不需要创建后台的情况下可以通过网络请求来获取相应的数据4。经过上面的叙述,本应用的开发成本并不是很高,减少了投资,有利于应用前期的制作和成本控制。所以,本应用在经济的运行是可行的。2.3 多功能闹钟客户端的开发工具及技术介绍2.3.1 开发需要的软件1.操作系统:MAC OS2.开发工具:Xcode3.数据库:SQLite2.3.2 开发需要的硬件1.智能手机:iPhone 62.笔记本:MacBook mini2.3.3 开发技术介绍 1.Xcode是Mac OS系统上的一个强大的专业的集成开发工具,可以完成大部分的软件开发任务。Xcode中包含了测试使用的模拟器,可以直接将应用运行在模拟器上。Xcode中集成了许多性能和内存的测试工具,可以对应用进行实时的内存检测。Xcode支持大多数主流语言,可以编译这些语言编写的工程。Interface Build的界面操作让开发人员可以更加快速的搭建应用界面。 2.Objective-C是一门简单的面向对象语言,它的语法也很简单。面向对象语言中一切皆对象,Objective-C有着良好的结构以至于学习起来非常的简便。Objective-C是对C的扩展,完全兼容C语言5。Objective-C是动态语言,Objective-C中所有的方法在编译器编译的时候并不会被确定,只有在运行的时候才确定具体调用的是某个方法。这样是的代码编译起来非常的快,也使得Objective-C非常的灵活和强大。 3.SQLite是一款轻型的嵌入式数据库,它占用资源非常的低,在嵌入式设备中,可能只需要几百K的内存就够了,它的处理速度比Mysql、PostgreSQL这两款著名的数据库都还快。3 多功能闹钟客户端的设计 多功能闹钟客户端主要包括六个模块,它们分别是闹钟模块、天气预报模块、黄历模块、世界时钟模块、微博模块和设置模块。3.1闹钟模块设计多功能闹钟客户端中闹钟模块设计,应该包括添加闹钟模块、修改闹钟模块和删除闹钟等模块。3.1.1 添加闹钟模块 进入多功能闹钟客户端,添加按钮可以点击进入时间设置界面,界面里面要包含时间选择和是否重复两个部分。滚动时间选择器,选择需要设置闹钟的时间;点击重复天数,确定闹钟重复的次数,并且可以修改标签来说明闹钟的名称。添加闹钟设计图,如图3-1所示:图3-1 添加闹钟设计图3.1.2 修改闹钟模块 进入多功能闹钟客户端,设置修改闹钟时间按钮,时间设置界面需包含了时间选择、重复天数、标签三个部分。对三个部分进行重新设置并保存,完成修改。修改闹钟设计图,如图3-2所示。3.1.3 删除闹钟模块 进入多功能闹钟客户端,按住已经添加好的闹钟并向左滑动会出现删除按钮,删除按钮点击后,本次闹钟就会被彻底删除。删除闹钟设计图,如图3-3所示。3.2 天气预报模块设计 多功能闹钟客户端中天气预报模块设计,包括本地温度模块、温度折线图、未来六天天气预报模块。3.2.1 本地温度模块 进入多功能闹钟客户端,添加天气按钮,点击进入天气预报详情界面,顶部显示本地城市名、温度、空气指数等信息。本地温度设计图,如图3-4所示。3.2.2 温度折线图 进入天气预报详情界面,中间部分显示当天不同时段的时段,根据各个时段的温度绘画成折线图,折线图上方标明天气的温度详情。温度折线设计图,如图3-5所示。3.2.3 未来六天天气预报模块 进入天气预报详情界面,底部六个视图根据天气预报数据截取未来六天的数据进行展示。每个视图表明日期、温度、天气情况。未来六天天气预报设计图,如图3-6所示。3.3 黄历模块设计 多功能闹钟客户端中的黄历模块设计,主要包括了日期展示模块、时间选择模块、黄历内容模块。3.3.1 日期展示模块 黄历详情界面的日期分两中形式显示,它们分别为:阳历日期展示和阴历日期展示。阳历日期在顶部,展示格式为“2016年4月7日”;阴历日期展示则采用图片的显示方法,展示格式为“六月初九”,其中每个字展示对应的图片。日期展示模块设计图,如图3-7所示。3.3.2 时间选择模块 黄历详情界面的日期选择有两个方法,他们分别为:选择具体日期和选择昨天或者后天。点击阳历日期出现时间选择器,滚动时间选择气选择日期,点击阳历日期后面的“今”按钮即可设置日期为今天日期;点击阴历日期前后的两个按钮,分别图3-2 修改闹钟设计图图3-3 删除闹钟设计图图3-4 本地温度设计图图3-5 温度折线设计图图3-6 未来六天天气预报设计图图3-7 日期展示模块设计图代表选择上一天和下一天的日期。时间选择模块设计图,如图3-8所示。3.3.3 黄历内容模块 黄历详情界面的黄历内容分为七个部分,他们分别为:宜、忌、冲煞、彭祖百忌、五行、吉神宜趋、凶神宜忌。每个部分都是一个图片标识加上一段文字说明,每个部分位置与大小都需要根据请求的数据进行确定6。黄历内容模块设计图,如图3-9所示。3.4 世界时间模块设计 多功能闹钟客户端中世界时间模块设计使用模拟时钟进行不同地区的时间显示。模拟时钟显示为一个圆形钟盘面,内部有时针、分针、秒针。第一次进入界面后,时针,分钟和秒针根据设置的时间旋转到指定方向。时针、分针、秒针会根据对应的时间进行转动。世界时间模块设计图,如图3-10所示。3.5 微博模块设计 多功能闹钟客户端中微博模块的设计,主要包括登录模块、新特性模块、微博数据展示模块三个部分。3.5.1 登录模块 进入多功能闹钟客户端,应用要提示登录微博帐号,成功登录后点击微博按钮才可以可进入微博详情界面;无账号进入多功能闹钟客户端,点击微博按钮会再次提示需要登录微博帐号,成功登录才可进入微博详情界面。登录模块设计图如图3-11所示。3.5.2 新特性模块 第一次进入微博详情界面或者有新的版本发布都会显示新特性界面,向左滑动新特性界面,滑动到最后,点击开始微博按钮进入微博详情界面。3.5.3 微博数据展示模块 微博数据展示采用列表进行展示,上下滑动实现微博数据。将微博列表滑动到顶部,下拉列表会展示新的微博数据;将微博列表滑动的底部,再上拉则会展示旧的微博数据7。微博数据展示模块设计图如图3-12所示。图3-8 时间选择模块设计图图3-9 黄历内容模块设计图图3-10 世界时间模块设计图图3-11 登录模块设计图图3-12 微博数据展示模块设计图图3-13 商店模块设计图3.6 设置模块设计 多功能闹钟客户端中设置模块设计,主要包括:商店模块、主题和语言设置模块、应用版本信息模块。3.6.1 商店模块底部设置按钮点击后进入设置界面,商店模块显示升级版本后具有的功能以及升级版本的价格。点击一个升级选项,进入完成支付并返回才可以完成升级。支付支持支付宝、微信、银行卡等主流支付方式。商店模块设计图如图3-13所示:3.6.2 主题和语言设置模块 进入设置界面,主题/语言按钮点击后进入主题和语言设置界面。主题背景点击后进行应用的背景设置,添加语言按钮,点击进行应用语言设置。3.6.3 应用版本信息模块进入设置界面,点击信息按钮进入应用版本信息界面。内容为列表展示,分别为:多功能闹钟信息、制作团队、向好友推荐多功能闹钟8。点击列表就可以进入到对应的界面,查看详细信息。应用版本信息模块设计图如图3-14所示。图3-14 应用版本信息模块设计图4 多功能闹钟客户端界面的实现4.1 闹钟模块界面的实现4.1.1 添加闹钟模块首先进入多功能闹钟客户端,点击添加闹钟按钮进入时间选择界面。为了闹钟有序的显示,闹钟列表采用UITableView来实现,内部分为两种不同形式的cell来区分“设置好的闹钟时间”和“添加闹钟按钮”,他们分别是EAddClockTableViewCell和EClockTabeViewCell。为了增加用户体验,这两个cell采用自定义方式完成,“添加闹钟”按钮使用设置了一个UILabel、一个UIView、一个UIButton,他们的作用分别是说明按钮作用、分割线、触发点击操作。点击cell执行-(void)tableView:(UITableView*)tableView didSelectRowAtInd方法,进行跳转进行时间选择。完成设置后点击保存按钮执行回调方法self.delegate settedTimeSave:reverseDate Bool:_addOrAlter withIndex:_indexPath,把设置的数据传递给MClockTableViewController控制器进行设置闹钟、添加数据源、刷新闹钟的图4-1 添加闹钟模块图TableView。添加闹钟模块图,如图4-1所示:主要代码如下:#pragma mark -搭建主页面EAlterClockViewController * alterClock = EAlterClockViewController allocinit;alterClock.delegate = self;alterClock.addOrAlter = YES;alterClock.nowTime = NSDate date;self presentViewController:alterClock animated:YES completion:nil; #pragma mark -保存设置时间,执行回调方法设置闹钟DTTimePeriod* timePeriod = DTTimePeriod alloc initWithStartDate:NSDate date endDate:date;NSInteger clockTimeInterval = timePeriod.durationInSeconds;if (flag) if (_clockDateArray = nil) _clockDateArray = NSMutableArray array; self registerLocaNotification:clockTimeInterval indexPath:path; _clockDateArray addObject:date; NSKeyedArchiver archiveRootObject:_clockDateArray toFile:self getPath; else /删除这一个再在原来位置插入一个 self cancelWithIndexPath:path; _clockDateArray removeObjectAtIndex:path.row; _clockDateArray insertObject:date atIndex:path.row; NSKeyedArchiver archiveRootObject:_clockDateArray toFile:self getPath; self registerLocaNotification:clockTimeInterval indexPath:path; / 注册闹钟,并设置唯一字符串 self.tableView reloadData;4.1.2 修改闹钟模块和删除闹钟模块 点击已经设置过的闹钟cell跳转到时间设置界面,重新对闹钟数据进行修改,完成修改后点击完成按钮。时间设置界面包含了时间选择器UIDatePicker、标签Label、重复Button、返回和完成Button。点击完成按钮执行回调方法-(void)tableView:(UITableView*)tableView didSelectRowAtIndexPath1进行数据保存并且再次刷新UITableView。时间设置界面图,如图4-2所示。按住已经设置好的闹钟左右滑动,当cell被拖动超出屏幕一般位置即会删除对应闹钟。滑动执行方法-(UITableViewCellEditingStyle)tableView:来删除cell并取消闹钟。闹钟删除界面图,如图4-3所示。主要代码如下:#pragma mark -修改闹钟EAlterClockViewController * alterClock = EAlterClockViewController allocinit;alterClock.delegate = self;alterClock.addOrAlter = NO;/ 编辑模式 alterClock.nowTime = _clockDateArrayindexPath.row;self presentViewController:alterClock animated:YES completion:nil;#pragma mark - 删除闹钟 图4-2 时间设置界面图图4-3 闹钟删除界面图self cancelWithIndexPath:indexPath;/ 删除闹钟 _clockDateArray removeObjectAtIndex:indexPath.row; NSKeyedArchiver archiveRootObject:_clockDateArray toFile:self getPath;/ 归档 tableView deleteRowsAtIndexPaths:indexPath withRowAnimation:UITableViewRowAnimationAutomatic;/ 删除cell4.1.3 闹钟数据的存取和通知的注册代理会自动判断本次操作是对闹钟修改还是直接添加闹钟,代理中添加了一个标记flag来判断到底需要如何操作。把新的闹钟时间,注册通知,数组中并且保存在沙盒中。使用数组,有利于我们对闹钟通知的管理,而且很好的把数组作为UITableView的数据源。主要代码如下:NSKeyedArchiver archiveRootObject:_clockDateArray toFile:self getPath;self registerLocaNotification:clockTimeInterval indexPath:path; /注册通知4.1.4 iOS本地通知注意点 iOS的通知分本地通知和远程通知,本次我们闹钟中所使用的是本地通知服务。对于iOS8中所有的本地通知都需要在AppDelegate的添加通知的授权主要代码如下:#pragrm mark - 添加授权NSweserDasdelts standaasdeserDefaults setBool:YES forKey:notificatiesseeceived;UIUserastionType type = UIUsqweasdationTypeAlert | UIUserNoterepeBadge | UIUserNotitrtTypeSound;UIUserNotificationSettings *settings = UIUserNotificationSettings settingsForTypes:type categories:nil;UIsdaseion shareasdeation registerUserNfdstionSettings:settings;4.2 天气预报模块4.2.1 天气预报界面实现 进入多功能闹钟客户端,点击左上角天气详情按钮进入天气预报详情界面。天气预报详情界面分为三个部分:本地温度界面、温度折线图界面、未来六天天气预报界面。天气预报界面图,如图4-4所示。1.本地温度界面使用UILabel来显示地区、温度、空气指数等数据。使用XIB添加控件,进行AutoLayout布局,适配所有的iPhone手机。主要代码如下:self.temoLabel.text = NSString stringWithFormat:%,skModel.temp;self.cityLabel.text = todayModel.city;self.weatherLabel.text = todayModel.weather;self.weather_idLabel.text = NSString stringWithFormat:% 优,todayModel.weather_idfb;2.温度折线图。WeatherHourInfo是对温度折线图的封装,WeatherHourInfo头文件中提供了一个数组可以用来传值的属性weatherViewModel。weatherViewModel添加了六个Layer层,每个Layer都是一个圆点。调用weatherViewModel的- (void)setWeatherViewModel:(NSArray *)weatherViewModel方法来设置点位置,通过绘图把所有点链接起来形成一个折线图。主要方法如下:#pragrm mark - setter设置属性 WeatherFuture * model = weatherViewModeli; WeatherFutureOneDaysInfo * oneDaysInfo = (WeatherFutureOneDaysInfo*)self.oneDayInfoViewArrayi;MMLog(oneDaysInfo - %,oneDaysInfo);oneDaysInfo.viewModel = model;#pragrm mark - 通过UIBezierPath设置圆点UIBezierPath * path = UIBezierPath bezierPathWithArcCenter:CGPointMake(0, 0) radius:3.0 startAngle:M_PI endAngle:-M_PI clockwise:NO;self.path = path.CGPath;self.fillColor = MColor(68, 92, 126).CGColor;self.lineWidth = 1.0;self.strokeColor = UIColor whiteColor.CGColor; / 上部分的颜色#pragrm mark - 设置遮罩CAShapeLayer * layer = CAShapeLayer createMaskLayerWithView:self.weatherView withPointArray:nil;self.weatherView.layer.mask = layer;未来六天天气预报界面。未来六天天气预报界面使用WeatherFutureDaysInfo包含了六个WeatherFutureOneDaysInfo,每个WeatherFutureOneDaysInfo都是一天的天气数据。WeatherFutureOneDaysInfo中提供了一个属性viewModel和一个初始化方法creatWeatherFutureDaysInfoView。成果获取数据后在layoutSubviews方法中重新布局赋值。根据viewModel中的天气情况选择对应的图片展示,根据日期来判断星期。主要代码如下:#pragrm mark - setter方法赋值self.date.text = viewModel.week stringByReplacingOccurrencesOfString:星期 withString:周; / 设置信息self.tempreture.text=viewModel.temperature stringByReplacingOccurrencesOfString:withString:/ stringByReplacingOccurrencesOfString: withString:;self setupImg:viewModel; / 根据天气设置图片#pragrm mark - 设置尺寸self.size = CGSizeMake(futureWeatherW,futureWeatherH);Self.date.frame = CGRectMake(0, 0, futureWeatherW, futureWeatherDateH);self.weatherImg.frame=CGRectMake(futureWeatherW - futureWeatherDateH)/2.0,futureWeatherDateH,futureWeatherDateH, futureWeatherDateH);self.tempreture.frame=CGRectMake(0,futureWeatherDateH*2.0,futureWeatherW, futureWeatherDateH);#pragrm mark - 添加未来六天天气详情WeatherFutureDaysInfo*futureWeather=WeatherFutureDaysInfo createWeatherFutureDaysInfo;self.futureWeather = futureWeather;futureWeather.origin= CGPointMake(0, futureWeatherHeight);self.view addSubview:futureWeather9;4.2.2 天气预报数据通过第三方框架AFNetworking来获取百度接口的天气数据,通过数据解析,我们把所有我们需要的数据转换为WeatherSK,WeatherToday,WeatherFuture,Weather3HourModel模型对象。并在成功请求到数据后,重新给所有控件赋值。根据请求未来几小时的数据,根据当前时间点,通过筛选来得到我们需要的七个数据,并且根据这七个数据来得到我们的六个点的坐标。通过上面返回的数组来获取我们具体的点的坐标,把所有的点的Y值加到一个数组中,作为参数使用10。主要代码如下:#pragrm mark - 获取圆点的y值Weather3HourModel * model = weatherDatai;NSInteger dotY = model.temp1 integerValue;if (i = 0) dotY = FIRST_DOT_Y - 2.0 * 5;elsedotY = FIRST_DOT_Y - (dotY - interval) * 5;CGPoint p = CGPointMake(WEATHER_LINE_WIDTH_X(i+1), dotY);#pragrm mark - 设置遮罩CAShapeLayer*layer=CAShapeLayer createMaskLayerWithView:self.weatherView 图4-4 天气预报界面withPointArray:pointArr;self.weatherView.layer.mask = layer;#pragrm mark - 设置WeatherHourInfo的位置self.hourInfo1 setOrigin:CGPointMake(point1.x - viewWidth/2.0, point1.y - viewHeight - 8.0);#pragrm mark - 获取时间NSDate * dasstees = NSDate date;NSDateFormatter * fokeas= NSDateFormatter allocinit;formatter.lesles = NSLocale allocinitWithLocaleIdesseantifier:zh_C;formatter setDateFormat:HH;NSInteger cusesqeHour = NSStng stringWithForsemat:%,foasdaatter stringDate:date iasdgerValue;4.3 黄历模块4.3.1 日期展示模块和时间选择模块MCalendarViewController是黄历控制器,主要展示指定日期的黄历内容。这个界面美观,简洁,数据全面而且还方便使用。本控制器内部结构呈上下两个部分,上面为阴历和时间选择的两个按钮,而下面部分则为的黄历视图11MTitleButton是顶部的时间按钮,自定义按钮的时候在layoutSubviews方法中我们重新设置了UIButton中的图片和文字的布局图片和文字交换位置。点击MTitleButton触发的事件是弹出一个时间选择器,时间选择器采用的是RMDateSelectionViewController。在选择时间后或者取消选择后都会进行一个(RMActionController *controller) .回调。阴历时间的是图片的设置,根据日期来选择图片展示日期这样做的好处是可以具有很好的美感。每个图片的设置中设置了图片的tintColor属性变为红色,tintColor是一个把图片轨迹绘制成指定的颜色属性。左右两个按钮的事件是选择昨天和明天,点击后
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 【正版授权】 ISO/IEC 29110-3-2:2018/AMD1:2025 EN Systems and software engineering - Lifecycle profiles for Very Small Entities (VSEs) - Part 3-2: Conformity certification scheme - Amendm
- 课件模板人物高清
- 综合材料手工培训大纲
- 高考成语教学课件
- 保险新人培训会
- 沃尔玛防损培训
- 广东会计制度自考试题及答案
- 广东国贸自考试题及答案
- 兰州法院考试题及答案
- 课二考试题及答案
- 人音版七年级音乐上册教案全册
- ECE-R90-欧盟第3版-中文版(R090r3e-01)
- 2023学年武汉市武昌区九年级语文上学期期中检测试卷附答案
- 渠道衬砌施工方案(渠道预制混凝土块)
- 不交社保劳动合同模板
- 2024年云南省中考数学试题(含答案)
- GB 14102.1-2024防火卷帘第1部分:通用技术条件
- 越野跑策划方案
- 《光学含沙量测量仪率定规范》
- 产值计算方案
- 冬季抢工措施方案
评论
0/150
提交评论