由于产品的需要，做了一个和网易新闻标题类似的动画效果，现在新闻类的APP都是采用这样的动画效果，来显示更多的内容。先看一下动画效果：
新闻标题动画.gif
由于这个动画效果在很多场合都有应用，所以我专门封装了一个控件"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,欢迎大家应用，如果有错误，联系我，一定会第一时间更改。
