• Stars
    star
    256
  • Rank 159,219 (Top 4 %)
  • Language
    Swift
  • License
    MIT License
  • Created over 6 years ago
  • Updated almost 2 years ago

Reviews

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

Repository Details

A useful and gesture interaction BottomSheetView!

JXBottomSheetView

项目中有类似于外卖软件的已点菜品列表,类似于下图:

meituan.gif

可以看到列表的显示与隐藏,都只能通过按钮触发。不能通过手势驱动。不能设置最小可显示范围。针对以上问题,就有了这个项目。

其实以上的需求核心问题就一个,如何优雅的解决:当内容还未到最大可显示范围时,列表里的内容不能滚动;当内容显示到最大的时候,如何不断开当前滚动手势,继续滚动列表里的内容。

之前写了一个类似的底部列表滚动视图,地址:https://github.com/pujiaxin33/JXBottomSheetTableView 里面的实现方案还是挺有趣的,对外完全封装了里面的滚动控制细节,且以UITableView的子类实现。无奈越骚的操作越容易翻车。里面的应用场景比较狭窄,需求一变动就GG了。 所以重新写了这个库,使用场景更大,使用更方便,交互更友善,好了,不说了,快上车吧!

原理

JXBottomSheetView添加一个UIPanGestureRecognizer,成为其delegate,并让shouldRecognizeSimultaneouslyWithOtherGestureRecognizer方法返回true; 如此一来,内容承载视图与列表视图的滚动手势可以同时响应了。接着,我们需要处理好当内容承载视图未显示到最大值时,列表视图(UITableView、UICollectionView)的contentOffset.y会被强制设置为0,营造一种列表内容未滚动的假象; 当内容承载视图滚动到最大的时候,就放开对列表视图的滚动限制。 其他一些细节可以参看源码了解;

特性

  • 支持长距离滚动,不断手势:当列表视图滚动到规定的最高点时,停止视图移动,转而滚动里面的内容;
  • 内容自适应:当列表的数据源发生变动时,会根据最新的contentSize调整布局;
  • 切换流畅:最大、最小的手势切换,借鉴了系统UIScrollViewPagingEnabled切换效果;

预览

  • 普通短距离滚动

  • 长距离滚动,手势没有停掉。滚动到顶部的时候,继续滚动里面的内容

  • 内容自适应,根据contentViewcontentSize自动调整布局

属性/方法

属性/方法 描述
defaultMininumDisplayHeight 默认最小内容高度,当contentSize.height更小时,会更新mininumDisplayHeight值。
defaultMaxinumDisplayHeight 默认最大内容高度,当contentSize.height更小时,会更新maxinumDisplayHeight值。
displayState 当前展示状态,最大或最小
triggerDistance 滚动多少距离,可以触发展开和收缩状态切换。
triggerVelocity 触发状态切换的滚动速度,points/second
contentView: UIScrollView 用于承载内容的视图,UITableView、UICollectionView皆可。
displayMax() 显示最大内容
displayMin() 显示最小内容

使用

        tableView = UITableView.init(frame: CGRect.zero, style: .plain)
        
        let bottomSheet = JXBottomSheetView(contentView: tableView)
        bottomSheet.defaultMininumDisplayHeight = 100
        bottomSheet.defaultMaxinumDisplayHeight = 300
        bottomSheet.displayState = .minDisplay
        bottomSheet.frame = self.view.bounds
        view.addSubview(bottomSheet)

安装

swift版本:5.0+

use_frameworks!
target '<Your Target Name>' do
    pod 'JXBottomSheetView'
end

注意

  • 内部会影响到外部的代码

    if let tableView = contentView as? UITableView {
              tableView.estimatedRowHeight = 0
          }
    
  • 数据源的增删,请使用reloadData,而不是insertRowsdeleteRows刷新页面。因为...你试一下就知道了。

More Repositories

1

JXCategoryView

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

JXPagingView

类似微博主页、简书主页等效果。多页面嵌套,既可以上下滑动,也可以左右滑动切换页面。支持HeaderView悬浮、支持下拉刷新、上拉加载更多。
Objective-C
2,824
star
3

JXSegmentedView

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

JXPageListView

高仿闲鱼、转转、京东、中央天气预报等主流APP列表底部分页滚动视图
Objective-C
421
star
5

JXMarqueeView

A powerful and easy to use marquee view.
Swift
365
star
6

JXTheme

A powerful and lightweight and customization theme/skin library for iOS 9+ in swift. 主题、换肤、暗黑模式
Swift
243
star
7

JXPatternLock

An easy-to-use, powerful, customizable pattern lock view in swift. 图形解锁/手势解锁 / 手势密码 / 图案密码 / 九宫格密码
Swift
219
star
8

JXMovableCellTableView

The custom tableView which can start moving the cell with a long press gesture.
Objective-C
188
star
9

JXPopupView

一个轻量级的自定义视图弹出框架
Swift
139
star
10

StackUI

StackUI just like SwiftUI
Swift
117
star
11

JXScratchView

一个万能的刮刮乐控件。无论是UILabel、UIImageView,还是自定义视图,只要是UIView都可以用来刮。代码简单,功能强大,你值得拥有!
Swift
111
star
12

JXWeChatFloatView

高仿微信文章悬浮球
Swift
100
star
13

JXBottomSheetTableView

A highly packaged, easy to use custom bottom sheet UITableView.
Swift
48
star
14

JXExcel

一个轻量级的表视图
Swift
31
star
15

JXTableViewZoomHeaderImageView

一般app的个人资料页面都会有个头图,并且随着上下滚动的时候,图片有个移动和缩放的效果。
Objective-C
29
star
16

ModelAdapter

Simple JSON Object mapping and SQLite3 written in Swift
Swift
26
star
17

JXCaptain

像美国队长一样威猛的应用调试工具箱!
Swift
22
star
18

JXFileBrowserController

The debug sandbox browser for sharing.
Swift
22
star
19

JXGradientKit

常用控件背景渐变色Kit
Swift
19
star
20

JXLayerAutoLayout

优雅的实现CALayer AutoLayout
Objective-C
19
star
21

SQLiteValueExtension

SQLiteValueExtension for SQLite.swift
Swift
14
star
22

JXParallaxCell

用于滚动scrollview的时候,cell中的图片,或者其他控件,有一个视差滚动的效果
Objective-C
14
star
23

JXTransition

自定义转场动画
Objective-C
11
star
24

JXBorderCellll

一个有边框的基类cell
Objective-C
11
star
25

JXInterview

Interview for iOSer
10
star
26

XPackage

自己常用的一些工具
Objective-C
4
star
27

30DaysChallenge

There may be a miracle happen if you insist 30 days challenge!
Objective-C
3
star
28

JXExampleImages

示例图片资源
2
star
29

JXKit

JXKit for iOS
Swift
1
star
30

OnePiece

Swift
1
star
31

JXRomanticAlbum

谁说程序员不浪漫?我们可以用代码表白!Who says programmers aren't romantic? We can use the code to express love!
Swift
1
star