Skip to content

Both scroll horizontal and vertical for segment scrollview which have a same header. — 类似半糖、美丽说主页与QQ音乐歌曲列表布局效果,实现不同菜单的左右滑动切换,同时支持类似tableview的顶部工具栏悬停(既可以左右滑动,又可以上下滑动)。兼容下拉刷新,上拉加载更多。现已加入swift豪华套餐,使用样例助你快速使用

License

Notifications You must be signed in to change notification settings

HatsuneMikuV/SHSegmentedControlTableView

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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:

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那样初始化即可

[[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;

typedef enum : NSUInteger {
    /** 默认状态 平均分布 呈分散状*/
    SHSegmentControlStyleScatter,
    /** 紧靠屏幕左侧 */
    SHSegmentControlStyleLeft,
    /** 紧挨且居中分布 */
    SHSegmentControlStyleCenter,
    /** 紧靠屏幕右侧 */
    SHSegmentControlStyleRight,
} SHSegmentControlStyle;


@interface SHSegmentControl : UIScrollView
/** 间距 */
@property (nonatomic, assign) CGFloat titleMargin;
/** 默认字体大小 (默认15) */
@property (nonatomic, assign) UIFont  * _Nonnull titleNormalFont;
/** 选中字体大小 (默认15) */
@property (nonatomic, assign) UIFont  * _Nonnull titleSelectFont;
/** 小标题字体大小 */
@property (nonatomic, assign) UIFont  * _Nonnull subTitleFont;
/** 标题偏移量 */
@property (nonatomic, assign) CGFloat offsetX;
/** 字体默认颜色 */
@property (nonatomic, strong) UIColor * _Nonnull titleNormalColor;
/** 小标题默认字体颜色 */
@property (nonatomic, strong) UIColor * _Nonnull subTitleNormalColor;
/** 字体选中颜色 */
@property (nonatomic, strong) UIColor * _Nonnull titleSelectColor;
/** 小标题选中字体颜色 */
@property (nonatomic, strong) UIColor * _Nonnull subTitleSelectColor;
/** 指示器圆角 */
@property (nonatomic, assign) CGFloat progressCornerRadius;
/** 指示器高度(粗细) */
@property (nonatomic, assign) CGFloat progressHeight;
/** 指示器宽度(默认 title宽) */
@property (nonatomic, assign) CGFloat progressWidth;
/** 指示器底部距离(默认0) */
@property (nonatomic, assign) CGFloat progressBottom;
/** 指示器颜色 */
@property (nonatomic, strong) UIColor * _Nonnull progressColor;
/** 下底线颜色 */
@property (nonatomic, strong) UIColor * _Nonnull bottomLineColor;
/** 下底线高度(粗细) 默认0.5f) */
@property (nonatomic, assign) CGFloat bottomLineHeight;
/** 分栏类型 默认SHSegmentControlTypeNone */
@property (nonatomic, assign) SHSegmentControlType type;
/** 分栏分布类型 默认SHSegmentControlStyleScatter */
@property (nonatomic, assign) SHSegmentControlStyle style;
/** 每个 MenuItem 的宽度 */
@property (nonatomic, assign) CGFloat menuItemWidth;
/** 各个 MenuItem 的宽度,可不等,数组内为 NSNumber. */
@property (nonatomic, nullable, copy) NSArray<NSNumber *> *itemsWidths;
/** 放大效果的比例  默认1.2*/
@property (nonatomic, assign) CGFloat itemScale;

/** 获取当前下标 */
@property (nonatomic, assign, readonly) NSInteger selectIndex;
/** 分栏总数 */
@property (nonatomic, assign) NSInteger totalCount;

/** 背景颜色 */
@property (nonatomic, strong) UIColor * _Nonnull backgroundNormalColor;
/** 选中状态背景颜色 */
@property (nonatomic, strong) UIColor * _Nonnull backgroundSelectColor;

初始化

_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

License

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

About

Both scroll horizontal and vertical for segment scrollview which have a same header. — 类似半糖、美丽说主页与QQ音乐歌曲列表布局效果,实现不同菜单的左右滑动切换,同时支持类似tableview的顶部工具栏悬停(既可以左右滑动,又可以上下滑动)。兼容下拉刷新,上拉加载更多。现已加入swift豪华套餐,使用样例助你快速使用

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published