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

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


二、设计思路

1、如何实现类似功能或效果呢，首先顶部标签切换效果在前面已有专门的贴子做了详细说明，参考http://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>
   
2. 
   
3. @interface SASwitchView : UIScrollView
   
4. 
   
5. @property (nonatomic, strong)  NSArray  *views;
   
6. 
   
7. @end

复制代码

2、SASwitchView.m

1. #import "SASwitchView.h"
   
2. 
   
3. @implementation SASwitchView
   
4. 
   
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. }
    
17. 
    
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. }
    
28. 
    
29. @end

复制代码

3、SASwitchCtrl.h

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

复制代码

4、SASwitchCtrl.m

1. #define kSASwitchBarH 44
   
2. #import "SASwitchCtrl.h"
   
3. 
   
4. @interface SASwitchCtrl () <SASwitchBarDelegate, UIScrollViewDelegate>
   
5. 
   
6. @end
   
7. 
   
8. @implementation SASwitchCtrl
   
9. 
   
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. }
    
22. 
    
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. }
    
32. 
    
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. }
    
43. 
    
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下载：

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