最近公司要開發(fā)一款基金銷售軟件喇完，首頁采用的是類似今日頭條的頭部滾動視圖。
具體實現(xiàn)如下：
創(chuàng)建一個新類剥啤，繼承于UIView锦溪，我起的名字是TitleScrollView。
代碼實現(xiàn)部分：
首先是初始化View
- (instancetype)initWithFrame:(CGRect)frame Titles:(NSArray*)titles {
self= [superinitWithFrame:frame];
if(self) {
[selfcreateScrollViewWithTitles:titles];
}
returnself;
}
為了解決一部分耦合度府怯，我們直接傳入頂部文本標(biāo)題的數(shù)組刻诊，
- (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];
//頂部滾動視圖下面的提示小橫條,設(shè)置成為一個小view
_indicatorView= [[UIViewalloc]init];
_indicatorView.backgroundColor= [UIColorcolorWithRed:243/255.0green:75/255.0blue:80/255.0alpha:1.0];
//高度設(shè)定為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設(shè)置成按鈕，title為按鈕的標(biāo)題
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]];
}
//創(chuàng)建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 {
//選中的標(biāo)簽居中
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];
}
到此 滑動視圖書寫完畢则涯，還可以根據(jù)不同需求，設(shè)置不同的大小和字體冲簿。
