GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → fumiyasac → TinderUISamples

fumiyasac / TinderUISamples

Licence: other
[ING] - TinderのようなUIを様々な実装で実現してみる

Programming Languages

swift
15916 projects
ruby
36898 projects - #4 most used programming language

Labels

iosuicollectionviewgesture-recognizeruikituiviewtinder-uitinder-style

Projects that are alternatives of or similar to TinderUISamples

Gskstretchyheaderview
A generic stretchy header for UITableView and UICollectionView
Stars: ✭ 1,624 (+5313.33%)
Mutual labels:  uicollectionview, uikit, uiview
Viewanimator
ViewAnimator brings your UI to life with just one line
Stars: ✭ 6,592 (+21873.33%)
Mutual labels:  uicollectionview, uikit, uiview
ios ui recipe showcase
iOSアプリ開発 - UI実装であると嬉しいレシピブック掲載サンプル
Stars: ✭ 54 (+80%)
Mutual labels:  uicollectionview, uikit, tinder-ui
Verticalcardswiper
A marriage between the Shazam Discover UI and Tinder, built with UICollectionView in Swift.
Stars: ✭ 830 (+2666.67%)
Mutual labels:  uicollectionview, uikit
Alignedcollectionviewflowlayout
A collection view layout that gives you control over the horizontal and vertical alignment of the cells.
Stars: ✭ 751 (+2403.33%)
Mutual labels:  uicollectionview, uikit
LSAdditions
The Category of Commonly used controls and you can create a control quickly(Object, Control ...)
Stars: ✭ 15 (-50%)
Mutual labels:  uikit, uiview
Collectionviewpaginglayout
a simple but highly customizable paging layout for UICollectionView.
Stars: ✭ 947 (+3056.67%)
Mutual labels:  uicollectionview, uikit
Pagingkit
PagingKit provides customizable menu UI. It has more flexible layout and design than the other libraries.
Stars: ✭ 1,030 (+3333.33%)
Mutual labels:  uicollectionview, uikit
Basecomponents
BaseComponents aims to provide easily reusable and understandable components to increase productivity with UIKit and Foundation APIs
Stars: ✭ 92 (+206.67%)
Mutual labels:  uicollectionview, uikit
Uicollectionviewsplitlayout
UICollectionViewSplitLayout makes collection view more responsive.
Stars: ✭ 226 (+653.33%)
Mutual labels:  uicollectionview, uikit
Collectionviewslantedlayout
A CollectionView Layout displaying a slanted cells
Stars: ✭ 2,029 (+6663.33%)
Mutual labels:  uicollectionview, uikit
Squaremosaiclayout
An extandable mosaic UICollectionViewLayout with a focus on extremely flexible customizations 🔶
Stars: ✭ 243 (+710%)
Mutual labels:  uicollectionview, uikit
Owl
A declarative type-safe framework for building fast and flexible lists with UITableViews & UICollectionViews
Stars: ✭ 423 (+1310%)
Mutual labels:  uicollectionview, uikit
Uicollectionview Layouts Kit
📐 A set of custom layouts for UICollectionView with examples [Swift 5.3, iOS 12].
Stars: ✭ 410 (+1266.67%)
Mutual labels:  uicollectionview, uikit
Epoxy Ios
Epoxy is a suite of declarative UI APIs for building UIKit applications in Swift
Stars: ✭ 377 (+1156.67%)
Mutual labels:  uicollectionview, uikit
Wlemptystate
WLEmptyState is an iOS based component that lets you customize the view when the dataset of a UITableView or a UICollectionView is empty. We created a sample project with the WLEmptyState component to show how you can use it.
Stars: ✭ 305 (+916.67%)
Mutual labels:  uicollectionview, uikit
Instagramactivityindicator
Activity Indicator similar to Instagram's.
Stars: ✭ 138 (+360%)
Mutual labels:  uikit, uiview
Render
UIKit a-là SwiftUI.framework [min deployment target iOS10]
Stars: ✭ 2,150 (+7066.67%)
Mutual labels:  uikit, uiview
Closures
Swifty closures for UIKit and Foundation
Stars: ✭ 1,720 (+5633.33%)
Mutual labels:  uicollectionview, uiview
UIComponent
Write UI in crazy speed, with great perf & no limitations.
Stars: ✭ 333 (+1010%)
Mutual labels:  uicollectionview, uikit
View All Similar Projects ➔

TinderUISamples

[ING] - TinderのようなUIを様々な実装で実現してみるサンプル

今回はTinder風のUIを自前で用意する際の実装ポイントや気をつけるべき点等を知りたいと感じたので、同様な形ではあるが内部実装は全く異なるTinder風UIサンプルを2種類を用意しました。

本サンプルの画面キャプチャ

sample_summary.jpg

実装例1. UIView + UIPanGestureRecognizerを利用したUI実装

動かすカードのView側にProtocolをあらかじめ定義しておき、UIViewControllerを連携してGestureRecognizer発動時のタイミングで行われる処理（左右への動きやスワイプ後などの処理）を実行するような形の実装になっています。

画面デザインのラフスケッチ:

example1_design.jpg

クラスの関係図＆解説メモ:

example1_memo.jpg

実装例2. UICollectionView + UILongPressGestureRecognizerを利用したUI実装

UICollectionViewLayoutクラスを継承したクラスを利用してカード表示画面の設定を行い、GestureRecognizer発動時のタイミングで行われる処理と組み合わせる形の実装になっています。

UILongPressGestureRecognizer経由で対象のセルを選び出した後は、stateプロパティの状態を元にそれぞれの処理を記載していく形になります。 このサンプルで実際に動いているのは、選び出したUICollectionViewCellではなく、 「UICollectionViewCellのスナップショットを表示したUIImageView」 になります。

画面デザインのラフスケッチ:

example2_design.jpg

クラスの関係図＆解説メモ:

example2_memo.jpg

その他

このサンプル全体の詳細解説とポイントをまとめたものは下記に掲載しております。

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].