how to draw circle with only its stroke - ios

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;

Related

iOS - View background is black after adding multiple sublayers

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.

How to get shadow in UIButton inside

Using below code for shadow in outside for UIButton. But how can i get shadow for inside the button
button.imageView.layer.cornerRadius = 7.0f;
button.layer.shadowRadius = 3.0f;
button.layer.shadowColor = [UIColor blackColor].CGColor;
button.layer.shadowOffset = CGSizeMake(0.0f, 1.0f);
button.layer.shadowOpacity = 0.5f;
button.layer.masksToBounds = NO;
#define kDEFAULT_SHADOW_COLOR [UIColor lightGrayColor]
UIColor *color = [kDEFAULT_SHADOW_COLOR colorWithAlphaComponent:0.3f];
NSArray *colorsArray = #[(id)[color CGColor], (id)[[UIColor clearColor] CGColor]];
CGFloat yOffset = 0.0f;
CGFloat leftHeight = button.bounds.size.height;
CAGradientLayer *shadow;
shadow = [CAGradientLayer layer];
shadow.colors = colorsArray;
shadow.frame = CGRectMake(0, yOffset, 5.0, leftHeight);
shadow.startPoint = CGPointMake(0.0, 0.5);
shadow.endPoint = CGPointMake(1.0, 0.5);
[button.layer insertSublayer:shadow atIndex:0];
You have not implemented the button shadows property. Add the following lines of code and show shadow. The Code is...
self.submitBtn.layer.masksToBounds = YES;
self.submitBtn.layer.clipsToBounds = YES;
self.submitBtn.backgroundColor = [UIColor colorWithRed:(200.0f/255.0f) green:0.0 blue:0.0 alpha:1.0];
self.submitBtn.layer.cornerRadius = 3.0;
self.submitBtn.layer.borderWidth = 2.0;
self.submitBtn.layer.borderColor = [[UIColor clearColor] CGColor];
self.submitBtn.layer.shadowColor = [UIColor colorWithRed:(100.0f/255.0f) green:0.0 blue:0.0 alpha:1.0].CGColor;
self.submitBtn.layer.shadowOpacity = 1.0f;
self.submitBtn.layer.shadowRadius = 1.0f;
self.submitBtn.layer.shadowOffset = CGSizeMake(0, 3);

Rounded circle with text and color using CAShapeLayer

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.

How to create custom textfield and textview

How to create the textfield has show in below figure
in below figure Address is an custom textview.
txt_Username = [[UITextField alloc] initWithFrame:CGRectMake(0,40,self.view.frame.size.width/2,32)];
txt_Username.borderStyle = UITextBorderStyleRoundedRect;
txt_Username.font = [UIFont systemFontOfSize:15];
txt_Username.placeholder = #"PlacceHolder";
txt_Username.autocorrectionType = UITextAutocorrectionTypeNo;
txt_Username.autocapitalizationType = UITextAutocapitalizationTypeNone;
txt_Username.keyboardType = UIKeyboardTypeDefault;
txt_Username.returnKeyType = UIReturnKeyNext;
txt_Username.clearButtonMode = UITextFieldViewModeWhileEditing;
txt_Username.contentVerticalAlignment = UIControlContentVerticalAlignmentCenter;
[txt_Username setLeftViewMode:UITextFieldViewModeAlways];
txt_Username.leftView= [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"user"]];
txt_Username.borderStyle = UITextBorderStyleNone;
[txt_Username setBackgroundColor:[UIColor clearColor]];
UIView *demoLine = [[UIView alloc] initWithFrame:CGRectMake(txt_Username.frame.origin.x
, txt_Username.frame.origin.y+txt_Username.frame.size.height
, txt_Username.frame.size.width, 1)];
[demoLine setBackgroundColor:[UIColor blackColor]];
[self.view addSubview:demoLine];
Try this It will helpful.
Change your textfield border style to Transparent one (most left in Attribute Inspector). Use a image for the line in UIImageView. Above this image place your textfield. Or instead of using image for the line, draw the line. Line drawing code is here :
-(void)drawLine:(CGFloat)fromX fromY:(CGFloat)fromY toX:(CGFloat)toX toY:(CGFloat)toY width:(CGFloat)width color:(UIColor *)color
{
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(fromX, fromY)];
[path addLineToPoint:CGPointMake(toX, toY)];
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.path = [path CGPath];
shapeLayer.strokeColor = [color CGColor];
shapeLayer.lineWidth = width;
shapeLayer.fillColor = [[UIColor clearColor] CGColor];
[self.view.layer addSublayer:shapeLayer];
}
Better if you use avoid line drawing and stick to images.

How to create transparent UIView with non-transparent border

I am trying to make a transparent UIView with a border. The problem is that the border will always be transparent, how can I make it non-transparent?
This is my code
- (void) viewDidLoad:(BOOL)animated
{
[super viewDidLoad:animated];
_transparentView.alpha = 0.5f;
_transparentView.layer.borderColor = [UIColor whiteColor].CGColor;
_transparentView.layer.borderWidth = 2.0f;
}
You can do it by adding transparent view to as a sub-view of another view like as bellow
_transparentView.alpha = 0.5f;
_MainView.backgroundColor = [UIColor clearColor];
_MainView.layer.borderColor = [UIColor whiteColor].CGColor;
_MainView.layer.borderWidth = 2.0f;
[_MainView addSubview:_transparentView];
You can achieve this by setting the backgroundColor of the view to a transparent color:
_transparentView.backgroundColor = [UIColor colorWithRed:0 green:1 blue:0 alpha:0.5];
_transparentView.layer.borderColor = [UIColor whiteColor].CGColor;
_transparentView.layer.borderWidth = 2.0f;
This will make the background of the view a transparent green.
Just set the background to a clear color:
// set the border color
_transparentView.layer.borderColor = [UIColor whiteColor];
// set the border width
_transparentView.layer.borderWidth = 3.0f;
// want rounded corners? set this
_transparentView.layer.cornerRadius = 5.0f;
// make the background clear color to be fully transparent
_transparentView.backgroundColor = [UIColor clearColor];
You don't need subviews or anything else.
-(void)setRoundedView:(UIView *)vW{
CALayer *image = vW.layer;
[image setCornerRadius:5];
[image setBorderWidth:1];
image.masksToBounds = YES;
image.borderColor = [UIColor colorWithRed:202.0/255.0 green:202.0/255.0 blue:202.0/255.0 alpha:1].CGColor;
}

Resources