STSegmentPageView

Github

Introduce

高效易用的标题滚动视图，Written in Swift. （仿 美团，今日头条，网易，淘宝标题滚动视图）.

1.png 2.png

Requirements

Installation

STSegmentPageView 可以通过 CocoaPods 安装. 请添加下列到你的 Podfile:

pod 'STSegmentPageView'

手动安装

下载项目，然后把“STSegmentPageView”文件夹拖拽入你的项目中

Usage

使用 集成好的STSegmentPageViewController:

// use default title view configure
let config = STSegmentPageTitleViewConfigure()
let titles = ["推荐","热点","视频","娱乐","问答","北京","朝阳","地方","八卦","综艺","推荐","热点","视频","娱乐","问答","北京","朝阳","地方","八卦","综艺"]
var models = titles.map { (title) -> STSegmentModel in
 let model = STSegmentModel()
 let controller = SecondViewController()
 controller.label.text = title
 model.segmentTitle = title
 model.segmentController = controller
 return model
}
//使用自定义高度
let segmentVC = STSegmentPageViewController(childrenModels: models, titleViewH: 40, titleConfig: config)
segmentVC.view.frame = CGRect(x: 0, y: 64, width: view.width, height: view.height - 64 )
​
segmentVC.addSegmentController(toParentController: self)

使用自定义 title view and content view 来实现功能, 切记需要联动的话开发者一定要实现 STSegmentContentViewDelegate, STSegmentTitleViewDelegate, 这样才可以把 title view 和 content view 关联到一起.

let titles = ["推荐","热点","视频","娱乐","问答","北京","朝阳","地方","八卦","综艺","推荐","热点","视频","娱乐","问答","北京","朝阳","地方","八卦","综艺"]
let config = STSegmentPageTitleViewConfigure()
// title view
pageTitleView = STSegmentTitleView(config:config ,titles: titles)
pageTitleView!.frame = CGRect(x: 0, y: 64, width: view.width, height: 48)
view.addSubview(pageTitleView!)
pageTitleView?.delegate = self
​
// content view
var vcs = [UIViewController]()
for (i,_) in titles.enumerated(){
 let controller = SecondViewController()
 controller.label.text = "\(i)"
 vcs.append(controller)
}
​
pageView = STSegmentContentView(frame: CGRect(x: 0, y: (pageTitleView?.frame.maxY ?? 0), width: view.width, height: view.height - (pageTitleView?.frame.maxY  ?? 0) ), childrenControllers: vcs, parentVC:self)
pageView?.delegate = self
view.addSubview(pageView!)
​
​
​
///// Delegate
extension ViewController : STSegmentTitleViewDelegate{
 func didSelectedSegmentTitleViewItemAt(atIndex index: Int) {
 pageView?.didSelectedItemAtIndex(atIndex: index)
 }
}
extension ViewController : STSegmentContentViewDelegate{
 func pageContentViewDidScrollToItem(atIndex targetIndex: Int) {
 pageTitleView?.didSelectedTitleItemAtIndex(atIndex: targetIndex)
 }
 func pageContentViewDidScroll(progress: CGFloat, originIndex: Int, targetIndex: Int) {
 pageTitleView?.updateTitleViewWhenContentViewDrag(progress: progress, fromIndex:         originIndex, endIndex: targetIndex)
 }
}

自定义标题配置

 // MARK: - 指示器
 /// 指示器style，默认为下划线
 public var indicatorStyle : STSegmentTitleViewIndicatorStyle = .default

 /// 指示器滚动样式,默认随着内容视图滚动而动
 public var indicatorScrollStyle : STSegmentTitleViewIndicatorScrollStyle = .default

 /// 指示器颜色,默认红色
 public var indicatorColor : UIColor = .red

 /// - 指示器高度
 /// - 下划线样式下，固定长度样式，默认高度是2.f
 /// - 遮罩样式下，默认高度和标题文本高度一致，如若大于标题视图高度，则为标题视图高度,取值范围：标题高度~标题视图高度
 /// - 其他情况不做处理
 public var indicatorHeight : CGFloat = 2.0

 /// 指示器圆角值，默认0.1
 public var indicatorCornerRadius : CGFloat = 0.1

 /// - 指示器宽度,只在style类型为fixed情况下有效，默认值20.0
 /// - 在fixed样式下，宽度只会和文本长度一直
 public var indicatorWidthWhenFixedStyle : CGFloat = 20.0

 /// 指示器动画时间，取值范围 0.1 ~ 0.4, 超出取边界值
 public var indicatorAnimationTime : Double = 0.1

 //MARK: - 底部底线 默认值Hex-color #eaeaea RGB(234,234,234)
 public var bottomSeparatorColor : UIColor = UIColor(red: 234/255.0, green: 234/255.0, blue: 234/255.0, alpha: 1.0)

 /// 底线高度，默认值0.5
 public var bottonSeparatorHeight : CGFloat = 0.5

 /// 底线样式，默认有底线
 public var bottomSeparatorStyle : STSegmentTitleViewBottomSeparatorStyle = .default

 //MARK: - 标题设置

 /// 标题字体，默认系统15号字体
 public var titleFont : UIFont = UIFont.systemFont(ofSize: 15)

 /// 标题未选状态颜色，默认黑色
 public var titleNormalColor : UIColor = .black

 /// - 标题选中状态颜色，默认红色
 /// - 遮罩模式，需要把指示器和字体颜色设为不一致，不然标题会看不到
 public var titleSelectedColor : UIColor = .red

 /// 标题之间的间隔，默认值15
 public var spaceBetweenTitles : CGFloat = 15.0

 /// 第一个标题左侧之间的间隔，默认值20
 public var spaceBetweenFirstTitleAndLeftSide : CGFloat = 20

 /// - 选中标题之后是否缩放，默认true
 /// - true的情况下，设置缩放系数deltaScaleIndex才生效
 /// - 指示器在default，shade样式下默认随着一起缩放; fixed不会
 public var wouldScaledWhenSelected : Bool = true

 /// - 缩放系数，默认0.1
 /// - 取值范围 -0.1 ~ 0.1， 负数缩小，0不缩放，正数放大
 /// scaleXY = 1 + deltaScaleIndex
 public var deltaScaleIndex : CGFloat = 0.1

 //MARK: - 内容视图
 /// 标题移动渐变效果,默认true
 public var shouldTitleGradientEffect : Bool = true

 /// 弹性效果，默认true
 public var shouldBounces : Bool = true

 /// 标题视图背景颜色，默认是白色alpha为0.7
 public var titleViewBackgroundColor : UIColor = UIColor(red: 1.0, green: 1.0, blue: 1.0, alpha: 0.7)

 //MARK: - 右侧按钮

 /// - 使用右侧按钮，默认是false不使用。
 /// - true的情况下，需要设置rightButton才会显示该按钮
 public var wouldUseRightButton : Bool = false

 /// - 右侧按钮,如为nil，则相当于wouldUseRightButton = false
 /// - 点击事件可以执行按钮点击事件Block "didClickRightButtonAt"，也可以外部直接addTarget
 /// - 按钮在标题视图中的宽高，为外部设置的宽高。如果高度超出了标题视图，按照实际设置的宽高比例缩放
 /// - 外部用户需要设计好自己的按钮样式:
 ///   - 包括字体属性，以及按钮宽高，否认按钮的默认宽高将是标题视图高
 public var rightButton : UIButton?

 /// 右侧按钮的左侧效果，默认有效果,前提是设置了右侧按钮
 public var showRightButtonSeparator : Bool = true

 /// 右侧按钮点击事件
 public var didClickRightButtonAt : (() -> Void)?

Author

EricWan, hongenwan@gmail.com

Concluding remarks

如果使用过程中遇到问题，请及时 Issue 或者 hongenwan@gmail.com, 看到了我会及时回复，谢谢

License

STSegmentPageView is available under the MIT license. See the LICENSE file for more info.