{"id":27372676,"url":"https://github.com/hatsunemikuv/shsegmentedcontroltableview","last_synced_at":"2025-04-13T10:14:50.692Z","repository":{"id":62453739,"uuid":"107664934","full_name":"HatsuneMikuV/SHSegmentedControlTableView","owner":"HatsuneMikuV","description":"Both scroll horizontal and vertical for segment scrollview which have a same header. — 类似半糖、美丽说主页与QQ音乐歌曲列表布局效果，实现不同菜单的左右滑动切换，同时支持类似tableview的顶部工具栏悬停（既可以左右滑动，又可以上下滑动）。兼容下拉刷新，上拉加载更多。现已加入swift豪华套餐，使用样例助你快速使用","archived":false,"fork":false,"pushed_at":"2020-04-15T09:05:50.000Z","size":19837,"stargazers_count":282,"open_issues_count":3,"forks_count":50,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-04-13T10:14:43.702Z","etag":null,"topics":["collectionview","qq-tableview","segment-scrollview","segmentcontrol","swift","tableview"],"latest_commit_sha":null,"homepage":"","language":"Objective-C","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/HatsuneMikuV.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-10-20T10:27:10.000Z","updated_at":"2024-11-21T21:28:41.000Z","dependencies_parsed_at":"2022-11-02T00:01:17.227Z","dependency_job_id":null,"html_url":"https://github.com/HatsuneMikuV/SHSegmentedControlTableView","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HatsuneMikuV%2FSHSegmentedControlTableView","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HatsuneMikuV%2FSHSegmentedControlTableView/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HatsuneMikuV%2FSHSegmentedControlTableView/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HatsuneMikuV%2FSHSegmentedControlTableView/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HatsuneMikuV","download_url":"https://codeload.github.com/HatsuneMikuV/SHSegmentedControlTableView/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248695482,"owners_count":21146956,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["collectionview","qq-tableview","segment-scrollview","segmentcontrol","swift","tableview"],"created_at":"2025-04-13T10:14:49.888Z","updated_at":"2025-04-13T10:14:50.686Z","avatar_url":"https://github.com/HatsuneMikuV.png","language":"Objective-C","funding_links":[],"categories":[],"sub_categories":[],"readme":"![LOGO](https://github.com/HatsuneMikuV/SHSegmentedControlTableView/blob/master/logo.png)\n\n[![CocoaPods](https://img.shields.io/badge/pod-v1.2.0-cyan.svg)](https://github.com/HatsuneMikuV/SHSegmentedControlTableView/tree/1.2.0)\n![Platforms](https://img.shields.io/badge/platforms-iOS-orange.svg)\n[![License](https://img.shields.io/badge/license-MIT-green.svg)](https://github.com/HatsuneMikuV/SHSegmentedControlTableView/blob/master/LICENSE)\n[![QQ](https://img.shields.io/badge/QQ-@HatsuneMiku-blue.svg)](https://github.com/HatsuneMikuV/SHSegmentedControlTableView/blob/master/README.md#qq-479069761)\n\n\nBoth scroll horizontal and vertical for segment scrollview which have a same header. — 类似半糖、美丽说主页与QQ音乐歌曲列表布局效果，实现不同菜单的左右滑动切换，同时支持类似tableview的顶部工具栏悬停（既可以左右滑动，又可以上下滑动）。兼容下拉刷新，上拉加载更多。 支持swift的使用此库，具体方式请看demo，如果有什么问题请戳邮箱或者qq。\n\n## 预览↓↓↓\n\n![](https://github.com/HatsuneMikuV/SHSegmentedControlTableView/blob/master/snow.gif)\n\n# 使用 Cocoapods 导入\nSHSegmentedControl is available on [CocoaPods](http://cocoapods.org).  Add the following to your Podfile:\n\n```ruby\npod 'SHSegmentedControl'\n```\n\n# 目录\n1. [更新内容](https://github.com/HatsuneMikuV/SHSegmentedControlTableView/blob/master/README.md#更新内容)\n2. [实现原理](https://github.com/HatsuneMikuV/SHSegmentedControlTableView/blob/master/README.md#实现的原理)\n3. [基本用法](https://github.com/HatsuneMikuV/SHSegmentedControlTableView/blob/master/README.md#基本用法)\n4. [下拉刷新](https://github.com/HatsuneMikuV/SHSegmentedControlTableView/blob/master/README.md#刷新)\n5. [混合模式](https://github.com/HatsuneMikuV/SHSegmentedControlTableView/blob/master/README.md#混合模式)\n6. [示例代码](https://github.com/HatsuneMikuV/SHSegmentedControlTableView/blob/master/README.md#示例代码)\n7. [Demo介绍](https://github.com/HatsuneMikuV/SHSegmentedControlTableView/blob/master/README.md#使用的详细用法示例)\n\n\n## 更新内容\n### 2020.04.15 pod v1.3.4  修复不同尺寸手机动态获取\n#### 在这里感谢[@welljobs](https://github.com/welljobs)的指正\n\n### 2019.10.30 pod v1.3.3  修复属性问题， 拓展修改防止重复冲突\n#### 在这里感谢[@200895045](https://github.com/200895045)的指正\n\n### 2019.09.25 新增demo(pod v1.3.2), 修复CollectionView作为item，内容小于bounds而不能滑动问题\n#### 在这里感谢[@fangdafei](https://github.com/fangdafei)的指正\n\n### 2019.06.21新增demo(应[@DongfengWang123](https://github.com/DongfengWang123)的要求，增加带toolbar效果)↓↓↓\n![](https://github.com/HatsuneMikuV/SHSegmentedControlTableView/blob/master/toolsbar.gif)\n\n### 2019.05.16 更新分栏(pod v1.3.0)\n\u003e1.增加分栏样式枚举\n\n\u003e2.开放分栏item宽度自定义\n\n\u003e3.修改分栏图层关系，允许左右回弹效果\n\n\u003e4.新增分栏放大比例属性\n\n### 2018.10.17增加导航栏样式判断，将修改移到内部(pod v1.2.1)\n\n### 2018.07.13新增demo(导航栏透明度切换，并保持bar在导航栏下面)↓↓↓\n![](https://github.com/HatsuneMikuV/SHSegmentedControlTableView/blob/master/navgationbaralpha.gif)\n\n### 2018.07.12新增demo(pod v1.2.0)，修复iPhone X上导致的高度不对问题，暴露SHSegmentedControl的底部线的属性以便自定义↓↓↓\n#### 在这里感谢[@yanglijunwang](https://github.com/yanglijunwang)的指正\n![](https://github.com/HatsuneMikuV/SHSegmentedControlTableView/blob/master/SHSegmentedControl_fixbug_02.gif)\n\n### 2018.05.24新增demo(pod v1.1.9)，修复SHSegmentedControl内容超屏，不能自动滑动问题↓↓↓\n#### 在这里感谢[@windkisshao](https://github.com/windkisshao)的指正\n![](https://github.com/HatsuneMikuV/SHSegmentedControlTableView/blob/master/SHSegmentedControl_fixbug.gif)\n\n### 2018.05.22新增demo(pod v1.1.8)，使用控制器的tableview作为内容视图↓↓↓\n![](https://github.com/HatsuneMikuV/SHSegmentedControlTableView/blob/master/ChildVC.gif)\n\n### 2018.04.09新增demo(pod v1.1.7)，头部下拉放大↓↓↓\n![](https://github.com/HatsuneMikuV/SHSegmentedControlTableView/blob/master/headerScale.gif)\n\n### 2018.04.02新增demo(pod v1.1.5)，bar放在头部上，滑动悬停↓↓↓\n![](https://github.com/HatsuneMikuV/SHSegmentedControlTableView/blob/master/header_bar_stop.gif)\n\n\n## 实现的原理\n\u003e为了兼容下拉刷新，采用了UITableView作为容器的实现方式\n\n### Mode\n\n![Mode](https://github.com/HatsuneMikuV/SHSegmentedControlTableView/blob/master/model.png)\n\n1. 使用`UITableView `作为容器，内容视图作为`Cell `，实现上下滑动滑动的功能。\n\n2. 使用`UICollectionView`作为item的载体，实现左右滑动的功能。\n\n3. 因为使用了`UITableView `作为容器，`Cell `上下滑动的时候，item之间的顶部对齐问题就迎刃而解。\n\n4. `topView（header）`作为`UITableView `的`tableViewHeaderView `，`barView `作为`UITableView `的` sectionHeader`，这样就解决了item之间共享同一个header \u0026 bar，也解决header \u0026 bar跟随item滚动问题，也要具有ScrollView的弹性效果。\n\n5. `footView（bottom）` 作为`UITableView `的` sectionFooter`，目的是为了作为扩展，用于可能需要的底部视图做一些操作。\n\n\n\n## 基本用法\n\n\n**如普通的UIView那样初始化即可**\n\n```objc\n[[SHSegmentedControlTableView alloc] initWithFrame:frame]    \n```\n\u003e初始化一个SHSegmentedControlTableView的容器视图对象\n\n\n**实现其代理方法** \n\n```\n- (void)segTableViewDidScrollY:(CGFloat)offsetY;\n``` \n\u003e offsetY用于告知上下滑动的contentOffset.y的变化\n\n```\n- (void)segTableViewDidScroll:(UIScrollView *)tableView;\n``` \n\u003e tableView 为容器`UITableView `本身\n\n\n```\n- (void)segTableViewDidScrollSub:(UIScrollView *)subTableView;\n``` \n\u003e subTableView 为item\n\n\n```\n- (void)segTableViewDidScrollProgress:(CGFloat)progress originalIndex:(NSInteger)originalIndex targetIndex:(NSInteger)targetIndex;\n```    \n\u003e progress为滑动的进度，originalIndex为前一个item下标，targetIndex滑动到新的item下标，originalIndex是有可能等于targetIndex，需要切换分栏时，判断targetIndex即可。\n\n\n**可使用的`SHSegmentControl`作为`barView`**\n\n```\n[[SHSegmentControl alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, 45) items:@[@\"分栏一\",@\"分栏二\",@\"分栏三\"]]\n```\n\u003e初始化一个SHSegmentControl的分栏视图对象\n\n\n```\nSHSegmentControl.curClick = ^(NSInteger index) {\n    [weakSelf.segTableView setSegmentSelectIndex:index]\n    //index用于切换item\n};\n```\n\u003e实现SHSegmentControl分栏视图的Block用于切换item\n\n\n#### `备注`\n当然`topView`、`barView`、`footView`也都是是可以使用自定义视图，只要是`UIView`的子类即可，同样支持xib的View。\n\n\n## 刷新\n\n**支持 下拉刷新 和 上拉加载**\n\n\n**下拉刷新，需要配合`MJRefresh`来使用**\n\n```\n__weak __typeof(\u0026*self)weakSelf = self;\nMJRefreshNormalHeader *refreshAllHeader = [MJRefreshNormalHeader headerWithRefreshingBlock:^{\n    //do somthing\n    //weakSelf.segTableView.selectedIndex\n}];\n[self.segTableView setRefreshHeader:refreshAllHeader];\n```\n\u003e设置一个`MJRefresh`下拉刷新\n\u003e配合selectedIndex使用可刷新单一item的数据\n\n\n**上拉加载，自定义的item来处理**\n\u003e给单独的item设置一个`MJRefresh`上拉加载即可实现\n\n**如果想要更好的扩展性，以及喜欢自己研究的同学，可以尝试修改代码或者自定义下拉控件来解决下拉刷新的兼容问题，同时这里提供一些思路：**\n\n因为容器是`UITableView `，而且是作为属性公开的，\n\n```\n/** 主容器 */\n@property (nonatomic, strong) SHMAINTableView *tableView;\n```\n因此，就像对待`UITableView `一样处理容器的刷新问题即可。\n\n\n## 混合模式\n\n在`UICollectionView `作为item载体的情况下，可扩展支持`UITableView`、`UICollectionView`视图。暂时还不支持、`UIScrollView`、或者自定义视图作为item。下个版本将支持`UIScrollView`。后续会支持`UIView`子类，可无限拓展。\n\n\n## 示例代码\n\n### 初始化并设置topView、barView、footView\n```\n_segTableView = [[SHSegmentedControlTableView alloc] initWithFrame:self.view.bounds];\n_segTableView.delegateCell = self;\n[_segTableView setTopView:self.headerView];\n[_segTableView setBarView:self.segmentControl];\n[_segTableView setBarView:self.footerView];\n```\n\n### 实现代理：\n```\n#pragma mark -\n#pragma mark   ==============SHSegTableViewDelegate==============\n- (void)segTableViewDidScrollY:(CGFloat)offsetY {\n\n}\n- (void)segTableViewDidScroll:(UIScrollView *)tableView {\n\n}\n- (void)segTableViewDidScrollSub:(UIScrollView *)subTableView {\n\n}\n- (void)segTableViewDidScrollProgress:(CGFloat)progress originalIndex:(NSInteger)originalIndex targetIndex:(NSInteger)targetIndex {\n    if (progress == 1) {\n        [self.segmentControl setSegmentSelectedIndex:targetIndex];\n    }\n}\n```\n\n### `SHSegmentControl`使用方法：\n\n**支持的属性的属性设置**\n\n```\ntypedef enum : NSUInteger {\n    /** 默认状态 */\n    SHSegmentControlTypeNone,\n    /** 涌入放大效果 */\n    SHSegmentControlTypeWater,\n    /** 右上角小标题 */\n    SHSegmentControlTypeSubTitle,\n    /** 涌入放大效果+右上角小标题 */\n    SHSegmentControlTypeWaterSubTitle,\n} SHSegmentControlType;\n\ntypedef enum : NSUInteger {\n    /** 默认状态 平均分布 呈分散状*/\n    SHSegmentControlStyleScatter,\n    /** 紧靠屏幕左侧 */\n    SHSegmentControlStyleLeft,\n    /** 紧挨且居中分布 */\n    SHSegmentControlStyleCenter,\n    /** 紧靠屏幕右侧 */\n    SHSegmentControlStyleRight,\n} SHSegmentControlStyle;\n\n\n@interface SHSegmentControl : UIScrollView\n/** 间距 */\n@property (nonatomic, assign) CGFloat titleMargin;\n/** 默认字体大小 (默认15) */\n@property (nonatomic, assign) UIFont  * _Nonnull titleNormalFont;\n/** 选中字体大小 (默认15) */\n@property (nonatomic, assign) UIFont  * _Nonnull titleSelectFont;\n/** 小标题字体大小 */\n@property (nonatomic, assign) UIFont  * _Nonnull subTitleFont;\n/** 标题偏移量 */\n@property (nonatomic, assign) CGFloat offsetX;\n/** 字体默认颜色 */\n@property (nonatomic, strong) UIColor * _Nonnull titleNormalColor;\n/** 小标题默认字体颜色 */\n@property (nonatomic, strong) UIColor * _Nonnull subTitleNormalColor;\n/** 字体选中颜色 */\n@property (nonatomic, strong) UIColor * _Nonnull titleSelectColor;\n/** 小标题选中字体颜色 */\n@property (nonatomic, strong) UIColor * _Nonnull subTitleSelectColor;\n/** 指示器圆角 */\n@property (nonatomic, assign) CGFloat progressCornerRadius;\n/** 指示器高度（粗细） */\n@property (nonatomic, assign) CGFloat progressHeight;\n/** 指示器宽度（默认 title宽） */\n@property (nonatomic, assign) CGFloat progressWidth;\n/** 指示器底部距离（默认0） */\n@property (nonatomic, assign) CGFloat progressBottom;\n/** 指示器颜色 */\n@property (nonatomic, strong) UIColor * _Nonnull progressColor;\n/** 下底线颜色 */\n@property (nonatomic, strong) UIColor * _Nonnull bottomLineColor;\n/** 下底线高度（粗细） 默认0.5f) */\n@property (nonatomic, assign) CGFloat bottomLineHeight;\n/** 分栏类型 默认SHSegmentControlTypeNone */\n@property (nonatomic, assign) SHSegmentControlType type;\n/** 分栏分布类型 默认SHSegmentControlStyleScatter */\n@property (nonatomic, assign) SHSegmentControlStyle style;\n/** 每个 MenuItem 的宽度 */\n@property (nonatomic, assign) CGFloat menuItemWidth;\n/** 各个 MenuItem 的宽度，可不等，数组内为 NSNumber. */\n@property (nonatomic, nullable, copy) NSArray\u003cNSNumber *\u003e *itemsWidths;\n/** 放大效果的比例  默认1.2*/\n@property (nonatomic, assign) CGFloat itemScale;\n\n/** 获取当前下标 */\n@property (nonatomic, assign, readonly) NSInteger selectIndex;\n/** 分栏总数 */\n@property (nonatomic, assign) NSInteger totalCount;\n\n/** 背景颜色 */\n@property (nonatomic, strong) UIColor * _Nonnull backgroundNormalColor;\n/** 选中状态背景颜色 */\n@property (nonatomic, strong) UIColor * _Nonnull backgroundSelectColor;\n```\n\n**初始化**\n\n\n```\n_segmentControl = [[SHSegmentControl alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, 45) items:@[@\"分栏一\",@\"分栏二\",@\"分栏三\"]];\n_segmentControl.titleSelectColor = [UIColor redColor];\n_segmentControl.type = SHSegmentControlTypeWater;\n[_segmentControl reloadViews];\n[_segmentControl setSegmentSelectedIndex:0];\n__weak __typeof(\u0026*self)weakSelf = self;\n\n_segmentControl.curClick = ^(NSInteger index) {\n    //切换item\n    [weakSelf.segTableView setSegmentSelectIndex:index];\n};\n```\n\n\n## Demo 介绍\n### 使用的详细用法示例：\n\n- 默认样式\n- 涌入放大\n- 右上角小标题\n- 涌入放大+右上角小标题\n- 导航栏透明\n- 无头部\n- 无bar\n- CollectionView\n- tableView+collectionView\n- 下拉刷新全部\n- 下拉刷新当前选中\n- 独立上拉加载\n- 头部固定-scrollView容器\n- bar放在头部上，滑动悬停\n- 下拉头部放大\n- 使用ChildVC的处理方式\n- 分栏内容超屏显示\n- 分栏bar底部线属性暴露可设置\n- 导航栏透明度切换，并保持bar在导航栏下面\n\n\n\n**示例代码新增和样式可点击图片查看，Demo中提支持刷新控件`MJRefresh `，支持约束库`Masonry `，以及部分扩展`SHExtension `，供参考**\n\n**Demo的示例可能并不满足你当前的需求，请不用担心，联系下面的QQ，会尽可能的满足，感谢你的支持**\n\n\n\n## QQ 479069761\n\n##### 欢迎大家补充添加，有问题请联系企鹅号\n##### 想获取更多组件，让你的开发更轻松，那赶快加入组件群746954046\n\n## License\n\nSHSegmentedControl is released under the MIT license. See [LICENSE](https://github.com/HatsuneMikuV/SHSegmentedControlTableView/blob/master/LICENSE) for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhatsunemikuv%2Fshsegmentedcontroltableview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhatsunemikuv%2Fshsegmentedcontroltableview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhatsunemikuv%2Fshsegmentedcontroltableview/lists"}