菜单分栏TableView/CollectionView/ScrollView

Both scroll horizontal and vertical for segment scrollview which have a same header. — 类似半糖、美丽说主页与QQ音乐歌曲列表布局效果,实现不同菜单的左右滑动切换,同时支持类似tableview的顶部工具栏悬停(既可以左右滑动,又可以上下滑动)。兼容下拉刷新,上拉加载更多。 支持swift的使用此库,具体方式请看demo,如果有什么问题请戳邮箱或者qq。

预览↓↓↓

使用 Cocoapods 导入

SHSegmentedControl is available on CocoaPods. Add the following to your Podfile:


pod 'SHSegmentedControl'

目录

  1. 更新内容

  2. 实现原理

  3. 基本用法

  4. 下拉刷新

  5. 混合模式

  6. 示例代码

  7. Demo介绍

更新内容

2018.10.17增加导航栏样式判断,将修改移到内部(pod v1.2.1)

2018.07.13新增demo(导航栏透明度切换,并保持bar在导航栏下面)↓↓↓

2018.07.12新增demo(pod v1.2.0),修复iPhone X上导致的高度不对问题,暴露SHSegmentedControl的底部线的属性以便自定义↓↓↓

在这里感谢@yanglijunwang的指正

2018.05.24新增demo(pod v1.1.9),修复SHSegmentedControl内容超屏,不能自动滑动问题↓↓↓

在这里感谢@windkisshao的指正

2018.05.22新增demo(pod v1.1.8),使用控制器的tableview作为内容视图↓↓↓

2018.04.09新增demo(pod v1.1.7),头部下拉放大↓↓↓

2018.04.02新增demo(pod v1.1.5),bar放在头部上,滑动悬停↓↓↓

实现的原理

为了兼容下拉刷新,采用了UITableView作为容器的实现方式

Mode

model.png
  1. 使用UITableView作为容器,内容视图作为Cell,实现上下滑动滑动的功能。

  2. 使用UICollectionView作为item的载体,实现左右滑动的功能。

  3. 因为使用了UITableView作为容器,Cell上下滑动的时候,item之间的顶部对齐问题就迎刃而解。

  4. topView(header)作为UITableViewtableViewHeaderViewbarView作为UITableViewsectionHeader,这样就解决了item之间共享同一个header & bar,也解决header & bar跟随item滚动问题,也要具有ScrollView的弹性效果。

  5. footView(bottom) 作为UITableViewsectionFooter,目的是为了作为扩展,用于可能需要的底部视图做一些操作。

基本用法

如普通的UIView那样初始化即可


[[SHSegmentedControlTableView alloc] initWithFrame:frame]   

初始化一个SHSegmentedControlTableView的容器视图对象

实现其代理方法


- (void)segTableViewDidScrollY:(CGFloat)offsetY;

offsetY用于告知上下滑动的contentOffset.y的变化


- (void)segTableViewDidScroll:(UIScrollView *)tableView;

tableView 为容器UITableView本身


- (void)segTableViewDidScrollSub:(UIScrollView *)subTableView;

subTableView 为item


- (void)segTableViewDidScrollProgress:(CGFloat)progress originalIndex:(NSInteger)originalIndex targetIndex:(NSInteger)targetIndex;

progress为滑动的进度,originalIndex为前一个item下标,targetIndex滑动到新的item下标,originalIndex是有可能等于targetIndex,需要切换分栏时,判断targetIndex即可。

可使用的SHSegmentControl作为barView


[[SHSegmentControl alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, 45) items:@[@"分栏一",@"分栏二",@"分栏三"]]

初始化一个SHSegmentControl的分栏视图对象


SHSegmentControl.curClick = ^(NSInteger index) {

    [weakSelf.segTableView setSegmentSelectIndex:index]

    //index用于切换item

};

实现SHSegmentControl分栏视图的Block用于切换item

备注

当然topViewbarViewfootView也都是是可以使用自定义视图,只要是UIView的子类即可,同样支持xib的View。

刷新

支持 下拉刷新 和 上拉加载

下拉刷新,需要配合MJRefresh来使用


__weak __typeof(&*self)weakSelf = self;

MJRefreshNormalHeader *refreshAllHeader = [MJRefreshNormalHeader headerWithRefreshingBlock:^{

    //do somthing

    //weakSelf.segTableView.selectedIndex

}];

[self.segTableView setRefreshHeader:refreshAllHeader];

设置一个MJRefresh下拉刷新

配合selectedIndex使用可刷新单一item的数据

上拉加载,自定义的item来处理

给单独的item设置一个MJRefresh上拉加载即可实现

如果想要更好的扩展性,以及喜欢自己研究的同学,可以尝试修改代码或者自定义下拉控件来解决下拉刷新的兼容问题,同时这里提供一些思路:

因为容器是UITableView,而且是作为属性公开的,


/** 主容器 */

@property (nonatomic, strong) SHMAINTableView *tableView;

因此,就像对待UITableView一样处理容器的刷新问题即可。

混合模式

UICollectionView作为item载体的情况下,可扩展支持UITableViewUICollectionView视图。暂时还不支持、UIScrollView、或者自定义视图作为item。下个版本将支持UIScrollView。后续会支持UIView子类,可无限拓展。

示例代码

初始化并设置topView、barView、footView


_segTableView = [[SHSegmentedControlTableView alloc] initWithFrame:self.view.bounds];

_segTableView.delegateCell = self;

[_segTableView setTopView:self.headerView];

[_segTableView setBarView:self.segmentControl];

[_segTableView setBarView:self.footerView];

实现代理:


#pragma mark -

#pragma mark  ==============SHSegTableViewDelegate==============

- (void)segTableViewDidScrollY:(CGFloat)offsetY {

}

- (void)segTableViewDidScroll:(UIScrollView *)tableView {

}

- (void)segTableViewDidScrollSub:(UIScrollView *)subTableView {

}

- (void)segTableViewDidScrollProgress:(CGFloat)progress originalIndex:(NSInteger)originalIndex targetIndex:(NSInteger)targetIndex {

    if (progress == 1) {

        [self.segmentControl setSegmentSelectedIndex:targetIndex];

    }

}

SHSegmentControl使用方法:

支持的属性的属性设置


typedef enum : NSUInteger {

    /** 默认状态 */

    SHSegmentControlTypeNone,

    /** 涌入放大效果 */

    SHSegmentControlTypeWater,

    /** 右上角小标题 */

    SHSegmentControlTypeSubTitle,

    /** 涌入放大效果+右上角小标题 */

    SHSegmentControlTypeWaterSubTitle,

} SHSegmentControlType;

@interface SHSegmentControl : UIScrollView

/** 间距 */

@property (nonatomic, assign) CGFloat titleMargin;

/** 默认字体大小 (默认15) */

@property (nonatomic, assign) UIFont  *titleNormalFont;

/** 选中字体大小 (默认15) */

@property (nonatomic, assign) UIFont  *titleSelectFont;

/** 小标题字体大小 */

@property (nonatomic, assign) UIFont  *subTitleFont;

/** 字体默认颜色 */

@property (nonatomic, strong) UIColor *titleNormalColor;

/** 小标题默认字体颜色 */

@property (nonatomic, strong) UIColor *subTitleNormalColor;

/** 字体选中颜色 */

@property (nonatomic, strong) UIColor *titleSelectColor;

/** 小标题选中字体颜色 */

@property (nonatomic, strong) UIColor *subTitleSelectColor;

/** 指示器圆角 */

@property (nonatomic, assign) CGFloat progressCornerRadius;

/** 指示器高度 */

@property (nonatomic, assign) CGFloat progressHeight;

/** 指示器宽度(默认 title宽) */

@property (nonatomic, assign) CGFloat progressWidth;

/** 指示器颜色 */

@property (nonatomic, strong) UIColor *progressColor;

/** 下底线颜色 */

@property (nonatomic, strong) UIColor *bottomLineColor;

/** 下底线高度(粗细) 默认1.f) */

@property (nonatomic, assign) CGFloat bottomLineHeight;

/** 分栏类型 */

@property (nonatomic, assign) SHSegmentControlType type;

初始化


_segmentControl = [[SHSegmentControl alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, 45) items:@[@"分栏一",@"分栏二",@"分栏三"]];

_segmentControl.titleSelectColor = [UIColor redColor];

_segmentControl.type = SHSegmentControlTypeWater;

[_segmentControl reloadViews];

[_segmentControl setSegmentSelectedIndex:0];

__weak __typeof(&*self)weakSelf = self;

_segmentControl.curClick = ^(NSInteger index) {

    //切换item

    [weakSelf.segTableView setSegmentSelectIndex:index];

};

Demo 介绍

使用的详细用法示例:

  • 默认样式

  • 涌入放大

  • 右上角小标题

  • 涌入放大+右上角小标题

  • 导航栏透明

  • 无头部

  • 无bar

  • CollectionView

  • tableView+collectionView

  • 下拉刷新全部

  • 下拉刷新当前选中

  • 独立上拉加载

  • 头部固定-scrollView容器

  • bar放在头部上,滑动悬停

  • 下拉头部放大

  • 使用ChildVC的处理方式

  • 分栏内容超屏显示

  • 分栏bar底部线属性暴露可设置

  • 导航栏透明度切换,并保持bar在导航栏下面

示例代码新增和样式可点击图片查看,Demo中提支持刷新控件MJRefresh,支持约束库Masonry,以及部分扩展SHExtension,供参考

Demo的示例可能并不满足你当前的需求,请不用担心,联系下面的QQ,会尽可能的满足,感谢你的支持

QQ 479069761

欢迎大家补充添加,有问题请联系企鹅号
想获取更多组件,让你的开发更轻松,那赶快加入组件群746954046
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,639评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,277评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,221评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,474评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,570评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,816评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,957评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,718评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,176评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,511评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,646评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,322评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,934评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,755评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,987评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,358评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,514评论 2 348