swift/objective-C>> SHSegmentedControlTableView>> 返回
项目作者： HatsuneMikuV

项目描述 ：
Both scroll horizontal and vertical for segment scrollview which have a same header. — 类似半糖、美丽说主页与QQ音乐歌曲列表布局效果，实现不同菜单的左右滑动切换，同时支持类似tableview的顶部工具栏悬停（既可以左右滑动，又可以上下滑动）。兼容下拉刷新，上拉加载更多。现已加入swift豪华套餐，使用样例助你快速使用
高级语言： Objective-C
项目地址: git://github.com/HatsuneMikuV/SHSegmentedControlTableView.git


LOGO

CocoaPods
Platforms
License
QQ

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:

  1. pod 'SHSegmentedControl'

目录

  1. 更新内容
  2. 实现原理
  3. 基本用法
  4. 下拉刷新
  5. 混合模式
  6. 示例代码
  7. Demo介绍

更新内容

2020.04.15 pod v1.3.4 修复不同尺寸手机动态获取

在这里感谢@welljobs的指正

2019.10.30 pod v1.3.3 修复属性问题， 拓展修改防止重复冲突

在这里感谢@200895045的指正

2019.09.25 新增demo(pod v1.3.2), 修复CollectionView作为item，内容小于bounds而不能滑动问题

在这里感谢@fangdafei的指正

2019.06.21新增demo(应@DongfengWang123的要求，增加带toolbar效果)↓↓↓

2019.05.16 更新分栏(pod v1.3.0)

1.增加分栏样式枚举

2.开放分栏item宽度自定义

3.修改分栏图层关系，允许左右回弹效果

4.新增分栏放大比例属性

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

Mode

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

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

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

  4. topView（header）作为UITableView的tableViewHeaderView，barView作为UITableView的sectionHeader，这样就解决了item之间共享同一个header & bar，也解决header & bar跟随item滚动问题，也要具有ScrollView的弹性效果。

  5. footView（bottom） 作为UITableView的sectionFooter，目的是为了作为扩展，用于可能需要的底部视图做一些操作。

基本用法

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

  1. [[SHSegmentedControlTableView alloc] initWithFrame:frame]

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

实现其代理方法 

  1. - (void)segTableViewDidScrollY:(CGFloat)offsetY;

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

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

tableView 为容器UITableView本身

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

subTableView 为item

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

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

可使用的SHSegmentControl作为barView

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

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

  1. SHSegmentControl.curClick = ^(NSInteger index) {
  2.     [weakSelf.segTableView setSegmentSelectIndex:index]
  3.     //index用于切换item
  4. };

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

备注

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

刷新

支持 下拉刷新 和 上拉加载

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

  1. __weak __typeof(&*self)weakSelf = self;
  2. MJRefreshNormalHeader *refreshAllHeader = [MJRefreshNormalHeader headerWithRefreshingBlock:^{
  3.     //do somthing
  4.     //weakSelf.segTableView.selectedIndex
  5. }];
  6. [self.segTableView setRefreshHeader:refreshAllHeader];

设置一个MJRefresh下拉刷新
配合selectedIndex使用可刷新单一item的数据

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

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

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

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

  1. /** 主容器 */
  2. @property (nonatomic, strong) SHMAINTableView *tableView;

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

混合模式

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

示例代码

初始化并设置topView、barView、footView

  1. _segTableView = [[SHSegmentedControlTableView alloc] initWithFrame:self.view.bounds];
  2. _segTableView.delegateCell = self;
  3. [_segTableView setTopView:self.headerView];
  4. [_segTableView setBarView:self.segmentControl];
  5. [_segTableView setBarView:self.footerView];

实现代理：

  1. #pragma mark -
  2. #pragma mark   ==============SHSegTableViewDelegate==============
  3. - (void)segTableViewDidScrollY:(CGFloat)offsetY {
  5. }
  6. - (void)segTableViewDidScroll:(UIScrollView *)tableView {
  8. }
  9. - (void)segTableViewDidScrollSub:(UIScrollView *)subTableView {
  11. }
  12. - (void)segTableViewDidScrollProgress:(CGFloat)progress originalIndex:(NSInteger)originalIndex targetIndex:(NSInteger)targetIndex {
  13.     if (progress == 1) {
  14.         [self.segmentControl setSegmentSelectedIndex:targetIndex];
  15.     }
  16. }

SHSegmentControl使用方法：

支持的属性的属性设置

  1. typedef enum : NSUInteger {
  2.     /** 默认状态 */
  3.     SHSegmentControlTypeNone,
  4.     /** 涌入放大效果 */
  5.     SHSegmentControlTypeWater,
  6.     /** 右上角小标题 */
  7.     SHSegmentControlTypeSubTitle,
  8.     /** 涌入放大效果+右上角小标题 */
  9.     SHSegmentControlTypeWaterSubTitle,
  10. } SHSegmentControlType;
  12. typedef enum : NSUInteger {
  13.     /** 默认状态 平均分布 呈分散状*/
  14.     SHSegmentControlStyleScatter,
  15.     /** 紧靠屏幕左侧 */
  16.     SHSegmentControlStyleLeft,
  17.     /** 紧挨且居中分布 */
  18.     SHSegmentControlStyleCenter,
  19.     /** 紧靠屏幕右侧 */
  20.     SHSegmentControlStyleRight,
  21. } SHSegmentControlStyle;
  24. @interface SHSegmentControl : UIScrollView
  25. /** 间距 */
  26. @property (nonatomic, assign) CGFloat titleMargin;
  27. /** 默认字体大小 (默认15) */
  28. @property (nonatomic, assign) UIFont  * _Nonnull titleNormalFont;
  29. /** 选中字体大小 (默认15) */
  30. @property (nonatomic, assign) UIFont  * _Nonnull titleSelectFont;
  31. /** 小标题字体大小 */
  32. @property (nonatomic, assign) UIFont  * _Nonnull subTitleFont;
  33. /** 标题偏移量 */
  34. @property (nonatomic, assign) CGFloat offsetX;
  35. /** 字体默认颜色 */
  36. @property (nonatomic, strong) UIColor * _Nonnull titleNormalColor;
  37. /** 小标题默认字体颜色 */
  38. @property (nonatomic, strong) UIColor * _Nonnull subTitleNormalColor;
  39. /** 字体选中颜色 */
  40. @property (nonatomic, strong) UIColor * _Nonnull titleSelectColor;
  41. /** 小标题选中字体颜色 */
  42. @property (nonatomic, strong) UIColor * _Nonnull subTitleSelectColor;
  43. /** 指示器圆角 */
  44. @property (nonatomic, assign) CGFloat progressCornerRadius;
  45. /** 指示器高度（粗细） */
  46. @property (nonatomic, assign) CGFloat progressHeight;
  47. /** 指示器宽度（默认 title宽） */
  48. @property (nonatomic, assign) CGFloat progressWidth;
  49. /** 指示器底部距离（默认0） */
  50. @property (nonatomic, assign) CGFloat progressBottom;
  51. /** 指示器颜色 */
  52. @property (nonatomic, strong) UIColor * _Nonnull progressColor;
  53. /** 下底线颜色 */
  54. @property (nonatomic, strong) UIColor * _Nonnull bottomLineColor;
  55. /** 下底线高度（粗细） 默认0.5f) */
  56. @property (nonatomic, assign) CGFloat bottomLineHeight;
  57. /** 分栏类型 默认SHSegmentControlTypeNone */
  58. @property (nonatomic, assign) SHSegmentControlType type;
  59. /** 分栏分布类型 默认SHSegmentControlStyleScatter */
  60. @property (nonatomic, assign) SHSegmentControlStyle style;
  61. /** 每个 MenuItem 的宽度 */
  62. @property (nonatomic, assign) CGFloat menuItemWidth;
  63. /** 各个 MenuItem 的宽度，可不等，数组内为 NSNumber. */
  64. @property (nonatomic, nullable, copy) NSArray<NSNumber *> *itemsWidths;
  65. /** 放大效果的比例  默认1.2*/
  66. @property (nonatomic, assign) CGFloat itemScale;
  68. /** 获取当前下标 */
  69. @property (nonatomic, assign, readonly) NSInteger selectIndex;
  70. /** 分栏总数 */
  71. @property (nonatomic, assign) NSInteger totalCount;
  73. /** 背景颜色 */
  74. @property (nonatomic, strong) UIColor * _Nonnull backgroundNormalColor;
  75. /** 选中状态背景颜色 */
  76. @property (nonatomic, strong) UIColor * _Nonnull backgroundSelectColor;

初始化

  1. _segmentControl = [[SHSegmentControl alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, 45) items:@[@"分栏一",@"分栏二",@"分栏三"]];
  2. _segmentControl.titleSelectColor = [UIColor redColor];
  3. _segmentControl.type = SHSegmentControlTypeWater;
  4. [_segmentControl reloadViews];
  5. [_segmentControl setSegmentSelectedIndex:0];
  6. __weak __typeof(&*self)weakSelf = self;
  8. _segmentControl.curClick = ^(NSInteger index) {
  9.     //切换item
  10.     [weakSelf.segTableView setSegmentSelectIndex:index];
  11. };

Demo 介绍

使用的详细用法示例：

  • 默认样式
  • 涌入放大
  • 右上角小标题
  • 涌入放大+右上角小标题
  • 导航栏透明
  • 无头部
  • 无bar
  • CollectionView
  • tableView+collectionView
  • 下拉刷新全部
  • 下拉刷新当前选中
  • 独立上拉加载
  • 头部固定-scrollView容器
  • bar放在头部上，滑动悬停
  • 下拉头部放大
  • 使用ChildVC的处理方式
  • 分栏内容超屏显示
  • 分栏bar底部线属性暴露可设置
  • 导航栏透明度切换，并保持bar在导航栏下面

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

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

QQ 479069761

欢迎大家补充添加，有问题请联系企鹅号
想获取更多组件，让你的开发更轻松，那赶快加入组件群746954046

License

SHSegmentedControl is released under the MIT license. See LICENSE for details.