IOS开发--仿制网易新闻

学习来源:《快速集成App中顶部标题滚动条

效果:

根据这个网易新闻的界面,需求分析:

需要的对象:

1、导航控制器默认会生成的导航条,上面可以设置title(当然也可以另外自定义View设置导航条title)

2、切换页面的标题滚动区是一个ScrollView,在这个ScrollView上面添加六个UIButton,按顺序UIButton的文字是“头条、热点、视频、社会、订阅、科技”六个标题

3、切换内容的内容滚动区是一个ScrollView,在这个ScrollView上面分别和标题滚动区的标题按钮对应顺序添加关于“头条、热点、视频、社会、订阅、科技”六个View

4、关于“头条、热点、视频、社会、订阅、科技”六个View,来自六个自定义ViewController。

需要处理的逻辑:

5、拖拽内容滚动区,相邻两个页面却换有换页效果,一页View自动占据当前一个页面。

6、选中标题滚动区的某个标题按钮,选中的按钮会自动切换到中间位置,但是两端的标题按钮会由于滚动区域的缘故不会居中。

7、选中标题滚动区的某个标题按钮,内容滚动区会切换到对应的View,呈现对应的View内容

8、点击标题滚动区的某一个标题按钮,会切换状态,选中的标题原本是黑色大小中等的字体切换成红色偏大的字体,取消选中的标题原本是红色偏大的字体切换成黑色大小中等的字体。另外补充:字体大小和颜色切换要动态的变化,会随着拖动内容滚动区而慢慢形变或是色变,而不是一下子变化结束了。

9、拖拽内容滚动区,滚动一页完毕之后,标题滚动区然后会自动切换对应的标题按钮,以及标题滚动区自动切换居中的效果。(注意这里是滚动完毕一页之后,不是一边滚动一边变化)

更多需求效果请有时间继续深入学习:《快速集成App中顶部标题滚动条

额外的关联产生的需求:内容滚动区的滚动范围和标题滚动区的滚动范围是由标题按钮个数决定的,六个按钮,就要设置六倍的范围。

好了,分析的这么详细,接下来我们就直接根据上面详细的需求分析来一步一步的实现这个网页新闻的功能模块。

首先,为了可以封装这部分功能,我使用了xib,但是xib使用导航控制器类的时候,遇到导航控制器类无法设置导航条的title,然后我就只好使用自定义ViewController,然后使用UIView自定义模仿设置导航条,然后在导航条中间添加UILabel,接着在这个xib上添加两个ScrollView,同时为他们添加了自动布局,这里自动布局不难,自己领悟自己弄,这里就不详述了:

然后根据上面的需求1~5

根据需求6和7,下面:

下面我再重新复述剩下的需求:

8、点击标题滚动区的某一个标题按钮,会切换状态,选中的标题原本是黑色大小中等的字体切换成红色偏大的字体,取消选中的标题原本是红色偏大的字体切换成 黑色大小中等的字体。另外补充:字体大小和颜色切换要动态的变化,会随着拖动内容滚动区而慢慢形变或是色变,而不是一下子变化结束了。

9、拖拽内容滚动区,滚动一页完毕之后,标题滚动区然后会自动切换对应的标题按钮,以及标题滚动区自动切换居中的效果。(注意这里是滚动完毕一页之后,不是一边滚动一边变化)

根据需求8和需求9,我们需要的逻辑事件是要根据滚动区滚动而响应的,所以这里就需要我们使用UIScrollViewDelegate的方法了:

先完成需求9:

然后再完成需求8,完成之前先分析一下:

当前相邻的按钮也要分left和right,那么left的按钮大小和right的大小比例应该是等于上图中left宽和right宽比例是一样的。

这个补充一下:

其实到这里基本所有的需求都满足了,但是还是有一个小细节没满足,那就是首次启动这个页面,标题没有默认设置选中状态,也就是没有设置默认颜色大小

好了,到这里就基本完成了所有的需求了。

因为这部分模块我基本封装完毕,所以值得下载重复利用哦:

百度云下载链接: http://pan.baidu.com/s/1mhuzqpM 密码: 6btj

时间: 2024-10-14 22:38:13

IOS开发--仿制网易新闻的相关文章

【转】 iOS开发 剖析网易新闻标签栏视图切换(addChildViewController属性介绍)

原文: http://blog.csdn.net/hmt20130412/article/details/34523235 本来只是打算介绍一下addChildViewController这个方法的,正好今天朋友去换工作面试问到网易新闻标签栏效果的实现,就结合它,用个小Demo实例介绍一下:(具体解释都写在了Demo里面的注释) [objc] view plaincopy // //  HMTMainViewController.m //  UIScrollView // //  Created

iOS开发 剖析网易新闻标签栏视图切换(addChildViewController属性介绍)

本来仅仅是打算介绍一下addChildViewController这种方法的,正好今天朋友去换工作面试问到网易新闻标签栏效果的实现,就结合它,用个小Demo实例介绍一下:(详细解释都写在了Demo里面的凝视) // // HMTMainViewController.m // UIScrollView // // Created by HMT on 14-6-25. // Copyright (c) 2014年 humingtao. All rights reserved. // #import

iOS界面-仿网易新闻左侧抽屉式交互

1.介绍 用过网易新闻客户端的同学都会发现,网易新闻向左滑动时,左侧的导航栏会跟着拖动出来,新闻内容列表会拉到最右侧.像一个抽屉拉出来一样.很酷.除了网易新闻,现在好多应用都采用了这样的交互. 对手势识别不熟悉的请参考上篇: iOS手势识别的详细使用(拖动,缩放,旋转,点击,手势依赖,自定义手势) 这个交互效果主要用到两个手势,一个是pan拖拽,一个是tap点击.拖拽可以把抽屉拉出来,再推回去.点击可以把抽屉推回去. 效果如下:     那么这个效果如何实现呢? 2.实现思路和步骤 思路:从实现

iOS界面-仿网易新闻左侧抽屉式交互 续(添加新闻内容页和评论页手势)

本文转载至  http://blog.csdn.net/totogo2010/article/details/8637430 1.介绍 有的博友看了上篇博文iOS界面-仿网易新闻左侧抽屉式交互 ,在微博里问,网易新闻里的内容和评论的拖拽如何实现, 上面的UINavigation如何嵌进去.可能不少人有这样的需求,现在花了些时间把这两个效果做一下, 和大家分享交流.思路和上篇基本差不多,但是没有用到UINavigation,其实在我看来上面的返回. 评论按钮都是可以通过addsubview添加的.

IOS之分析网易新闻存储数据(CoreData的使用,增删改查)

用过网易新闻客户端的朋友们都知道,获取新闻列表时有的时候他会请求网络有时候不会,查看某条新闻的时候再返回会标注已经查看的效果,接下来分析一下是如何实现的. 首先: 1.网易新闻用CoreData存储了新闻列表,因为我打开网易新闻的Documents时看到了三个文件: newsapp.sqlite,newsapp.sqlite-shm,newsapp.sqlite-wal:这三个文件是你在用CoreData时自动生成的.所以我确定他是用coredata存储的数据而不是sqlite数据库.(Core

ios 开发日记 13-剖析网易新闻标签栏视图切换(addChildViewController属性介绍)

iOS开发 剖析网易新闻标签栏视图切换(addChildViewController属性介绍) 时间 2014-06-25 21:45:21  CSDN博客 原文  http://blog.csdn.net/hmt20130412/article/details/34523235 主题 网易iOS开发 本来只是打算介绍一下addChildViewController这个方法的,正好今天朋友去换工作面试问到网易新闻标签栏效果的实现,就结合它,用个小Demo实例介绍一下:(具体解释都写在了Demo里

iOS开发进阶

博客专栏>移动开发专栏>IOS开发进阶 分享到:新浪微博腾讯微博IOS开发进阶 iPhone开发进阶,如果你已经基本熟悉了Objective-c基本语法,你已经熟悉iOS程序开发的基础,那么我们再进一步的学习iOS开发的知识.比如多任务编程,网络,系统方面的原理,内存管理,debug或查找crash的技巧等. 收藏 订阅 最新更新文章 [移动开发] iOS界面-仿网易新闻左侧抽屉式交互 续(添加新闻内容页和评论页手势) 1.介绍有的博友看了上篇博文 iOS界面-仿网易新闻左侧抽屉式交互 ,在微

网易新闻iOS版开发使用的第三方框架和组件列表

网易新闻iOS版在开发过程中曾经使用过的第三方开源类库.组件 1.AFNetworking AFNetworking 采用 NSURLConnection + NSOperation, 主要方便与服务端 API 进行数据交换, 操作简单, 功能强大, 现在许多人都用它取代 ASIHTTPRequest 2.Apple Reachability 网络监测,可以参考下这篇文章iOS网络监测如何区分2.3.4G? 3.DOUAudioStreamer 豆瓣的开源软件,DOUAudioStreamer

新版网易新闻客户端应用iOS源码

这是一个不错的iOS项目源码. 源码下载: http://code.662p.com/view/11510.html 演示图:   1.这次更新的亮点是添加了天气效果以后也可以用网易新闻看天气预报了,各种轻微的动画效果也没有放过. 2.新版的网易新闻,整改了首页UI,在底部加上了tabbar,因此多了很多页面这里也都编了,但是无法交互.毕竟东西太多了,我觉得能点击看到效果就算不能进一步深入,就一个壳子也比全空没有强是吧.. 3.主页-主页的下方加了tabbar,nav的两个按钮做了改变 4.详情