drawer-view 1.0.4

drawer-view 1.0.4

Astemir Eleev 维护。



  • Astemir Eleev

drawer-view Awesome

Platforms Language Autolayout CocoaPod License

最后更新:2019年4月6日。

如果您喜欢此项目,请给它一个星 ⭐ 这将向您创建者表示感谢,并帮助其他人发现此仓库。

✍️关于

📤Drawer View 是一个自定义 UI 组件,仿照了苹果的 Apple Music 播放器和 Shortcuts 的 components 视图(可在 地图 应用中看到)。

🏗安装

CocoaPods

drawer-view 通过 CocoaPods 提供

pod 'drawer-view', '~> 1.0.4' 

手动

您始终可以使用 复制粘贴 源代码的方法😄或者,您可以编译框架并将其包含到您的项目中。

📺演示

请等待加载 .gif 文件...(大约 25MB)

Drawing

🍱特性

  • 易于使用
    • 您只需要实例化一个名为 DrawerView 的类并添加您的 UI 组件。
  • 灵活的 API
    • 包含多个自定义点,允许您按需装饰DrawerView
  • 回调函数
    • 您可以使用内置回调函数来集成动画或获取状态变化。
  • 行为
    • 您可以指示组件在设备旋转或用户与子组件交互时关闭抽屉。
  • 自动布局
    • 您不需要进行任何与自动布局相关的工作 - 组件会适当处理所有更改。您唯一需要做的是添加您的UI组件,并确保为它们正确设置布局约束。

📚代码示例

实例化

最简单的实例化:您只需提供superview

let _ = DrawerView(superView: view)

您可以通过设置topLayoutGuidePadding属性来指定DrawerView顶部锚点与superview之间的空间,以及通过设置closedHeight属性来指定关闭时DrawerView的高度。

let _ = DrawerView(topLayoutGuidePadding: 100, closedHeight: 82, superView: view)

您可以指定模糊效果及其类型。它将与抽屉视图一起动画化。有几种模糊样式。

let _ = DrawerView(blurStyle: .light, superView: view)

默认情况下,DrawerView将包含一个视觉指示器,称为LineArrow。《LineArrow》是一个装饰视图并帮助用户交互的指示器。您可以通过设置其heightwidthcolor来更改指示器的属性。

let _ = DrawerView(lineArrow: (height: 8, width: 82, color: .black), superView: view)
// Or you can set `nil` in order to turn the indicator off

属性和方法

您可以通过旋转设备来更改组件的行为。默认情况下,当设备旋转时,DrawerView将不会关闭。但是,您可以更改此行为。

drawerView.closeOnRotation = true

您可以编程更改组件的状态。

drawerView.change(state: .open, shouldAnimate: true)

默认情况下,与子视图的交互不会以任何方式影响DrawerView。但是,您可以更改此行为,并允许在交互一个子视图时取消DrawerView

drawerView.closeOnChildViewTaps = true

有一个动画闭包,用于在DrawerView动画化时,与外部组件一起动画化。

drawerView.animationClosure = { state in
    switch state {
    case .open:
      someOtherView.alpha = 1.0
    case .closed:
      someOtherView.alpha = 0.0
  }
}

您可以可选地指定一个完成闭包,在动画完成后被调用。

drawerView.completionClosure = { state in
  switch state {
    case .open:
      service.launch()
    case .closed:
      service.dismiss()
    }
}

第三个也是最后的回调闭包可以用来获取DrawerView状态变化。

drawerView.onStateChangeClosure = { state in
  state == .closed ? showDialog() : doNothing()
}

其他可设置的属性

还有许多其他可自定义的属性。

drawerView.cornerRadius = 60
drawerView.animationDuration = 2.5
drawerView.animationDampingRatio = 0.9
drawerView.shadowRadius = 0.25
drawerView.shadowOpacity = 0.132
drawerView.closeOnBlurTapped = true
drawerView.closeOnDrawerTaps = true

👨‍💻作者

Astemir Eleev

🔖许可

该项目可在MIT许可下获得。