All Projects → jboo1212 → IGStoriesClone

jboo1212 / IGStoriesClone

Licence: MIT License
An example project created to show an advanced use case of IGListKit and to fully recreate the awesome Instagram Stories feature on Instagram.

Programming Languages

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

Projects that are alternatives of or similar to IGStoriesClone

WBListKit
A data-driven UICollectionView&UITableView framework for building fast and flexible lists by declarative syntax.
Stars: ✭ 32 (-44.83%)
Mutual labels:  uicollectionview, iglistkit
Transfiguration
Mystical way to transform data into reusable view in Swift
Stars: ✭ 14 (-75.86%)
Mutual labels:  uicollectionview
Micro
🏎Fast diffing and type safe SwiftUI style data source for UICollectionView
Stars: ✭ 77 (+32.76%)
Mutual labels:  uicollectionview
FadingEdgesCollectionView
A UICollectionView that fades it's edges to hint about more content
Stars: ✭ 82 (+41.38%)
Mutual labels:  uicollectionview
UICollectionView-QLX
一款基于UICollectionView扩展,告别繁琐的代理,一个数组就能搞定数据源,数组自动同步视图, 更好用的UICollectionView。
Stars: ✭ 17 (-70.69%)
Mutual labels:  uicollectionview
CollectionLayouts
A collection of UICollectionViewLayouts
Stars: ✭ 64 (+10.34%)
Mutual labels:  uicollectionview
CollectionViewMultiColumnLayout
A tiled waterfal/mosaic UICollectionViewLayout with support for explicit columns.
Stars: ✭ 13 (-77.59%)
Mutual labels:  uicollectionview
XLRefresh
iOS 下拉刷新工具
Stars: ✭ 25 (-56.9%)
Mutual labels:  uicollectionview
ScaledCenterCarousel
A carousel-based layout for UICollectionView with scaled center item.
Stars: ✭ 16 (-72.41%)
Mutual labels:  uicollectionview
DDComponent
Make a collection controller to several component, like IGList
Stars: ✭ 36 (-37.93%)
Mutual labels:  iglistkit
GenericCells
Creating generic UITableViewCells and UICollectionViewCells instead of subclasses.
Stars: ✭ 81 (+39.66%)
Mutual labels:  uicollectionview
TinyCoordinator
The Swift version of ThinningCoordinator focus on lighter view controllers.
Stars: ✭ 18 (-68.97%)
Mutual labels:  uicollectionview
KDRearrangeableCollectionViewFlowLayout
A Drag and Rearrange UICollectionView through its layout
Stars: ✭ 73 (+25.86%)
Mutual labels:  uicollectionview
ExcelCollectionViewLayout
An Excel-like UICollectionView's layout.
Stars: ✭ 32 (-44.83%)
Mutual labels:  uicollectionview
motion trace bulk
MMDモーショントレース自動化一括処理バッチ
Stars: ✭ 36 (-37.93%)
Mutual labels:  3d-animation
SNCollectionViewLayout
Collection View Layouts is a set of custom flow layouts for iOS which imitate general data grid approaches for mobile apps.
Stars: ✭ 100 (+72.41%)
Mutual labels:  uicollectionview
MYBannerCycleView
ad carousel demo
Stars: ✭ 36 (-37.93%)
Mutual labels:  uicollectionview
ios ui recipe showcase
iOSアプリ開発 - UI実装であると嬉しいレシピブック掲載サンプル
Stars: ✭ 54 (-6.9%)
Mutual labels:  uicollectionview
hyperdrive
🚀 Pose-based rig caching plugin for Maya
Stars: ✭ 51 (-12.07%)
Mutual labels:  3d-animation
3d-pose-baseline-vmd
Openposeの2D人間骨格データから3D関節データを生成し、その関節データを出力します。
Stars: ✭ 80 (+37.93%)
Mutual labels:  3d-animation

IGStoriesClone

An example project created to show an advanced use case of IGListKit and to fully recreate the awesome Instagram Stories feature on Instagram.

Features

  • 3d cube animation
  • Bring up tapped story with custom presentation
  • IGListKit Diffing to make the collection fast
  • Multiple Story support
  • Multiple Story Items per Story (videos)
  • Automatic scrolling when Story is done
  • Go back a story item with a tap gesture
  • Go forward a story item with a tap gesture
  • Automatic transition if there are no Stories left

Example clips

Clips 1-2

Clips 3-4

Clip 5

Installation

Go to your terminal and clone the repository...Done!

Usage

For customization, go to ViewController.swift and the Assets folder and add your own movies/profile pictures locally

import UIKit
import IGListKit

class ViewController: UIViewController, ListAdapterDataSource {
    
    private var storyModel = [StoryModel]()
    
    lazy var adapter: ListAdapter = {
        return ListAdapter(updater: ListAdapterUpdater(), viewController: self)
    }()
    
    let collectionView: UICollectionView = {
        let collectionView = UICollectionView(frame: .zero, collectionViewLayout: UICollectionViewFlowLayout())
        collectionView.backgroundColor = .white
        return collectionView
    }()
    
    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        adapter.performUpdates(animated: true, completion: nil)
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        let stories = modelGenerators()
        let model = StoryModel(stories: stories)
        storyModel = [model]
        view.addSubview(collectionView)
        adapter.collectionView = collectionView
        adapter.dataSource = self
    }
    
    private func modelGenerators() -> [Story] {
        // Users
        let user1 = User(id: UUID().uuidString, profilePic: Bundle.main.url(forResource: "jeromeythehomie", withExtension: "jpg")!, handle: "jeromeythehomie")
        let user2 = User(id: UUID().uuidString, profilePic: Bundle.main.url(forResource: "mattlee077", withExtension: "jpg")!, handle: "mattlee077")
        let user3 = User(id: UUID().uuidString, profilePic: Bundle.main.url(forResource: "asethics", withExtension: "jpg")!, handle: "asethics")
        let user4 = User(id: UUID().uuidString, profilePic: Bundle.main.url(forResource: "nat.pat33", withExtension: "jpg")!, handle: "nat.pat33")
        
        // Story Items
        let storyItem1 = StoryItem(id: UUID().uuidString, url: Bundle.main.url(forResource: "IMG_0021", withExtension: "mov")!)
        let storyItem2 = StoryItem(id: UUID().uuidString, url: Bundle.main.url(forResource: "IMG_0460", withExtension: "mov")!)
        let storyItem3 = StoryItem(id: UUID().uuidString, url: Bundle.main.url(forResource: "IMG_1539", withExtension: "mov")!)
        let storyItem4 = StoryItem(id: UUID().uuidString, url: Bundle.main.url(forResource: "IMG_1636", withExtension: "mov")!)
        let storyItem5 = StoryItem(id: UUID().uuidString, url: Bundle.main.url(forResource: "IMG_1691", withExtension: "mov")!)
        let storyItem6 = StoryItem(id: UUID().uuidString, url: Bundle.main.url(forResource: "IMG_1704", withExtension: "mov")!)
        let storyItem7 = StoryItem(id: UUID().uuidString, url: Bundle.main.url(forResource: "IMG_1705", withExtension: "mov")!)
        let storyItem8 = StoryItem(id: UUID().uuidString, url: Bundle.main.url(forResource: "IMG_1706", withExtension: "mov")!)
        let storyItem9 = StoryItem(id: UUID().uuidString, url: Bundle.main.url(forResource: "IMG_1707", withExtension: "mov")!)

        // Stories
        let story1 = Story(user: user1, isRead: false, storyItems: [storyItem1, storyItem2, storyItem3])
        let story2 = Story(user: user2, isRead: false, storyItems: [storyItem4, storyItem5, storyItem6, storyItem7])
        let story3 = Story(user: user3, isRead: false, storyItems: [storyItem8])
        let story4 = Story(user: user4, isRead: false, storyItems: [storyItem9])
        let stories = [story1, story2, story3, story4]
        return stories

    }
    
    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        collectionView.frame = view.bounds
    }
    
    func objects(for listAdapter: ListAdapter) -> [ListDiffable] {
        return storyModel
    }
    
    func listAdapter(_ listAdapter: ListAdapter, sectionControllerFor object: Any) -> ListSectionController {        
        return StorySectionController()
    }
    
    func emptyView(for listAdapter: ListAdapter) -> UIView? {return nil}
}

To-do and future releases

  • Fix AVQueuePlayer "flickering" between Stories
  • Dismissing animation and last cell detection with proper animation
  • Pull-to-refresh the Stories such that if the Story has been read, we move it to the end.
  • Fix light gray circle background appearence when read (need help with this one)
  • ** For some reason there's a bug on iPhone X, XS, etc. where the cube animation is slow (need help with this one)

Author

Jerome Isaacs

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