滚动标题栏经常在各种app中出现，比如网易新闻，新浪新闻这类新闻app，还有斗鱼直播app也有出现。这篇文章主要介绍如何用objective-C实现简单的滚动栏，
当然在github上有这个Demo，这是github的链接ScrollViewDemo
新建一个PageTititleView的类，这个类是滚动标题栏中的标题视图部分，先在PageTitleView的头文件中声明初始化的类方法，titles就是标题的字符串。
//PageTitleView.h
@interface PageTitleView : UIView
+(instancetype)initWithFrame:(CGRect)frame titles:(NSArray*)array;
@end
随后我们在.m文件实现这个方法
@interface PageTitleView ()
@property(copy,nonatomic)NSArray*titles;
/*
还有一部分属性没有写
*/
@end
@implementation PageTitleView
//省略了一部分的懒加载方法
+(instancetype)initWithFrame:(CGRect)frame titles:(NSArray *)array{
PageTitleView*pageTitleView = [[PageTitleView alloc]initWithFrame:frame];
pageTitleView.titles = array;
//其中还有一些代码随后再加上
return pageTitleView;
}
然后我们再建立PageContentView,这是展示滚动内容的视图。以下是初始化的类方法，他滚动切换的是视图控制器
//PageContentView.m
+(instancetype)initWithFrame:(CGRect)frame ChildViewControllers:(NSMutableArray *)controllers parentViewController:(UIViewController *)parentVc{
PageContentView* pageContentView = [[PageContentView alloc]initWithFrame:frame];
pageContentView.childVcs = controllers;
pageContentView.parentViewController = parentVc;
return pageContentView;
}
pageContentView滚动视图的实现是用UICollectionView
//PageContentView.m
@interface PageContentView ()
/*
省略部分属性
*/
@property(nonatomic,strong)UICollectionView*collectionView;
@end
collectionView的懒加载方法
//PageContentView.m
-(UICollectionView *)collectionView{
if (!_collectionView) {
UICollectionViewFlowLayout*layout = [[UICollectionViewFlowLayout alloc]init];
layout.itemSize = self.bounds.size;//cell的大小应该是contentView的大小
layout.minimumLineSpacing = 0;
layout.minimumInteritemSpacing = 0;
layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
_collectionView = [[UICollectionView alloc]initWithFrame:CGRectZero collectionViewLayout:layout];
_collectionView.showsHorizontalScrollIndicator = NO;
_collectionView.pagingEnabled = true;//内容滚动分页
_collectionView.bounces = NO;
_collectionView.dataSource = self;
_collectionView.delegate = self;
[_collectionView registerClass:UICollectionViewCell.self forCellWithReuseIdentifier:kCellID];
}
return _collectionView;
}
关于CollectionView的DataSource方法
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
return self.childVcs.count;
}
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
UICollectionViewCell*cell = [collectionView dequeueReusableCellWithReuseIdentifier:kCellID forIndexPath:indexPath];
UIViewController*childVc = self.childVcs[indexPath.item];
childVc.view.frame = cell.contentView.bounds;
[cell.contentView addSubview:childVc.view];//cell的视图为子控制的视图
return cell;
}
然后当我们要在PageTitleView的上面加上颜色和和滑动的线scrollLine,效果如下图
pageTitleView.png
//PageTitleView.m
//先要设计PageTitleView上的titleLabel
-(void)setTitleLabels{
NSInteger index = 0;
CGFloat labelW = self.frame.size.width/(CGFloat)self.titles.count;
CGFloat labelH = self.frame.size.height-2;
CGFloat labelY = 0;
for (NSString*title in self.titles) {
UILabel*label = [[UILabel alloc]init];
NSLog(@"%@",title);
label.text = title;
label.tag = index;
label.font = [UIFont systemFontOfSize:16.0];
label.textColor = [UIColor darkGrayColor];
label.textAlignment = NSTextAlignmentCenter;
//
CGFloat labelX = labelW*index;
NSLog(@"%f",labelX);
label.frame = CGRectMake(labelX, labelY, labelW, labelH);
[self.scrollView addSubview:label];
[self.titleLabels addObject:label];
label.userInteractionEnabled = YES;
index++;
}
}
-(void)setupBottomLineAndScrollLine{
//设置深灰色的底线
UIView*bottomLine = [[UIView alloc]init];
bottomLine.backgroundColor = [UIColor lightGrayColor];
CGFloat lineH = 0.5;
bottomLine.frame = CGRectMake(0, self.frame.size.height-lineH, self.frame.size.width, lineH);
[self addSubview:bottomLine];
if(self.titleLabels!=nil){
UILabel*firstLabel = [self.titleLabels firstObject];
firstLabel.textColor = [UIColor colorWithRed:kSelectedRed green:kSelectedGreen blue:kSelectedBlue];
self.scrollLine.frame = CGRectMake(firstLabel.frame.origin.x, self.frame.size.height-kScrollLineH, firstLabel.frame.size.width, 2.0);
[self.scrollView addSubview:self.scrollLine];//把scrollLine房子一个lable下面
}else{
return;
}
}
然后当我们点击上面的其他label时，该label颜色变为橙色，原来位置的label变成原来的颜色，然后下面的橙色的scrollLine位置也会发生相应的
//PageTitleView.m
-(void)titleLabelClickedWithGes:(UITapGestureRecognizer*)ges{
if (ges.view) {
UILabel *currentLabel = (UILabel*)ges.view;
UILabel*oldLabel = self.titleLabels[self.currentIndex];
self.currentIndex = currentLabel.tag;
currentLabel.textColor = [UIColor orangeColor];
oldLabel.textColor = [UIColor darkGrayColor];
CGFloat scrollLineX = currentLabel.tag*self.scrollLine.frame.size.width;
[UIView animateWithDuration:0.15 animations:^{
self.scrollLine.frame = CGRectMake(scrollLineX, self.frame.size.height-kScrollLineH, currentLabel.frame.size.width, 2.0);
}];
[self.delegate pageTitletView:self selectedIndex:self.currentIndex];
}else{
return;
}
}
当然还要在setTitleLabels的方法中给label加上手势
UITapGestureRecognizer* tapGes = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(titleLabelClickedWithGes:)];
[label addGestureRecognizer:tapGes];
好了，介绍这简单的滚动标题的第一部分的文章就到这里。由于本人第一次写文章，所以希望大家见谅并且指出我的不足。还有一些宏定义在代码中有，一切以工程里的代码为主。第二部分的关于PageContentView和PageTitleView用代理方法通信的文章我会尽快更新。感谢你的阅读。