###OC版的请点这里
##使用示例效果
- iOS 8.0+
- Xcode 7.3 or above
####1.在你的项目Podfile里面添加下面的内容
source 'https://github.com/CocoaPods/Specs.git' platform :ios, '8.0' use_frameworks!
pod 'ScrollPageView', '~> 0.1.4'
###2.终端中执行命令 pod install ###3. 使用{Project}.xcworkspace打开项目
###或者直接下载将下载文件的ScrollPageView文件夹下的文件拖进您的项目中就可以使用了
###特别说明 因为大家可能会复用同一个controller来显示内容, 这里提供两种方法
- 在对应的controller的viewWillAppear()等生命周期里面可以根据不同的title来显示不同的内容或者刷新视图
- 新增了一个通知ScrollPageViewDidShowThePageNotification, 你可以监听这个通知来获取到正在显示的页数, 使用的示例可以参照 SegmentStyle里面的说明, 特别需要注意的是如果你的控制器是在storyboard中初始化的那么请重写这个controller的required init?(coder aDecoder: NSCoder), 并在里面注册通知监听者
###Update (更新说明) -- 2016/04/29
- 废弃了前面版本的使用方法(前面使用过的朋友请修改为新的使用方法), 提供了更合理的使用方法, 不需要addChildViewController, 只需要提供一个addChildViewControllers的数组即可
- 添加了更新titles和childViewControllers的方法, 可以动态的修改和更新显示的内容
####一. 使用ScrollPageView , 提供了各种效果的组合,但是不能修改segmentView和ContentView的相对位置,两者是结合在一起的
//1. 设置子控制器,类似
func setChildVcs() -> [UIViewController] {
let vc1 = storyboard!.instantiateViewControllerWithIdentifier("test")
vc1.title = "国内头条"
let vc2 = UIViewController()
vc2.view.backgroundColor = UIColor.greenColor()
vc2.title = "国际要闻"
let vc3 = UIViewController()
vc3.view.backgroundColor = UIColor.redColor()
vc3.title = "趣事"
let vc4 = UIViewController()
vc4.view.backgroundColor = UIColor.yellowColor()
vc4.title = "囧图"
let vc5 = UIViewController()
vc5.view.backgroundColor = UIColor.lightGrayColor()
vc5.title = "明星八卦"
let vc6 = UIViewController()
vc6.view.backgroundColor = UIColor.brownColor()
vc6.title = "爱车"
let vc7 = UIViewController()
vc7.view.backgroundColor = UIColor.orangeColor()
vc7.title = "国防要事"
let vc8 = UIViewController()
vc8.view.backgroundColor = UIColor.blueColor()
vc8.title = "科技频道"
let vc9 = UIViewController()
vc9.view.backgroundColor = UIColor.brownColor()
vc9.title = "手机专页"
let vc10 = UIViewController()
vc10.view.backgroundColor = UIColor.orangeColor()
vc10.title = "风景图"
let vc11 = UIViewController()
vc11.view.backgroundColor = UIColor.blueColor()
vc11.title = "段子"
return [vc1, vc2, vc3,vc4, vc5, vc6, vc7, vc8, vc9, vc10, vc11]
}
// 2.这个是必要的设置
automaticallyAdjustsScrollViewInsets = false
//3. 自定义效果组合
var style = SegmentStyle()
// 缩放文字
style.scaleTitle = true
// 颜色渐变
style.gradualChangeTitleColor = true
// segment可以滚动
style.scrollTitle = true
let childVcs = setChildVcs()
// 4. 注意: 标题个数和子控制器的个数要相同
let titles = childVcs.map { $0.title! }
// 5. 这里的childVcs 需要传入一个包含childVcs的数组, parentViewController 传入self
let scrollPageView = ScrollPageView(frame: CGRect(x: 0, y: 64, width: view.bounds.size.width, height: view.bounds.size.height - 64), segmentStyle: style, titles: titles, childVcs: childVcs, parentViewController: self)
// 6.
view.addSubview(scroll)
####二 使用 ScrollSegmentView 和 ContentView, 提供相同的效果组合, 但是同时可以分离开segmentView和contentView,可以单独设置他们的frame, 使用更灵活
// 1. 添加子控制器
// 设置childVcs
func setChildVcs() -> [UIViewController]{
let vc1 = storyboard!.instantiateViewControllerWithIdentifier("test")
vc1.view.backgroundColor = UIColor.whiteColor()
let vc2 = UIViewController()
vc2.view.backgroundColor = UIColor.greenColor()
return [vc1, vc2]
}
//2. 这个是必要的设置
automaticallyAdjustsScrollViewInsets = false
// 3. 自定义效果组合
var style = SegmentStyle()
// 标题不滚动, 则每个label会平分宽度
style.scrollTitle = false
// 颜色渐变
style.gradualChangeTitleColor = true
// 遮盖
style.showCover = true
// 遮盖颜色
style.coverBackgroundColor = UIColor.whiteColor()
// title正常状态颜色 使用RGB空间值
style.normalTitleColor = UIColor(red: 255.0/255.0, green: 255.0/255.0, blue: 255.0/255.0, alpha: 1.0)
// title选中状态颜色 使用RGB空间值
style.selectedTitleColor = UIColor(red: 235.0/255.0, green: 0.0/255.0, blue: 0.0/255.0, alpha: 1.0)
// 4. 标题个数和子控制器的个数要相同
let titles = ["国内头条", "国际要闻"]
// 5. 初始化segmentView
topView = ScrollSegmentView(frame: CGRect(x: 0, y: 0, width: 150, height: 28), segmentStyle: style, titles: titles)
topView.backgroundColor = UIColor.redColor()
topView.layer.cornerRadius = 14.0
// 可以直接设置背景色
// topView.backgroundImage = UIImage(named: "test")
// 6. 初始化 contentView
contentView = ContentView(frame: view.bounds, childVcs: setChildVcs(), parentViewController: self)
// 7. 设置代理 必要的设置
contentView.delegate = self // 必须实现代理方法
// 8. 处理点击title时切换contentView的内容, 建议您可以直接使用和下面一样的代码
topView.titleBtnOnClick = {[unowned self] (label: UILabel, index: Int) in
self.contentView.setContentOffSet(CGPoint(x: self.contentView.bounds.size.width * CGFloat(index), y: 0), animated: false)
}
// 9. 添加segmentVIew 和ContentView
navigationItem.titleView = topView
view.addSubview(contentView)
// 10. 实现代理, 只需要提供当前的segmentVIew即可
extension Vc6Controller: ContentViewDelegate {
var segmentView: ScrollSegmentView {
return topView
}
}
三. 更新方法的使用:
-
// 设置新的childVcs let vc1 = storyboard!.instantiateViewControllerWithIdentifier("test") vc1.view.backgroundColor = UIColor.redColor() vc1.title = "更换标题" let vc2 = UIViewController() vc2.view.backgroundColor = UIColor.greenColor() vc2.title = "换标题2" let newChildVcs = [vc1, vc2] // 设置新的标题 let newTitles = newChildVcs.map { $0.title! } topView.reloadTitlesWithNewTitles(newTitles) contentView.reloadAllViewsWithNewChildVcs(newChildVcs) // topView.selectedIndex(1, animated: true)
let newChildVcs = currentChildVcs
let newTitles = currentChildVcs.map { $0.title! }
// 调用public方法刷新视图
scrollPageView.reloadChildVcsWithNewTitles(newTitles, andNewChildVcs: newChildVcs)
这是我写的<iOS自定义控件剖析>这本书籍中的一个demo, 如果你希望知道具体的实现过程和其他的一些常用效果的实现, 那么你应该能轻易在网上下载到免费的盗版书籍.
当然作为本书的写作者, 还是希望有人能支持正版书籍. 如果你有意购买书籍, 在这篇文章中, 介绍了书籍中所有的内容和书籍适合阅读的人群, 和一些试读章节, 以及购买链接. 在你准备购买之前, 请一定读一读里面的说明. 否则, 如果不适合你阅读, 虽然书籍售价35不是很贵, 但是也是一笔损失.
如果你希望联系到我, 可以通过简书联系到我
ScrollPageView is released under the MIT license. See LICENSE for details.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent