1:实现头部这种类别滚动的效果
其主要代码如下:
UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 64, screen_width, 40)]; scrollView.pagingEnabled = NO; scrollView.alwaysBounceHorizontal = YES; scrollView.showsHorizontalScrollIndicator = NO; scrollView.showsVerticalScrollIndicator = NO; scrollView.backgroundColor = RGB(246, 246, 246); [self.view addSubview:scrollView]; float btnWidth = 60; for (int i = 0; i < self.cateNameArray.count; i++) { UIButton *nameBtn = [UIButton buttonWithType:UIButtonTypeCustom]; nameBtn.frame = CGRectMake(btnWidth*i, 0, btnWidth, 40); nameBtn.tag = 10+i; nameBtn.font = [UIFont systemFontOfSize:13]; [nameBtn setTitle:self.cateNameArray[i] forState:UIControlStateNormal]; [nameBtn setTitleColor:navigationBarColor forState:UIControlStateSelected]; [nameBtn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal]; [nameBtn addTarget:self action:@selector(OnTapNameBtn:) forControlEvents:UIControlEventTouchUpInside]; [scrollView addSubview:nameBtn]; if (i == 0) { // nameBtn.selected = YES; _lineView = [[UIView alloc] initWithFrame:CGRectMake(nameBtn.center.x-20, 38, 40, 2)]; _lineView.backgroundColor = navigationBarColor; [scrollView addSubview:_lineView]; } } scrollView.contentSize = CGSizeMake(self.cateNameArray.count*btnWidth, 0);
-(void)OnTapNameBtn:(UIButton *)sender{ NSInteger index = sender.tag - 10; if (index == _currentIndex) { return; } _currentIndex = index; _cateid = _cateIDArray[index]; _page = 1; [UIView animateWithDuration:0.5 animations:^{ _lineView.center = CGPointMake(sender.center.x, 39); }]; //刷新数据 [self.tableView.gifHeader beginRefreshing]; }
其中_lineView是一个view,因为这边还有滚动时刷新底下的列表;
2:另外一种使用第三方的插件XTSegmentControl,结合iCarousel进行滚动选项卡
效果如下:
![]() | ![]() |
主要代码如下:
#import <UIKit/UIKit.h> #import "oldChildVewController.h" #import "ChildViewController.h" #import "newChildVewController.h" #import "XTSegmentControl.h" #import "iCarousel.h" #import "Masonry.h" @interface ViewController : UIViewController<iCarouselDataSource, iCarouselDelegate> @end
#import "ViewController.h" #define kScreen_Height [UIScreen mainScreen].bounds.size.height #define kScreen_Width [UIScreen mainScreen].bounds.size.width #define kMySegmentControl_Height 44.0 @interface ViewController () @property (strong, nonatomic) NSMutableDictionary *myProActivitiesDict; @property (strong, nonatomic) XTSegmentControl *mySegmentControl; @property (strong, nonatomic) NSArray *titlesArray; @property (strong, nonatomic) iCarousel *myCarousel; @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; self.view.backgroundColor=[UIColor whiteColor]; CGRect frame=self.view.bounds; self.myCarousel = ({ iCarousel *icarousel = [[iCarousel alloc] initWithFrame:frame]; icarousel.dataSource = self; icarousel.delegate = self; icarousel.decelerationRate = 1.0; icarousel.scrollSpeed = 1.0; icarousel.type = iCarouselTypeLinear; icarousel.pagingEnabled = YES; icarousel.clipsToBounds = YES; icarousel.bounceDistance = 0.2; [self.view addSubview:icarousel]; [icarousel mas_makeConstraints:^(MASConstraintMaker *make) { make.edges.equalTo(self.view).insets(UIEdgeInsetsMake(kMySegmentControl_Height, 0, 0, 0)); }]; icarousel; }); //添加滑块 __weak typeof(_myCarousel) weakCarousel = _myCarousel; self.mySegmentControl = [[XTSegmentControl alloc] initWithFrame:CGRectMake(0, 0, kScreen_Width, kMySegmentControl_Height) Items:self.titlesArray selectedBlock:^(NSInteger index) { [weakCarousel scrollToItemAtIndex:index animated:NO]; }]; [self.view addSubview:self.mySegmentControl]; } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; } #pragma mark - Getter/Setter - (NSArray*)titlesArray { if (nil == _titlesArray) { _titlesArray = @[@"全部", @"任务", @"讨论", @"文档", @"代码", @"其他"]; } return _titlesArray; } #pragma mark iCarousel M - (NSUInteger)numberOfItemsInCarousel:(iCarousel *)carousel{ return [self.titlesArray count]; } - (UIView *)carousel:(iCarousel *)carousel viewForItemAtIndex:(NSUInteger)index reusingView:(UIView *)view{ UIViewController *childContrll; switch (index) { case 0: { childContrll=[[ChildViewController alloc]init]; break; } case 1: { childContrll=[[oldChildVewController alloc]init]; break; } default: childContrll=[[newChildVewController alloc]init]; break; } return childContrll.view; } - (void)carouselDidScroll:(iCarousel *)carousel{ if (_mySegmentControl) { float offset = carousel.scrollOffset; if (offset > 0) { [_mySegmentControl moveIndexWithProgress:offset]; } } } - (void)carouselCurrentItemIndexDidChange:(iCarousel *)carousel{ if (_mySegmentControl) { _mySegmentControl.currentIndex = carousel.currentItemIndex; } } @end
您也可以通过这边进行代码下载:源代码下载
补充1:上面我们是不让它出现滚动的,只在一个屏幕的宽度里进行排列,假如有多个时就要出现可以滚动的,可以针对XTSegmentControl.m进行修改,主要修改地方如下:
#define XTSegmentControlHspace (12) - (void)initItemsWithTitleArray:(NSArray *)titleArray { _itemFrames = @[].mutableCopy; _items = @[].mutableCopy; float y = 0; float height = CGRectGetHeight(self.bounds); NSDictionary *attributes = @{NSFontAttributeName: [UIFont systemFontOfSize:XTSegmentControlItemFont]}; NSObject *obj = [titleArray firstObject]; if ([obj isKindOfClass:[NSString class]]) { for (int i = 0; i < titleArray.count; i++) { NSString *title = titleArray[i]; CGSize size = [title sizeWithAttributes:attributes]; float x = i > 0 ? CGRectGetMaxX([_itemFrames[i-1] CGRectValue]) : 0; float width = 2 * XTSegmentControlHspace + size.width; CGRect rect = CGRectMake(x, y, width, height); [_itemFrames addObject:[NSValue valueWithCGRect:rect]]; } for (int i = 0; i < titleArray.count; i++) { CGRect rect = [_itemFrames[i] CGRectValue]; NSString *title = titleArray[i]; XTSegmentControlItem *item = [[XTSegmentControlItem alloc] initWithFrame:rect title:title type:XTSegmentControlItemTypeTitle]; if (i == 0) { [item setSelected:YES]; } [_items addObject:item]; [_contentView addSubview:item]; } } [_contentView setContentSize:CGSizeMake(CGRectGetMaxX([[_itemFrames lastObject] CGRectValue]), CGRectGetHeight(self.bounds))]; self.currentIndex = 0; [self selectIndex:0]; } - (void)addRedLine { if (!_lineView) { CGRect rect = [_itemFrames[0] CGRectValue]; _lineView = [[UIView alloc] initWithFrame:CGRectMake(XTSegmentControlHspace, CGRectGetHeight(rect) - XTSegmentControlLineHeight, CGRectGetWidth(rect) - 2 * XTSegmentControlHspace, XTSegmentControlLineHeight)]; _lineView.backgroundColor = [UIColor colorWithHexString:@"0x3bbd79"]; [_contentView addSubview:_lineView]; UIView *bottomLineView = [[UIView alloc] initWithFrame:CGRectMake(0, CGRectGetHeight(rect)-0.5, CGRectGetWidth(self.bounds), 0.5)]; bottomLineView.backgroundColor = [UIColor colorWithHexString:@"0xc8c7cc"]; [self addSubview:bottomLineView]; } }
补充2:当下面部分在手动划动时,如果菜单不在当前屏幕时,那它就不法跟随滚动到当前菜单的位置,同样对它进行简单的修改;
XTSegmentControl.h(把- (void)setScrollOffset:(NSInteger)index放出来让外面的进行调用)
@interface XTSegmentControl : UIView @property (nonatomic) NSInteger currentIndex; - (instancetype)initWithFrame:(CGRect)frame Items:(NSArray *)titleItem delegate:(id <XTSegmentControlDelegate>)delegate; - (instancetype)initWithFrame:(CGRect)frame Items:(NSArray *)titleItem selectedBlock:(XTSegmentControlBlock)selectedHandle; - (void)selectIndex:(NSInteger)index; - (void)moveIndexWithProgress:(float)progress; - (void)endMoveIndex:(NSInteger)index; - (void)setScrollOffset:(NSInteger)index; @end
然后外面icarousel结合时调用进行简单修改(主要是这一行[_mySegmentControl setScrollOffset:index]):
- (UIView *)carousel:(iCarousel *)carousel viewForItemAtIndex:(NSUInteger)index reusingView:(UIView *)view{ [_mySegmentControl setScrollOffset:index]; UIViewController *childContrll; switch (index) { case 0: { childContrll=[[ChildViewController alloc]init]; break; } case 1: { childContrll=[[oldChildVewController alloc]init]; break; } default: childContrll=[[newChildVewController alloc]init]; break; } return childContrll.view; }
修改后的代码下载地址:源代码下载
3:几个不错的实例
a: https://github.com/HAHAKea/HACursor
b: https://github.com/fergusding/FDSlideBar