iOS动画案例(2) 仿网易新闻标题动画
由于产品的需要,做了一个和网易新闻标题类似的动画效果,现在新闻类的APP都是采用这样的动画效果,来显示更多的内容。先看一下动画效果:
由于这个动画效果在很多场合都有应用,所以我专门封装了一个控件"FHSegmentControl",它继承于UIView,同学们只要简单的调用就可以了,非常简单。
1.把“FHSegmentControl”文件夹拖入到你的工程中。
2.这样的动画效果都是和流水布局在一起应用的,所以需要设置子视图控制器,由于这次的重点不在这里,所以我的子视图控制器很简单,只有一个UIWebview;
#import <UIKit/UIKit.h>
@interface FHChildViewController : UIViewController
@property (weak, nonatomic) IBOutlet UIWebView *webView;
@end
3.添加SegmentControl、流水布局
#import "ViewController.h"
#import "FHSegmentControl.h"
#import "FHChildViewController.h"
#define ScreenWidth [UIScreen mainScreen].bounds.size.width
#define ScreenHeight [UIScreen mainScreen].bounds.size.height
@interface ViewController ()<UICollectionViewDelegate, UICollectionViewDataSource>
@property (nonatomic, strong)FHSegmentControl *segment;
@property (nonatomic, strong) UICollectionView *collectionView;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// 添加Segment
[self setupSegmentControl];
// 添加流水布局
[self setupBottomeView];
// 添加子视图
[self addChildVC];
}
// 添加Segment
- (void)setupSegmentControl {
// 自定义导航
UIView *navView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, ScreenWidth, 64)];
navView.backgroundColor = [UIColor colorWithRed:95/255.0 green:171/255.0 blue:128/255.0 alpha:1.0f];
[self.view addSubview:navView];
// 添加_segment
_segment = [[FHSegmentControl alloc] initWithFrame:CGRectMake(0, 20, ScreenWidth, 44)];
// 设置标题 不需要设置标题长度,会根据标题字数自动生成,标题字号17
_segment.titles = @[@"百度",@"搜狐",@"新浪",@"雅虎",@"网易",@"腾讯",@"凤凰网",@"百度",@"百度",@"百度"];
// 标题颜色
_segment.titleColor = [UIColor redColor];
// 选中标题颜色
_segment.selectedTitleColor = [UIColor blackColor];
__weak typeof(self) weakSelf = self;
// 回调 index 就是你点击的那个标题所在数组中的索引
_segment.SegmentControlDidSelectedIndexBlock = ^(NSInteger index) {
// 与流水布局联动
CGFloat offsetX = index * ScreenWidth;
weakSelf.collectionView.contentOffset = CGPointMake(offsetX, 0);
};
[navView addSubview:_segment];
}
// 添加流水布局
- (void)setupBottomeView {
self.automaticallyAdjustsScrollViewInsets = NO;
UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
flowLayout.itemSize = CGSizeMake(ScreenWidth, ScreenHeight - 64);
flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
flowLayout.minimumInteritemSpacing = 0.0f;
flowLayout.minimumLineSpacing = 0.0f;
_collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 64, ScreenWidth, ScreenHeight - 64) collectionViewLayout:flowLayout];
_collectionView.backgroundColor = [UIColor whiteColor];
_collectionView.pagingEnabled = YES;
_collectionView.showsHorizontalScrollIndicator = YES;
_collectionView.bounces= NO;
_collectionView.dataSource = self;
_collectionView.delegate = self;
[_collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"ID"];
[self.view addSubview:_collectionView];
}
#pragma mark - UICollectionViewDelegate
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
NSInteger index = scrollView.contentOffset.x / ScreenWidth;
// 与标题联动
[_segment setSelectedIndex:index];
}
#pragma mark - UICollectionViewDataSource
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
return self.childViewControllers.count;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"ID" forIndexPath:indexPath];
[cell.contentView.subviews makeObjectsPerformSelector:@selector(removeFromSuperview)];
FHChildViewController *childVC = self.childViewControllers[indexPath.row];
childVC.view.frame = cell.contentView.bounds;
[cell.contentView addSubview:childVC.view];
return cell;
}
// 添加子视图
- (void)addChildVC {
NSArray *urlArr = @[@"http://www.baidu.com",@"http://www.sohu.com",@"http://www.sina.com.cn",@"http://www.yahoo.com",@"http://www.163.com",@"http://www.qq.com",@"http://www.ifeng.com",@"http://www.baidu.com",@"http://www.baidu.com",@"http://www.baidu.com"];
for (int i = 0; i < urlArr.count; i++) {
FHChildViewController *childVC = [FHChildViewController new];
childVC.view.backgroundColor = [UIColor whiteColor];
NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL URLWithString:urlArr[i]]];
[childVC.webView loadRequest:request];
[self addChildViewController:childVC];
}
}
@end
我封装的这个控件会上传到GitHub,欢迎大家应用,如果有错误,联系我,一定会第一时间更改。
iOS动画案例(2) 仿网易新闻标题动画的更多相关文章
- iOS仿网易新闻栏目拖动重排添加删除效果
仿网易新闻栏目选择页面的基本效果,今天抽了点时间教大家如何实现UICollectionView拖动的效果! 其实实现起来并不复杂,这里只是基本的功能,没有实现细节上的修改,连UI都是丑丑的样子,随手画 ...
- Android Studio精彩案例(一)《ActionBar和 ViewPager版仿网易新闻客户端》
转载本专栏文章,请注明出处,尊重原创 .文章博客地址:道龙的博客 为了能更好的分享高质量的文章,所以开设了此专栏.文章代码都以Android Studio亲测运行,读者朋友可在后面直接下载源码.该专栏 ...
- iOS界面-仿网易新闻左侧抽屉式交互 续(添加新闻内容页和评论页手势)
本文转载至 http://blog.csdn.net/totogo2010/article/details/8637430 1.介绍 有的博友看了上篇博文iOS界面-仿网易新闻左侧抽屉 ...
- 类似掌盟的Tab页 Android 开源框架ViewPageIndicator 和 ViewPager 仿网易新闻客户端Tab标签 (转)
原博客地址 :http://blog.csdn.net/xiaanming/article/details/10766053 本文转载,记录学习用,如有需要,请到原作者网站查看(上面这个网址) 之前 ...
- Android 开源框架ViewPageIndicator 和 ViewPager 仿网易新闻clientTab标签
之前用JakeWharton的开源框架ActionBarSherlock和ViewPager实现了对网易新闻clientTab标签的功能,ActionBarSherlock是在3.0下面的机器支持Ac ...
- Android 开源框架ViewPageIndicator 和 ViewPager 仿网易新闻客户端Tab标签
转载请注明出处:http://blog.csdn.net/xiaanming/article/details/10766053 之前用JakeWharton的开源框架ActionBarSherlock ...
- Android 开源框架ActionBarSherlock 和 ViewPager 仿网易新闻客户端
转载请注明出处:http://blog.csdn.net/xiaanming/article/details/9971721 大家都知道Android的ActionBar是在3.0以上才有的,那么在3 ...
- 仿网易新闻app下拉标签选择菜单
仿网易新闻app下拉标签选择菜单 仿网易新闻app下拉标签选择菜单,长按拖动排序,点击增删标签控件 ##示例 ##EasyTagDragView的使用 在layout布局里添加:
- 仿网易nec首页动画效果
仿网页nec首页动画效果nec链接:http://nec.netease.com/ 首先,介绍animationanimation检索或设置对象所应用的动画特效.animation由“keyframe ...
随机推荐
- 升级apache
升级Apache到最新版本,本来并不复杂,但是因为涉及到不能停止现有的Apache实例的运行,因此要小心翼翼的做. 大致分成三步: 编译新的Apache, 配置新的Apache, 替换旧的Apache ...
- APP被苹果APPStore拒绝的各种原因
APP被苹果APPStore拒绝的各种原因 1.程序有重大bug,程序不能启动,或者中途退出.2.绕过苹果的付费渠道,我们之前游戏里的用兑换码兑换金币.3.游戏里有实物奖励的话,一定要说清楚,奖励由本 ...
- iReport折线图
1.拖动组件面板chart到Summary 2.右击-->chart data 单出 3. 4.X轴和Y轴必须是数字 series:系列 连续,串联 category:类型.部门. ...
- 【转】gvim配置及相关插件安装
0.准备软件及插件.(a)gvim72.exe 地址ftp://ftp.vim.org/pub/vim/pc/gvim72.exe.(b)vimcdoc-1.7.0-setup.exe 地址http: ...
- HDU1429 bfs
胜利大逃亡(续) Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Su ...
- Ubuntu Linux下设置IP的配置命令
Ubuntu Linux下设置IP的配置命令 今天装了Ubuntu,但是发现不能上网,开始排查问题: 1.首先确定网络连接是否正确,所用的网线是否可以正常工作 2.查看网卡是否能正常工作,检测的方法如 ...
- assert 实现分析
一直以来,对于assert的实现总是不太理解,现在深入assert背后的代码,总算对assert的实现有了一个清醒的认识. assert基于宏定义与宏展开实现.首先介绍一下assert的功能:它能够断 ...
- struts2默认Action配置
在项目中,需要在输入错误的url的时候,弹出友好的错误提示页面 在struts2中可以通过配置默认的action达到这个目的 配置方法: <package name="default& ...
- Maven deploy时报Fatal error compiling: tools.jar not found错误的问题处理
摘自:http://blog.csdn.net/achilles12345/article/details/19046061 在Eclipse环境下,使用Maven进行deploy时发现报了该错误:F ...
- java_web学习(15)jQuery
JavaScript 库作用及对比 为了简化 JavaScript 的开发, 一些 JavsScript 库诞生了. JavaScript 库封装了很多预定义的对象和实用函数.能帮助使用者建立有高难度 ...