Making a sliding view in iOS

Question

I wanted to know how I could create a row of buttons that you could slide right and left. For example in "Cut The Rope" you can slide left and right to find the box you want. How would I achieve this and also be able to add more buttons to it later on?

Answer 1

The scroll effect you want to achieve can be done with a UIScrollView or with a UICollectionView.

If you want to implement some kind of grid with multiple custom view it is better to use a UICollectionView because configuring the layout of a UIScrollView can be very tricky.

You can find some explication on how to set up a UICollectionView here : Setting Up a UICollectionView in iOS. Its API is similar to a UITableView but it can scroll both horizontally and vertically. Just add your buttons inside UICollectionViewCells as you would do with UITableViewCell.

Answer 2

You can use this code.

class ViewController: UIViewController {

    @IBOutlet weak var categoryScrollView: UIScrollView!
    var categoryArr = ["Button1","Button2","Button3","Button4","Button5"]
    var buttonColors = [UIColor.greenColor(), UIColor.blueColor(), UIColor.blackColor(), UIColor.cyanColor(), UIColor.magentaColor()]
    let kPadding:CGFloat = 10

    override func viewDidLoad() {
        super.viewDidLoad()

        let buttonSize = CGSizeMake(categoryScrollView.bounds.size.width/2, categoryScrollView.bounds.size.height/2)//hal

        let scrollingView = colorButtonsView(buttonSize, buttonCount: 5)
        categoryScrollView.contentSize = scrollingView.frame.size
        categoryScrollView.addSubview(scrollingView)
        categoryScrollView.showsVerticalScrollIndicator = false
        categoryScrollView.delegate = self
        categoryScrollView.pagingEnabled = true
        categoryScrollView.indicatorStyle = .Default
        categoryScrollView.contentOffset = CGPointMake(0, 0)
    }


    func colorButtonsView(buttonSize:CGSize, buttonCount:Int) -> UIView {
        let buttonView = UIView()
        buttonView.frame.origin = CGPointMake(0,0)
        let padding = CGSizeMake(kPadding, kPadding)
        buttonView.frame.size.width = (buttonSize.width + padding.width) * CGFloat(buttonCount)
        var buttonPosition = CGPointMake(0, padding.height)
        let buttonIncrement = buttonSize.width + padding.width
        for i in 0...(buttonCount - 1)  {
            let button = UIButton(type: .Custom)
            button.frame.size = buttonSize
            button.frame.origin = buttonPosition
            buttonPosition.x = buttonPosition.x + buttonIncrement
            button.setTitle(categoryArr[i], forState: UIControlState.Normal)
            button.backgroundColor = buttonColors[i]
            buttonView.addSubview(button)
        }
        buttonView.backgroundColor = UIColor.redColor()
        return buttonView
    }
}
extension ViewController:UIScrollViewDelegate{
    func scrollViewDidEndDecelerating(scrollView: UIScrollView) {

        let index = round(scrollView.contentOffset.x / scrollView.frame.size.width)
        print(index)
    }
}