Following some instructions at my first post, what I am doing is
1. create a class ( subclass of uiview)
2. fill it with gradient
3. add a uilabel on it
What I am doing is :
1. in xib, i drag and drop uiview onto the screen
2. change to 'customViewBackGround' in 'custom class'
and customViewbackGround looks like below :
-(void) layoutSubviews {
CGFloat height = 20.0;
CGFloat x = 5;
CGFloat y = 3;
CGRect rect = CGRectMake(x, y, self.bounds.size.width - 2 * x, height);
titleLabel.frame = rect;
titleLabel = [[UILabel alloc] init] ;
titleLabel.textAlignment = NSTextAlignmentLeft;
titleLabel.opaque = NO;
titleLabel.backgroundColor = [UIColor clearColor];
titleLabel.font = [UIFont systemFontOfSize:15];
titleLabel.textColor = [UIColor blackColor];
[self addSubview:titleLabel];
}
- (void)drawRect:(CGRect)rect {
titleLabel.text = #"How to redeem your e-gift card online";
CGContextRef context = UIGraphicsGetCurrentContext();
CGColorRef whiteColor = [UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:1.0].CGColor;
CGColorRef lightGrayColor = [UIColor colorWithRed:230.0/255.0
green:230.0/255.0
blue:230.0/255.0
alpha:1.0].CGColor;
CGColorRef separatorColor = [UIColor colorWithRed:208.0/255.0 green:208.0/255.0 blue:208.0/255.0 alpha:1.0].CGColor;
CGRect paperRect = self.bounds;
// Fill with gradient
drawLinearGradient(context, paperRect, whiteColor, lightGrayColor);
// Add white 1 px stroke
CGRect strokeRect = paperRect;
strokeRect.size.height -= 1;
strokeRect = rectFor1PxStroke(strokeRect);
CGContextSetStrokeColorWithColor(context, whiteColor);
CGContextSetLineWidth(context, 1.0);
CGContextStrokeRect(context, strokeRect);
// Add separator
CGPoint startPoint = CGPointMake(paperRect.origin.x, paperRect.origin.y + paperRect.size.height - 1);
CGPoint endPoint = CGPointMake(paperRect.origin.x + paperRect.size.width - 1, paperRect.origin.y + paperRect.size.height - 1);
draw1PxStroke(context, startPoint, endPoint, separatorColor);
}
However, the text of uilabel is not showing up after all.
Any ideas about this issue.
You can't set the frame of titleLabel before it's been initialized. Swap those two lines:
titleLabel = [[UILabel alloc] init] ;
titleLabel.frame = rect;
In layoutSubviews you are setting the frame on titleLabel before it is created. Set it after creating the label.
Related
I am creating a ring with multiple color segments. Here's my code:
CGFloat viewWidth = rect.size.width;
CGFloat viewHeight = rect.size.height;
CGFloat lineWidth = viewWidth * 0.15f;
CGFloat radius = viewWidth/2 - lineWidth;
CGPoint center = CGPointMake(viewWidth/2, viewHeight/2);
UIColor *lavender = [UIColor colorWithRed:0.5f green:0.0f blue:1.0f alpha:1.0f];
UIColor *purple = [UIColor purpleColor];
UIColor *fuchsia = [UIColor colorWithRed:1.0 green:0.0f blue:0.5f alpha:1.0f];
UIColor *red = [UIColor redColor];
UIColor *orange = [UIColor orangeColor];
UIColor *yellow = [UIColor yellowColor];
UIColor *yellowGreen = [UIColor colorWithRed:0.5f green:1.0f blue:0.0f alpha:1.0f];
UIColor *green = [UIColor greenColor];
UIColor *blueGreen = [UIColor colorWithRed:0.0f green:1.0f blue:0.5f alpha:1.0f];
UIColor *cyan = [UIColor cyanColor];
UIColor *white = [UIColor whiteColor];
UIColor *lightBlue = [UIColor colorWithRed:0.0f green:0.5f blue:1.0f alpha:1.0f];
UIColor *blue = [UIColor blueColor];
NSArray *colors = #[lavender, purple, fuchsia,
red, orange, yellow,
yellowGreen, green, blueGreen,
cyan, white, lightBlue, blue];
for(int i = 0; i < 13; i++)
{
CGFloat startAngle = 0.1538f * M_PI * i;
CGFloat endAngle = 0.1538f * M_PI * (i + 1);
UIColor *strokeColor = [colors objectAtIndex:i];
UIBezierPath *bezierPath = [UIBezierPath bezierPath];
[bezierPath addArcWithCenter:center radius:radius startAngle:startAngle endAngle:endAngle clockwise:YES];
CAShapeLayer *colorPieceLayer = [[CAShapeLayer alloc] init];
[colorPieceLayer setPath:bezierPath.CGPath];
[colorPieceLayer setStrokeColor:strokeColor.CGColor];
[colorPieceLayer setFillColor:[UIColor clearColor].CGColor];
[colorPieceLayer setLineWidth:lineWidth];
[self.layer addSublayer:colorPieceLayer];
}
I tried:
setting the background color of the view self.backgroundColor = [UIColor clearColor];
setting the background color of the layer self.layer.backgroundColor = [UIColor clearColor].CGColor
setting the background color of the sublayers colorPieceLayer.backgroundColor = [UIColor clearColor].CGColor
setting the opacity (But this will make the view disappear).
Here's my screenshot:
Here's my view layers:
So how am I going to make it clear color????
PLEASE TAKE NOTE:
The purple colored is just a UIView that holds my color ring view.
So when I change my view's background color, this color changed.
You could try it.
I want circle the corner based on percentage.
For Example if rating is 3 out of 10 .I want to circle the corner radius with one color and remaining with other color.
Below is my code:
UIView *mainView = [[UIView alloc]initWithFrame:CGRectMake(170, 5, 50, 50)];
[mainView setBackgroundColor:[UIColor whiteColor]];
[viewAwesome addSubview:mainView];
mainView.layer.cornerRadius = mainView.frame.size.width / 2;
mainView.clipsToBounds = YES;
mainView.layer.rasterizationScale = [UIScreen mainScreen].scale;
mainView.layer.shouldRasterize = YES;
UILabel *lblRatingVal = [[UILabel alloc]initWithFrame:CGRectMake(170, 5, 50, 50)];
lblRatingVal.text = [NSString stringWithFormat:#" %#",[dictRelevance valueForKey:#"avg_rating"]];
lblRatingVal.textColor = [UIColor colorWithRed:59.0/255.0 green:59.0/255.0 blue:59.0/255.0 alpha:1.0f];
lblRatingVal.font = [UIFont fontWithName:#"HelveticaNeueLight" size:6.0] ;
lblRatingVal.textAlignment = NSTextAlignmentCenter;
[viewAwesome addSubview:lblRatingVal];
CAShapeLayer *circleLayerRating = [CAShapeLayer layer];
circleLayerRating.path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 50, 50)].CGPath;
circleLayerRating.fillColor = nil;
circleLayerRating.strokeColor = [UIColor redColor].CGColor;
circleLayerRating.strokeEnd = val;
circleLayerRating.lineWidth = 5;
[mainView.layer addSublayer:circleLayerRating];
I want to circle remaining with blue color.Any Help?
Maybe you could use https://developer.apple.com/library/prerelease/ios/documentation/UIKit/Reference/UIBezierPath_class/index.html#//apple_ref/occ/clm/UIBezierPath/bezierPathWithArcCenter:radius:startAngle:endAngle:clockwise:
for drawing the circles. draw the blue circle first with 0-2π und the red on top.
I am trying to show text above CALayer but somehow I am not able to achieve it. I have used following code:
- (void)drawRect:(CGRect)rect
{
self.layer.sublayers = nil;
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextSaveGState(ctx);
// Code to show grid lines clipped
CGRect overallRectForBarItem = CGRectMake(20, 20, 176, 35);
CAShapeLayer *barItemShape = [CAShapeLayer layer];
barItemShape.frame = overallRectForBarItem;
barItemShape.path = [UIBezierPath bezierPathWithRect:overallRectForBarItem].CGPath;
barItemShape.strokeColor = [UIColor lightGrayColor].CGColor;
barItemShape.fillColor = [UIColor lightGrayColor].CGColor;
[self.layer addSublayer:barItemShape];
[self drawTextForBarItem:#"TESTING" inRect:CGRectMake(100, 40, 35, 0)];
// Other code clipped
CGContextRestoreGState(ctx);
}
-(void) drawTextForBarItem:(NSString*)barItemTitle inRect:(CGRect)rect
{
float actualFontSize = 14.0;
UIFont *font = [ISUtility getSystemFont:actualFontSize];
CGSize size = [barItemTitle sizeWithFont:font];
NSMutableParagraphStyle *paragraphStyle = [[[NSParagraphStyle defaultParagraphStyle] mutableCopy] autorelease];
paragraphStyle.lineBreakMode = NSLineBreakByTruncatingTail;
paragraphStyle.alignment = NSTextAlignmentRight;
[barItemTitle drawInRect:CGRectMake(rect.origin.x, rect.origin.y - size.height/2, rect.size.width, size.height) withAttributes:#{NSFontAttributeName:font, NSForegroundColorAttributeName:[UIColor blueColor], NSParagraphStyleAttributeName:paragraphStyle}];
}
Following is the screen shot of simulator.
I have also tried zPosition but no use.
barItemShape.zPosition = -1000;
The most possible cause of you issue is that you creating CGContextRef but adding sublayer when you need to draw lightgray rectangle. I think, that it would be more consistant to draw your rectange with CoreGraphics functions and that draw your text.
To be more detailed, it seems that you drawing text in current layer but adding sublayer that will be above your text.
For instance, you can use this code to give it a try:
UIColor * redColor = [UIColor colorWithRed:1.0 green:0.0 blue:0.0 alpha:1.0];
CGContextSetFillColorWithColor(context, redColor.CGColor);
CGContextFillRect(context, self.bounds);
I just want to draw circle with stroke, the code below draws well but it fills the circle.
I do not want it filled. Please help me
self.circleView = [[UIView alloc] initWithFrame:CGRectMake(10,20,20,20)];
circleView.alpha = 0.5;
self.circleView.layer.cornerRadius = 50;
self.circleView.backgroundColor = [UIColor whiteColor];
change
self.circleView.backgroundColor = [UIColor whiteColor];
to
self.circleView.backgroundColor = [UIColor clearColor];
and for the border (Stroke) add
self.circleView.layer.borderColor = [[UIColor redColor] CGColor];
self.circleView.layer.borderWidth = 1;
I was simply trying to add a CATextlayer in an UIView layer. However, according to the following code, I only get the CATextlayer's background color to be displayed in the UIView, without any text. Just wonder what I missed to display the text.
Could anyone offer a hint/sample how to use CATextlayer?
- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil {
if ((self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil])) {
// Custom initialization
CATextLayer *TextLayer = [CATextLayer layer];
TextLayer.bounds = CGRectMake(0.0f, 0.0f, 100.0f, 100.0f);
TextLayer.string = #"Test";
TextLayer.font = [UIFont boldSystemFontOfSize:18].fontName;
TextLayer.backgroundColor = [UIColor blackColor].CGColor;
TextLayer.wrapped = NO;
//TextLayer.backgroundColor = [UIColor blueColor];
self.view = [[UIView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, 100.0f, 100.0f)];
self.view.backgroundColor = [UIColor blueColor];
[self.view.layer addSublayer:TextLayer];
[self.view.layer layoutSublayers];
}
return self;
}
For iOS 5 and beyond, one can use CATextLayer as follows:
CATextLayer *textLayer = [CATextLayer layer];
textLayer.frame = CGRectMake(144, 42, 76, 21);
textLayer.font = CFBridgingRetain([UIFont boldSystemFontOfSize:18].fontName);
textLayer.fontSize = 18;
textLayer.foregroundColor = [UIColor redColor].CGColor;
textLayer.backgroundColor = [UIColor yellowColor].CGColor;
textLayer.alignmentMode = kCAAlignmentCenter;
textLayer.string = #"BAC";
[self.view.layer addSublayer:textLayer];
You can add this code in any function you like. Specially here correct assignment of font is necessary, otherwise your CATextLayer will be rendered as black no matter what textColor you set.
Change your code to this:
CATextLayer *TextLayer = [CATextLayer layer];
TextLayer.bounds = CGRectMake(0.0f, 0.0f, 100.0f, 100.0f);
TextLayer.string = #"Test";
TextLayer.font = [UIFont boldSystemFontOfSize:18].fontName;
TextLayer.backgroundColor = [UIColor blackColor].CGColor;
TextLayer.position = CGPointMake(80.0, 80.0f);
TextLayer.wrapped = NO;
[self.view.layer addSublayer:TextLayer];
You should also be doing this in the view controller's -viewDidLoad. That way you know your view is loaded and valid and can now have layers added to it.
Swift
Here is an example that shows a view with a CATextLayer using a custom font with colored text.
import UIKit
class ViewController: UIViewController {
#IBOutlet weak var myView: UIView!
override func viewDidLoad() {
super.viewDidLoad()
// Attributed string
let myAttributes = [
NSFontAttributeName: UIFont(name: "Chalkduster", size: 30.0)! , // font
NSForegroundColorAttributeName: UIColor.cyanColor() // text color
]
let myAttributedString = NSAttributedString(string: "My text", attributes: myAttributes )
// Text layer
let myTextLayer = CATextLayer()
myTextLayer.string = myAttributedString
myTextLayer.backgroundColor = UIColor.blueColor().CGColor
myTextLayer.frame = myView.bounds
myView.layer.addSublayer(myTextLayer)
}
}
My fuller answer is here.
You should (counter-intuitively) call textLayer.display() or textLayer.displayIfNeeded() after the initialization is complete or whenever you want it to draw text.
You can customize the CLTextLayer Like this,
CATextLayer *aTextLayer_= [[CATextLayer alloc] init];
aTextLayer_.frame =CGRectMake(23.0, 160.0, 243.0, 99.0);
aTextLayer_.font=CTFontCreateWithName( (CFStringRef)#"Courier", 0.0, NULL);
aTextLayer_.string = #"You string put here";
aTextLayer_.wrapped = YES;
aTextLayer_.foregroundColor = [[UIColor greenColor] CGColor];
aTextLayer_.fontSize = 15.f;
aTextLayer_.backgroundColor = [UIColor blackColor].CGColor;
aTextLayer_.alignmentMode = kCAAlignmentCenter;
[self.view.layer addSublayer:aTextLayer_];
Don,t forgot to import CoreText/CoreText.h in your view-class. Thanks...
According to the docs, the default text color of a CATextLayer is white. White on white is hard to see.
try this one:
self.view = [[UIView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, 100.0f, 100.0f)];
[self.view setWantsLayer:YES];
self.view.backgroundColor = [UIColor blueColor];