Code Monkey home page Code Monkey logo

pujiaxin33 / jxsegmentedview Goto Github PK

View Code? Open in Web Editor NEW
2.6K 36.0 363.0 10.51 MB

A powerful and easy to use segmented view (segmentedcontrol, pagingview, pagerview, pagecontrol, categoryview) (腾讯新闻、今日头条、QQ音乐、网易云音乐、京东、爱奇艺、腾讯视频、淘宝、天猫、简书、微博等所有主流APP分类切换滚动视图)

License: MIT License

Swift 99.81% Ruby 0.19%
page pagecontrol switch segment segmented segmentedview segmentedcontrol category categoryview indicator

jxsegmentedview's Introduction

platform languages cocoapods carthage support

There is an English document here, click to view

A powerful and easy to use segmented view (segmentedcontrol, pagingview, pagerview, pagecontrol, categoryview) (腾讯新闻、今日头条、QQ音乐、网易云音乐、京东、爱奇艺、腾讯视频、淘宝、天猫、简书、微博等所有主流APP分类切换滚动视图)

与其他的同类三方库对比的优点:

  • 指示器逻辑面向协议编程(Protocol Oriented Programming),可以为所欲为的扩展指示器效果;
  • 提供更加全面丰富效果,几乎支持所有主流APP效果;
  • 使用子类化管理cell样式,逻辑更清晰,扩展更简单;
  • 列表支持整个生命周期方法;

Objective-C版本

如果你在找Objective-C版本,请点击查看 JXCategoryView

效果预览

指示器效果预览

说明 Gif
Line固定宽度
Line与cell等宽
Line延长
Line延长+偏移
RainbowLine🌈彩虹
DotLine点线
DoubleLine双线
Triangle三角形底部
Triangle三角形顶部
Background椭圆形
Background椭圆形+阴影
Background遮罩有背景
Background遮罩无背景
Background渐变色
(渐变是固定的)
Gradient渐变色
(渐变随着位置变动)
Image底部
Image背景
混合使用

以下指示器支持上下位置切换: JXSegmentedIndicatorLineViewJXSegmentedIndicatorRainbowLineViewJXSegmentedIndicatorDotLineViewJXSegmentedIndicatorDoubleLineViewJXSegmentedIndicatorTriangleViewJXSegmentedIndicatorImageView

Cell样式效果预览

说明 Gif
颜色渐变
文字渐变
大小缩放
大小缩放+字体粗细
大小缩放+点击动画
大小缩放+cell宽度缩放
TitleImage_Top
TitleImage_Left
TitleImage_Bottom
TitleImage_Right
TitleImage_只有图片
TitleOrImage(高仿腾讯视频)
数字
红点
多行富文本
多种cell混用

特殊效果预览

说明 Gif
数据源过少
isItemSpacingAverageEnabled为true
数据源过少
isItemSpacingAverageEnabled为false
SegmentedControl
参考SegmentedControlViewController
导航栏使用
参考NaviSegmentedControlViewController
嵌套使用
参考NestViewController
个人主页(上下左右滚动、header悬浮)
参考PagingViewController
更多样式请点击查看JXPagingView库
数据加载&刷新
参考LoadDataViewController

要求

  • iOS 9.0+
  • Xcode 9+
  • Swift 5.0

安装

手动

Clone代码,把Sources文件夹拖入项目,就可以使用了;

CocoaPods

target '<Your Target Name>' do
    pod 'JXSegmentedView'
end

先执行pod repo update,再执行pod install

Carthage

在cartfile文件添加:

github "pujiaxin33/JXSegmentedView"

然后执行carthage update --platform iOS 即可

Swift Package Manager

1.在Package.swift文件添加如下代码:

dependencies: [
  .package(url: "https://github.com/pujiaxin33/JXSegmentedView.git", from: "1.2.1")
]

2.使用命令行构建:

$ swift build

使用

JXSegmentedView使用示例

1.初始化JXSegmentedView

segmentedView = JXSegmentedView()
segmentedView.delegate = self
view.addSubview(self.segmentedView)

2.初始化dataSource

dataSouce类型为JXSegmentedViewDataSource协议。使用单独的类实现JXSegmentedViewDataSource协议,实现代码隔离。选择不同的类赋值给dataSource,就可以控制JXSegmentedView显示效果,实现插件化。比如选择JXSegmentedTitleImageDataSource类作为dataSource就选择了文字图片的显示效果;选择JXSegmentedNumberDataSource类作为dataSource就选择了文字加数字的显示效果;

//segmentedDataSource一定要通过属性强持有,不然会被释放掉
segmentedDataSource = JXSegmentedTitleDataSource()
//配置数据源相关配置属性
segmentedDataSource.titles = ["猴哥", "青蛙王子", "旺财"]
segmentedDataSource.isTitleColorGradientEnabled = true
//关联dataSource
segmentedView.dataSource = self.segmentedDataSource

3.初始化指示器indicator

let indicator = JXSegmentedIndicatorLineView()
indicator.indicatorWidth = 20
segmentedView.indicators = [indicator]

4.可选实现JXSegmentedViewDelegate代理

//点击选中或者滚动选中都会调用该方法。适用于只关心选中事件,而不关心具体是点击还是滚动选中的情况。
func segmentedView(_ segmentedView: JXSegmentedView, didSelectedItemAt index: Int) {}
// 点击选中的情况才会调用该方法
func segmentedView(_ segmentedView: JXSegmentedView, didClickSelectedItemAt index: Int) {}
// 滚动选中的情况才会调用该方法
func segmentedView(_ segmentedView: JXSegmentedView, didScrollSelectedItemAt index: Int) {}
// 正在滚动中的回调
func segmentedView(_ segmentedView: JXSegmentedView, scrollingFrom leftIndex: Int, to rightIndex: Int, percent: CGFloat) {}

contentScrollView列表容器使用示例

直接使用UIScrollView自定义使用示例

因为代码比较分散,而且代码量也比较多,所有不推荐使用该方法。要正确使用需要注意的地方比较多,尤其对于刚接触iOS的同学来说不太友好。

不直接贴代码了,具体点击LoadDataCustomViewController查看源代码了解。

作为替代,官方使用&强烈推荐使用下面这种方式👇👇👇。

配合JXSegmentedListContainerView封装类使用示例

JXSegmentedListContainerView是对列表视图高度封装的类,具有以下优点:

  • 相对于直接使用UIScrollView自定义,封装度高、代码集中、使用简单;
  • 列表懒加载:当显示某个列表的时候,才进行列表初始化。而不是一次性加载全部列表,性能更优;
  • 可以选用CollectionView作为列表容器,内存管理更加优秀;
  • 支持列表的整个生命周期方法调用;

1.初始化JXSegmentedListContainerView

listContainerView = JXSegmentedListContainerView(dataSource: self)
view.addSubview(self.listContainerView)
//关联listContainer
segmentedView.listContainer = listContainerView

2.实现JXSegmentedListContainerViewDataSource代理方法

//返回列表的数量
func numberOfLists(in listContainerView: JXSegmentedListContainerView) -> Int {
    return segmentedDataSource.titles.count
}
//返回遵从`JXSegmentedListContainerViewListDelegate`协议的实例
func listContainerView(_ listContainerView: JXSegmentedListContainerView, initListAt index: Int) -> JXSegmentedListContainerViewListDelegate {
    return ListBaseViewController()
}

3.列表实现JXSegmentedListContainerViewListDelegate代理方法

不管列表是UIView还是UIViewController都可以,提高使用灵活性,更便于现有的业务接入。

/// 如果列表是VC,就返回VC.view
/// 如果列表是View,就返回View自己
/// - Returns: 返回列表视图
func listView() -> UIView {
    return view
}
func listWillAppear() {}
func listDidAppear() {}
func listDidDisappear() {}
func listDidDisappear() {}

具体点击LoadDataViewController查看源代码了解

使用总结

因为JXSegmentedView本身支持许多特性:指示器、cell样式、列表容器等,如何有序管理好代码成了一个难题。借助于协议、继承、封装类极大的简化了使用难度,而且提高了灵活性,扩展相当容易。

  • 核心主类:JXSegmentedView
  • 数据源&cell样式定制类:遵从JXSegmentedViewDataSource协议的类
  • 指示器类:遵从JXSegmentedIndicatorProtocol协议的UIView
  • 列表容器:官方推荐JXSegmentedListContainerView类,特殊情况可以使用UIScrollView自定义

指示器样式自定义

  • 需要继承JXSegmentedIndicatorProtocol协议,点击参看JXSegmentedIndicatorProtocol
  • 提供了继承JXSegmentedIndicatorProtocol协议的基类JXSegmentedIndicatorBaseView,里面提供了许多基础属性。点击参看JXSegmentedIndicatorBaseView
  • 自定义指示器,请参考已实现的指示器视图,多尝试、多思考,再有问题请提Issue或加入反馈QQ群

dataSource和Cell自定义

  • 需要继承JXSegmentedViewDataSource协议,点击参看JXSegmentedViewDataSource
  • 提供了继承JXSegmentedViewDataSource协议的基类JXSegmentedBaseDataSource,里面提供了许多基础属性。点击参看JXSegmentedBaseDataSource
  • 任何自定义需求,dataSource、cell、itemModel三个都要子类化。即使某个子类cell什么事情都不做。用于维护继承链,以免以后子类化都不知道要继承谁了;
  • dataSource和Cell自定义,请参考已实现的dataSource,多尝试、多思考,再有问题请提Issue或加入反馈QQ群

常用属性说明

常用属性说明文档地址

其他使用注意事项

其他使用注意事项文档总地址

重要版本更新记录

补充

如果刚开始使用JXSegmentedView,当开发过程中需要支持某种特性时,请务必先搜索使用文档或者源代码。确认是否已经实现支持了想要的特性。请别不要文档和源代码都没有看,就直接提问,这对于大家都是一种时间浪费。如果没有支持想要的特性,欢迎提Issue讨论,或者自己实现提一个PullRequest。

该仓库保持及时更新,对于主流新的分类选择效果会第一时间支持。使用过程中,有任何建议或问题,可以通过以下方式联系我:
邮箱:[email protected]
QQ群: 112440276

喜欢就star❤️一下吧

License

JXSegmentedView is released under the MIT license.

jxsegmentedview's People

Contributors

charleyzhu avatar charsdavy avatar coderweilee avatar fermion42 avatar fingerplay avatar hstdt avatar maltsugar avatar pujiaxin33 avatar wbitos avatar xjimi avatar yixiaojichunqiu avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

jxsegmentedview's Issues

Line宽度、滑动手势相关问题

1、如何设置Line固定宽度,并且宽度填满Cell,比如3个cell,每个line的长度是屏幕的三分之一。
2、如何设置在某个页面上不允许左右滑动手势,比如,滑动到第二个页面后,让手势无效,只能点击cell切换页面。

JXPagingView+JXSegmentedView结合使用,push之后pop回来,listDidAppear调用index不对

JXPagingView1.1.4版本,JXSegmentedView也替换成最新的版本
在此demo的Personal个人主页中可以复现

把索引传递给子view,push之后pop回来
左右滚动子view的情况,pop回来listDidAppear打印的是上一页的index
点击segment title的情况,pop回来listDidAppear打印正常

暂时解决方案
在个人主页viewWillAppear中pagingView.reloadData(),但是会重新创建子view
有没有更好的方法

present后返回当前页面布局会错乱

在ListBaseViewController中添加以下方法,可以看到dissmiss后页面有闪动,如果内部使用collectionview,会导致内部collectionview布局错乱

override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
    let controller = UIViewController()
    controller.view.backgroundColor = .red
    DispatchQueue.main.asyncAfter(deadline: .now() + 1.5) {
        controller.dismiss(animated: true, completion: nil)
    }
    present(UINavigationController(rootViewController: controller), animated: true, completion: nil)
}

发现一个小问题

pagingViewController在header足够高时,用户在header上滑动 悬停顶部后不会继续滑动,如果是在列表上,手势会继续滑动。

一点小建议

您好,您封装的这个工具挺好用的。我觉得有个地方改一下会更好,点击cell跳转页面的时候,如果相隔多个cell,页面滚动跳转的效果不太好,不如直接跳转。现在的app中应该都是这样跳的,点击cell没有滚动动画。滚动应该只用于相邻页面之间。

请问JXSegmentedListContainerView如何支持右滑返回 FDFullscreenPopGesture 这个库

大神你好,用了这个库觉得非常好用,在项目中已经集成,现在遇到一个问题是:
使用了JXSegmentedListContainerView,但这个类似乎不支持FDFullscreenPopGesture的右滑返回,想问下如何能够兼容?

而用JXPagingView的时候,可以用下面这个回调函数来支持
func pagingListContainerCollectionView(_ collectionView: JXPagingListContainerCollectionView, gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer) -> Bool { if collectionView.contentOffset.x <= 0 { guard let delegate = otherGestureRecognizer.delegate else {return false} guard let delegateClass = NSClassFromString("_FDFullscreenPopGestureRecognizerDelegate") else {return false} if delegate.isKind(of: delegateClass) { return true } } return false }

segmentedView.selectItemAt(index: index)方法无效

不管我怎么设置,这个方法总是无效,跳转不到指定的Tab:
//segmentedViewDataSource一定要通过属性强持有!!!!!!!!!
let dataSource = JXSegmentedTitleDataSource()
dataSource.isTitleColorGradientEnabled = true
dataSource.titleNormalColor = .gray
dataSource.titleSelectedColor = UIColor(named: "Color-sysDefaultFontColor")!
dataSource.titles = titles
segmentedDataSource = dataSource

    //配置指示器
    let indicator = JXSegmentedIndicatorLineView()
    indicator.indicatorWidth = JXSegmentedViewAutomaticDimension
    segmentedView.indicators = [indicator]

    segmentedView.dataSource = segmentedDataSource
    segmentedView.delegate = self

    view.addSubview(self.segmentedView)

    for indicaotr in segmentedView.indicators {
       if (indicaotr as? JXSegmentedIndicatorLineView) != nil ||
           (indicaotr as? JXSegmentedIndicatorDotLineView) != nil ||
           (indicaotr as? JXSegmentedIndicatorDoubleLineView) != nil ||
           (indicaotr as? JXSegmentedIndicatorRainbowLineView) != nil ||
           (indicaotr as? JXSegmentedIndicatorImageView) != nil ||
           (indicaotr as? JXSegmentedIndicatorTriangleView) != nil {
           //navigationItem.rightBarButtonItem = UIBarButtonItem(title: "指示器位置切换", style: UIBarButtonItem.Style.plain, target: self, action: #selector(didIndicatorPositionChanged))
           break
       }
    }
    
    //listContainerView = JXSegmentedListContainerView(dataSource: self)
    view.addSubview(self.listContainerView)
    //关联listContainer
    segmentedView.listContainer = listContainerView
    
    segmentedView.selectItemAt(index: 2)

字体颜色与指示条位置不匹配

Report

What did you do?

Version: 0.0.19

What did you expect to happen?

  1. CollectionView cell 添加 JXSegmentedView
  2. cell will enter screen
  3. 第一次显示正常,当滚动到第二个标签时, 如果cell滚出屏幕,再次滚入屏幕,此处显示不正常
    • 指示器显示正常
    • 高亮文字显示不正常,显示上一个为高亮
  4. 默认当前选中颜色与普通模式颜色相同,容易引起混淆

Indicator宽度

请问能增加一个枚举吗,比如我想让Indicator的宽度是cellitem的宽度左右各有2个点的距离这种。本来想继承重写getIndicatorWidth方法让宽度减一点点,然后发现在module外写不了~~

“个人中心”主页,在全面屏手机上,滚动列表到底部,列表内容会自动往下移动。

如题,必现。

1、“个人中心”主页,在全面屏手机上,滚动列表到底部,手机由水平方向变成垂直方向,列表内容会自动往下移动。
2、把自动往下移的列表手动向上移动到底部后,再次更改手机由垂直方向变成水平方向,也会出现列表往下移动。

总结,滚动到列表底部,陀螺仪的水平方向发生更改就必现。希望作者能查看一下是什么原因。

分割线

swift版本的能添加那个分割线吗

JXSegmentedListContainerViewListDelegate代理方法的回调时机

你好,第一次集成这个库,确实很强大,可定制内容很多。但也碰到些问题,望解惑。

  1. func listDidAppear() 和 viewDidAppear() 是怎样一个调用顺序?具体表示是,第一次加载VC,会触发 viewDidAppear() 和 listDidAppear() 方法。之后push了一个子页面,从子页面再返回,就不会触发 viewDidAppear() ,只触发 listDidAppear() 。
  2. 项目中引入了 FDFullscreenPopGesture ,一个滑动返回手势库,在子页面上右划返回时,稍微划出一点距离立马就会出发 listDidAppear() 方法。本来是在viewDidAppear()里面做了一些操作的,现在把这些操作写在 listDidAppear() 中了,但是这也导致了操作被提前执行的情况,比如弹窗,就会在页面未出现就被显示出来了。

禁止滚动

有没有禁止下面滚动,只通过点击切换的属性,找了一下没找到

您好,请问怎么可以只刷新标题文字?

我现在执行 segmentedView.reloadData() 会刷新整个 segmentedView,有时候会导致标题颜色变化,缩放会闪一下,想知道怎么可以只刷新 segmentedView 标题的文字,而不是重新刷新整个 segmentedView

titleNumberOfLines 不起作用

self.segmentedDataSource.itemContentWidth = 50
self.segmentedDataSource.titleNumberOfLines =0
segmentedDataSource.reloadData(selectedIndex: 0)
qq20190222-170025 2x

在ScrollView下嵌套使用导致无法上下滚动

  1. 层级关系

ScrollView {
UIView {
UIView(固定高度),
SegmentedView(固定高度),
UIView {
JXSegmentedListContainerView {
n个 UITableViewController
}
}
}
}

  1. 最外层的ScrollView和最里层的UITableViewController都无法滚动,SegmentedView的Tab可以左右滚动

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.