All Projects → pujiaxin33 → Jxbottomsheetview

pujiaxin33 / Jxbottomsheetview

Licence: mit
A useful and gesture interaction BottomSheetView!

Programming Languages

swift
15916 projects

Projects that are alternatives of or similar to Jxbottomsheetview

Bottomsheetexample
Example app for Android BottomSheet
Stars: ✭ 21 (-91.14%)
Mutual labels:  bottomsheet
Bottomify Navigation View
A nice looking Spotify like bottom navigation view
Stars: ✭ 97 (-59.07%)
Mutual labels:  bottomsheet
Sheetmenu
Library for speedy implementation menu with BottomSheet
Stars: ✭ 121 (-48.95%)
Mutual labels:  bottomsheet
Tc Material Design
Série de artigos sobre o Material Design Android
Stars: ✭ 64 (-73%)
Mutual labels:  bottomsheet
Fluentappbar
Fluent App Bar: An Android bottom-sheet-based navigation bar based on Microsoft's Fluent Design System
Stars: ✭ 88 (-62.87%)
Mutual labels:  bottomsheet
React Swipeable Bottom Sheet
A swipeable material's bottom sheet implementation, using react-swipeable-views
Stars: ✭ 106 (-55.27%)
Mutual labels:  bottomsheet
Anylayer
Android稳定高效的浮层创建管理框架
Stars: ✭ 745 (+214.35%)
Mutual labels:  bottomsheet
Bottomsheet
BottomSheet dialog library for Android
Stars: ✭ 219 (-7.59%)
Mutual labels:  bottomsheet
Xam.plugin.simplebottomdrawer
Just a nice and simple BottomDrawer for your Xamarin Forms project
Stars: ✭ 92 (-61.18%)
Mutual labels:  bottomsheet
React Native Bottom Sheet
A performant interactive bottom sheet with fully configurable options 🚀
Stars: ✭ 2,695 (+1037.13%)
Mutual labels:  bottomsheet
React Native Scroll Bottom Sheet
Cross platform scrollable bottom sheet with virtualisation support, native animations at 60 FPS and fully implemented in JS land 🔥
Stars: ✭ 1,226 (+417.3%)
Mutual labels:  bottomsheet
Stickytabbarviewcontroller
Sticky and Collapsible View on top of tab bar
Stars: ✭ 82 (-65.4%)
Mutual labels:  bottomsheet
Bottomsheet
Custom modal presentation style for thumb-friendly interactive views
Stars: ✭ 110 (-53.59%)
Mutual labels:  bottomsheet
React Native Bottom Sheet Behavior
react-native wrapper for android BottomSheetBehavior
Stars: ✭ 1,068 (+350.63%)
Mutual labels:  bottomsheet
Bottommenututorial
Android bottom dialog
Stars: ✭ 163 (-31.22%)
Mutual labels:  bottomsheet
Overlaycontainer
Non-intrusive iOS UI library to implement overlay based interfaces
Stars: ✭ 777 (+227.85%)
Mutual labels:  bottomsheet
React Native Draggable View
DraggableView is a component for react-native, it allows you have a vertical draggable drawer view that you can drag up or drag down. So, if you drag and release that component, then it keeps moving until reach either initial position or container border.
Stars: ✭ 103 (-56.54%)
Mutual labels:  bottomsheet
Alertview
A library to create simple alerts easily with some customization.
Stars: ✭ 222 (-6.33%)
Mutual labels:  bottomsheet
Fabulousfilter
Android library to animate Floating Action Button to Bottom Sheet Dialog and vice-versa
Stars: ✭ 2,477 (+945.15%)
Mutual labels:  bottomsheet
Bottomsheet
Component which presents a dismissible view from the bottom of the screen.
Stars: ✭ 113 (-52.32%)
Mutual labels:  bottomsheet

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刷新页面。因为...你试一下就知道了。

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].