Giter VIP home page Giter VIP logo

cardslider's Introduction

Card Slider for Swift

Tons of apps use a Tinder-style interface with cards that users can swipe right to 'like' or left to 'dislike'. But Yaroslav Zubko came up with an innovative and fresh approach to giving users more options besides just 'like' or 'dislike'. Here's Yaroslav's Dribbble shot that inspired me to create a 100% Swift project of this unique & new interface:

Dribbble shot

And here's a demo of the actual Swift project:

Demo

Note: you can pivot the cards in any direction, it all depends on where your finger is on the card.

Usage

This project isn't a framework, it's more so of a demonstration of how to approach this sort of user interface. Card Slider basically uses a UIPanGestureRecognizer in conjunction with several UIKit Dynamics behaviors. Because of this, ideally you would want all the card logic code in a view controller class, so I opted not make an external class that uses delegation to talk to the view controller.

CardView.swift

Most of the logic code is in the ViewController class, but each card is a subview of CardView. In the demo project, ImageCard is a subview of CardView and has its own custom subviews and layouts. You can create your own subclass of CardView and modify the cards data structure in ViewController to swap in your own custom cards. You can also modify the CardOption enum to show your own custom text on the cards for each of the 6 options (you may even add more, but that would require dealing with more emojis and laying them out properly.)

EmojiOptionsOverlay.swift

This file has all the logic code associated with showing the 6 emojis on the sides when the user pans the card around, as well as the heart emoji on the top right.

Credits

Yaroslav Zubko, the creator of the Dribbble shot that inspired this project, was kind enough to send me his design files. This concept and any artwork (including the emojis) is thanks to Yaroslav. https://dribbble.com/Yar_Z

cardslider's People

Contributors

gitroyalty-bot avatar

Watchers

James Cloos avatar  avatar  avatar

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.