最近公司要开发一款基金销售软件，首页采用的是类似今日头条的头部滚动视图。
具体实现如下：
创建一个新类，继承于UIView，我起的名字是TitleScrollView。
代码实现部分：
首先是初始化View
- (instancetype)initWithFrame:(CGRect)frame Titles:(NSArray*)titles {
self= [superinitWithFrame:frame];
if(self) {
[selfcreateScrollViewWithTitles:titles];
}
returnself;
}
为了解决一部分耦合度，我们直接传入顶部文本标题的数组，
- (void)createScrollViewWithTitles:(NSArray*)titles {
//顶部滚动视图载体为scrollView
_scrollView= [[UIScrollViewalloc]init];
_scrollView.frame=CGRectMake(0,0, [UIScreenmainScreen].bounds.size.width,self.frame.size.height);
_scrollView.showsHorizontalScrollIndicator=NO;
_scrollView.showsVerticalScrollIndicator=NO;
[selfaddSubview:self.scrollView];
//顶部滚动视图下面的提示小横条,设置成为一个小view
_indicatorView= [[UIViewalloc]init];
_indicatorView.backgroundColor= [UIColorcolorWithRed:243/255.0green:75/255.0blue:80/255.0alpha:1.0];
//高度设定为2
_indicatorView.frame=CGRectMake(0,self.frame.size.height-TitleLineH,TitleWidth-20,TitleLineH);
[self.scrollViewaddSubview:self.indicatorView];
self.scrollView.contentSize=CGSizeMake(TitleWidth* titles.count,0);
for(NSIntegeri =0; i < titles.count; i++) {
//每一个title设置成按钮，title为按钮的标题
UIButton*button = [selfcreateChannelButton];
button.frame=CGRectMake(i *TitleWidth,0,TitleWidth,self.frame.size.height);
[buttonsetTitle:titles[i]forState:UIControlStateNormal];
[self.scrollViewaddSubview:button];
}
//页面开始的时候直接选中第一个
[selfclickChannelButton:self.scrollView.subviews[1]];
}
//创建title按钮的基本信息
- (UIButton*)createChannelButton{
UIButton*button = [UIButtonbuttonWithType:UIButtonTypeCustom];
[buttonsetTitleColor:[UIColorblackColor]forState:UIControlStateNormal];
[buttonsetTitleColor:[UIColorcolorWithRed:243/255.0green:75/255.0blue:80/255.0alpha:1.0]forState:UIControlStateDisabled];
[button.titleLabelsetFont:[UIFontsystemFontOfSize:TitleFont]];
[buttonaddTarget:selfaction:@selector(clickChannelButton:)forControlEvents:UIControlEventTouchUpInside];
[buttonlayoutIfNeeded];
returnbutton;
}
//按钮的点击事件
- (void)clickChannelButton:(UIButton*)sender {
//选中的标签居中
CGFloatnewOffsetX = sender.center.x- [UIScreenmainScreen].bounds.size.width*0.5;
if(newOffsetX <0) {
newOffsetX =0;
}
if(newOffsetX >self.scrollView.contentSize.width-self.scrollView.frame.size.width) {
newOffsetX =self.scrollView.contentSize.width-self.scrollView.frame.size.width;
}
//动画效果，过度平滑
[UIViewanimateWithDuration:0.25animations:^{
[sender.titleLabelsetFont:[UIFontsystemFontOfSize:TitleFont]];
[senderlayoutIfNeeded];
[self.scrollViewsetContentOffset:CGPointMake(newOffsetX,0)];
//indicatorView宽度会比titleLabel宽20
self.indicatorView.frame=CGRectMake(sender.frame.origin.x+ sender.titleLabel.frame.origin.x-10,self.frame.size.height-TitleLineH, sender.titleLabel.frame.size.width+20,TitleLineH);
}];
//因为subviews包含indicatorView,所以index需要减1
NSIntegerindex = [self.scrollView.subviewsindexOfObject:sender] -1;
//代理方法
if([self.delegaterespondsToSelector:@selector(chooseChannelWithIndex:)]) {
[self.delegatechooseChannelWithIndex:index];
}
}
//点选按钮
- (void)selectChannelButtonWithIndex:(NSInteger)index {
self.indicatorView.hidden=NO;
//因为subviews包含indicatorView,所以index需要加1
[selfclickChannelButton:self.scrollView.subviews[index+1]];
}
//按钮移除视图
- (UIButton*)createChannelButton{
UIButton*button = [UIButtonbuttonWithType:UIButtonTypeCustom];
[buttonsetTitleColor:[UIColorblackColor]forState:UIControlStateNormal];
[buttonsetTitleColor:[UIColorcolorWithRed:243/255.0green:75/255.0blue:80/255.0alpha:1.0]forState:UIControlStateDisabled];
[button.titleLabelsetFont:[UIFontsystemFontOfSize:TitleFont]];
[buttonaddTarget:selfaction:@selector(clickChannelButton:)forControlEvents:UIControlEventTouchUpInside];
[buttonlayoutIfNeeded];
returnbutton;
}
//按钮的滑动方式
- (void)addAChannelButtonWithChannelName:(NSString*)channelName {
UIButton*button = [selfcreateChannelButton];
self.scrollView.contentSize=CGSizeMake(self.scrollView.contentSize.width+TitleWidth,0);
button.frame=CGRectMake(self.scrollView.contentSize.width-TitleWidth,0,TitleWidth,self.frame.size.height);
[buttonsetTitle:channelNameforState:UIControlStateNormal];
[self.scrollViewaddSubview:button];
}
到此 滑动视图书写完毕，还可以根据不同需求，设置不同的大小和字体。