【OC实用效果】顶部滑块的简单实现

前言：

• 最近研究了一下iOS中顶部滑块的简单实现
• 之前一直都是用第三方的，突然感觉应该自己写一个，就去网上研究了一下，现在把成果给大家分享一下。

具体效果如图：

首先说一下主要的几个代码段：

1. 主要控件的初始化:

UIScrollView *scrollView//滚动视图
UIView *alphaView//蒙版
UIView *theSubView//底层图层
UIView *theFrontView//顶层图层

2. 设置底层图层:

2.1加载底层图层主体部分

- (UIView *)theSubView {
// 添加前景色
UIView *backView         = [[UIView alloc] initWithFrame:CGRectMake(0, 50, self.view.frame.size.width, 70)];
backView.backgroundColor = [UIColor colorWithRed:0.922 green:0.922 blue:0.922 alpha:1];
[self.view addSubview:backView];
    return backView;
}

2.2添加左边的标题

// 标题1
UILabel *title1      = [[UILabel alloc] initWithFrame:CGRectMake(20, 0, 160, 70)];
title1.text          = @"偶然";
title1.textAlignment = NSTextAlignmentCenter;
title1.font          = [UIFont systemFontOfSize:20.f];
title1.textColor     = [UIColor colorWithRed:0.443 green:0.439 blue:0.439 alpha:1];
[backView addSubview:title1];

2.2添加左边的标题

// 标题1
UILabel *title1      = [[UILabel alloc] initWithFrame:CGRectMake(20, 0, 160, 70)];
title1.text          = @"偶然";
title1.textAlignment = NSTextAlignmentCenter;
title1.font          = [UIFont systemFontOfSize:20.f];
title1.textColor     = [UIColor colorWithRed:0.443 green:0.439 blue:0.439 alpha:1];
[backView addSubview:title1];

2.3添加右边的标题

 // 标题2
UILabel *title2      = [[UILabel alloc] initWithFrame:CGRectMake(210, 0, 160, 70)];
title2.text          = @"无心";
title2.textAlignment = NSTextAlignmentCenter;
title2.font          = [UIFont systemFontOfSize:20.f];
title2.textColor     = [UIColor colorWithRed:0.443 green:0.439 blue:0.439 alpha:1];
[backView addSubview:title2];

注意：

字体建议选居中显示，字体颜色和背景色尽量容易区分。

3. 设置顶层图层:

3.1加载顶层图层主体部分

- (UIView *)theFrontView {
// 添加前景色
UIView *backView         = [[UIView alloc] initWithFrame:CGRectMake(0, 50, self.view.frame.size.width, 70)];
backView.backgroundColor = [UIColor colorWithRed:0.808 green:0.208 blue:0.212 alpha:1];
[self.view addSubview:backView];
return backView;
}

注意：

顶层图层的背景颜色尽量和底层图层背景颜色有明显区分，方便使用者的辨认当前位置。

3.2-3.3左右标题的添加

左右标题和底层图层一样，除了字体颜色和backView颜色，略过

注意：

字体颜色和顶层图层背景色容易区分

重点：

4. 设置蒙版层:

self.alphaView                 = [[UIView alloc] initWithFrame:CGRectMake(0, 10, 190, 50)];
self.alphaView.backgroundColor = [UIColor blackColor];
self.alphaView.layer.cornerRadius = 15.f;
backView.maskView = self.alphaView;

注意：

将此图层设置为顶层的backView的maskView（蒙版）,可通过它的位置改变来控制显示顶层图层的内容范围。

5. 设置蒙版层和scrollView的移动关系:

这里我们把每次scrollView被拖动的x的偏移量坐标的相对距离给到顶层蒙版，使顶层蒙版发生对应的位置偏移，这样就显示出不同的顶层区域，而没有被覆盖的则显示底层区域。

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
CGRect rect          = self.alphaView.frame;
rect.origin.x        = scrollView.contentOffset.x / 2.f;
self.alphaView.frame = rect;
}

注意：

1.这里我们直接使用scrollView的拖拽方法，记得设置scrollView的代理为self,并在顶部遵守协议<UIScrollViewDelegate>！

2.图层的层次关系，如下如：

完整代码已上传到github，欢迎下载
https://github.com/ouranou/Topslider