Monday, August 20, 2012

UI Element customization on iOS 5

From iOS 5, Apple has included many new APIs you can use to easily customize the appearance of various UIKit controls. We can use these features for each and every UI Elements as per requirement but moreover, iOS 5 has given us a new feature to customize our UI Elements once, that means we can customize the same UI Element all over the application by writing  code at once, and that part of customizing code is written in  application:didFinishLaunchingWithOptions: in application delegate class. If you are still confuse with my description then please have a look at the code written below, that will help you to understand what i am trying to describe.

Method: - resizableImageWithCapInsets:
   -Used to create resizable UIImages for iOS app, helps to stretch images. 
    - For the cap insets, you basically specify the fixed region of a given image in top, left, bottom, right. For example if you want whole image thing to be stretched then we pass 0 for all parameters :UIEdgeInsetsMake(0, 0, 0, 0). And lets say if you don't want to stretch 7 leftmost pixel and 5 rightmost pixel of UIImage(mainly the case for UIbutton images) , then we pass the parameters as :UIEdgeInsetsMake(0, 7, 0, 5).
    -  For using this property, you don't need to have large image, you should/may have small image with better resolution so that it can be stretchable without any problem.
 
1. Adding an Image as a UIColor  to the UIView 
     // This feature is available in older version too
    - (void)viewDidLoad {  
          [super viewDidLoad];
          [[self view] setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:@"your image name"]]];   
         }


2. Customizing UINavigationBar


    - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{
   // Create resizable images
    UIImage *portratiImg = [[UIImage imageNamed:@"Your NavigationBarImage"]     
                                             resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)];
    UIImage *landscapeImg = [[UIImage imageNamed:@"NavigationBarImage for landscape"]
                                               resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)];
     // Set the background image for *all* UINavigationBars
    [[UINavigationBar appearance] setBackgroundImage:portratiImg forBarMetrics:UIBarMetricsDefault];//for portrait mode
    [[UINavigationBar appearance] setBackgroundImage:landscapeImg  forBarMetrics:UIBarMetricsLandscapePhone];
    // Customize the title text for *all* UINavigationBars
    [[UINavigationBar appearance] setTitleTextAttributes:  [NSDictionary dictionaryWithObjectsAndKeys:
      [UIColor colorWithRed:255.0/255.0 green:255.0/255.0 blue:255.0/255.0 alpha:1.0], UITextAttributeTextColor,
      [UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:0.8], UITextAttributeTextShadowColor,
      [NSValue valueWithUIOffset:UIOffsetMake(0, -1)], UITextAttributeTextShadowOffset,
      [UIFont fontWithName:@"Arial-Bold" size:0.0], UITextAttributeFont,
      nil]];
 }

3. Customizing UIBarButtonItem
   - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{
     // Customize UIBarButtonItems
     UIImage *buttonImg = [[UIImage imageNamed:@"image for Bar Btn"] 

                                             resizableImageWithCapInsets:UIEdgeInsetsMake(0, 5, 0, 5)]; // here,we don't want to stretch 5
                                                leftmost and rightmost pixels of UIImage
     [[UIBarButtonItem appearance] setBackgroundImage:
buttonImg forState:UIControlStateNormal
                                                     barMetrics:UIBarMetricsDefault];
      [[UIBarButtonItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:

      [UIColor colorWithRed:220.0/255.0 green:104.0/255.0 blue:1.0/255.0 alpha:1.0], UITextAttributeTextColor, 
      [UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:1.0], UITextAttributeTextShadowColor,
      [NSValue valueWithUIOffset:UIOffsetMake(0, 1)], UITextAttributeTextShadowOffset, 
      [UIFont fontWithName:@"Arial-Bold" size:0.0], UITextAttributeFont, nil] forState:UIControlStateNormal];
}

4. Customizing UITabBar
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{
      // Customize UITabBar
       UIImage *tabBackground = [[UIImage imageNamed:@"tabbackground image"]
                                                   resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)];
         [[UITabBar appearance] setBackgroundImage:tabBackground];

         //Now, displaying new extra image on the tab when it is selected
         [[UITabBar appearance] setSelectionIndicatorImage:[UIImage imageNamed:@"tabselected tick image"]];


}

5. Customizing UISlider
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{
      // Customize UISlider
       UIImage *minImage = [[UIImage imageNamed:@"slider minimum half Image"]
                      resizableImageWithCapInsets:UIEdgeInsetsMake(0, 5, 0, 0)]; // Image for indicating lowest half
       UIImage *maxImage = [[UIImage imageNamed:@"slider maximum half image"]
                      resizableImageWithCapInsets:UIEdgeInsetsMake(0, 5, 0, 0)]; // Image for indicating highest half
        UIImage *thumbImage = [UIImage imageNamed:@"thumb.png"]; // Image for middle portion,sliding indicator
         [[UISlider appearance] setMaximumTrackImage:maxImage forState:UIControlStateNormal];
          [[UISlider appearance] setMinimumTrackImage:minImage forState:UIControlStateNormal];
         [[UISlider appearance] setThumbImage:thumbImage forState:UIControlStateNormal];

}

6. Customizing UISegmentControl
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{
      // Customize UISegmentControl, For UISegment you have to make the proper Image to fit its size so its quite difficult portion of task to customize UISegmentControl than other UI Elements
       [[UISegmentedControl appearance] setBackgroundImage:[UIImage ImageNamed:@"segmentUnselectedImg"]
          forState:UIControlStateNormal  barMetrics:UIBarMetricsDefault];
    [[UISegmentedControl appearance] setBackgroundImage:[UIImage ImageNamed:@"segmentSelectedImg"] 
        forState:UIControlStateSelected barMetrics:UIBarMetricsDefault];  
  [[UISegmentedControl appearance] setDividerImage:@"Img 1" forLeftSegmentState:UIControlStateNormal rightSegmentState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
    [[UISegmentedControl appearance] setDividerImage:@"Img 2" forLeftSegmentState:UIControlStateSelected rightSegmentState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
    [[UISegmentedControl appearance] setDividerImage:@"Img 3" forLeftSegmentState:UIControlStateNormal rightSegmentState:UIControlStateSelected barMetrics:UIBarMetricsDefault];

}

7. Customizing UISwitch
   Its quite complicated to customize UISwitch and i haven't found better way yet to customize it  but so far we can play with its tint color to give it a different look
     [yourSwichObject setOnTintColor:[UIColor colorWithRed:0 green:175.0/255.0 blue:176.0/255.0 alpha:1.0]];

8. Customizing UIProgressView
    UIImage *background = [[UIImage imageNamed:@"progress-bar-bg.png"]    
                           resizableImageWithCapInsets:UIEdgeInsetsMake(0, 5, 0, 4)];
    UIImage *fill = [[UIImage imageNamed:@"progress-bar-fill.png"]    
                     resizableImageWithCapInsets:UIEdgeInsetsMake(0, 5, 0, 4)];
       [progressView setTrackImage:background];
       [progressView setProgressImage:fill];
      [progressView setProgress:0.5];

Note : UIProgressView Style : UIProgressViewStyleBar will have more hight than UIProgressViewStyleDefault . For more customization refer : http://iosameer.blogspot.com/2012/09/creating-custom-uiprogressview.html

No comments:

Post a Comment