CODEWITHSUNDEEP
iosobjective-ccocoa-touch
centree
centree

Reputation: 2439

Segmented Control inside of Scroll View

I'm trying to create a really long segmented controller to let users choose between many options. How can I go about getting it inside of a Scroll View?

I've tried dragging and dropping it but it doesn't let me scroll it.

Upvotes: 7

Views: 12655

Answers (6)

user8091604
user8091604

Reputation: 1

In UIBuilder you can add ScrollView that goes inside the ViewController and fill it with your segmented control that it's bigger than the screen.

Segmented Control Storyboard Segmented Control UI Properties

Upvotes: -1

user5247020
user5247020

Reputation:

If UISegmentedControl width is 640, use:

[yourScrollView setContentSize:CGSizeMake([segControl frame].size.width, 0)];

Using this line will make it scroll horizontally to choose more option on UISegmentedControl.

Upvotes: 0

penningthoughts
penningthoughts

Reputation: 71

Try adding a segmented control in a scroll view by this code : 

- (void)viewDidLoad
{
    [super viewDidLoad];

    journals = [[NSMutableArray alloc]init];

    self.tableView.dataSource = self;
    self.tableView.delegate = self;

    UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 49, 320, 29)];
    self.segmentedControl.frame = CGRectMake(0, 0, 640, 29);

    scrollView.contentSize = CGSizeMake(self.segmentedControl.frame.size.width, self.segmentedControl.frame.size.height -1);
    scrollView.showsHorizontalScrollIndicator = NO;

    self.segmentedControl.selectedSegmentIndex = 0;

    [scrollView addSubview:self.segmentedControl];
    [self.view addSubview:scrollView];

    [self fillJournals];

    // Do any additional setup after loading the view, typically from a nib.
}

Here's a post on how to create a segmented control inside a scroll view

http://penningthoughtsandmemoirs.com/2013/12/16/sliding-segmented-control/

Download the source code from :

https://github.com/sahilriaz1110/SlidingSegmentedControl

Upvotes: 5

user1040049
user1040049

Reputation:

Instead of suggesting how to put the segmented control in a scrollview (see the other answers listed) I'm going to suggest a different approach altogether: change UI element.

If you had a couple (two to three) mutually exclusive options on a desktop application, you could use radio buttons and it would make sense; but if you had ten and above options, throwing these radio button in a scrollview would not be the best choice. A better/cleaner user interface would make use of a drop-down menu.

That was for a desktop application.. but the UI principles for mobile OSes are the same. A segment control should have few options (maybe five tops). Any more than that and you should use a different UI element.

Imagine if the iPhone, when selecting a language, offered every language in a segmented control. No! Instead, when choosing a language, you're shown a list to choose from.

Upvotes: 1

George Mitchell
George Mitchell

Reputation: 1168

Are you using autolayout? If so then you will need to set the scrollView's content size from within viewDidLayoutSubviews. Like:

- (void) viewDidLayoutSubviews
{
    [super viewDidLayoutSubviews];
    [scrollView setContentSize:[segControl frame].size];
}

If you aren't using autolayout then you can just do it in -(void)viewDidLoad like:

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    [scrollView setContentSize:[segControl frame].size];
}

EDIT You may also want to make the scrollview contentSize slightly smaller than your segmented control so there is no give in the vertical direction:

[scrollView setContentSize:CGSizeMake([segControl frame].size.width, [segControl frame].size.height-1)];

Upvotes: 0

Levi
Levi

Reputation: 7343

You have to set the content size of the UIScrollView, otherwise it won't scroll.

myScrollView.contentSize = mySegmentedControl.frame.size;

Upvotes: 1

Related Questions