• Stars
    star
    353
  • Rank 120,322 (Top 3 %)
  • Language
    Swift
  • License
    MIT License
  • Created over 8 years ago
  • Updated over 7 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

简单快速灵活的集成类似网易新闻, 头条等带滑块的滚动视图,实现视图联动, 滑块, segment segmentController, scrollViewController

#ScrollPageView

###OC版的请点这里

##使用示例效果

更新示例.gif 示例效果1.gif 示例效果2.gif示例效果3.gif

示例效果4.gif 示例效果5.gif示例效果6.gif

示例效果7.gif 示例效果8.gif 自定义下标效果.gif


可以简单快速灵活的实现上图中的效果


书写思路移步

###简书1
###简书2 ###简书3


Requirements

  • iOS 8.0+
  • Xcode 7.3 or above

Installation

CocoaPods

####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文件夹下的文件拖进您的项目中就可以使用了

###Usage

###如果是使用cocoapods安装的需要在使用的文件中 ###import 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不是很贵, 但是也是一笔损失.

如果你希望联系到我, 可以通过简书联系到我

License

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

More Repositories

1

ZJScrollPageView

网易新闻, 腾讯视频, 头条 等首页的滑块视图联动的效果OC版的简单方便的集成, 滑块 segmentVIew, scrollViewController(Providing an easy way to reach the effect that "the segment scrolls with the content")
Objective-C
1,109
star
2

CollectionViewLayout

自定义collectionViewLayout, 里面提供的布局可以直接拿来使用
Swift
140
star
3

UsefulPickerView

可以简单快速实现点击TextField或者按钮弹出单列, 多列, 多列关联,城市选择, 日期选择的pickerView
Swift
117
star
4

DouYuTVMutate

模仿斗鱼的部分简单页面, 部分使用RxSwift, MVVM, 直播的接口目前不可用, 所以直播部分已经删除
Swift
98
star
5

PhotoBrowser

providing an easy way to reach the effect that looking through photos likes the system photo app (快速集成图片浏览器, 支持屏幕旋转, 加载网络, 本地,以及各种手势 photoBrowser imageBrowser image photo)
Swift
86
star
6

ZJPullToRefresh

easy way to customize loding animation written in swift(下拉刷新, 上拉刷新, 简单方便自定义加载动画)
Swift
37
star
7

ZJCircleProgressView

实现几种常用的圆环形进度条, 饼状进度, 以及彩色加载动画效果
Objective-C
34
star
8

ZJUsefulPickerView

一个很有用的pickerView, 能够快速方便的弹出单列, 多列不关联, 多列关联数据的pickerView, 同时提供省市区联动的pickerView, 日期选择pickerView.
Objective-C
34
star
9

ZJIndexedCitySelect

一个常用的带索引的城市选择列表, 已经处理了拼音首字母搜索城市, 以及热门城市的显示. 美团等经常用到的城市选择
Objective-C
28
star
10

FullScreenPopNavigationController

自定义navigationController的全屏滑动返回
Swift
23
star
11

ZJSwipeTableView

一个可以方便实现自定义的tableView的左右侧滑菜单的效果. 支持四种动画效果. 也同时支持了简书的漂亮的侧滑效果.
Objective-C
15
star
12

CameraView

很方便的实现自定义照相机和摄像机, 本身是一个view, 可以自定义形状和位置等, 方便的闪光灯, 前后摄像头切换...(totally customize the camera , making the camera just the way you like)
Swift
14
star
13

ZJLeadingPageController

App的启动的引导页面---简单demo
Objective-C
13
star
14

ZJTagView

一个collectionView拖动的实现demo, 已经实现网易新闻的标签编辑效果. 标签页面, 频道选择
Objective-C
13
star
15

PPTView

可以使用Kingfisher来自定义加载图片方式的图片轮播器
Swift
11
star
16

ZJPPTViewOC

一个使用方便的轮播器, 可无限循环, 自动轮播, 自定义程度很大, 可以轮播各种形式的内容, 图片, 文字, 按钮... 同时, 内部不依赖第三方库
Objective-C
10
star
17

ZJDrawerController

一个可以很快速实现三种效果的左右抽屉菜单. 也支持缩放效果, 侧滑菜单
Objective-C
8
star
18

ZJIndexedContacts

一个常用的带索引的联系人列表, 同时已经处理好了联系人按拼音排序分组, 已经处理好了联系人按拼音首字母搜索的功能
Objective-C
8
star
19

ZJQRScanner

一个扫描二维码, 生成二维码, 识别图片中的二维码的demo, 可以直接使用
Objective-C
7
star
20

ChangeNavigationBarAlphaDemo

动态改变navigationBar的alpha的几种方法示例
Swift
7
star
21

ZJActionSheet

一个很方便自定义的actionSheet, 已经实现了系统的效果, 不过支持显示图片, 支持自定义, 同时也实现了微信的actionSheet的效果
Objective-C
5
star
22

ZJLaunchAd

一个简单, 方便的启动广告展示, 可以同时展示logo.
Objective-C
5
star
23

DrawingStudy

Swift
3
star
24

ZJLockController

实现了, 一个常用的手势解锁的功能, 已经封装好创建密码, 验证密码 , 修改密码, 删除密码,. 同时简单实现了类似支付宝的支付密码的输入效果, 支付宝手势解锁
Objective-C
2
star
25

ZJNavigationController

一个方便实现全屏滑动返回的navigationController, 同时实现了常用的每一个界面都拥有一个独立的navigationBar的功能.
Objective-C
2
star
26

FirstUseSwift3.0

尝试了一下swift3.0
Swift
1
star
27

ZJProgressHUD

一个类似MBProgressHUD的提示控件, 效果还不错, 实现也很简单, 方便参考和自定义
Objective-C
1
star