美文网首页
分段容器视图

分段容器视图

作者: CatLogic | 来源:发表于2019-07-08 23:06 被阅读0次

类似于新闻客户端的布局样式

github地址:
YSSegmentContainer

效果

特征
  • 选项卡默认提供两种样式,可自定义实现其它
  • 选项卡不足一屏时可选是否铺满一屏
  • 选项卡选中自动居中
  • 切换时无论是手势还是点击选项卡,都是左右滑动一屏效果 :)

使用

快速上手
// 1. 创建容器,配置可选代理;
self.segmentContainerVC = [[YSSegmentContainerViewController alloc] init];
self.segmentContainerVC.incidentDelegate = self;
// 2. 配置选项卡,设置子控制器;
// 默认有两种样式提供:YSMenuItemWrapperView与YSMenuItemSliderView;如果不满足可以自己实现,继承YSMenuItemView实现自定义子类;
YSMenuItemWrapperView *menuView = [[YSMenuItemWrapperView alloc] initWithFrame:CGRectMake(0.0, 0.0, [UIScreen mainScreen].bounds.size.width, 44.0)];
menuView.itemWrapperWidthSpace = 30.0;
self.segmentContainerVC.menuView = menuView;

NSArray *titleList = @[@"推荐", @"热门", @"体育", @"财经", @"社会", @"科技", @"幽默", @"军事", @"服装", @"教育"];
NSMutableArray *vcList = [NSMutableArray array];
for (int i = 0; i < titleList.count; i++) {
    NSString *title = titleList[I];
    ListViewController *tempVC = [[ListViewController alloc] init];
    tempVC.title = title;
    [vcList addObject:tempVC];
}
self.segmentContainerVC.viewControllers = [vcList copy];
// 3. 将容器添加至显示的控制器
[self addChildViewController:self.segmentContainerVC];
[self.segmentContainerVC didMoveToParentViewController:self];
[self.view addSubview:self.segmentContainerVC.view];
// 4. 设置展示哪一个,默认第0个
[self.segmentContainerVC setShowIndex:1];
API介绍
  • YSSegmentContainerViewController
isAllowPanInteractive: 是否允许滑动手势
incidentDelegate: 事件回调(即将展示/已经展示)
widthThreshold:阈值,滑动比例达到多少即切换,默认0.3
  • YSMenuItemWrapperView
isEqualItem: 在选项卡小于一屏时,是否平分当前屏幕;默认true
selectBGColor: 滑块颜色
selectBGFitItemWidth: 滑块是否跟随选项卡大小:true跟随选项卡大小,false: 跟随文字大小
itemWrapperWidthSpace: 选项卡宽度扩充大小
itemWrapperHeightSpace: 选项卡高度扩充大小
itemSpace: 选项卡间间距
separateLineColor: 分割线颜色
separateLineHeight:分割线高度
  • YSMenuItemSliderView
selectFontScale: 选中文字放缩系数,默认1.2
sliderOffsetTextBottom: 滑动条距离文字底部距离,默认5.0
sliderExtWidth: 滑动条宽度调整值,滑动条宽度可能会跟随选项卡大小或文字大小,在此基础上修正值
sliderUseFiexedWidth: 是否固定滑动条大小,默认false
sliderFixedWidth: 滑动条固定大小,默认30.0

其余详见源码

安装

  • cocopods
// pod搜索YSSegmentContainer
pod search YSSegmentContainer
// 如果搜索不到,可更新pod本地索引
pod repo update
// 或者删除本地索引以重建
rm ~/Library/Caches/CocoaPods/search_index.json

// 在Podfile文件内添加
pod 'YSSegmentContainer', '~>1.0.1'
// 执行安装
pod install

结束

如果有问题或其它好的建议欢迎交流
觉得不错请star支持 :)

相关文章

  • 分段容器视图

    类似于新闻客户端的布局样式 github地址:YSSegmentContainer 效果 特征 选项卡默认提供两种...

  • 小程序标签

    一、视图容器(View Container): view 视图容器 scroll-view 可滚动视图容器 swi...

  • 3. 小程序基础组件

    常用视图容器view视图容器scroll-view 可滚动视图区域movable-view 可移动的视图容器,在页...

  • 微信小程序(四)视图组件

    小程序组件 视图容器 (一) 视图容器 了解小程序组件中的视图容器 明确小程序组件中的视图容器的用途和方法 了解不...

  • 分段滚动视图

    最近写了一个TitleSelectView,实现类似UISegmentedControl的功能,demo地址:ht...

  • uni-app基础组件—视图容器(View Container)

    什么是视图容器?视图容器就是将页面分割为独立的、不同的部分。视图容器共包含:view、scroll-view、sw...

  • 自定义容器视图控制器总结

    自定义容器视图控制器总结 同时发布于知乎 1.Apple文档对容器视图器的解释 容器视图控制器是将来自多个视图控制...

  • iOS-分段控件控制页面切换

    原理: 把分段控件定义在导航栏标题视图上,在通过分段控件的响应事件的选中索引加载各个控制器视图在self.view...

  • 初识小程序-框架组件

    视图容器组件 视图容器组件包括view、scroll-view、swiper及swiper-item,主要用于控制...

  • swift 学习 Some 、Never View

    父节点(容器) 需要子视图 叶节点 无需子视图

网友评论

      本文标题:分段容器视图

      本文链接:https://www.haomeiwen.com/subject/acezhctx.html