年年有"余"

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 3542|回复: 2

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

[复制链接]
  • TA的每日心情
    奋斗
    2022-12-13 21:26
  • 签到天数: 371 天

    [LV.9]以坛为家II

    发表于 2014-12-19 09:54:39 | 显示全部楼层 |阅读模式
    一、先上效果图,看了自然就明白
    2014-12-19 09_14_05.gif

    二、设计思路

    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>
    2. @interface SASwitchView : UIScrollView
    3. @property (nonatomic, strong)  NSArray  *views;
    4. @end
    复制代码
    2、SASwitchView.m
    1. #import "SASwitchView.h"
    2. @implementation SASwitchView
    3. - (void)setViews:(NSArray *)views
    4. {
    5.     _views = views;
    6.     CGFloat width = [[UIScreen mainScreen] bounds].size.width;
    7.     // 在视图数组赋值时,同时整理各视图的布局,主要是x/y坐标,此时还不能确定视图大小
    8.     for (int i = 0; i < self.views.count; i++){
    9.         UIView *view = self.views[i];
    10.         view.frame = (CGRect){width * i, 0, width, 0};
    11.         [self addSubview:view];
    12.     }
    13.     self.contentSize = (CGSize){width * views.count, 0};
    14. }
    15. - (void)setFrame:(CGRect)frame
    16. {
    17.     [super setFrame:frame];
    18.     // 外部给视图设置大小时,同时调整内部子视图,保持子视图与父控制大小一致
    19.     for (UIView *view in self.subviews) {
    20.         CGRect rect = view.frame;
    21.         rect.size.height = frame.size.height;
    22.         view.frame = rect;
    23.     }
    24. }
    25. @end
    复制代码
    3、SASwitchCtrl.h
    1. #import <UIKit/UIKit.h>
    2. #import "SASwitchBar.h"
    3. #import "SASwitchView.h"
    4. @interface SASwitchCtrl : UIViewController
    5. @property (strong, nonatomic)  SASwitchBar *switchBar;
    6. @property (strong, nonatomic)  SASwitchView *switchView;
    7. @end
    复制代码
    4、SASwitchCtrl.m
    1. #define kSASwitchBarH 44
    2. #import "SASwitchCtrl.h"
    3. @interface SASwitchCtrl () <SASwitchBarDelegate, UIScrollViewDelegate>
    4. @end
    5. @implementation SASwitchCtrl
    6. #pragma mark - 初始化方法
    7. - (instancetype)init
    8. {
    9.     if (self = [super init]) {
    10.         self.switchBar = [[SASwitchBar alloc] init];
    11.         self.switchView = [[SASwitchView alloc] init];
    12.         self.switchView.autoresizingMask = UIViewAutoresizingFlexibleBottomMargin;
    13.         [self.view addSubview:self.switchBar];
    14.         [self.view addSubview:self.switchView];
    15.     }
    16.     return self;
    17. }
    18. - (void)viewDidLoad
    19. {
    20.     [super viewDidLoad];
    21.     self.edgesForExtendedLayout = UIRectEdgeNone;
    22.     self.switchView.showsHorizontalScrollIndicator = NO;
    23.     self.switchView.pagingEnabled = YES;
    24.     self.switchBar.delegate = self;
    25.     self.switchView.delegate = self;
    26. }
    27. - (void)viewWillAppear:(BOOL)animated
    28. {
    29.     [super viewWillAppear:animated];
    30.     {
    31.         CGFloat w = self.view.frame.size.width;
    32.         CGFloat h = self.view.frame.size.height - kSASwitchBarH;
    33.         self.switchBar.frame = (CGRect){0, 0, w, kSASwitchBarH};
    34.         self.switchView.frame = (CGRect){0, kSASwitchBarH, w, h};
    35.     }
    36. }
    37. #pragma mark - 代理方法
    38. // 上部标签栏事件处理
    39. - (void)switchBar:(SASwitchBar *)switchBar seletedIndex:(NSInteger)index
    40. {
    41.     // 标签点击第几个,scrollView的offset即跳转到第几屏,并以动画形式转场
    42.     CGPoint offset = (CGPoint){self.view.frame.size.width * index, 0};
    43.     [UIView animateWithDuration:0.3 animations:^{
    44.         self.switchView.contentOffset = offset;
    45.     }];
    46. }
    47. // scrollView代理方法
    48. - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
    49. {
    50.     int page = scrollView.contentOffset.x / self.view.frame.size.width;
    51.     self.switchBar.selectedIndex = page;
    52. }
    53. @end
    复制代码
    五、Demo下载:
    游客,如果您要查看本帖隐藏内容请回复
  • TA的每日心情
    恶心
    2015-11-23 14:20
  • 签到天数: 92 天

    [LV.6]常住居民II

    发表于 2015-2-12 11:22:56 | 显示全部楼层
    太实用了,真心非常感谢 .
  • TA的每日心情
    犯困
    2015-1-11 14:36
  • 签到天数: 5 天

    [LV.2]偶尔看看I

    发表于 2015-6-26 16:08:32 | 显示全部楼层
    下来看看了
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    手机版|小黑屋|Archiver|iOS开发笔记 ( 湘ICP备14010846号 )

    GMT+8, 2024-3-19 17:20 , Processed in 0.051855 second(s), 25 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表