思路
- 导航条下面放一个滑动条sliderScrollView,sliderScrollView内部顺序摆放标题按钮。sliderScrollView下面放一个contentScrollView,contentScrollView内部顺序摆放内容视图view,view与屏幕齐宽,view数量与标题的数量相等。
- 选中的标题位置居中、文字颜色为红色
- 红色的下标移动到选中标题的下面
- 选中某一标题,内容视图切换到对应的view
- 切换内容视图的同时切换选中的按钮
效果
020BA2E9-EAB2-41C6-889A-34BD6037BA26.png
代码
#import "XSMultilistSlideController.h"
#define SCREEN_WIDTH [UIScreen mainScreen].bounds.size.width
#define SCREEN_HEIGHT [UIScreen mainScreen].bounds.size.height
#define SLIDER_HEIGHT 50 // 滑动条高度
#define STAANDNAV_HEIGHT 64 // 状态栏加导航栏的高度
#define BUTTON_WIDTH 80 // 按钮的宽度
#define TIPVIEW_HEIGHT 3 // 标识条的高度
#define LINE_HEIGHT 0.5 // 滑动条底部线条高度
@interface XSMultilistSlideController () <UIScrollViewDelegate> {
UIView *_tipView;
UIScrollView *_sliderScrollView;
UIScrollView *_contentScrollView;
}
@property (nonatomic, strong) NSMutableArray *dataArray;
@end
@implementation XSMultilistSlideController
- (NSMutableArray *)dataArray {
if (!_dataArray) {
_dataArray = [NSMutableArray array];
for (int i = 0; i < 20; i++) {
NSString *str = [NSString stringWithFormat:@"标题%d", i];
[_dataArray addObject:str];
}
}
return _dataArray;
}
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor whiteColor];
self.navigationItem.title = @"多表视图滑动切换";
self.automaticallyAdjustsScrollViewInsets = NO;
[self setupUI];
}
- (void)setupUI {
// 滑动条
_sliderScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, STAANDNAV_HEIGHT, [UIScreen mainScreen].bounds.size.width, SLIDER_HEIGHT)];
_sliderScrollView.showsHorizontalScrollIndicator = NO;
_sliderScrollView.contentSize = CGSizeMake(BUTTON_WIDTH * self.dataArray.count, SLIDER_HEIGHT);
[self.view addSubview:_sliderScrollView];
// 滑动条上的按钮
for (int i = 0; i < self.dataArray.count; i++) {
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
button.frame = CGRectMake(BUTTON_WIDTH * i, 0, BUTTON_WIDTH, SLIDER_HEIGHT);
[button setTitle:[self.dataArray objectAtIndex:i] forState:UIControlStateNormal];
[button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[button setTitleColor:[UIColor redColor] forState:UIControlStateSelected];
[button addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
[_sliderScrollView addSubview:button];
button.tag = i + 1;
// 设置起始的选中状态
if (i == 0) {
button.selected = YES;
} else {
button.selected = NO;
}
}
// 滑动条底部线条
UIView *line = [[UIView alloc] initWithFrame:CGRectMake(0, STAANDNAV_HEIGHT + SLIDER_HEIGHT - LINE_HEIGHT, SCREEN_WIDTH, LINE_HEIGHT)];
line.backgroundColor = [UIColor lightGrayColor];
[self.view addSubview:line];
// 按钮下面的标识条
_tipView = [[UIView alloc] initWithFrame:CGRectMake(0, SLIDER_HEIGHT - TIPVIEW_HEIGHT, BUTTON_WIDTH, TIPVIEW_HEIGHT)];
_tipView.backgroundColor = [UIColor redColor];
[_sliderScrollView addSubview:_tipView];
// 内容视图
_contentScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, STAANDNAV_HEIGHT + SLIDER_HEIGHT, SCREEN_WIDTH, SCREEN_HEIGHT - (STAANDNAV_HEIGHT + SLIDER_HEIGHT))];
_contentScrollView.contentSize = CGSizeMake(SCREEN_WIDTH * self.dataArray.count, SCREEN_HEIGHT - (STAANDNAV_HEIGHT + SLIDER_HEIGHT));
_contentScrollView.pagingEnabled = YES;
_contentScrollView.showsHorizontalScrollIndicator = NO;
_contentScrollView.delegate = self;
[self.view addSubview:_contentScrollView];
// 每个页面添加一个view
for (int i = 0; i < self.dataArray.count; i++) {
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(i * SCREEN_WIDTH, 0, SCREEN_WIDTH, SCREEN_HEIGHT - (STAANDNAV_HEIGHT + SLIDER_HEIGHT))];
[_contentScrollView addSubview:view];
if (i % 3 == 0) {
view.backgroundColor = [UIColor cyanColor];
} else if (i %3 == 1) {
view.backgroundColor = [UIColor whiteColor];
} else {
view.backgroundColor = [UIColor yellowColor];
}
}
}
// 按钮点击事件
- (void)btnClick:(UIButton *)btn {
// 1.将标识条移到选中的按钮下
[self moveTipview:btn];
// 2.将选中的按钮字体变色
[self changeBtnColor:btn];
// 3.将选中的按钮移到中间
[self moveSlider:btn];
// 4.将�内容视图调整到对应的页面
[self moveContentScrollView:btn];
}
- (void)moveSlider:(UIButton *)btn {
CGPoint contentOffset = _sliderScrollView.contentOffset;
contentOffset.x += (btn.frame.origin.x + BUTTON_WIDTH / 2) - _sliderScrollView.contentOffset.x - SCREEN_WIDTH / 2;
if (contentOffset.x < 0) {
contentOffset.x = 0;
}
if (contentOffset.x + SCREEN_WIDTH > _sliderScrollView.contentSize.width) {
contentOffset.x = _sliderScrollView.contentSize.width - SCREEN_WIDTH;
}
[UIView animateWithDuration:0.5f animations:^{
_sliderScrollView.contentOffset = contentOffset;
}];
}
- (void)changeBtnColor:(UIButton *)btn {
for (UIView *view in _sliderScrollView.subviews) {
for (int i = 1; i <= self.dataArray.count; i++) {
if (view.tag == i) {
UIButton *elseBtn = (UIButton *)view;
btn.selected = YES;
elseBtn.selected = NO;
}
}
}
}
- (void)moveTipview:(UIButton *)btn {
[UIView animateWithDuration:0.1f animations:^{
CGRect frame = _tipView.frame;
frame.origin.x = btn.frame.origin.x;
_tipView.frame = frame;
}];
}
- (void)moveContentScrollView:(UIButton *)btn {
CGPoint contentOffset = _contentScrollView.contentOffset;
contentOffset.x = (btn.tag - 1) * SCREEN_WIDTH;
[UIView animateWithDuration:0.1f animations:^{
_contentScrollView.contentOffset = contentOffset;
}];
}
#pragma mark - UIScrollViewDelegate
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
int index = scrollView.contentOffset.x / SCREEN_WIDTH + 1;
for (UIView *view in _sliderScrollView.subviews) {
if (view.tag == index) {
UIButton *button = (UIButton *)view;
// 1.将标识条移到选中的按钮下
[self moveTipview:button];
// 2.将选中的按钮字体变色
[self changeBtnColor:button];
// 3.将选中的按钮移到中间
[self moveSlider:button];
}
}
}
@end
网友评论