How to insert UILabel below UIView subview in iOS - ios

I need to create some UIView in circular shape and showing text below that. I have created circle successfully. But is there any way that I should add label below that circle. I need to display many circle with text. Below is my code of circle and attach is the screen shot which I need to create.
- (UIView*)createCircleViewWithRadius
{
// circle view
UIView *circle = [[UIView alloc] initWithFrame:CGRectZero];
circle.translatesAutoresizingMaskIntoConstraints = NO;
circle.layer.cornerRadius = 50;
circle.layer.masksToBounds = YES;
// border
circle.layer.borderColor = [UIColor lightGrayColor].CGColor;
circle.layer.borderWidth = 1;
// gradient background color
CAGradientLayer *gradientBg = [CAGradientLayer layer];
gradientBg.frame = circle.frame;
gradientBg.colors = [NSArray arrayWithObjects:
(id)[UIColor clearColor].CGColor,
(id)[UIColor clearColor].CGColor,
nil];
// vertical gradient
gradientBg.locations = [NSArray arrayWithObjects:
[NSNumber numberWithFloat:0.0f],
[NSNumber numberWithFloat:1.0f],
nil];
// gradient background
CALayer *layer = circle.layer;
layer.masksToBounds = YES;
[layer insertSublayer:gradientBg atIndex:0];
return circle;
}

do like
UILabel *yourItemlabel = [[UILabel alloc]initWithFrame:CGRectMake(yourView.frame.origin.x + 10, yourView.frame.origin.y + yourView.frame.size.height + 10 , yourView.frame.size.width, 30)]; // customize the height
yourItemlabel.text = #"Request funds";
yourItemlabel.textAlignment = NSTextAlignmentCenter;
[sel.view addSubview:yourItemlabel];

You can do something like,
UIView *containerView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 170, 200)];
UIView *circle = [[UIView alloc]initWithFrame:CGRectMake(10, 10, 150, 150)];
UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(10, 170, 150, 30)];
label.text = #"Request funds";
label.textAlignment = NSTextAlignmentCenter;
circle.layer.borderColor = [UIColor lightGrayColor].CGColor;
circle.layer.borderWidth = 1.0;
circle.layer.cornerRadius = 75; // width or height / 2 and width = height (must for proper round shape)
circle.layer.masksToBounds = YES;
[containerView addSubview:circle];
[containerView addSubview:label];
[self.view addSubview: containerView];
You can modify size and origins according your need. this is demonstration that how you can achieve this.
Hope this helps!

Related

Changing background of UILabels in UIStackView to gradient color

I am new to iOS development and I am working with the UIStackView.
When I use StoryBoard to create two UILabels as child objects of UIStackView the following code to make gradient backround color of each UILabel works fine.
UILabel *label;
for (int ii = 1; ii < 3; ii++) {
label = [self.view viewWithTag:ii];
CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = label.bounds;
gradient.colors = [NSArray arrayWithObjects:(id)[[UIColor yellowColor]CGColor], (id)[[UIColor grayColor]CGColor], nil];
[label.layer insertSublayer:gradient atIndex:0];
UILabel *newLabel = [[UILabel alloc] initWithFrame:label.bounds];
newLabel.backgroundColor = [UIColor clearColor];
newLabel.text = label.text;
[label addSubview:newLabel];
}
But when I create two UILabels programatically with using the code bellow,
my code above for making gradient background of each UILabel doesn't work and backround color stays white.
Can someone help me with this?
UILabel *myLabel;
myLabel = [[UILabel alloc] init];
[myLabel setText:#"text1"];
[myLabel setTag:1];
[stackView addArrangedSubview:myLabel];
myLabel = [[UILabel alloc] init];
[myLabel setText:#"text2"];
[myLabel setTag:2];
[stackView addArrangedSubview:myLabel];
The problem seems to be with the label bounds. The following code adds a UIStackView and adds several UILabels with gradients.
const int STACK_WIDTH = 200;
const int NUM_LABELS = 3;
const int LABEL_WIDTH = STACK_WIDTH / NUM_LABELS;
UIStackView* stack = [[UIStackView alloc] initWithFrame:CGRectMake(0, 0, STACK_WIDTH, 100)];
stack.axis = UILayoutConstraintAxisHorizontal;
stack.distribution = UIStackViewDistributionFillProportionally;
stack.alignment = UIStackViewAlignmentLeading;
stack.spacing = LABEL_WIDTH;
stack.backgroundColor = [UIColor greenColor];
[self.view addSubview:stack];
for(int i = 0; i < NUM_LABELS; i++){
UIView* myLabelView = [[UIView alloc] initWithFrame:CGRectMake(i * LABEL_WIDTH, 0, LABEL_WIDTH, stack.frame.size.height)];
CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = myLabelView.bounds;
gradient.colors = [NSArray arrayWithObjects:(id)[[UIColor yellowColor]CGColor], (id)[[UIColor grayColor]CGColor], nil];
gradient.startPoint = CGPointMake(0, 0);
gradient.endPoint = CGPointMake(1, 0);
[myLabelView.layer addSublayer:gradient];
UILabel* myLabel = [[UILabel alloc] initWithFrame:myLabelView.bounds];
myLabel.text = [NSString stringWithFormat:#"label: %d", i];
[myLabelView addSubview:myLabel];
[stack addArrangedSubview:myLabelView];
}

How to set UITextField border/CALayer border ios on three sides only

I need a border to my textfield like the following image.how can i do that?
try these..
i hope it helps...
UITextField *txt=[[UITextField alloc]initWithFrame:CGRectMake(10, 100, 150, 30)];
[txt setBackgroundColor:[UIColor clearColor]];
[txt setPlaceholder:#"Hello my friend"];
[self.view addSubview:txt];
CALayer *border = [CALayer layer];
CGFloat borderWidth = 2;
border.borderColor = [UIColor redColor].CGColor;
border.frame = CGRectMake(0, -2, txt.frame.size.width, txt.frame.size.height);
border.borderWidth = borderWidth;
[txt.layer addSublayer:border];
txt.layer.masksToBounds = YES;
I found the answer my own.
just pass the textfield name to the following function
-(void)setBorderView:(UITextField*)textField
{
UIView *borderView = [[UIView alloc]init];
borderView.backgroundColor = [UIColor clearColor];
CGRect frameRectEmail=textField.frame;
NSLogVariable(textField);
borderView.layer.borderWidth=1;
borderView.layer.borderColor=[customColor colorWithHexString:#"8c8b90"].CGColor;
borderView.layer.cornerRadius=5;
borderView.layer.masksToBounds=YES;
UIView *topBorder = [[UIView alloc]init];
topBorder.backgroundColor = [customColor colorWithHexString:#"1e1a36"];
CGRect frameRect=textField.frame;
frameRect.size.height=CGRectGetHeight(textField.frame)/1.5;
topBorder.frame = frameRect;
frameRectEmail.size.width=frameRect.size.width;
[borderView setFrame:frameRectEmail];
[_textFieldBackGroundView addSubview:borderView];
[_textFieldBackGroundView addSubview:topBorder];
[_textFieldBackGroundView addSubview:textField];
}
I am creating a view below the textfield and setting the border to this view.Now i am creating another view with the same baground color and masking the top portion od the borderView.It is not practical in all situations.But for me,it works great.Thanks.

UIView with rounded corner and border has wrong edge color

I have a UIView and two subviews in it. The subviews have rounded corners and a border value. The issue I have is that the outer edges of the rounded border contain a thin line of the subview background color. I must be missing something??
UIView *outerView = [[UIView alloc] initWithFrame:CGRectMake(0, 50, 320, 320)];
[self.view addSubview:outerView];
outerView.backgroundColor = [UIColor whiteColor];
UIView *innerView1 = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 160, 320)];
[outerView addSubview:innerView1];
innerView1.backgroundColor = [UIColor blackColor];
innerView1.layer.borderWidth = 20;
innerView1.layer.borderColor = [UIColor whiteColor].CGColor;
innerView1.layer.cornerRadius = 20;
//innerView1.layer.masksToBounds = YES;
UIView *innerView2 = [[UIView alloc] initWithFrame:CGRectMake(160, 0, 160, 320)];
[outerView addSubview:innerView2];
innerView2.backgroundColor = [UIColor blackColor];
innerView2.layer.borderWidth = 20;
innerView2.layer.borderColor = [UIColor whiteColor].CGColor;
innerView2.layer.cornerRadius = 20;
//innerView2.layer.masksToBounds = NO;
//innerView2.clipsToBounds = YES;
//innerView2.layer.shouldRasterize = YES;
To work around the problem, set the background color of the subviews to clearColor and then draw the background color using the drawRect method of a custom view class. Here's the code for the view class.
#interface WorkAroundView : UIView
#end
#implementation WorkAroundView
- (void)drawRect:(CGRect)rect
{
CGFloat margin = self.layer.borderWidth;
CGRect background;
background.origin.x = margin;
background.origin.y = margin;
background.size.width = self.bounds.size.width - 2 * margin;
background.size.height = self.bounds.size.height - 2 * margin;
CGContextRef context = UIGraphicsGetCurrentContext();
[[UIColor blackColor] set];
CGContextFillRect( context, background );
}
#end
And here's how you would use the custom view class. The only real change here from what you posted is that the background color for the subviews is set to clearColor.
UIView *outerView = [[UIView alloc] initWithFrame:CGRectMake(360, 200, 320, 320)];
[self.view addSubview:outerView];
outerView.backgroundColor = [UIColor whiteColor];
WorkAroundView *innerView1 = [[WorkAroundView alloc] initWithFrame:CGRectMake(0, 0, 160, 320)];
innerView1.backgroundColor = [UIColor clearColor];
innerView1.layer.borderWidth = 20;
innerView1.layer.borderColor = [UIColor whiteColor].CGColor;
innerView1.layer.cornerRadius = 20;
[outerView addSubview:innerView1];
WorkAroundView *innerView2 = [[WorkAroundView alloc] initWithFrame:CGRectMake(160, 0, 160, 320)];
innerView2.backgroundColor = [UIColor clearColor];
innerView2.layer.borderWidth = 20;
innerView2.layer.borderColor = [UIColor whiteColor].CGColor;
innerView2.layer.cornerRadius = 20;
[outerView addSubview:innerView2];
add a bezier path around the corner
CAShapeLayer *subLayer = [[CAShapeLayer alloc] init];
[subLayer setFillColor:[UIColor clearColor].CGColor];
[subLayer setStrokeColor:[UIColor whiteColor].CGColor];
[subLayer setLineWidth:1.0];
[subLayer setPath:[UIBezierPath bezierPathWithRoundedRect:imageView.bounds cornerRadius:imageView.layer.cornerRadius].CGPath];
[imageView.layer addSublayer:subLayer];

How can I build a transparent view with shadow outside in iOS?

I want to build a totally transparent view, the backgroundColor maybe clearColor. Inside this view I want to put a small image. And in the four sides of this transparent view, I want to see the effect of shadow. The shadow must be totally outside the view. I know that I must override the drawRect method in UIView, but don't know how to do this.
try this....
UIView *shadowView = [[UIView alloc] initWithFrame:CGRectMake(50.0, 100.0, 100.0, 100.0)];
shadowView.layer.cornerRadius = 15.0;
CALayer *layer = shadowView.layer;
layer.shadowOpacity = 1.0;
layer.shadowColor = [[UIColor blackColor] CGColor];
layer.shadowOffset = CGSizeMake(0,0);
layer.shadowRadius = 15;
[self.view addSubview:shadowView];
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0.0, 0.0, 50.0, 50.0)];
[imageView setImage:[UIImage imageNamed:#"icon.png"]];
[shadowView addSubview:imageView];
What is the problem with doing something like this?
#import <QuartzCore/QuartzCore.h> // at the top of the file
UIView *transparentView = [[UIView alloc] initWithFrame:CGRectMake(50,50,200,200)];
transparentView.backgroundColor = [UIColor greenColor];
transparentView.alpha = 0.5f;
transparentView.clipsToBounds = NO;
transparentView.layer.shadowColor = [UIColor blackColor].CGColor;
transparentView.layer.shadowOpacity = 1;
transparentView.layer.shadowRadius = 1;
UIImageView *imageView = [[]UIImageView alloc] initWithFrame:CGRectMake(50, 50, 50, 50)];
imageView.image = [UIImage imageNamed:#"IMAGE NAME"];
[transparentView addSubview:imageView];
As you can see, based on your description, no drawRect: required, unless for some reason you want to draw the shadow manually, but there isn't a reason to.

Add CAGradient Layer behind UIImageView iOS

I am trying to add a gradient behind a transparent image. I do this on the map leftCallOutAccessoryView however no matter what I try the gradient layer always shows above the imageView and want it to appear behind it
heres my code for MKAnnotationView which is an ivar called pinView
pinView.rightCalloutAccessoryView = [UIButton buttonWithType:UIButtonTypeDetailDisclosure];
UIImageView *profileIconView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"Profile.png"]];
pinView.leftCalloutAccessoryView = profileIconView;
CAGradientLayer *backgroundLayer = [CAGradientLayer layer];
backgroundLayer.frame = CGRectMake(0, 0, 30, 30);
backgroundLayer.cornerRadius = 2;
backgroundLayer.borderWidth = 1;
backgroundLayer.borderColor = [UIColor whiteColor].CGColor;
backgroundLayer.colors = [NSArray arrayWithObjects:(id)[[sharedManager cellGradientEnd] CGColor], (id)[[sharedManager cellGradientStart] CGColor], nil];
[profileIconView.layer insertSublayer:backgroundLayer atIndex:0];
I managed to figure it out using the below, in short I create a empty view then add the imageView as a subview to the view and now its all sweet!:
UIView *view = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 30, 30)];
UIImageView *profileIconView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"Profile.png"]];
pinView.leftCalloutAccessoryView = view;
CAGradientLayer *backgroundLayer = [CAGradientLayer layer];
backgroundLayer.frame = view.bounds;
backgroundLayer.cornerRadius = 2;
backgroundLayer.borderWidth = 1;
backgroundLayer.borderColor = [UIColor whiteColor].CGColor;
backgroundLayer.colors = [NSArray arrayWithObjects:(id)[[sharedManager cellGradientEnd] CGColor], (id)[[sharedManager cellGradientStart] CGColor], nil];
[pinView.leftCalloutAccessoryView.layer insertSublayer:backgroundLayer atIndex:0];
[view addSubview:profileIconView];

Resources