iOS Unified design, IOS6 also play flat

Ext.: http://esoftmobile.com/2014/01/14/build-ios6-ios7-apps/

Objective

Some time ago, Apple released the iOS system installation ratio on its developer site, with iOS7 accounting for 78%,IOS6 accounting for 18% and the remaining 4% to iOS6. We also take this opportunity to upgrade the two projects on hand to support iOS6 and above, there is a kind of happiness to be too sudden bright, to know that we are still supporting the iOS4.3 version.

According to another Apple message, we need to design our apps according to IOS7 style, as for the iOS6 system, there is no need for this part of the user to do two design, as far as possible to iOS7 style to align it. Because of the simple style of iOS7, basically by setting the color of the components can meet most of the color design needs, so the main content of this article will talk about iOS6 to achieve iOS7 some of the skills of flattening.

IOS6 flattening

This part of our main explanation on the iOS6 to achieve flat, the control how to set. And most UIAppearance of the global settings are made through the various control protocols.

Aided

We usually want to judge the different system versions, which I have judged by the following macro:

#define IOS7_OR_LATER ([[[UIDevice currentDevice] systemVersion] compare:@"7.0"] != NSOrderedAscending)

Because many places iOS7 can set the color directly, and iOS6 can only set the picture, so you can use the following method to generate a solid color image directly from the color:

+ (UIImage *)imageWithColor:(UIColor *)color size:(CGSize)size{    CGRect rect = CGRectMake(0, 0, size.width, size.height);    UIGraphicsBeginImageContext(rect.size);    CGContextRef context = UIGraphicsGetCurrentContext();    CGContextSetFillColorWithColor(context, [color CGColor]);    CGContextFillRect(context, rect);    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();    UIGraphicsEndImageContext();    return image;}

Layout

The IOS7 interface will be drawn from the screen at (0, 0), so by default your content will often conflict with StatusBar and Navigationbar, or your navigationbar and Tabbar will not be transparent at all. Then you can directly give Viewcontroller the edgesForExtendedLayout attribute value: Uirectedgenone. Of course, if you want to reflect the iOS7 content-oriented style, but also want to display the content in the translucent Bar, then you can strictly judge the system version adjustment layout. It is generally recommended that you edgesForExtendedLayout set the Uirectedgebottom so that if the content is TableView or ScrollView in Viewcontroller, the contents can be displayed in a translucent tabBar, and the workload is not very large.

Uinavigationbar

In the iOS7 style, the navigation bar is usually a solid color background color, directly set barTintColor on the line, and iOS6, to the navigation bar settings tintColor , the system will default to add gradients, not enough flat, so you can only set the background image:

//iOS6[[UINavigationBar appearance] setBackgroundImage:[UIImage imageWithColor:navigationBarColor size:CGSizeMake(1, 44)]    forBarMetrics:UIBarMetricsDefault];

The color of the navigation bar is title also different, iOS7 default is black, and iOS6 default is white, and the font size is not the same, so you can set the title font size, color, and remove the text shadow:

//Universal[[UINavigationBar appearance] setTitleTextAttributes:        @{ NSForegroundColorAttributeName: [UIColor whiteColor],           NSFontAttributeName: [UIFont boldSystemFontOfSize:20],           UITextAttributeTextShadowOffset: [NSValue valueWithUIOffset:UIOffsetZero]}];

IOS7 the buttons on the navigation bar have not been surrounded by rounded buttons, and iOS6 regardless of how you set Uibarbuttonitem style properties are not to go out of the nasty border, many people will want to create CustomView type of button, In fact, not so troublesome:

//iOS6[[UIBarButtonItem appearance] setBackgroundImage:[UIImage new]    forState:UIControlStateNormal    barMetrics:UIBarMetricsDefault];

Take a look at the three steps to achieve the above effect:

Some people will say, you do not happy too early, the navigation bar back button what to do? Can you remove the border with iOS6 and rounded corners? I'm not sure if this is going to make it. Look at the code:

//iOS6[[UIBarButtonItem appearance] setBackButtonBackgroundImage:[[UIImage imageNamed:@"buttonItem_back"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 18, 0, 0)]    forState:UIControlStateNormal    barMetrics:UIBarMetricsDefault];[[UIBarButtonItem appearance] setBackButtonTitlePositionAdjustment:UIOffsetMake(5, 0)    forBarMetrics:UIBarMetricsDefault];[[UIBarButtonItem appearance] setTitleTextAttributes:         @{ UITextAttributeFont: [UIFont systemFontOfSize:17],            UITextAttributeTextShadowOffset: [NSValue valueWithUIOffset:UIOffsetZero]} forState:UIControlStateNormal];

The first paragraph of the code to the Back button to set a background picture, of course, the background image is made and iOS7 back button that the same haircut, maybe the text and cutting head too tight, it doesn't matter, by setBackButtonTitlePositionAdjustment: setting the offset of the text is good, and finally because iOS6 in Barbuttonitem The text is smaller than iOS7, so set it up uniformly.

Uitabbar

As with Navigationbar, the TabBar settings in IOS6 are tintColor not flat enough, or you can honestly set the background image and remove the highlight effect when Tab is selected:

//iOS6[[UITabBar appearance] setBackgroundImage:[UIImage imageWithColor:RGB(245, 245, 245) size:CGSizeMake(1, 49)]];[[UITabBar appearance] setSelectionIndicatorImage:[UIImage new]];

IOS6 when the Tab is selected, the picture defaults to the highlight effect, the title defaults to white, and the iOS7 in the default is selected after the picture and text default to TabBar Tintcolor color, so the processing method here is to prepare two sets of tabbaritem icons, Default state and checked state, IOS7 direct call initWithTitle: image: selectedImage: method initialization tabbaritem,ios6 after initialization, by setFinishedSelectedImage: withFinishedUnselectedImage: way of setting the default state and the icon in the selected state, I usually UITabBarItem add a classification, add a unified initialization method:

@implementation UITabBarItem (Universal)+ (instancetype)itemWithTitle:(NSString *)title image:(UIImage *)image selectedImage:(UIImage *)selectedImage{    UITabBarItem *tabBarItem = nil;    if (IOS7_OR_LATER) {        tabBarItem = [[UITabBarItem alloc] initWithTitle:title image:image selectedImage:selectedImage];    } else {        tabBarItem = [[UITabBarItem alloc] initWithTitle:title image:nil tag:0];        [tabBarItem setFinishedSelectedImage:selectedImage withFinishedUnselectedImage:image];    }    return tabBarItem;}@end

Headings are set individually:

//iOS6[[UITabBarItem appearance] setTitleTextAttributes:            @{ UITextAttributeTextShadowOffset: [NSValue valueWithUIOffset:UIOffsetMake(0, 0)],               UITextAttributeTextColor: tabBarTintColor }    forState:UIControlStateSelected];

Uitoolbar

Uitoolbar and Uinavigationbar are similar, it is recommended to set the background image, the item above and the Navigationbar item set to universal.

Uisegmentcontrol

Like Uisegmentcontrol through custom or third-party controls, it's easy to implement IOS6 and iOS7 consistent style, and if you want to use system controls to make iOS6 implement IOS7 style, it's not an option. We can set the segment partial selected state and the unchecked state of the background picture, segment between the split line picture. Because iOS6 on the Uisegmentcontrol title font is larger than the iOS7, you can also do a change:

Ios6[[uisegmentedcontrol appearance] Setbackgroundimage:[uiimage imagewithcolor:selectedcolor size:CGSizeMake (1, )] [forstate:uicontrolstateselected Barmetrics:uibarmetricsdefault];    [[Uisegmentedcontrol appearance] Setbackgroundimage:[uiimage imagewithcolor:normalcolor Size:CGSizeMake (1, 29)] Forstate:uicontrolstatenormal Barmetrics:uibarmetricsdefault];     [[Uisegmentedcontrol appearance] Setdividerimage:[uiimage imagewithcolor:selectedcolor Size:CGSizeMake (1, 29)] Forleftsegmentstate:uicontrolstatenormal rightsegmentstate:uicontrolstateselected BarMetrics:UIBarMetricsDefault ]; [[Uisegmentedcontrol appearance] settitletextattributes:@{Uitextattributetextcolor:selectedcolor, UITextAt Tributefont: [Uifont systemfontofsize:14], uitextattributetextshadowoffset: [Nsvalue Valuewithuioffset:uioffsetmake (0, 0)] } Forstate:uicontrolstatenormal]; [[Uisegmentedcontrol appearance] settitletextattributes:@{Uitextattributetextcolor:normalcolor,       Uitextattributefont: [Uifont systemfontofsize:14], uitextattributetextshadowoffset: [NSValue valueWithUIOffs Et:uioffsetmake (0, 0)]} forstate:uicontrolstateselected];

Through appearance only to here, but also poor border and small round corner. Since the Uisegmentcontrol setting also requires each control to be set separately, it is recommended to encapsulate it.

if (!IOS7_OR_LATER) {    self.segmentControl.layer.borderColor = selectedColor;    self.segmentControl.layer.borderWidth = 1.0f;    self.segmentControl.layer.cornerRadius = 4.0f;    self.segmentControl.layer.masksToBounds = YES;}

End

Write so much, if you do not find the control you want to beat, do it yourself, if you lazy, then go to GitHub to find it:]