Swipe UISegmentedControl beyond bounds

iOS 13.2 - XCode 11..2


I create (in IB) a UISegmentedControl with 8 segments.

I know it goes against HIG

"Limit the number of segments to improve usability. Wider segments are easier to tap. On iPhone, a segmented control should have five or fewer segments."

But let's continue for the sake of investigation.

I set the width of each segment to 80.

I set the size of the segmentedControl to 400.

So, of course, I can just see 5 of them, from n°1 to n°5.


When swiping, selection moves, possible beyong the bound, so become invisible.


I tried adding a right and left swipe gesture, to select the next or previous segment.

Works OK, but when I reach segment n°5, next (n°6) becomes selected but still hidden outside the view of the segmented control.


Is it possible to make the segmentedControl scroll to left, so that first visible segment would become n°2 and n°6 gets visible on the right ?

Or do I need to set size (or select automatic) so that all segments fit into the visible area ? Or reduce the size of leftmost segments to make room for others after swipe ?

Answered by PBK in 397604022

Sorry, I misread your original post. I am unfamiliar with 'swiping a UISegmentedControl' - I immediately jumped to 'scrolling a UISegmentedControl within a UIScrollView'.


I am not sure I understand what you are trying to do.

Regarding getting more segments in a UISegmentedControl - I guess you could reconfigure each segment (i.e. change 1-5 to 2-6) each time you detected a swipe gesture that was added to the UISegmentedControl. Alternatively you could consider inserting a super long UISegmentedControl in a reasonably sized UIScrollView (with a super long contentSize) and scrolling the UIScrollView to display more of the UISegmentedController (sort of what I assumed you were doing).

The approach I use to display a UISegmentedControl that allows you to chose any of 30 'portfolios' is to have 7 segments (see the app OptionPosition+). The first segment is "<" and the last segment is ">". The inside 5 are 1,2,3,4,5. When you tap the ">" they become "6,7,8,9,10" then the next 5 then the next five.

It sounds like you are trying to do 2 things at the same time - swipe to select the next segment and swipe to display different segments. That may not be the best approach.

The uisegmentedcontrol is the view that the user sees. Inside that view is the content. The content is made larger then the view and the content is scrollable so that part of the content is displayed in the view. I can give you a code example in 12 hours when I am at my Mac.

Is this a segment sizing issue, say due to crowding in one or more examples, or are you really wanting to hide one or more offscreen?


You can set custom segment widths and try to spoof the UI to ignore the bleed, or, as the HIGs intimate, just ask iOS to size them individually for you.

You set the size of the scrollView to something small that fits on the screen,

e.g. CGRectMake(10,50,200,100).

You set the scrollView.contentSize to something bigger that the scrollView like your 400 - something that holds all the content -

e.g. CGSizeMake(400,100)

You load the content UIImageViews into the scrollView with a frame that is defined from 0.0,0.0 -

e.g. CGRectMake(0.0,0.0,100,100) and CGRectMake(300,0.0,100.0,100.0)

You set scrollView.scrollEnabled=YES;

You can detect scrolling in

- (void)scrollViewDidScroll:(UIScrollView *)scrollView{

//examine scrollView.contentOffset.x

}


There are other things that can ***** up scrolling - like "automatic layout".


Good luck.

Thanks for the reply.

This is for a scrollView.

How is it connected to segmentedControl ? Is there an implicit scrollView for segmented Control ?


What I am looking for is whether the segments of the segmented control can scroll beyond the last visible.

Accepted Answer

Sorry, I misread your original post. I am unfamiliar with 'swiping a UISegmentedControl' - I immediately jumped to 'scrolling a UISegmentedControl within a UIScrollView'.


I am not sure I understand what you are trying to do.

Regarding getting more segments in a UISegmentedControl - I guess you could reconfigure each segment (i.e. change 1-5 to 2-6) each time you detected a swipe gesture that was added to the UISegmentedControl. Alternatively you could consider inserting a super long UISegmentedControl in a reasonably sized UIScrollView (with a super long contentSize) and scrolling the UIScrollView to display more of the UISegmentedController (sort of what I assumed you were doing).

The approach I use to display a UISegmentedControl that allows you to chose any of 30 'portfolios' is to have 7 segments (see the app OptionPosition+). The first segment is "<" and the last segment is ">". The inside 5 are 1,2,3,4,5. When you tap the ">" they become "6,7,8,9,10" then the next 5 then the next five.

It sounds like you are trying to do 2 things at the same time - swipe to select the next segment and swipe to display different segments. That may not be the best approach.

Thanks.


My original question comes from the fact that UISegmentedControl supports swipe movement and I tried to understand what I could do with this.


Your solution of inserting < and > when needed is interesting.


I have also implemented another : reduce the width of the segments around selection when I scroll.

Swipe UISegmentedControl beyond bounds
 
 
Q