{"id":20852630,"url":"https://github.com/eleev/drawer-view","last_synced_at":"2025-05-12T05:30:53.610Z","repository":{"id":56610483,"uuid":"159181101","full_name":"eleev/drawer-view","owner":"eleev","description":"📤 Custom UI component for iOS, replication of Apple's Apple Music player and Shortcuts’ components view [Swift 5.0, iOS 12].","archived":false,"fork":false,"pushed_at":"2020-10-28T23:00:46.000Z","size":28418,"stargazers_count":164,"open_issues_count":0,"forks_count":18,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-05-08T12:55:44.078Z","etag":null,"topics":["apple","apple-music","autolayout","core-animation","core-graphics","custom-component","drawer-view","ios","ready-made-component","shorcuts","swift","ui-component","uikit"],"latest_commit_sha":null,"homepage":"","language":"Swift","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/eleev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-11-26T14:19:42.000Z","updated_at":"2025-02-23T08:47:58.000Z","dependencies_parsed_at":"2022-08-15T21:50:50.146Z","dependency_job_id":null,"html_url":"https://github.com/eleev/drawer-view","commit_stats":null,"previous_names":["jvirus/drawer-view"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eleev%2Fdrawer-view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eleev%2Fdrawer-view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eleev%2Fdrawer-view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eleev%2Fdrawer-view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eleev","download_url":"https://codeload.github.com/eleev/drawer-view/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253681889,"owners_count":21946825,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["apple","apple-music","autolayout","core-animation","core-graphics","custom-component","drawer-view","ios","ready-made-component","shorcuts","swift","ui-component","uikit"],"created_at":"2024-11-18T03:18:17.677Z","updated_at":"2025-05-12T05:30:48.589Z","avatar_url":"https://github.com/eleev.png","language":"Swift","funding_links":[],"categories":[],"sub_categories":[],"readme":"# drawer-view [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)\n\n[![Platforms](https://img.shields.io/badge/platform-iOS-yellow.svg)]()\n[![Language](https://img.shields.io/badge/language-Swift_5.0-orange.svg)]()\n[![Autolayout](https://img.shields.io/badge/autolayout-enabled-blue.svg)]()\n[![CocoaPod](https://img.shields.io/badge/pod-1.0.4-lightblue.svg)]()\n[![License](https://img.shields.io/badge/license-MIT-blue.svg)]()\n\n**Last Update: 06/April/2019.**\n\n![](logo-drawer_view.png)\n\n### If you like the project, please give it a star ⭐ It will show the creator your appreciation and help others to discover the repo.\n\n# ✍️ About\n📤 Drawer View is a custom UI component, replication of Apple's Apple Music player and Shortcuts' `components` view (also can be seen in `Maps` app).\n\n# 🏗 Installation\n## CocoaPods\n`drawer-view` is availabe via `CocoaPods`\n\n```\npod 'drawer-view', '~\u003e 1.0.4' \n```\n## Manual\nYou can always use `copy-paste` the sources method 😄. Or you can compile the framework and include it with your project.\n\n# 📺 Demo\nPlease wait while the `.gif` files are loading... (they are about `25Mb`)\n\n\u003cp float=\"left\"\u003e\n  \u003cimg src=\"assets/drawer-view demo 01.gif\" width=\"285\" /\u003e\n  \u003cimg src=\"assets/drawer-view demo 02.gif\" width=\"285\" /\u003e \n  \u003cimg src=\"assets/drawer-view demo 03.gif\" width=\"285\" /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"assets/drawer-view demo 04.gif\" alt=\"Drawing\"/\u003e\n\u003c/p\u003e\n\n# 🍱 Features\n\n- **Easy to use** \n  - You only need to instantiate a class called `DrawerView` and add your UI components.\n- **Flexible `API`**\n  - Includes a number of customization points that allows to decorate the `DrawerView` as you'd like.\n- **Callbacks**\n  - You can use built-in callbacks in order to integrate animations or get the state changes.\n- **Behavior** \n  - You may tell the component to close the drawer when the device is rotated or user interacts with the child components.\n- **Autolayout**\n  - You don't need to do anything related to autolayout - the component properly handles all the changes. The only thing you need to do is to add your `UI` components and make sure that aulayout constraints are properly setup for them.  \n\n# 📚 Code Samples\n\n## Instantiation\n\nThe most simple instantiation: you only need to provide the `superview`:\n```swift\nlet _ = DrawerView(superView: view)\n```\n\nYou can specify how much space will be between top anchor of the `DrawerView` and the `superview` by setting `topLayoutGuidePadding` property and how tall the `DrawerView` will be when it is closed by setting `closedHeight` property:\n```swift\nlet _ = DrawerView(topLayoutGuidePadding: 100, closedHeight: 82, superView: view)\n```\n\nYou can specify `blur` effect and its type. It will be animated alongside with the drawer view. There are several styles for `blur`:\n```swift\nlet _ = DrawerView(blurStyle: .light, superView: view)\n```\n\nBy default the `DrawerView` will include a visual indicator called `LineArrow`. `LineArrow` is an indicator that decorates the view and helps a user with interaction. You can change the properties of the indicator by setting its `height`, `width` and `color`:\n```swift\nlet _ = DrawerView(lineArrow: (height: 8, width: 82, color: .black), superView: view)\n// Or you can set `nil` in order to turn the indicator off\n```\n\n## Properties \u0026 Methods\n\nYou can change the behavior of the component when a device is rotated. By default the `DrawerView` will not be closed when a device is rotated. However, you can change this behavior:\n```swift\ndrawerView.closeOnRotation = true\n```\n\nYou can programmatically change the state of the component:\n```swift\ndrawerView.change(state: .open, shouldAnimate: true)\n```\n\nBy default, interactions with the child views don't affect the `DrawerView` anyhow. However, you can change this behavior and allow the `DrawerView` to be dismissed when one of the child views are interacted:\n```swift\ndrawerView.closeOnChildViewTaps = true\n```\n\nThere is an animation closure that is used to animate the external components alongside with the `DrawerView`:\n```swift\ndrawerView.animationClosure = { state in\n    switch state {\n    case .open:\n      someOtherView.alpha = 1.0\n    case .closed:\n      someOtherView.alpha = 0.0\n  }\n}\n```\n\nYou can optionally specify a completion closure that gets called when animation is completed:\n```swift\ndrawerView.completionClosure = { state in\n  switch state {\n    case .open:\n      service.launch()\n    case .closed:\n      service.dismiss()\n    }\n}\n```\n\nThe third and final callback closure can be used to get `DrawerView`state changes:\n```swift\ndrawerView.onStateChangeClosure = { state in\n  state == .closed ? showDialog() : doNothing()\n}\n```\n\n## Other settable properties\n\nAlso there are many other properties that be customized:\n```swift\ndrawerView.cornerRadius = 60\ndrawerView.animationDuration = 2.5\ndrawerView.animationDampingRatio = 0.9\ndrawerView.shadowRadius = 0.25\ndrawerView.shadowOpacity = 0.132\ndrawerView.closeOnBlurTapped = true\ndrawerView.closeOnDrawerTaps = true\n```\n\n# 👨‍💻 Author \n[Astemir Eleev](https://github.com/jVirus)\n\n# 🔖 Licence\nThe project is available under [MIT licence](https://github.com/jVirus/drawer-view/blob/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feleev%2Fdrawer-view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feleev%2Fdrawer-view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feleev%2Fdrawer-view/lists"}