App store style horizontal scroll view

Overview

ASHorizontalScrollView

App store style horizontal scroll view Swift Version License MIT Plaform Carthage compatible Pod Version

It acts similar to apps sliding behaviours in App store. There are both Objective-C (do not update anymore since v1.3) and Swift version available and they perform exactly the same function, please find whichever you like.

Please note that the gif is not from the sample project.

Please note that from now on, the objective-C source won't be updated anymore as I have been using Swift for all my works totally.

Installation

Install using one of the following options:

  1. Download the source from "Source" folder and drag into your project.

  2. Using CocoaPods

    Swift

    pod 'ASHorizontalScrollView', '~> 1.5.2'

    Objective-C

    pod 'ASHorizontalScrollViewForObjectiveC', '~> 1.3'
  3. Using Carthage

    Swift

    github "terenceLuffy/AppStoreStyleHorizontalScrollView" ~> 1.5.2

How to use it?

Please check in here (updated for v1.5, please check sample project for usage)

Versions:

1.0: Initial release

1.1: Change to adapt iOS 9 and Swift 2.1

1.2: Change C style code to Swift 3 compatible code, fix removeItemAtIndex last index crash bug

1.3: Supoort Swift 3 and XCode 8, add support to nib file

1.4: Add custom width when judging whether to scroll to next item; add support to all Apple devices screen size, now you can specified different mini margin, mini appear width and left margin for all sorts of screen sizes.

1.5: Introduce new properties to allow set number of items per screen for multiple screen sizes instead of setting minimum margins, as well as new properties to center subviews when items are not wide enough to use whole screen width

1.5.1: Add checking on items size before removing all items to avoid crash

1.5.2: Migrate to Swift 4.2 and add settings for iPhone X, Xs, XR and Xs Max landscape support

iOS Supported Version

iOS 8.0 or above.

Authorization

The MIT License (MIT) Copyright (C) 2014-Current WEIWEI CHEN

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Support

Having bugs? Please send me an email.

Comments
  • Adding a button on top and title on bottom

    Adding a button on top and title on bottom

    Hi, really appreciate the good work, is there a way to put a button on top and an label at the bottom like the instagram stories like below?

    screen shot 2017-06-13 at 9 47 34 pm

    This is what happens after I used addItem on both the button and label: screen shot 2017-06-13 at 9 46 44 pm

    Much thanks!

    bug 
    opened by mding5692 7
  • How to add different content to each item

    How to add different content to each item

    Hi,

    I'm currently making a application and I'm using your amazing ScrollView because it's pretty easy to use. However I still don't understand a couple things. I currently have this piece of code to generate the items:

    for rows in 0...20 {
        if indexPath.row == rows {
            horizontalScrollView.arrangeType = .byNumber
            horizontalScrollView.marginSettings_320 = MarginSettings(leftMargin: 1, numberOfItemsPerScreen: 4.25)
            horizontalScrollView.marginSettings_480 = MarginSettings(leftMargin: 1, numberOfItemsPerScreen: 5.25)
            horizontalScrollView.marginSettings_414 = MarginSettings(leftMargin: 1, numberOfItemsPerScreen: 4.25)
            horizontalScrollView.marginSettings_736 = MarginSettings(leftMargin: 1, numberOfItemsPerScreen: 7.375)
            horizontalScrollView.uniformItemSize = CGSize(width: 400, height: 280)
            horizontalScrollView.setItemsMarginOnce()
            for _ in 1...20 {
    
    
                // ==============
                // ==== CARD ====
                // ==============
    
                let card = UITableViewCell(frame: CGRect(x: 0, y: 0, width: 800, height: 280))
                card.layer.cornerRadius = 5.0
                card.layer.borderWidth = 1.0
                card.layer.borderColor = UIColor(hex: colors["main"] !).cgColor
    
                // ===============
                // ==== IMAGE ====
                // ===============
    
                let cardImage = UIImage(named: "header")
                let cardImageView = UIImageView(image: cardImage)
                cardImageView.frame = CGRect(x: 0, y: 0, width: 400, height: 180)
                cardImageView.roundCorners(corners: [.topLeft, .topRight], radius: 5.0)
    
                // =====================
                // ==== CARD FOOTER ====
                // =====================
    
                let cardFooter = UIView(frame: CGRect(x: 0, y: 180, width: 400, height: 100))
                cardFooter.backgroundColor = UIColor.white
                cardFooter.roundCorners(corners: [.bottomLeft, .bottomRight], radius: 5.0)
    
                // info button
                let btn = UIButton(frame: CGRect(x: 240, y: 60, width: 150, height: 30))
                btn.setTitle("More info".uppercased(),
                    for: UIControlState.normal)
                btn.setTitleColor(UIColor(hex: colors["main"] !),
                    for: UIControlState.normal)
                btn.layer.borderWidth = 1.0
                btn.layer.borderColor = UIColor(hex: colors["main"] !).cgColor
                btn.layer.cornerRadius = 3.0
                btn.titleLabel!.font = UIFont.boldSystemFont(ofSize: 12)
                btn.addTarget(self, action: #selector(log(button: )),
                    for: UIControlEvents.touchUpInside)
    
                let label = UILabel(frame: CGRect(x: 10, y: 10, width: 200, height: 30))
                label.text = "Job titel"
                label.font = UIFont.boldSystemFont(ofSize: 20)
    
                let sublabel = UILabel(frame: CGRect(x: 10, y: 40, width: 200, height: 30))
                sublabel.text = "Small description for the job application..."
                sublabel.font = UIFont.boldSystemFont(ofSize: 10)
    
                cardFooter.addSubview(label)
                cardFooter.addSubview(sublabel)
                cardFooter.addSubview(btn)
    
                card.addSubview(cardImageView)
                card.addSubview(cardFooter)
                horizontalScrollView.addItem(card)
    
    
    
    
            }
        }
    
        cell ? .contentView.addSubview(horizontalScrollView)
        horizontalScrollView.translatesAutoresizingMaskIntoConstraints = false
        cell ? .contentView.addConstraint(NSLayoutConstraint(item: horizontalScrollView, attribute: NSLayoutAttribute.height, relatedBy: NSLayoutRelation.equal, toItem: nil, attribute: NSLayoutAttribute.notAnAttribute, multiplier: 1, constant: kCellHeight))
        cell ? .contentView.addConstraint(NSLayoutConstraint(item: horizontalScrollView, attribute: NSLayoutAttribute.width, relatedBy: NSLayoutRelation.equal, toItem: cell!.contentView, attribute: NSLayoutAttribute.width, multiplier: 1, constant: 0))
    
    }
    

    What this does is, it generates 20 scrollable rows, with each 20 items inside of it. They all have the same Image, Title, and Subtitle tho because I provided that in the loop. How would I go and add a different Image, Title and Subtitle for each one.

    For example, how would I set them for the 4th row and 8th item. A small explanation would be appreciated.

    Thanks!

    opened by User934903920432 5
  • Scroll View

    Scroll View

    hello, I have a problem using this library , the element appear on the right top of the layer of scoll , but left they appear below , as you can make them appear below the layer rather than over ?? Thank you

    opened by ghost 3
  • Center function not working

    Center function not working

    I added the function centerSubviews into ASHorizontalScrollView.swift and in refreshSubviews I added this but elements in the scroll view will still not center.

    fileprivate func refreshSubView()
        {
            self.setItemsMarginOnce();
            var itemX = self.leftMarginPx
            for item in self.items
            {
                item.frame = CGRect(x: itemX, y: item.frame.origin.y, width: item.frame.width, height: item.frame.height)
                itemX += item.frame.width + self.itemsMargin
            }
    
            itemX = itemX - self.itemsMargin + self.leftMarginPx;
            self.centerSubviews()
            self.contentSize = CGSize(width: itemX, height: self.frame.size.height)
        }
    
    
    opened by ReeceHumphreys 2
  • Adding Event Listener

    Adding Event Listener

    Is there a way to add event listener for the horizontal scroll view? I would like to detect which item in the horizontal scroll view has been touched.

    opened by s-p-a-r-k 2
  • How To Get Buttons Index

    How To Get Buttons Index

    Hello, I have a question need to consult

                for _ in 0 ... 10 {
    
                    let button = UIButton(frame: CGRectZero)
                    button.backgroundColor = UIColor.purpleColor()
                    button.addTarget(self, action: #selector(tapButton(_:)), forControlEvents: UIControlEvents.TouchUpInside)
                    horizontalScrollView.addItem(button)
                }
    

    when i touch one button , how to get the button idnex..

    😄

    opened by dowhilenet 2
  • Crash in removeAllItems method

    Crash in removeAllItems method

    If there are no items in scroll view app crashes when calling removeAllItems. It's trying to create range 0...-1. Could you please add check for this case

    opened by wadimbylvar 1
  • horizontal timeline scrollable

    horizontal timeline scrollable

    Hi, I can use AppStoreStyleHorizontalScrollView to this solution:

    schermata 2016-05-18 alle 10 34 07 It's a horizontal timeline scrollable.

    Thank you :)

    Sorry, I read the documentation, it's possibile!! :)

    opened by Coco9077 0
  • scrollview add items Not remove

    scrollview add items Not remove

    let horizontalScrollView = ASHorizontalScrollView(frame:CGRect(x: 0, y: 0, width: timesView.frame.size.width, height: 50)) timeButtonsArr.removeAll() horizontalScrollView.removeAllItems() ->> Not Working timesView.addSubview(horizontalScrollView) for _ in 1...3{ let button = UIButton(frame: CGRect.zero) button.backgroundColor = UIColor.blue horizontalScrollView.addItem(button) } Give me a solution... plz.

    Result of call to 'removeAllItems()' is unused

    opened by yoonjason 1
  • How to use this?

    How to use this?

    `import UIKit import ASHorizontalScrollView

    class ViewController: UIViewController {

    @IBOutlet weak var scrollView: ASHorizontalScrollView!
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        scrollView.removeAllItems()
       //Thread 1:EXC_BAD_ACCESS (code = 2, address = 0x11199a9e8)
    
       scrollView.uniformItemSize = CGSize(width: 80, height: 50)
      //Thread 1:EXC_BAD_ACCESS (code = 2, address = 0x11199a9e8)
    }
    

    } `

    Thread 1:EXC_BAD_ACCESS (code = 2, address = 0x11199a9e8)

    what is first settings?

    opened by yoonjason 0
  • Add Item into Views

    Add Item into Views

    I try to customize my views inside horizontalScrollView, but the item only appear on once, not completely iterate. Look like this :

    screen shot 2017-04-03 at 4 20 30 pm

    I used this code :

    if indexPath.row == 0 {
         horizontalScrollView.uniformItemSize = CGSize(width: 80, height: 60)
         horizontalScrollView.setItemsMarginOnce()
                    for _ in 1...20{
                        let imageView = UIImageView(frame: CGRect.zero)
                        imageView.image = UIImage(named: "cetakidcard")
                        imageView.contentMode = .scaleAspectFill
                        let viewSome = UIView()
                        viewSome.backgroundColor = UIColor.black
                        
                        let produkLabel = UILabel()
                        produkLabel.text = "Software Antrian"
                        
                        let produkImage = UIImageView()
                        produkImage.image = UIImage(named: "cetakidcard")
                        produkImage.contentMode = .scaleAspectFill
                        
                        produkImage.snp.makeConstraints { make in
                            make.height.equalTo(50)
                            make.width.equalTo(50)
                        }
                        
                        viewSome.addSubview(produkImage)
                        horizontalScrollView.addItem(viewSome)
                  }
    }
    
    opened by indrac 3
  • miniMarginPxBetweenItems is get only property cannot assign

    miniMarginPxBetweenItems is get only property cannot assign

    After I updated the pod to 1.5 and after that i am not able to use two properties miniMarginPxBetweenItems and miniAppearPxOfLastItem. What version I should use, i am currently working on swift 3.0

    opened by Nidhee 1
  • How to use in the ScrollView?

    How to use in the ScrollView?

    How to use in the ScrollView?

    `let horizontalScrollView:ASHorizontalScrollView = ASHorizontalScrollView(frame:CGRect(x: 0, y: Y, width:ScreenWidth, height: 50)) //for iPhone 5s and lower versions in portrait horizontalScrollView.marginSettings_320 = MarginSettings(leftMargin: 10, miniMarginBetweenItems: 5, miniAppearWidthOfLastItem: 20) //for iPhone 4s and lower versions in landscape horizontalScrollView.marginSettings_480 = MarginSettings(leftMargin: 10, miniMarginBetweenItems: 5, miniAppearWidthOfLastItem: 20) // for iPhone 6 plus and 6s plus in portrait horizontalScrollView.marginSettings_414 = MarginSettings(leftMargin: 10, miniMarginBetweenItems: 5, miniAppearWidthOfLastItem: 20) // for iPhone 6 plus and 6s plus in landscape horizontalScrollView.marginSettings_736 = MarginSettings(leftMargin: 10, miniMarginBetweenItems: 10, miniAppearWidthOfLastItem: 30) //for all other screen sizes that doesn't set here, it would use defaultMarginSettings instead horizontalScrollView.defaultMarginSettings = MarginSettings(leftMargin: 10, miniMarginBetweenItems: 10, miniAppearWidthOfLastItem: 20) horizontalScrollView.uniformItemSize = CGSize(width: 80, height: 50)

        //this must be called after changing any size or margin property of this class to get acurrate margin
        tab1.addSubview(horizontalScrollView)
     
        for _ in 1...20{
            let button = UIButton(frame: CGRect.zero)
            button.backgroundColor = UIColor.purple
            horizontalScrollView.addItem(button)
        }
           horizontalScrollView.setItemsMarginOnce()
        horizontalScrollView.refreshSubView()
        
        scroolview.addSubview(tab1)`
    
    opened by BadDeveloper2022 3
Releases(1.5.2)
  • 1.5.2(Oct 17, 2018)

  • 1.5.1(Mar 6, 2017)

  • 1.5(Jan 24, 2017)

    Introduce new properties to allow set number of items per screen for multiple screen sizes instead of setting minimum margins, as well as new properties to center subviews when items are not wide enough to use whole screen width

    Source code(tar.gz)
    Source code(zip)
  • 1.4(Dec 2, 2016)

    Add custom width when judging whether to scroll to next item; add support to all Apple devices screen size, now you can specified different mini margin, mini appear width and left margin for all sorts of screen sizes.

    Source code(tar.gz)
    Source code(zip)
  • 1.3(Sep 15, 2016)

  • 1.2(May 17, 2016)

  • 1.1(Dec 9, 2015)

    Objective-C: Add comments on functions, remove scale when calculating margin, it seems that the behaviour in iOS 9 change the way of align views

    Swift: Change to adapt Swift 2.1, add comments on functions, remove scale when calculating margin, it seems that the behaviour in iOS 9 change the way of align views

    Source code(tar.gz)
    Source code(zip)
  • 1.0(Aug 23, 2015)

Owner
Terence Chen
Terence Chen
A non gesture blocking, non clipping by default custom scroll view implementation with example code

A non gesture blocking, non clipping by default custom scroll view implementation with example code

Marco Boerner 10 Dec 6, 2022
OpenSwiftUIViews - A non gesture blocking, non clipping by default custom scroll view implementation with example code.

OpenSwiftUIViews - A non gesture blocking, non clipping by default custom scroll view implementation with example code.

Marco Boerner 11 Jan 4, 2023
Swipe between pages with an interactive title navigation control. Configure horizontal or vertical chains for unlimited pages amount.

SlideController is a simple and flexible UI component fully written in Swift. Built using power of generic types, it is a nice alternative to UIPageVi

Touchlane 411 Jan 5, 2023
This is a control that helps you dramatically ease your infinite scroll processing.

InfiniteScrollControl Example To run the example project, clone the repo, and run pod install from the Example directory first. Requirements Installat

Minseok Kang 0 Nov 15, 2021
UIScrollView ∞ scroll category

UIScrollView+InfiniteScroll Infinite scroll implementation as a category for UIScrollView. * The content used in demo app is publicly available and pr

Andrej Mihajlov 1k Dec 29, 2022
SwiftUI ScrollView with custom pull to refresh & scroll to load-more implementations

PaginatedScrollView SwiftUI ScrollView with custom "pull to refresh" & "scroll to load-more" implementations. example usage PaginatedScrollView {

Aung Ko Min 7 Sep 20, 2022
A SwiftUI ScrollView Designed to imitate the App Store and Apple Music ScrollViews (with or without a Parallax Header)

FancyScrollView I spent a lot of time looking for a way to recreate the UI of the ScrollViews in Stock Apple Apps (i.e. App Store and Apple Music) ins

Mathias Quintero 696 Dec 30, 2022
ScrollingFollowView is a simple view which follows UIScrollView scrolling.

ScrollingFollowView ScrollingFollowView is a simple view which follows UIScrollView scrolling. ScrollingFollowView Sample Images SearchBarSample : Sea

Tanaka Kenji 186 Dec 21, 2022
Full configurable spreadsheet view user interfaces for iOS applications. With this framework, you can easily create complex layouts like schedule, gantt chart or timetable as if you are using Excel.

kishikawakatsumi/SpreadsheetView has moved! It is being actively maintained at bannzai/SpreadsheetView. This fork was created when the project was mov

Kishikawa Katsumi 34 Sep 26, 2022
iOS custom view to display books on shelf

ShelfView (iOS) iOS custom view to display books on shelf (Android version is available here) Requirements iOS 10.0+ Swift 4.2 Installation ShelfView

Adeyinka Adediji 268 Dec 10, 2022
A fully customizable container view controller to display a set of ViewControllers in a horizontal scroll view. Written in Swift.

DTPagerController This is a control for iOS written in Swift. DTPagerController is simple to use and easy to customize. Screenshots Default segmented

Tung Vo 290 Nov 13, 2022
A fully customizable container view controller to display a set of ViewControllers in a horizontal scroll view. Written in Swift.

DTPagerController This is a control for iOS written in Swift. DTPagerController is simple to use and easy to customize. Screenshots Default segmented

Tung Vo 290 Nov 13, 2022
A scroll view with a sticky header which shrinks as you scroll. Written with SwiftUI.

Scaling Header Scroll View A scroll view with a sticky header which shrinks as you scroll. Written with SwiftUI. We are a development agency building

Exyte 395 Dec 31, 2022
A horizontal scroll dial like Instagram.

HorizontalDial Preview Requirements iOS 8.0+ Swift 5 Storyboard support Installation CocoaPods use_frameworks! pod "HorizontalDial" Manually To instal

Lee Sun-Hyoup 210 Nov 22, 2022
🍎 An App to check whether a non-App Store app is in App Store.

AppStorify ?? An App to check whether a non-App Store app is in App Store. Benfits Use App Store's upgrade mechanism instead of app's. App Store apps

seedgou 58 Dec 7, 2022
Useful for showing text or custom view tags in a vertical or horizontal scrollable view and support Autolayout at the same time

Useful for showing text or custom view tags in a vertical or horizontal scrollable view and support Autolayout at the same time. It is highly customizable that most features of the text tag can be configured.

zekunyan 1.8k Dec 30, 2022
Store-App - Store app made for IOS using Swift programming language

Store-App Store app views products, cart, and using login from https://fakestore

Anas Khalil 2 Jan 1, 2022
A paging menu controller built from other view controllers placed inside a scroll view (like Spotify, Windows Phone, Instagram)

Unfortunately, life gets in the way sometimes and I won't be able to maintain this library any longer and upgrade this library to where it needs to be

null 5.2k Dec 31, 2022
Paging view controller and scroll tab view

TabPageViewController Description TabPageViewController is paging view controller and scroll tab view. Screenshot Infinity Mode Limited Mode Customiza

M 1.3k Jan 7, 2023
daemon DICOMweb store proxying to pacs in c-store protocol

POSTCSTORE versionado versión autor comentario 2021-11-02 Jacques Fauquex versión inicial 2021-11-02 Jacques Fauquex aetLocal en la ruta del servicio.

null 1 Mar 18, 2022