Horizontal ScrollView having n number of buttons : [iOS]

Question

How to create a horizontal scroll view at the top like a scrolling menu having many buttons (example : 20 buttons) ? Please help !

I am using following code :

CGRect buttonFrame = CGRectMake(0.0f, 0.0f, scrollView.frame.size.width, scrollView.frame.size.height);
    for (NSString *text in wordsArray) {
        UIButton *button = [[UIButton alloc]initWithFrame:buttonFrame];
        button.text = text;
        [scrollView addSubview:button];

        buttonFrame.origin.x +=buttonFrame.size.width;
    }

    CGSize contentSize = scrollView.frame.size;
    contentSize.width = buttonFrame.origin.x;
    scrollView.contentSize = contentSize;

But not getting what i want.

Please check this answer, I think this is the one, for what you are looking for http://stackoverflow.com/questions/6688160/how-to-programmatically-add-a-uisegmentedcontrol-to-a-container-view/6689592#6689592 — Wolverine, Oct 05 '16 at 07:33

score 5 · Accepted Answer · answered Oct 05 '16 at 07:17

I have tried to solve this, might be solve your problem

NSMutableArray *wordsArray = [NSMutableArray arrayWithObjects:@"AAA", @"BBB", @"CCCC", @"dd", @"eeeee", @"ffff", @"g", @"hhh", @"iiiiiii",  @"jjjj", @"kkkkk", @"lllll", nil];

CGFloat btnFrameX = 10.0;
CGFloat Width = self.scrollview.frame.size.width;
CGFloat Height = self.scrollview.frame.size.height;
UIButton *button;
for (NSString *text in wordsArray) {

    button = [UIButton buttonWithType:UIButtonTypeCustom];
    [button setBackgroundColor:[UIColor orangeColor]];
    [button.titleLabel setFont:[UIFont systemFontOfSize:20.0f]];
    [button setTitle:text forState:UIControlStateNormal];

    button.frame = CGRectMake(btnFrameX, 20, Width, Height);

    [self.scrollview addSubview:button];

    btnFrameX = btnFrameX + Width + 5;
}

CGSize contentSize = self.scrollview.frame.size;
contentSize.width = wordsArray.count * (Width + btnFrameX);
self.scrollview.contentSize = contentSize;

ScreenShot:

Happy coding...

CHwang · Answer 2 · 2016-10-05T06:22:43.337

2

Try this:

CGFloat buttonX = 0.f;
CGFloat buttonY = 0.f;
CGFloat buttonWidth = scrollView.frame.size.width;
CGFloat buttonHeight = scrollView.frame.size.height;
for (int i = 0; i < wordsArray.count; i++)
{
    UIButton *button = [UIButton new];
    [button setTitle:wordsArray[i] forState:UIControlStateNormal];
    [scrollView addSubview:button];

    buttonX = i * buttonWidth;
    button.frame = CGRectMake(buttonX, buttonY, buttonWidth, buttonHeight);
}

CGSize contentSize = scrollView.frame.size;
contentSize.width = wordsArray.count * buttonWidth;
scrollView.contentSize = contentSize;

edited Oct 05 '16 at 06:22

answered Oct 05 '16 at 06:09

CHwang

153
5

button.text is giving error :- text not found on object of type UIButton – shubham mishra Oct 05 '16 at 06:14
Well, its a button, fixed. – CHwang Oct 05 '16 at 06:23
distance between button is large, how to reduce distance between buttons – shubham mishra Oct 05 '16 at 06:29
You should change buttonWidth as you want, and adjust `buttonX = i * buttonWidth + factor` to set the spacing between buttons. – CHwang Oct 05 '16 at 06:36

score 2 · Answer 3 · answered Oct 05 '16 at 07:26

Unfortunately my code is in Swift, but you will get the gist of it. You can call button.sizeToFit() after you have set the title of the button. That way it will use the preferred width. Take care to use the new width of the button when determining the origin of the next button. Herewith my Swift class.

import Foundation
import UIKit

class ButtonsView: UIView {

    private var scrollView: UIScrollView?

    @IBInspectable
    var wordsArray: [String] = [String]() {
        didSet {
            createButtons()
        }
    }

    private func createButtons() {
        scrollView?.removeFromSuperview()
        scrollView = UIScrollView(frame: CGRect(x: 0, y: 0, width: self.frame.size.width, height: self.frame.size.height))
        self.addSubview(scrollView!)
        scrollView!.backgroundColor = UIColor.gray

        let padding: CGFloat = 10
        var currentWidth: CGFloat = padding
        for text in wordsArray {
            let button = UIButton(frame: CGRect(x:currentWidth, y: 0.0, width: 100, height: self.frame.size.height))
            button.setTitle(text, for: .normal)
            button.sizeToFit()
            let buttonWidth = button.frame.size.width
            currentWidth = currentWidth + buttonWidth + padding
            scrollView!.addSubview(button)
        }
        scrollView!.contentSize = CGSize(width:currentWidth,height:scrollView!.frame.size.height)
    }
}

score 1 · Answer 4 · answered Oct 05 '16 at 06:11

1

You can use collectionView using custom collectionViewCell and set its property as below :

[collectionView setScrollDirection:UICollectionViewScrollDirectionHorizontal];

[collectionView setPagingEnabled:NO];

answered Oct 05 '16 at 06:11

KKRocks

7,878
1
14
81

Horizontal ScrollView having n number of buttons : [iOS]

4 Answers4

Linked