轻松实现标签视图切换效果

Sian

一、先上效果图，看了自然就明白


二、设计思路

1、如何实现类似功能或效果呢，首先顶部标签切换效果在前面已有专门的贴子做了详细说明，参考http://www.yusian.com/bbs/thread-8961-1-1.html

2、下面视图切换的基本思路是根据上面标签的数目创建对应多个View，放到ScrollView上面，通过pageingEnable属性分屏切换

3、通过ScrollView的代理方法，监听当前ScrollView的滚动状态与上面标签栏联动

4、同样，上面标签栏点击事件动态改变ScrollView的contentOffset，使得下面视图与标签保持对应一致

三、使用说明

1、该控件包含三个类：SASwitchBar、SASwitchView、SASwitchCtrl，分别为标签栏、视图、控制器，前两个类为视图负责展示并监听事件，最后一个类负责事件处理与视图控制；

2、使用时只需要新建一个控制器并继承自SASwitchCtrl即可，然后设置SASwitchBar的items数组，再设置SASwitchView的视图数组，搞定！

3、示例：

    // 设置标签选项卡
    self.switchBar.items = @[@"蓝", @"橙", @"红"];
   
    // 创建三个切换演示视图
    UIView *blue = [[UIView alloc] init];
    blue.backgroundColor = [UIColor blueColor];
    UIView *orange = [[UIView alloc] init];
    orange.backgroundColor = [UIColor orangeColor];
    UIView *red = [[UIView alloc] init];
    red.backgroundColor = [UIColor redColor];
   
    // 添加演示视图
    self.switchView.views = @[blue, orange, red];

四、关键代码
1、SASwitchView.h

1. #import <UIKit/UIKit.h>
3. @interface SASwitchView : UIScrollView
5. @property (nonatomic, strong)  NSArray  *views;
7. @end

复制代码

2、SASwitchView.m

1. #import "SASwitchView.h"
3. @implementation SASwitchView
5. - (void)setViews:(NSArray *)views
6. {
7.     _views = views;
8.     CGFloat width = [[UIScreen mainScreen] bounds].size.width;
9.     // 在视图数组赋值时，同时整理各视图的布局，主要是x/y坐标，此时还不能确定视图大小
10.     for (int i = 0; i < self.views.count; i++){
11.         UIView *view = self.views[i];
12.         view.frame = (CGRect){width * i, 0, width, 0};
13.         [self addSubview:view];
14.     }
15.     self.contentSize = (CGSize){width * views.count, 0};
16. }
18. - (void)setFrame:(CGRect)frame
19. {
20.     [super setFrame:frame];
21.     // 外部给视图设置大小时，同时调整内部子视图，保持子视图与父控制大小一致
22.     for (UIView *view in self.subviews) {
23.         CGRect rect = view.frame;
24.         rect.size.height = frame.size.height;
25.         view.frame = rect;
26.     }
27. }
29. @end

复制代码

3、SASwitchCtrl.h

1. #import <UIKit/UIKit.h>
2. #import "SASwitchBar.h"
3. #import "SASwitchView.h"
5. @interface SASwitchCtrl : UIViewController
7. @property (strong, nonatomic)  SASwitchBar *switchBar;
9. @property (strong, nonatomic)  SASwitchView *switchView;
11. @end

复制代码

4、SASwitchCtrl.m

1. #define kSASwitchBarH 44
2. #import "SASwitchCtrl.h"
4. @interface SASwitchCtrl () <SASwitchBarDelegate, UIScrollViewDelegate>
6. @end
8. @implementation SASwitchCtrl
10. #pragma mark - 初始化方法
11. - (instancetype)init
12. {
13.     if (self = [super init]) {
14.         self.switchBar = [[SASwitchBar alloc] init];
15.         self.switchView = [[SASwitchView alloc] init];
16.         self.switchView.autoresizingMask = UIViewAutoresizingFlexibleBottomMargin;
17.         [self.view addSubview:self.switchBar];
18.         [self.view addSubview:self.switchView];
19.     }
20.     return self;
21. }
23. - (void)viewDidLoad
24. {
25.     [super viewDidLoad];
26.     self.edgesForExtendedLayout = UIRectEdgeNone;
27.     self.switchView.showsHorizontalScrollIndicator = NO;
28.     self.switchView.pagingEnabled = YES;
29.     self.switchBar.delegate = self;
30.     self.switchView.delegate = self;
31. }
33. - (void)viewWillAppear:(BOOL)animated
34. {
35.     [super viewWillAppear:animated];
36.     {
37.         CGFloat w = self.view.frame.size.width;
38.         CGFloat h = self.view.frame.size.height - kSASwitchBarH;
39.         self.switchBar.frame = (CGRect){0, 0, w, kSASwitchBarH};
40.         self.switchView.frame = (CGRect){0, kSASwitchBarH, w, h};
41.     }
42. }
44. #pragma mark - 代理方法
45. // 上部标签栏事件处理
46. - (void)switchBar:(SASwitchBar *)switchBar seletedIndex:(NSInteger)index
47. {
48.     // 标签点击第几个，scrollView的offset即跳转到第几屏，并以动画形式转场
49.     CGPoint offset = (CGPoint){self.view.frame.size.width * index, 0};
50.     [UIView animateWithDuration:0.3 animations:^{
51.         self.switchView.contentOffset = offset;
52.     }];
53. }
54. // scrollView代理方法
55. - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
56. {
57.     int page = scrollView.contentOffset.x / self.view.frame.size.width;
58.     self.switchBar.selectedIndex = page;
59. }
60. @end

复制代码

五、Demo下载：

游客，如果您要查看本帖隐藏内容请回复

喵了个咪

太实用了,真心非常感谢 .

活在梦里丶

下来看看了