iOS 6 UISegmentedControl with iOS 7 design - ios

I'm working on an app that's supposed to work on both iOS 6 and iOS 7, and have the same flat design for both.
I'm trying to customize my UISegmentedControl to have borders, corner radius and all, but I can't figure out how to do so. I've only mange to have a flat background so far.
Does anyone have any advice to have an iOS 6 UISegmentedControl look like an iOS 7 one ?
EDIT :
I would like to have
instead of

You can use below code:
// To set colour of text
NSDictionary *attributes = [NSDictionary dictionaryWithObject:[UIColor whiteColor] forKey:UITextAttributeTextColor];
[segmentedControl setTitleTextAttributes:attributes forState:UIControlStateNormal];
NSDictionary *highlightedAttributes = [NSDictionary dictionaryWithObject:[UIColor whiteColor] forKey:UITextAttributeTextColor];
[segmentedControl setTitleTextAttributes:highlightedAttributes forState:UIControlStateHighlighted];
// Change color of selected segment
segmentedControl.segmentedControlStyle = UISegmentedControlStyleBar;
UIColor *newTintColor = [UIColor colorWithRed: 255/255.0 green:100/255.0 blue:100/255.0 alpha:1.0];
segmentedControl.tintColor = newTintColor;
UIColor *newSelectedTintColor = [UIColor clearColor];
[[[segmentedControl subviews] objectAtIndex:0] setTintColor:newSelectedTintColor];
And for seting rounded corners you can use below code:
// Add rounded yellow corner to segmented controll view
[segmentedControl.layer setCornerRadius:4.0f];
[segmentedControl.layer setBorderColor:[UIColor colorWithRed:1.0 green:0.7 blue:0.14 alpha:1.0].CGColor];
[segmentedControl.layer setBorderWidth:1.5f];
[segmentedControl.layer setShadowColor:[UIColor blackColor].CGColor];
[segmentedControl.layer setShadowOpacity:0.8];
[segmentedControl.layer setShadowRadius:3.0];
[segmentedControl.layer setShadowOffset:CGSizeMake(2.0, 2.0)];

You can take a look at an example here or take a custom control and change its images to fit your need.
Here's an example of how you can subclass UISegmentedControl:
#implementation CustomSegmentedControl
-(id)initWithItems:(NSArray *)items
{
self = [super initWithItems:items];
if (self) {
[self setDividerImage:[UIImage imageNamed:#"segmented-control-divider-none-selected"]
forLeftSegmentState:UIControlStateNormal
rightSegmentState:UIControlStateNormal
barMetrics:UIBarMetricsDefault];
[self setDividerImage:[UIImage imageNamed:#"segmented-control-divider-left-selected"]
forLeftSegmentState:UIControlStateSelected
rightSegmentState:UIControlStateNormal
barMetrics:UIBarMetricsDefault];
[self setDividerImage:[UIImage imageNamed:#"segmented-control-divider-right-selected"]
forLeftSegmentState:UIControlStateNormal
rightSegmentState:UIControlStateSelected
barMetrics:UIBarMetricsDefault];
// Set background images
UIImage *normalBackgroundImage = [UIImage imageNamed:#"segmented-control-normal"];
[self setBackgroundImage:normalBackgroundImage
forState:UIControlStateNormal
barMetrics:UIBarMetricsDefault];
UIImage *selectedBackgroundImage = [UIImage imageNamed:#"segmented-control-selected"];
[self setBackgroundImage:selectedBackgroundImage
forState:UIControlStateSelected
barMetrics:UIBarMetricsDefault];
[self setBackgroundImage:selectedBackgroundImage
forState:UIControlStateHighlighted
barMetrics:UIBarMetricsDefault];
double dividerImageWidth = [self dividerImageForLeftSegmentState:UIControlStateHighlighted rightSegmentState:UIControlStateNormal barMetrics:UIBarMetricsDefault].size.width;
[self setContentPositionAdjustment:UIOffsetMake(dividerImageWidth / 2, 0)
forSegmentType:UISegmentedControlSegmentLeft
barMetrics:UIBarMetricsDefault];
[self setContentPositionAdjustment:UIOffsetMake(- dividerImageWidth / 2, 0)
forSegmentType:UISegmentedControlSegmentRight
barMetrics:UIBarMetricsDefault];
return self;
}

I've finally used this submodule. It does the work :
https://github.com/pepibumur/PPiFlatSegmentedControl

Related

Segmented Controller background grey after iOS13

I'm currently having problems with an iOS 13 segmented controller. I have this method in which I change the appearance of my segmented controller, it worked great until iOS 13 got out. now I the segmentedController has a grey background always, even if I set the background color to white, or black or whatever.
What Can I do?
- (void)modifySegmentedControl{
if (#available(iOS 13.0, *)) {
[_segmentedControl setBackgroundColor:UIColor.clearColor];
[_segmentedControl setSelectedSegmentTintColor:UIColor.clearColor];
} else {
//I had this for <iOS13, it works great
[_segmentedControl setBackgroundColor:UIColor.clearColor];
[_segmentedControl setTintColor:UIColor.clearColor];
}
[_segmentedControl setTitleTextAttributes:
[NSDictionary dictionaryWithObjectsAndKeys:
[UIColor colorWithRed:0.25 green:0.25 blue:0.25 alpha:0.6], NSForegroundColorAttributeName,
[UIFont fontWithName:#"Poppins-Medium" size:15.0], NSFontAttributeName,
nil]
forState: UIControlStateNormal];
[_segmentedControl setTitleTextAttributes:
[NSDictionary dictionaryWithObjectsAndKeys:
[UIColor colorWithRed:0.25 green:0.25 blue:0.25 alpha:1.0], NSForegroundColorAttributeName,
[UIFont fontWithName:#"Poppins-Medium" size:15.0], NSFontAttributeName,
nil]
forState: UIControlStateSelected];
self->greenBar = [[UIView alloc] init];
//This needs to be false since we are using auto layout constraints
[self->greenBar setTranslatesAutoresizingMaskIntoConstraints:NO];
[self->greenBar setBackgroundColor:[UIColor colorWithRed:0.00 green:0.58 blue:0.27 alpha:1.0]]; //Kelley green
//
[_vistaTable addSubview:self->greenBar];
//
[self->greenBar.topAnchor constraintEqualToAnchor:_segmentedControl.bottomAnchor].active = YES;
[self->greenBar.heightAnchor constraintEqualToConstant:3].active = YES;
[self->greenBar.leftAnchor constraintEqualToAnchor:_segmentedControl.leftAnchor].active = YES;
[self->greenBar.widthAnchor constraintEqualToAnchor:_segmentedControl.widthAnchor multiplier:0.5].active = YES;
}
Try this:
if (#available(iOS 13.0, *)) {
self.segmentedControl.selectedSegmentTintColor = UIColor.redColor;
self.segmentedControl.layer.backgroundColor = UIColor.greenColor.CGColor;
}
.selectedSegmentTintColor defines the selected button color and .layer.backgroundColor the color for the whole UISegmentedControl background.
This is the result:
EDIT
It turns out this won't work for background clear or white, since on iOS 13 a sort of background image is added on the background and dividers of the segmented control:
A workaroud is create an image from color with UIGraphicsGetImageFromCurrentImageContext . The code looks like this:
- (void)viewDidLoad {
[super viewDidLoad];
if (#available(iOS 13.0, *)) {
self.segmentedControl.selectedSegmentTintColor = UIColor.redColor;
self.segmentedControl.layer.backgroundColor = UIColor.clearColor.CGColor;
[self customizeSegmentedControlWithColor: UIColor.whiteColor];
}
}
- (void)customizeSegmentedControlWithColor:(UIColor *)color {
UIImage *tintColorImage = [self imageWithColor: color];
[self.segmentedControl setBackgroundImage:[self imageWithColor:self.segmentedControl.backgroundColor ? self.segmentedControl.backgroundColor : [UIColor clearColor]] forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
[self.segmentedControl setBackgroundImage:tintColorImage forState:UIControlStateSelected barMetrics:UIBarMetricsDefault];
[self.segmentedControl setBackgroundImage:[self imageWithColor:[color colorWithAlphaComponent:0.2]] forState:UIControlStateHighlighted barMetrics:UIBarMetricsDefault];
[self.segmentedControl setBackgroundImage:tintColorImage forState:UIControlStateSelected|UIControlStateSelected barMetrics:UIBarMetricsDefault];
[self.segmentedControl setDividerImage:tintColorImage forLeftSegmentState:UIControlStateNormal rightSegmentState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
self.segmentedControl.layer.borderWidth = 1;
self.segmentedControl.layer.borderColor = [color CGColor];
}
- (UIImage *)imageWithColor: (UIColor *)color {
CGRect rect = CGRectMake(0.0f, 0.0f, 1.0f, 1.0f);
UIGraphicsBeginImageContext(rect.size);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetFillColorWithColor(context, [color CGColor]);
CGContextFillRect(context, rect);
UIImage *theImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return theImage;
}
Check more about it here.
This is the result for background view with color and segmented control white:
And is the result for background view white and segmented control with color:

UISegmentedControll appearance no border sharp edges

I'm therribly upset. I've spent lot of time and no suitable result.
I want to redesign (AS APPEARANCE) this
to this
Or in programmatic words... from this:
+(void)configureSegmentedControls {
[[UISegmentedControl appearance] setTintColor:[COLOR_PROXY highlightColor]];
[[UISegmentedControl appearance] setBackgroundColor:[COLOR_PROXY darkBackgroundColor]];
[[UISegmentedControl appearance] setDividerImage:[UIImage new] forLeftSegmentState:UIControlStateNormal rightSegmentState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
NSDictionary *selectedAttributes = #{NSFontAttributeName:[FONT_PROXY fontNormalOfSizeSmall],
NSForegroundColorAttributeName:[UIColor whiteColor]};
[[UISegmentedControl appearance] setTitleTextAttributes:selectedAttributes
forState:UIControlStateSelected];
NSDictionary *normalAttributes = #{NSFontAttributeName:[FONT_PROXY fontNormalOfSizeSmall],
NSForegroundColorAttributeName:[COLOR_PROXY highlightColor]};
[UISegmentedControl appearance] setTitleTextAttributes:normalAttributes
forState:UIControlStateNormal];
NSDictionary *disabledAttributes = #{NSFontAttributeName:[FONT_PROXY fontNormalOfSizeSmall],
NSForegroundColorAttributeName:[COLOR_PROXY lightGrayTextColor]};
[[UISegmentedControl appearance] setTitleTextAttributes:disabledAttributes forState:UIControlStateDisabled];
}
to this:
???
You can achieve this appearance like this:
self.segmentedControl.layer.cornerRadius = 0;
self.segmentedControl.layer.borderColor = [UIColor whiteColor].CGColor;
self.segmentedControl.layer.borderWidth = 1.5;
Replace [UIColor whiteColor] with the background color of the segmented control's superview.
You can set the width of the segments (using setWidth:forSegmentAtIndex:) so you can easily make the left and right end segments larger (say 10px larger) than the others and then you can crop off 10px from either end and have square corners. You don't have to make it larger than the screen width, instead put it inside a UIView and use it to crop the ends.
On the other hand just could just make your own segmented control using a set of custom UIButtons inside a UIControl.
segmentControl.layer.borderColor = [UIColor clearColor].CGColor;
segmentControl.layer.borderWidth = 1.5;
segmentControl.tintColor = [UIColor clearColor];
if background color is white then
segmentControl.layer.borderColor = [UIColor whiteColor].CGColor;
segmentControl.layer.borderWidth = 1.5;
segmentControl.tintColor = [UIColor whiteColor];
using images this may be achieved.
[segmented setImage:nil forSegmentAtIndex:0];
[segmented setImage:nil forSegmentAtIndex:1];
[segmented setTintColor:[UIColor darkGrayColor]];
[segmented setTitle:#"1" forSegmentAtIndex:0];
[segmented setTitle:#"2" forSegmentAtIndex:1];
[segmented setDividerImage:[self imageFromColor2:[UIColor darkGrayColor] withFrame:CGRectMake(0, 0, 1, segmented.frame.size.height)]
forLeftSegmentState:(UIControlStateNormal | UIControlStateSelected | UIControlStateHighlighted)
rightSegmentState:(UIControlStateNormal | UIControlStateSelected | UIControlStateHighlighted)
barMetrics:UIBarMetricsDefault];
[segmented setBackgroundImage:[self imageFromColor2:[UIColor lightGrayColor] withFrame:CGRectMake(0, 0, segmented.bounds.size.width/2.0+1, segmented.frame.size.height)]
forState:UIControlStateNormal
barMetrics:UIBarMetricsDefault];
to create color images:
- (UIImage *)imageFromColor2:(UIColor *)color withFrame:(CGRect)frame{
CGRect rect = frame;
UIGraphicsBeginImageContext(rect.size);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetFillColorWithColor(context, [color CGColor]);
CGContextFillRect(context, rect);
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return image;
}
and as a result i had this segmented control. you can play with the colors and get what you want.
only solution (for appearance) I've found is using images only...
UIImage *activeImage = [[UIImage imageNamed:#"btn_bg_active"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
UIImage *inactiveImage = [[UIImage imageNamed:#"btn_bg_inactive"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
[[UISegmentedControl appearance] setBackgroundImage:inactiveImage forState:UIControlStateDisabled barMetrics:UIBarMetricsDefault];
[[UISegmentedControl appearance] setBackgroundImage:inactiveImage forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
[[UISegmentedControl appearance] setBackgroundImage:activeImage forState:UIControlStateSelected barMetrics:UIBarMetricsDefault];
[[UISegmentedControl appearance] setBackgroundImage:inactiveImage forState:UIControlStateHighlighted barMetrics:UIBarMetricsDefault];
[[UISegmentedControl appearance] setDividerImage:[UIImage new] forLeftSegmentState:UIControlStateNormal rightSegmentState:UIControlStateSelected barMetrics:UIBarMetricsDefault];
[[UISegmentedControl appearance] setDividerImage:[UIImage new] forLeftSegmentState:UIControlStateSelected rightSegmentState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
[[UISegmentedControl appearance] setDividerImage:[UIImage new] forLeftSegmentState:UIControlStateNormal rightSegmentState:UIControlStateNormal barMetrics:UIBarMetricsDefault];

Unable to remove shadow from the Navigation Bar

I am trying to remove shadow from the navigationbar but not get success (iOS7).
Used the code below,
Method 1
[self.navigationController.navigationBar setBackgroundImage:image
forBarPosition:UIBarPositionAny
barMetrics:UIBarMetricsDefault];
[self.navigationController.navigationBar setShadowImage:[UIImage new]];
Method 2
for (UIView *view in self.navigationController.navigationBar.subviews) {
for (UIView *view2 in view.subviews) {
if ([view2 isKindOfClass:[UIImageView class]]) {
[view2 removeFromSuperview];
}
}
}
Method 3
[self.layer setMasksToBounds:YES];
Method 4
[[UINavigationBar appearance] setShadowImage:[[UIImage alloc] init]];
[[UINavigationBar appearance] setBackgroundImage:[[UIImage alloc] init] forBarMetrics:UIBarMetricsDefault];
Method 5
[self.navigationController.navigationBar setBackgroundImage:image
forBarPosition:UIBarPositionAny
barMetrics:UIBarMetricsDefault];
[self.navigationController.navigationBar setShadowImage:[[UIImage imageNamed:#"transparentpx.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(1, 1, 1, 1)]];
None of them worked for me.
Could any one suggest new method..
Using an empty image hasn't worked for me.
I had to use a 1x1 pixel transparent image as the shadow image in order for it to appear invisible.
[self.navigationBar setShadowImage:[[UIImage imageNamed:#"navbar-shadow"] resizableImageWithCapInsets:UIEdgeInsetsMake(1, 1, 1, 1)]];
Have you tried this?
self.navigationController.navigationBar.layer.opacity = 0;
self.navigationController.navigationBar.layer.borderWidth = 0;
self.navigationController.navigationBar.layer.borderColor = [[UIColor clearColor] CGColor];

UISegmentedControl titletext is blurry

I have implemented a header view in a collection view.
It is a UISegmentedControll with three items.
Here is the code:
NSArray *itemArray = [NSArray arrayWithObjects: #"Following", #"Everybody", #"Nearby", nil];
UISegmentedControl *segmentedControl = [[UISegmentedControl alloc] initWithItems:itemArray];
UIFont *font = [UIFont fontWithName:#"PatuaOne-Regular" size:12.0f];
UIColor *notChosenButtonColor = [UIColor colorWithRed:(201.0/255.0f) green:(198.0/255.0f) blue:(191.0/255.0f) alpha:1.0];
UIColor *chosenButtonColor = [UIColor colorWithRed:(235.0/255.0f) green:(218.0/255.0f) blue:(102.0/255.0f) alpha:1.0];
NSDictionary *normalAttributes = [NSDictionary dictionaryWithObjectsAndKeys:
font, UITextAttributeFont,
notChosenButtonColor, UITextAttributeTextColor,
nil];
NSDictionary *selectedAttributes = [NSDictionary dictionaryWithObjectsAndKeys:
font, UITextAttributeFont,
chosenButtonColor, UITextAttributeTextColor,
nil];
[segmentedControl setTitleTextAttributes:normalAttributes forState:UIControlStateNormal];
[segmentedControl setTitleTextAttributes:selectedAttributes forState:UIControlStateSelected];
[segmentedControl setBackgroundImage:[UIImage imageNamed:#"greenbt_bg.png"] forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
[segmentedControl setBackgroundImage:[UIImage imageNamed:#"standard_bt_h"] forState:UIControlStateSelected barMetrics:UIBarMetricsDefault];
[segmentedControl setBackgroundColor:[UIColor clearColor] ];
segmentedControl.frame = CGRectMake(5, 20, 280, 25);
segmentedControl.segmentedControlStyle = UISegmentedControlStylePlain;
segmentedControl.selectedSegmentIndex = 0;
[segmentedControl setDividerImage:[UIImage imageNamed:#"separator.png"]
forLeftSegmentState:UIControlStateNormal
rightSegmentState:UIControlStateNormal
barMetrics:UIBarMetricsDefault];
[headerView addSubview:segmentedControl];
The segmentedcontrol now looks like this:
Why is the text of the segments blurry when not selected?
Edit
Solved it! added [UIColor clearColor], UITextAttributeTextShadowColor to normalAttributes
That is most likely caused by the default shadowColor.
Try to set UITextAttributeTextShadowColor and UITextAttributeTextShadowOffset in your titleTextAttributes.
You might have to experiment to get the best visual appearance. You can also simply set the shadowColor attribute to [UIColor clearColor].
It's also possible that you are setting a frame that is between pixel boundaries. Using CGRectIntegral did the trick for me.

Multiple uisegmentedcontrol in 1 view not working

I have a view with 2 uisegmentedcontrols, one along the bottom and one in the nav bar. The bottom one is working fine, the one in the nav bar appears, but does not pick up any touch events. Code for the bottom segment (working) is:
footerSegment = [[UISegmentedControl alloc] initWithItems:[NSArray arrayWithObjects:#"1", #"2", nil]];
[footerSegment setFrame:CGRectMake(5, 6, 310, 30)];
[footerSegment setSegmentedControlStyle:UISegmentedControlStyleBar];
footerSegment.selectedSegmentIndex = 0;
//segmentFiltering.tintColor = [UIColor colorWithWhite:80.0/255.0 alpha:1.0];
[footerSegment addTarget:self action:#selector(segmentAction:) forControlEvents:UIControlEventValueChanged];
[footerSegment setTag:0];
[footerSegment setBackgroundColor:[UIColor clearColor]];
UIImage *segSelected = [[UIImage imageNamed:#"segment_sel.png"] stretchableImageWithLeftCapWidth:5.0 topCapHeight:0];
UIImage* menuRightImage = [[UIImage imageNamed:#"button.png"] stretchableImageWithLeftCapWidth:5.0 topCapHeight:0.0];
[footerSegment setBackgroundImage:menuRightImage forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
[footerSegment setBackgroundImage:segSelected
forState:UIControlStateSelected barMetrics:UIBarMetricsDefault];
UIImage *segmentDividerImg = [[UIImage imageNamed:#"div.png"] stretchableImageWithLeftCapWidth:0 topCapHeight:0];
// Image between two unselected segments.
[footerSegment setDividerImage:segmentDividerImg forLeftSegmentState:UIControlStateNormal
rightSegmentState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
// Image between segment selected on the left and unselected on the right.
[footerSegment setDividerImage:segmentDividerImg forLeftSegmentState:UIControlStateSelected
rightSegmentState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
// Image between segment selected on the right and unselected on the right.
[footerSegment setDividerImage:segmentDividerImg forLeftSegmentState:UIControlStateNormal
rightSegmentState:UIControlStateSelected barMetrics:UIBarMetricsDefault];
[footerToolBar addSubview:footerSegment];
Code for the navbar one is below (visable but doesn't work):
headSegment = [[UISegmentedControl alloc]
initWithItems:[NSArray arrayWithObjects:#"A", #"B", nil]];
[headSegment setFrame:CGRectMake(50, 7, 200, 29)];
[headSegment setSegmentedControlStyle:UISegmentedControlStyleBar];
headSegment.selectedSegmentIndex = 0;
[headSegment addTarget:self action:#selector(segmentAction:) forControlEvents:UIControlEventValueChanged];
[headSegment setBackgroundColor:[UIColor clearColor]];
[headSegment setBackgroundImage:menuRightImage forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
[headSegment setBackgroundImage:segSelected forState:UIControlStateSelected barMetrics:UIBarMetricsDefault];
[headSegment setDividerImage:segmentDividerImg forLeftSegmentState:UIControlStateNormal rightSegmentState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
[headSegment setDividerImage:segmentDividerImg forLeftSegmentState:UIControlStateSelected rightSegmentState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
[headSegment setDividerImage:segmentDividerImg forLeftSegmentState:UIControlStateNormal rightSegmentState:UIControlStateSelected barMetrics:UIBarMetricsDefault];
[headSegment setTag:1];
[self.navigationController.navigationBar addSubview:headSegment];
Code for the action:
-(void)segmentAction:(UISegmentedControl*)sender
{
if(sender.tag == 0){
NSLog(#"Selected index: %d", sender.selectedSegmentIndex);
}
else{
if (sender.selectedSegmentIndex = 1) {
NSLog(#"Selected HEAD index: %d", sender.selectedSegmentIndex);
}
}
[self.navigationController.navigationBar addSubview:headSegment];
That is not how you add things to a navigation bar. You must work by way of your navigation controller's navigationItem. You can make the segmented control its titleView or you can wrap it in a bar button item and make that one of the right or left buttons.

Resources