iOS Rich Text Editor Color Picker

Here is the update. I have created a color picker which user can use to choose the color of his text. It looks ok but oh well, I am here to create some features. Don't care much about UI right now. May be if some UI designer gets to read this post, he/she can help me.

iOS Rich Text Editor

I recently posted an article about existing status of  Rich Text Editor APIs/Rich Text Editor Apps for iOS  HERE.

This is the article about my own iOS Rich Text Editor . I am going to name my little Rich Text Editor as MIM Text Editor.

So here is the first update. I am planning to release the open source API quickly before Apple's releases the iOS 5 in market.  My goal will be to make it really really easier for developers to use it. Just like Apple's way . Keep it simple !Developers will be able to just stick it into their application and it will be ready to go.

I have taken up a really huge project in my hand I know.. there are so many things which are possible in a rich text editor.. but a step further every day I am going to keep updating on this blog. And of course other interesting resources which I come across will be posted too ! :)

Screenshots of First Update are attached below. I know it sucks but these are the features I have just finished or they are being worked on for API release!  And all this I have come up with in few hours of work today so I guess its a good start !

Features I can have finished:

1. Write alphabets
2. Delete alphabets
3. Change Font
4. Change FontSize
5. Clear All Text on the editor Pad.
6. Change Color (Right now it just displays the standard Color, I want to do it more like Apple's color picker)
7. Keyboard Appears and Disappears  on user driven event.
8. Pointer


Here are the few screenshots

Screenshot which shows text in another font

 Here is the LINK to the post which mentions how to get the font family array for iOS

Screenshot of text with changed font size.

Newly added pointer feature.

CoreText Tutorial - Part 2

You can access Part 1 HERE


In Part 2, We will see how we get to have the different kinds of underlined strings.

    /* We are going to create a text label with  various kinds of underlines */

    

    //Create our context

    CGContextRef context = UIGraphicsGetCurrentContext();

    

    

    //Flip the context so that the text will appear right , 

    //otherwise it appears upside down and its mirror image.

    CGAffineTransform flipTransform = CGAffineTransformMake( 1, 0, 0, -1, 0, self.frame.size.height);

    CGContextConcatCTM(context, flipTransform);

    

    //Fill the context bg with white

    CGContextSetFillColorWithColor(context, [UIColor whiteColor].CGColor);

    CGContextFillRect(context, CGRectMake(0, 0, self.frame.size.width, self.frame.size.height));

    

    //This is the string we want to write on our screen and we also need to get the string length

    NSString *test = @"We hold this truth to be self-evident, that everyone is created equal.And everybody deserves a second chance.";

    NSInteger _stringLength=[test length];

    

    

    //Convert NSString to CFStringRef

    // Initialize an attributed string.

    //Copy the CFStringRef to CFMutableAttributedStringRef

    CFStringRef string =  (CFStringRef) test;

    CFMutableAttributedStringRef attrString = CFAttributedStringCreateMutable(kCFAllocatorDefault, 0);

    CFAttributedStringReplaceString (attrString,CFRangeMake(0, 0), string);

    

    /*

     Note: we could have created CFAttributedStringRef which is non mutable, then we would have to give all its

     attributes right when we create it. We can change them if we use mutable form of CFAttributeString.

     

     Note: Like kCTForegroundColorAttributeName , kCTFontAttributeName we have many more attributes of CFAttributeString which can be set by us and making out string look really cool. We will check them out later on. 

     */

    

    

    CGColorRef _red=[UIColor redColor].CGColor;

    CGColorRef _blue=[UIColor blueColor].CGColor;    

    

    //Lets have our string  as red 

    CFAttributedStringSetAttribute(attrString, CFRangeMake(0, _stringLength),kCTForegroundColorAttributeName, _red);    

    

    

    //Now lets make the font more bigger than normal

    //I dont know whats the default size but its very small like 12.0f Helvetica

    //So you set attribute called kCTFontAttributeName

    CTFontRef font = CTFontCreateWithName((CFStringRef)@"GillSans", 20.0f, nil);

    CFAttributedStringSetAttribute(attrString,CFRangeMake(0, _stringLength),kCTFontAttributeName,font);

    

    //Lets do some underlining with blue color

    SInt32 type = kCTUnderlineStyleSingle;

    CFNumberRef underline = CFNumberCreate(NULL, kCFNumberSInt32Type, &type);  

    CFAttributedStringSetAttribute(attrString, CFRangeMake(0, _stringLength),kCTUnderlineStyleAttributeName, underline);

    CFAttributedStringSetAttribute(attrString, CFRangeMake(0, _stringLength),kCTUnderlineColorAttributeName, _blue);

    

    

    // Initialize a rectangular path.

    CGMutablePathRef path = CGPathCreateMutable();

    CGRect bounds = CGRectMake(10.0, 10.0, 200.0, 200.0);

    CGPathAddRect(path, NULL, bounds);

    

    

    // Create the framesetter with the attributed string.

    CTFramesetterRef framesetter = CTFramesetterCreateWithAttributedString(attrString);

    CFRelease(attrString);

    

    // Create the frame and draw it into the graphics context

    CTFrameRef frame = CTFramesetterCreateFrame(framesetter,CFRangeMake(0, 0), path, NULL);

    CFRelease(framesetter);

    CTFrameDraw(frame, context);

Whole magic is done by following 3 lines of the code

SInt32 type = kCTUnderlineStyleSingle;

    CFNumberRef underline = CFNumberCreate(NULL, kCFNumberSInt32Type, &type);  

    CFAttributedStringSetAttribute(attrString, CFRangeMake(0, _stringLength),kCTUnderlineStyleAttributeName, underline);

    CFAttributedStringSetAttribute(attrString, CFRangeMake(0, _stringLength),kCTUnderlineColorAttributeName, _blue);

This is what the output looks like.

-----------------------------------------------------------------------------------------------------------------------------
If we change the above 3 lines to following, you will have different kind of look. You can always decide till what character index you want to have your string underlined. So if you want to have only first 10 characters underlined, you will CFRangeMake as CFRangeMake(0,10) and if you want complete string underlined then CFRangeMake(0, stringlength).

 SInt32 one = kCTUnderlineStyleSingle | kCTUnderlinePatternDot;

    CFNumberRef underline = CFNumberCreate(NULL, kCFNumberSInt32Type,&one);  

    CFAttributedStringSetAttribute(attrString, CFRangeMake(0, _stringLength),kCTUnderlineStyleAttributeName, underline);

    CFAttributedStringSetAttribute(attrString, CFRangeMake(0, _stringLength),kCTUnderlineColorAttributeName, _blue);

-----------------------------------------------------------------------------------------------------------------------------

 SInt32 one = kCTUnderlineStyleDouble|kCTUnderlinePatternDot;

    CFNumberRef underline = CFNumberCreate(NULL, kCFNumberSInt32Type,&one);  

    CFAttributedStringSetAttribute(attrString, CFRangeMake(0, _stringLength),kCTUnderlineStyleAttributeName, underline);

    CFAttributedStringSetAttribute(attrString, CFRangeMake(0, _stringLength),kCTUnderlineColorAttributeName, _blue);

    

-----------------------------------------------------------------------------------------------------------------------------

    SInt32 one = kCTUnderlineStyleSingle|kCTUnderlinePatternDash;

    CFNumberRef underline = CFNumberCreate(NULL, kCFNumberSInt32Type,&one);  

    CFAttributedStringSetAttribute(attrString, CFRangeMake(0, _stringLength),kCTUnderlineStyleAttributeName, underline);

    CFAttributedStringSetAttribute(attrString, CFRangeMake(0, _stringLength),kCTUnderlineColorAttributeName, _blue);

    

-----------------------------------------------------------------------------------------------------------------------------

SInt32 one = kCTUnderlineStyleSingle|kCTUnderlinePatternDashDot;

    CFNumberRef underline = CFNumberCreate(NULL, kCFNumberSInt32Type,&one);  

    CFAttributedStringSetAttribute(attrString, CFRangeMake(0, _stringLength),kCTUnderlineStyleAttributeName, underline);

    CFAttributedStringSetAttribute(attrString, CFRangeMake(0, _stringLength),kCTUnderlineColorAttributeName, _blue);

    

    

-----------------------------------------------------------------------------------------------------------------------------

 SInt32 one = kCTUnderlineStyleSingle|kCTUnderlinePatternDashDotDot;

    CFNumberRef underline = CFNumberCreate(NULL, kCFNumberSInt32Type,&one);  

    CFAttributedStringSetAttribute(attrString, CFRangeMake(0, _stringLength),kCTUnderlineStyleAttributeName, underline);

    CFAttributedStringSetAttribute(attrString, CFRangeMake(0, _stringLength),kCTUnderlineColorAttributeName, _blue);

    

    

    

-----------------------------------------------------------------------------------------------------------------------------

Basically, you can use any combination of

 kCTUnderlineStyleNone

kCTUnderlineStyleSingle  

kCTUnderlineStyleThick  

kCTUnderlineStyleDouble  

AND 

 kCTUnderlinePatternSolid  

kCTUnderlinePatternDot

kCTUnderlinePatternDash  

kCTUnderlinePatternDashDot

kCTUnderlinePatternDashDotDot

Hope it helps !

CoreText Tutorial for iOS - Part 1

Well I have been working on this really cool library which is more like css library for iPhone textfields and labels. And it will very very simple to use ! I promise where you don't have to juggle around a lot to figure out how to use it. I am dealing with CoreText  Framework majorly. So I thought it will be cool to release some of the code snippets and finally I will release whole code for people to use.
Oh and I just watched GhostTown movie.. it was really very funny !  Good real humor :)

Ok, Lets begin . Shall we?

1. Add the CoreText framework in your iOS project. This will work only for above iOS 3.2

You can check post if needed : How to add frameworks in your project in XCode 4 ?

2.  Reference Doc, in case you feel like goofing around docs before you read the whole doc or you wanna refer them later on because you wanna do something cool yourself.

You can refer to Apple reference Document about CoreText : LINK
In order access that  link you might need to log in with your apple ID. I am not sure though. Anyways,there is also Apple Sample Code with name CoreText in sample code section available but it might be too much for beginners to dig in it.

3. You will have to write this code in UIView subclass in drawRect method for it to really work. Don't put  it in ViewController.

    /*We are going to create a text label with multiple colors in it*/

    

    //Create our context

    CGContextRef context = UIGraphicsGetCurrentContext();

    

    

    //Flip the context so that the text will appear right , 

    //otherwise it appears upside down and its mirror image.

    CGAffineTransform flipTransform = CGAffineTransformMake( 1, 0, 0, -1, 0, self.frame.size.height);

    CGContextConcatCTM(context, flipTransform);

    

    //This is the string we want to write on our screen and we also need to get the string length

    NSString *test = @"We hold this truth to be self-evident, that everyone is created equal.And everybody deserves a second chance.";

    NSInteger _stringLength=[test length];

    

    

    //Convert NSString to CFStringRef

    // Initialize an attributed string.

    //Copy the CFStringRef to CFMutableAttributedStringRef

    CFStringRef string =  (CFStringRef) test;

    CFMutableAttributedStringRef attrString = CFAttributedStringCreateMutable(kCFAllocatorDefault, 0);

    CFAttributedStringReplaceString (attrString,CFRangeMake(0, 0), string);

    

    /*

     Note: we could have created CFAttributedStringRef which is non mutable, then we would have to give all its

     attributes right when we create it. We can change them if we use mutable form of CFAttributeString.

     */

    

    //Lets choose the colors we want to have in our string

    CGColorRef _orange=[UIColor orangeColor].CGColor;

    CGColorRef _green=[UIColor greenColor].CGColor;

    CGColorRef _red=[UIColor redColor].CGColor;

    CGColorRef _blue=[UIColor blueColor].CGColor;    

    

    //Lets have our string with first 20 letters as orange

    //next 20 letters as green

    //next 20 as red

    //last remaining as blue

    CFAttributedStringSetAttribute(attrString, CFRangeMake(0, 20),kCTForegroundColorAttributeName, _orange);

    CFAttributedStringSetAttribute(attrString, CFRangeMake(20, 20),kCTForegroundColorAttributeName, _green);

    CFAttributedStringSetAttribute(attrString, CFRangeMake(40, 20),kCTForegroundColorAttributeName, _red);    

    CFAttributedStringSetAttribute(attrString, CFRangeMake(60, _stringLength-61),kCTForegroundColorAttributeName, _blue);    

    

    

    //Now lets make the font more bigger than normal

    //I dont know whats the default size but its very small like 10.0f may be

    //So you set attribute called kCTFontAttributeName

    CTFontRef font = CTFontCreateWithName((CFStringRef)@"Helvetica", 16.0f, nil);

    CFAttributedStringSetAttribute(attrString,CFRangeMake(0, _stringLength-1),kCTFontAttributeName,font);

    

    /* Note: Like kCTForegroundColorAttributeName , kCTFontAttributeName we have many more attributes of CFAttributeString which can be set by us and making out string look really cool. We will check them out later on. */

    

    // Initialize a rectangular path.

    CGMutablePathRef path = CGPathCreateMutable();

    CGRect bounds = CGRectMake(10.0, 10.0, 200.0, 200.0);

    CGPathAddRect(path, NULL, bounds);

    

    

    // Create the framesetter with the attributed string.

    CTFramesetterRef framesetter = CTFramesetterCreateWithAttributedString(attrString);

    CFRelease(attrString);

    

    // Create the frame and draw it into the graphics context

    CTFrameRef frame = CTFramesetterCreateFrame(framesetter,CFRangeMake(0, 0), path, NULL);

    CFRelease(framesetter);

    CTFrameDraw(frame, context);

So finally this is what the text looks like as shown in the image.