Both scroll horizontal and vertical for segment scrollview which have a same header. — 类似半糖、美丽说主页与QQ音乐歌曲列表布局效果,实现不同菜单的左右滑动切换,同时支持类似tableview的顶部工具栏悬停(既可以左右滑动,又可以上下滑动)。兼容下拉刷新,上拉加载更多。 支持swift的使用此库,具体方式请看demo,如果有什么问题请戳邮箱或者qq。
SHSegmentedControl is available on CocoaPods. Add the following to your Podfile:
pod 'SHSegmentedControl'
在这里感谢@welljobs的指正
在这里感谢@200895045的指正
在这里感谢@fangdafei的指正
2019.06.21新增demo(应@DongfengWang123的要求,增加带toolbar效果)↓↓↓
1.增加分栏样式枚举
2.开放分栏item宽度自定义
3.修改分栏图层关系,允许左右回弹效果
4.新增分栏放大比例属性
在这里感谢@yanglijunwang的指正
在这里感谢@windkisshao的指正
为了兼容下拉刷新,采用了UITableView作为容器的实现方式
-
使用
UITableView
作为容器,内容视图作为Cell
,实现上下滑动滑动的功能。 -
使用
UICollectionView
作为item的载体,实现左右滑动的功能。 -
因为使用了
UITableView
作为容器,Cell
上下滑动的时候,item之间的顶部对齐问题就迎刃而解。 -
topView(header)
作为UITableView
的tableViewHeaderView
,barView
作为UITableView
的sectionHeader
,这样就解决了item之间共享同一个header & bar,也解决header & bar跟随item滚动问题,也要具有ScrollView的弹性效果。 -
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
当然topView
、barView
、footView
也都是是可以使用自定义视图,只要是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载体的情况下,可扩展支持UITableView
、UICollectionView
视图。暂时还不支持、UIScrollView
、或者自定义视图作为item。下个版本将支持UIScrollView
。后续会支持UIView
子类,可无限拓展。
_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];
}
}
支持的属性的属性设置
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];
};
- 默认样式
- 涌入放大
- 右上角小标题
- 涌入放大+右上角小标题
- 导航栏透明
- 无头部
- 无bar
- CollectionView
- tableView+collectionView
- 下拉刷新全部
- 下拉刷新当前选中
- 独立上拉加载
- 头部固定-scrollView容器
- bar放在头部上,滑动悬停
- 下拉头部放大
- 使用ChildVC的处理方式
- 分栏内容超屏显示
- 分栏bar底部线属性暴露可设置
- 导航栏透明度切换,并保持bar在导航栏下面
示例代码新增和样式可点击图片查看,Demo中提支持刷新控件MJRefresh
,支持约束库Masonry
,以及部分扩展SHExtension
,供参考
Demo的示例可能并不满足你当前的需求,请不用担心,联系下面的QQ,会尽可能的满足,感谢你的支持
SHSegmentedControl is released under the MIT license. See LICENSE for details.