System Search Icon in Different Colours/Sizes

Discussion in 'iOS Programming' started by robbieduncan, Mar 28, 2010.

  1. robbieduncan Moderator emeritus

    robbieduncan

    Joined:
    Jul 24, 2002
    Location:
    London
    #1
    I know I'm probably not alone in wanting the built-in search icon in different colours/sizes than the system provides. As there seems to be know sensible way to capture the icon and colourise it ourselves (and scaling that would not be very good anyway) I've written the following code to deal with this. Feel free to use it if you want to :)

    I would note that it's not quite pixel perfect at 24x24px (the size of a system tab-bar item) but the differences are only visible when zoomed way up: on the iPhone screen you can't tell.

    .h file
    Code:
    //  Created by Robbie Duncan on 28/03/2010.
    //  Copyright 2010 Robbie Duncan. All rights reserved.
    
    #import <Foundation/Foundation.h>
    
    @interface ColoredSystemIcons : NSObject
    {
    }
    
    + (UIImage *) searchIconOfSize:(CGSize) size inColor:(UIColor *) color;
    
    @end
    
    .m file
    Code:
    //  Created by Robbie Duncan on 28/03/2010.
    //  Copyright 2010 Robbie Duncan. All rights reserved.
    #import "ColoredSystemIcons.h"
    
    @implementation ColoredSystemIcons
    
    + (UIImage *) searchIconOfSize:(CGSize) size inColor:(UIColor *) color
    {
    	// Get a context to draw in
    	UIGraphicsBeginImageContext(size);
    	
    	// We need a reference to the context we've just created to use all the CG Methods.  I don't know why the above doesn't return the context...
    	CGContextRef c = UIGraphicsGetCurrentContext();
    	
    	// Set the drawing stroke and fill colours
        CGContextSetStrokeColorWithColor(c, [color CGColor]);
    	
    	// If the requested size is not square then we need to calculate the largest square in that image and draw into that.
    	float iconSize; // Don't need height at width: they are the same!
    	if (size.width>=size.height)
    	{
    		iconSize = size.height;
    	}
    	else
    	{
    		iconSize = size.width;
    	}
    	
    	// Add the circle of the magnifying glass
    	float circleStrokeWidth = iconSize/14.f;
    	float halfCircleStroke = circleStrokeWidth/2.0;
    	float circleDiameter = iconSize - iconSize/3.605;
    	CGContextSetLineWidth(c,circleStrokeWidth);
    	CGContextAddEllipseInRect(c,CGRectMake(halfCircleStroke, halfCircleStroke, circleDiameter, circleDiameter));
    	CGContextStrokePath(c);	
    	
    	// Now add the handle
    	// First we need to calculate an intersection point
    	// See http://mathworld.wolfram.com/Circle-LineIntersection.html
    	// We will be assuming that our circle was centered on (0,0).  We can correct this later
    	// Line defining points are (x1,y1)=(-circleDiameter/2,circleDiameter/2) and (x2,y2)=(circleDiameter/2,-circleDiameter/2)
    	// Note I have eliminated terms that are not needed and pre-calculated some values.
    	float diametersq = circleDiameter*circleDiameter;
    	float dr = sqrt(diametersq + diametersq);
    	float drsqr = dr*dr;
    	float r = circleDiameter/2.0;
    	
    	// Note lots of terms removed from below!
    	float ourX = circleDiameter*sqrt(r*r*drsqr)/drsqr + r + halfCircleStroke; // Non't calculate ourY: as our line is at 45 degrees we don't need both!
    	
    	CGContextSetLineWidth(c,iconSize/7.f);
    	CGContextMoveToPoint(c, iconSize-(iconSize/24.0), iconSize-(iconSize/24.0));
    	CGContextAddLineToPoint(c,ourX,ourX);
    	CGContextStrokePath(c);	
    	
    	// Get the image that we will return from this method
    	UIImage *toReturn = UIGraphicsGetImageFromCurrentImageContext();
    	
    	// We are done: end the drawing context
    	UIGraphicsEndImageContext();
    		
    	return toReturn;
    }
    
    @end
    
    I'm probably going to do the favourites icon soon as I think I'll need it but if anyone wants to add implementations for any of the other icons then that would be cool :D

    Edit to add: I've attached a screenshot of what the icon looks like at 24x24 in the colour I wanted.
     

    Attached Files:

  2. robbieduncan thread starter Moderator emeritus

    robbieduncan

    Joined:
    Jul 24, 2002
    Location:
    London
    #2
    In case anyone is interested this will draw a pretty decent copy of the Favourites icon:

    Code:
    + (UIImage *) favouritesIconOfSize:(CGSize) size inColor:(UIColor *) color;
    {
    	// Get a context to draw in
    	UIGraphicsBeginImageContext(size);
    	
    	// We need a reference to the context we've just created to use all the CG Methods.  I don't know why the above doesn't return the context...
    	CGContextRef c = UIGraphicsGetCurrentContext();
    	
    	// Set the drawing stroke and fill colours
        CGContextSetStrokeColorWithColor(c, [color CGColor]);
    	CGContextSetFillColorWithColor(c, [color CGColor]);
    	
    	// Draw a 5-pointed star
    	float mid = floor(size.width/2.0);
    	float hInset = ceil(size.width/5.7)+0.5;
    	float vInset = ceil(size.height/2.7)-0.5;
    	CGContextMoveToPoint(c, mid, 0);
    	CGContextAddLineToPoint(c, hInset, size.height);
    	CGContextAddLineToPoint(c, size.width, vInset);
    	CGContextAddLineToPoint(c, 0, vInset);
    	CGContextAddLineToPoint(c, size.width-hInset, size.height);
    	CGContextAddLineToPoint(c, mid, 0);
    
    	// Close the path
    	CGContextClosePath(c);
    	
    	// Fill & stroke the path
    	CGContextDrawPath(c, kCGPathFillStroke);  
    	
    	// Get the image that we will return from this method
    	UIImage *toReturn = UIGraphicsGetImageFromCurrentImageContext();
    	
    	// We are done: end the drawing context
    	UIGraphicsEndImageContext();
    	
    	return toReturn;	
    }
    
     

Share This Page