Add a view at the top of another view iOS - ios

I need help. I'm designing my UI, and I have been using the properties FRAME and CENTER to layout my views. Both of those are so much helpful to me. I also use the technique of adding my elements as subview of UIViews container.
But, right now, I want to place a UIView at the top of another. Please take a look at my picture. The buttons at the bottom of the screen is already set and is perfect right now, I'm only having a hard time to place my UIView (a container of my textfields) above the button/divider.
I'm only starting in iOS, I think 1 month plus already. I know basics of constraints programmatically but I don't want to use this for now as much as possible.
PS. I make my screen programmatically.
Sample of my code in this screen
// start adding container
UIView *container2 = [[UIScrollView alloc] init];
container2.frame = CGRectMake(0, 0, [TPRConstants screenWidth] * 0.95, heightOfScrollView);
container2.backgroundColor = [UIColor blueColor];
container2.contentSize = CGSizeMake([TPRConstants screenWidth] * 0.95, 250);
[self.view container2];
// stuffs and subviews/textfields inside the container
self.phoneTextField = [[UITextField alloc] init];
_phoneTextField.frame = CGRectMake(0, 200, scrollView.frame.size.width, 50);
_phoneTextField.delegate = self;
_phoneTextField.borderStyle = UITextBorderStyleNone;
_phoneTextField.background = [UIImage imageNamed:#"textfieldLogIn.png"];
_phoneTextField.backgroundColor = [UIColor clearColor];
[_phoneTextField setKeyboardType:UIKeyboardTypeNumberPad];
[container2 addSubview:_phoneTextField];
// add container for divider and log in button
UIView *container = [[UIView alloc] init];
container.frame = CGRectMake(0, 0, [TPRConstants screenWidth], 80);
container.backgroundColor = [UIColor whiteColor];
container.center = CGPointMake([TPRConstants screenWidth] * 0.50, [TPRConstants screenHeight] - container.frame.size.height/2);
[self.view addSubview:container];
// add divider
UIImageView *divider = [[UIImageView alloc] initWithFrame:CGRectMake(0, 10, container.frame.size.width, 5)];
divider.image = [UIImage imageNamed:#"dividerCP.png"];
divider.backgroundColor = [UIColor clearColor];
divider.contentMode = UIViewContentModeCenter;
[container addSubview: divider];
// add save login
UIButton *saveBtn = [UIButton buttonWithType:UIButtonTypeCustom];
saveBtn.frame = CGRectMake(0, 0, container.frame.size.width * 0.95, 50);
saveBtn.center = CGPointMake(container.frame.size.width /2 , (container.frame.size.height - saveBtn.frame.size.height/2) - 10 );
[saveBtn addTarget:self action:#selector(saveBtnClick:) forControlEvents:UIControlEventTouchUpInside];
[saveBtn setBackgroundImage:[UIImage imageNamed:#"logoutupCP.png"] forState:UIControlStateNormal];
[saveBtn setTitle:#"Save" forState:UIControlStateNormal];
[saveBtn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
[saveBtn setTitleColor:[UIColor blackColor] forState:UIControlStateHighlighted];
[saveBtn setBackgroundImage:[UIImage imageNamed:#"logoutdownCP.png"] forState:UIControlStateHighlighted];
[container addSubview: saveBtn];

In iOS everything in a view is added as a stack i.e on top of each other. So your button will always be on top of the divider as it is added last.
If you try your solution now on several screens, you will find that all of the items will be in different positions.
So you have to add constraints.
The easiest way is via storyboard.
Keep your textfields in one view and your button and divider in another view and add a vertical spacing constraint between both views.
Note: Ofcourse you have to add all the required trailing, leading, top and bottom constraints on each textField and the container views and separator image in view plus center horizontally and vertically constraints to the button.

If you wish to place a UIView at the base of phoneTextField use the maximum y position of phoneTextField for the y origin position of the UIView.
UIView *newView = [[UIView alloc] initWithFrame:CGRectMake(0,CGRectGetMaxY(phoneTextField.frame)+0,[TPRConstants screenWidth],50);
newView.backgroundColor = [UIColor blueColor];
[self.view addSubview:newView];
Then change the saveBtn frame to make space for newView:
saveBtn.frame = CGRectMake(0, CGRectGetMaxY(newView.frame), container.frame.size.width * 0.95, 50);

Related

UIImageView size changes

I have navigation bar with custom view on it. UIImageView and UILabel are subviews of titleView. And I add UITapGestureRecognizer to titleView to make it show another UIViewController when the user taps on it. When you tap on titleView other UIViewController opens. But when you click on back button in my titleView size of UIImageView changes. Here is the code
UIView *titleView = [[UIView alloc] initWithFrame: CGRectMake(0, 0, self.view.frame.size.width, 30)];
UILabel *title = [[UILabel alloc] initWithFrame: CGRectMake(0, 0, self.view.frame.size.width/2, 30)];
title.text = _groupName;
[title setTextColor:[self colorFromHexString:#"#474747"]];
[title setFont:[UIFont fontWithName:#"Roboto-Bold" size:16]];
[title setTextAlignment:NSTextAlignmentCenter];
[title setBackgroundColor:[UIColor clearColor]];
_imageView.frame = CGRectMake(0, 0, 30, 30);
_imageView.layer.cornerRadius = 15.0;
_imageView.layer.masksToBounds = YES;
_imageView.layer.borderColor = [UIColor lightGrayColor].CGColor;
_imageView.layer.borderWidth = 0.1;
_imageView.contentMode = UIViewContentModeScaleAspectFit;
title.frame = CGRectMake(title.frame.origin.x+20, title.frame.origin.y, self.view.frame.size.width/2, 30);
UITapGestureRecognizer *recognizer;
recognizer = [[UITapGestureRecognizer alloc]initWithTarget:self action:#selector(titleTapped:)];
titleView.userInteractionEnabled = YES;
[titleView addGestureRecognizer:recognizer];
[titleView addSubview:title];
[titleView setBackgroundColor:[UIColor clearColor]];
[titleView addSubview:_imageView];
self.navigationItem.titleView = titleView;
Here are the images where you can see the changes
I check your code Add clips to bounds and do not need to title frame two times.
_imageView.frame = CGRectMake(0, 0, 30, 30);
_imageView.layer.cornerRadius = 15.0;
_imageView.layer.masksToBounds = YES;
_imageView.clipsToBounds = true;
Rather than setting the frame of the views directly, you might try using Auto Layout; I suspect what's happening is that your custom view is getting re-layed-out after the back button, and it's reverting to the image view's instrinsicSize.
What you could do instead is turn off translatesAutoresizingMaskIntoConstraints on the subviews, and then add constraints to position them, and finally add width and height constraints to the image view.
Using Auto Layout is also recommended if you ever intend to internationalize your app -- if you set up your constraints correctly, then the translated title will fit and you won't have to ever play around with hardcoded values.

UIButton's title property logs correctly but not showing up when adding button as subview

I have a UIButton that I have created, and I can successfully add it as a subview and see it on the screen. The problem is, when I try using:
[myButton setTitle:#"My Title" forState:UIControlStateNormal];
The button does not show a title when I run the app. If I NSLog the button's title after using the above method, it has in fact been set to the title that I'm passing in.
Here's my code. This is inside a UIView subclass. I realize that some of this logic might not belong in a UIView subclass but I'm just trying to get this to work as fast as possible:
// Set the view's frame, background color, corner radius
self.frame = CGRectMake(45, 200, 235, 187);
self.backgroundColor = [UIColor whiteColor];
self.layer.borderWidth = 1;
self.layer.borderColor = [UIColor grayColor].CGColor;
self.layer.cornerRadius = 5;
// Create the popup's body text label
self.popupBodyTextLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, 100, 150)];
self.popupBodyTextLabel.text = #"Text goes here.";
// Add text view to popup's subviews
[self addSubview:self.popupBodyTextLabel];
// Create ok button
UIButton *myButton = [[UIButton alloc]initWithFrame:CGRectMake(0, 143, 120, 44)];
myButton.backgroundColor = [UIColor whiteColor];
myButton.layer.borderWidth = 1;
myButton.layer.borderColor = [UIColor grayColor].CGColor;
[myButton setTitle:#"OK" forState:UIControlStateNormal];
// Round the button's bottom left corner
UIBezierPath *myButtonMaskPath = [UIBezierPath bezierPathWithRoundedRect:myButton.bounds byRoundingCorners:(UIRectCornerBottomLeft) cornerRadii:CGSizeMake(5.0, 5.0)];
CAShapeLayer *okButtonMaskLayer = [[CAShapeLayer alloc] init];
myButtonMaskLayer.frame = myButton.bounds;
myButtonMaskLayer.path = myButtonMaskPath.CGPath;
myButton.layer.mask = myButtonMaskLayer;
// Add selector to button
[myButton addTarget:self action:#selector(myButtonTapped:) forControlEvents:UIControlEventTouchUpInside];
// Add button to subviews
[self addSubview:myButton];
// Create the background view
self.backgroundView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height)];
self.backgroundView.backgroundColor = [UIColor grayColor];
self.backgroundView.alpha = 0.5f;
// Show our new views
[[[UIApplication sharedApplication] keyWindow] addSubview:self.backgroundView];
[[[UIApplication sharedApplication] keyWindow] addSubview:[MPPopupView shared]];
The code for setting button title is right, so use this code to set title color
[myButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];

View with subviews in a uinavigationbar and uitoolbar

I really need your help with this one (first post on SO -- be gentle):
I have two dynamic UIButtons which I would like to have centered in a UIView, which in turn should be centered in a UINavigationbar and UIToolbar. I can't - despite a lot of Googling - seem to figure out a proper way to do this.
This is what I've done so far:
In viewDidLoad, I add the two buttons as subviews and set the view as the UINavigationbar's titleView
self.myClass.viewForTitleAndButton = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 120, 32)];
[self.myClass.viewForTitleAndButton setBackgroundColor:[UIColor blackColor]];
[self.myClass.viewForTitleAndButton addSubview:self.myClass.myButton];
[self.myClass.viewForTitleAndButton addSubview:self.myClass.myOtherButton];
self.navigationItem.titleView = self.myClass.viewForTitleAndButton;
In a method being triggered when I press certain buttons, I set the title (and bounds) of one of the buttons depending on what's clicked:
CGSize titleSize = [title sizeWithAttributes:#{NSFontAttributeName : [UIFont italicSystemFontOfSize:17.0]}];
CGSize screenSize = [UIScreen mainScreen].bounds.size;
CGFloat newX = (screenSize.width - titleSize.width) / 2;
CGRect buttonFrame = self.myClass.myButton.frame;
//Removing the line below doesn't do any difference at the moment
self.myClass.myButton.bounds = CGRectMake(newX, buttonFrame.origin.y, titleSize.width+8, buttonFrame.size.height);
[self.myClass.myButton setTitle:title forState:UIControlStateNormal];
NSLog(#"Title: %#", title);
//title is a NSString that changes depending on what is clicked. I am 100% sure it changes as I can see it in the log every time the method is triggered.
The problem is that the title of myButton is not changed. It worked before with the very same button when it was placed in a different spot and not as a subview.
Q1: What am I missing to make the title of the button change?
Q2: Is adding the buttons as subViews to a view that is then placed in the navigationbar and toolbar respectively a sound way to accomplish what I want?
This is really bugging me, any pointers in the right direction is much appreciated.
I don't think you can add a button which is already an outlet of a view controller. Thinking in another way, a button(view) can only has one superview.
Create button dynamically for the title view.
- (void)viewDidLoad
{
[super viewDidLoad];
UIView *iv = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 160, 44)];
iv.backgroundColor = [UIColor greenColor];
titleButton = [UIButton buttonWithType:UIButtonTypeCustom];
titleButton.frame = CGRectMake(0, 0, 120, 44);
[titleButton setTitle:#"test" forState:UIControlStateNormal];
[titleButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[iv addSubview:titleButton];
self.navigationItem.titleView = iv;
}
//some event to change the button title
- (void)click:(UIButton *)button
{
[titleButton setTitle:#"I changed" forState:UIControlStateNormal];
}

Adding a close button to the modal view that is partially off the view

I am trying to add a "X" button to the top of the modal view so if the user presses that it closes the modal view. I looked at the solution proposed here how to add close button to modal view corner which is presented in UIModalPresentationPageSheet?
But I have two follow up questions here as i am fairly new to ios programming
The solution proposed in the above page does not seem to work for me. I tried it with a normal button first in the viewDidLoad of the modal VC and I am seeing it appear only within the bounds of modal view and not outside as I want.
UIView *buttonView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 50)];
buttonView.backgroundColor = [UIColor brownColor];
CGRect buttonFrame = CGRectMake( 0, 0, 100, 50 );
UIButton *button = [[UIButton alloc] initWithFrame: buttonFrame];
[button setTitle: #"Close" forState: UIControlStateNormal];
[button setTitleColor: [UIColor redColor] forState: UIControlStateNormal];
[button addTarget:self
action:#selector(closeButtonPressed)
forControlEvents:UIControlEventTouchUpInside];
[buttonView addSubview: button];
CGRect parentView = self.view.superview.frame;
CGRect currentView = self.view.frame;
CGRect buttonViewFrame = buttonView.frame;
buttonViewFrame.origin = CGPointMake(parentView.origin.x - buttonViewFrame.size.width/2.0f, parentView.origin.y - buttonViewFrame.size.height/2.0f);
[buttonView setFrame:buttonViewFrame];
[self.view addSubview:buttonView];
what I am seeing is
How do I draw the "X" button do I use CGRect to draw it our or instead of adding a button in the above example should I just add a image with the "X" in it as the subview?
thanks in advance for the help
do like this, hope helps u :)
//adding button to your view
UIView *aView = [[UIView alloc]initWithFrame:CGRectMake(100, 200, 300, 350)];
aView.backgroundColor = [UIColor blueColor];
aView.tag = 100;
[self.view addSubview:aView];
UIButton *aButton = [UIButton buttonWithType:UIButtonTypeCustom];
[aButton setTitle:#"CLOSE" forState:UIControlStateNormal];
[aButton addTarget:self action:#selector(tapped:) forControlEvents:UIControlEventTouchUpInside];
aButton.frame = CGRectMake(aView.bounds.origin.x, aView.bounds.origin.y, 80, 30);// adjust with respect to bounds
aButton.backgroundColor = [UIColor redColor];
[aView addSubview:aButton];
[aView release]; //i am doing without ARC
The other option is to create a larger view and put your UITableView within this, along with your close button. The close button can then be at position (0,0) and the UITableView can start at (25,25).
This prevents complications - I have seen clipped views fail to recognise the touch outside of the main view, so your 50x50 button only has a touch area of 25x25.

Why does the UIButton move the title label all the way to the right when I set content insets to move it to the bottom?

I'm trying to make a UIButton with an image above the text. To that end, I tried setting the edge insets of the button as so:
[button setImageEdgeInsets:UIEdgeInsetsMake(0.0f, 0.0f, 10, 0.0f)];
[button setTitleEdgeInsets:UIEdgeInsetsMake(10, 0.0, 0.0, 0.0)];
What I get is a button where the image is in the same place, and the text is squished all the way over to the side, in a space about one character wide.
How can I simply set the insets so I have the image above the text? Is that really so much to ask?
You just wrongly calculated edgeInSets.They are not there the way you think they are. Here's my test code.It did cost me a while to put image and title in the right place.
UIButton *tmp_testBtn = [[UIButton alloc] initWithFrame:CGRectMake(50, 200, 60, 40)];
tmp_testBtn.backgroundColor = [UIColor grayColor];
[tmp_testBtn setImageEdgeInsets:UIEdgeInsetsMake(0, 0, 20, 0)];
[tmp_testBtn setImage:[UIImage imageNamed:#"France"] forState:UIControlStateNormal];
[tmp_testBtn setTitleEdgeInsets:UIEdgeInsetsMake(20, -258, 0, 0)];
[tmp_testBtn setTitle:#"testbutton" forState:UIControlStateNormal];
CGRect contentRect = [tmp_testBtn contentRectForBounds:tmp_testBtn.bounds];
NSLog(#"contenRect:%f,%f,%f,%f",contentRect.origin.x,contentRect.origin.y,contentRect.size.width,contentRect.size.height);
CGRect titleRect = [tmp_testBtn titleRectForContentRect:contentRect];
NSLog(#"titleRect:%f,%f,%f,%f",titleRect.origin.x,titleRect.origin.y,titleRect.size.width,titleRect.size.height);
CGRect imageRect = [tmp_testBtn imageRectForContentRect:contentRect];
NSLog(#"imageRect:%f,%f,%f,%f",imageRect.origin.x,imageRect.origin.y,imageRect.size.width,imageRect.size.height);
[self.view addSubview:tmp_testBtn];
[tmp_testBtn release];
By the way, I won't do like this.I prefer customize a button with a UIImageView and a UILabel added on.

Resources