How to create custom textfield and textview - ios

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.

Related

Custom button in Objective C

I want to design a custom button in Objective C and the button is like a tick mark given bellow . Is it possible to design without using images?
Use UIBezierPath & CAShapeLayer as follow..
UIBezierPath* mybezierpath = [[UIBezierPath alloc]init];
[mybezierpath moveToPoint:CGPointMake(40.0, 55.0)];
[mybezierpath addLineToPoint:CGPointMake(130.0,160.0)];
[mybezierpath addLineToPoint:CGPointMake(200.0, 60.0)];
CAShapeLayer *lines = [CAShapeLayer layer];
lines.path = mybezierpath.CGPath;
lines.bounds = CGPathGetBoundingBox(lines.path);
lines.strokeColor = [UIColor greenColor].CGColor;
lines.fillColor = [UIColor clearColor].CGColor; /*if you just want lines*/
lines.lineWidth = 3;
lines.position = CGPointMake(self.myButton.frame.size.width/2.0, self.myButton.frame.size.height/2.0);
lines.anchorPoint = CGPointMake(.5, .5);
[self.myButton.layer addSublayer:lines];
This will Give you result like this..
Adjust points of path According to the Button you have...
Hope this helps.
Apply CAShapeLayer to your UIButton's Layer
Here is an example for you:
UIButton *btn = [[UIButton alloc] initWithFrame:CGRectMake(100, 100, 100, 90)];
btn.backgroundColor = [UIColor purpleColor];
UIBezierPath *bPath = [UIBezierPath bezierPath];
[bPath moveToPoint:CGPointMake(25, 40)];
[bPath addLineToPoint:CGPointMake(35, 60)];
[bPath addLineToPoint:CGPointMake(75, 20)];
CAShapeLayer *sLayer = [CAShapeLayer layer];
sLayer.strokeColor = [UIColor greenColor].CGColor;
sLayer.lineWidth = 3.0f;
sLayer.path = bPath.CGPath;
sLayer.fillColor = [UIColor clearColor].CGColor;
[btn.layer addSublayer:sLayer];
[self.view addSubview:btn];
Output:
Hope this helps!

How to add a border to this delimited layer?

I have an image above which I delimitate a transparent rectangle using layer and mask.
I would like this transparent rectangle to be red bordered. But I could find a way to achieve this :
Here is what I have done :
My ViewController has a darkenedView property.
- (void)loadView {
UIView *const rootView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 50, 50)];
rootView.backgroundColor = [UIColor whiteColor];
self.view = rootView;
[self addContentSubviews];
}
- (void)addContentSubviews {
UIImageView *const imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"DSC_0823.jpg"]];
imageView.contentMode = UIViewContentModeScaleAspectFill;
imageView.frame = self.view.bounds;
imageView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
[self.view addSubview:imageView];
}
- (void)viewDidLoad {
[super viewDidLoad];
[self addDarkenedSubview];
}
- (void)viewDidLayoutSubviews {
CGRect const bounds = self.view.bounds;
darkenedView.center = CGPointMake(CGRectGetMidX(bounds), 0);
}
- (void)addDarkenedSubview {
darkenedView = [[UIView alloc] initWithFrame:CGRectMake(10, 30, 400, 1200)];
darkenedView.backgroundColor = [UIColor colorWithWhite:0.0 alpha:0.6];
darkenedView.autoresizingMask = 0;
[self.view addSubview:darkenedView];
[self addMaskToDarkenedView];
}
- (void)addMaskToDarkenedView {
CGRect bounds = darkenedView.bounds;
CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.frame = bounds;
CGRect const myRect = CGRectMake(CGRectGetMidX(bounds) - 100,
CGRectGetMidY(bounds) + 100,
200, 200);
UIBezierPath *path = [UIBezierPath bezierPathWithRect:myRect];
[path appendPath:[UIBezierPath bezierPathWithRect:bounds]];
maskLayer.path = path.CGPath;
maskLayer.fillRule = kCAFillRuleEvenOdd;
darkenedView.layer.mask = maskLayer;
}
I've tried without success :
maskLayer.strokeColor = [UIColor redColor].CGColor;
maskLayer.lineWidth = 3.0f;
Instead of giving stroke to maskLayer object create CAShapeLayer and addSublayer to darkenedView view below is sample code Hope it help
CAShapeLayer *shape = [CAShapeLayer layer];
shape.frame = darkenedView.bounds;
shape.path = path.CGPath;
shape.lineWidth = 3.0f;
shape.strokeColor = [UIColor redColor].CGColor;
shape.fillColor = [UIColor clearColor].CGColor;
[darkenedView.layer addSublayer:shape];

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 draw circle with only its stroke

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;

Creating a rounded-corner view

Good day!
Im trying to make my view (view in main view) make rounded corner. Im doing like this, but it doesn't work. Any ideas?
self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
if (self) {
// Custom initialization
currenView = [[UIView alloc] init];
UIBezierPath *maskPath;
maskPath = [UIBezierPath bezierPathWithRoundedRect:currenView.bounds byRoundingCorners:UIRectCornerAllCorners cornerRadii:CGSizeMake(30.0, 30.0)];
CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
maskLayer.frame = currenView.bounds;
maskLayer.path = maskPath.CGPath;
currenView.layer.mask = maskLayer;
}
return self;
Try something like this:
view.layer.cornerRadius = 5.0;
view.layer.masksToBounds = YES;
for shadow:
view.layer.shadowColor = [UIColor blackColor].CGColor;
view.layer.shadowOffset = CGSizeMake(1.0f, 1.0f);
view.layer.masksToBounds = NO;
view.layer.shadowRadius = 5.0f;
Make sure to import <QuartzCore/QuartzCore.h>
Here is the code. Alloc init a view and send to this method to get corners rounded. You can optionally round any of the corners u want. Also give shadow stroke color.
-(void) setMaskTo:(UIView*)view byRoundingCorners:(UIRectCorner)corners withColor: (UIColor*) color
{
UIBezierPath* rounded = [UIBezierPath bezierPathWithRoundedRect:view.bounds byRoundingCorners:corners cornerRadii:CGSizeMake(9.0, 9.0)];
CAShapeLayer* shape = [[[CAShapeLayer alloc] init] autorelease];
[shape setPath:rounded.CGPath];
shape.strokeColor = [[UIColor grayColor] CGColor];
view.backgroundColor=color;
view.layer.mask = shape;
}
Call the method like this.
[self setMaskTo:ABCView byRoundingCorners:UIRectCornerAllCorners withColor:[UIColor greenColor]];
Stavash's solution seems to be correct, I have used it several times. If you are looking for an alternative or insist on using masklayers, see this answer: https://stackoverflow.com/a/13163693/936957
Your view has no size. its w and h is 0. Try something like,
currentView = [[UIView alloc] initWithFrame:CGRectMake(0,0 200,200)];
and then apply
currentView.layer.cornerRadius = 8.0;
currentView.layer.masksToBounds = YES;
currentView.layer.borderWidth = 1.0;

Resources