I've seen a few other examples, but I haven't seen anything that actually sticks. What I want is essentially what a tableViewHeader does. I have a tableViewController with a navigation bar. I want to put a view into place that shows some search criteria in a small bar directly below the navbar. But I need it to stick when the user swipes to view the results.
I've tried adding a UIView as a subview to the navigation bar, but it always sits at the top of the Navigation Bar, overlaying everything.
Here's what worked:
// Create a custom navigation view
_navigationView = [[UIView alloc] init];
_navigationView.backgroundColor = [UIColor whiteColor];
_navigationView.frame = CGRectMake(0.0f,
self.navigationController.navigationBar.frame.origin.y + 44.0f,
self.view.frame.size.width,
30.0f);
// Create bottom border for the custom navigation view
_navigationViewBorder = [[UIView alloc] init];
_navigationViewBorder.backgroundColor = [UIColor darkGrayColor];
_navigationViewBorder.tag = 1;
_navigationViewBorder.frame = CGRectMake(0.0f,
self.navigationController.navigationBar.frame.origin.y + 74.0f,
self.view.frame.size.width,
0.5f);
// Add labels for date, results, and the time range
_dateDisplay = [[UILabel alloc] initWithFrame:CGRectMake(10, 0, 70, 15)];
[_dateDisplay setFont:[UIFont fontWithName:#"HelveticaNeue" size:13]];
[_dateDisplay setText:#""];
_timeRangeDisplay = [[UILabel alloc] initWithFrame:CGRectMake(98, 0, 135, 15)];
[_timeRangeDisplay setFont:[UIFont fontWithName:#"HelveticaNeue-Bold" size:13]];
[_timeRangeDisplay setText:#""];
_resultsDisplay = [[UILabel alloc] initWithFrame:CGRectMake(240, 0, 80, 15)];
[_resultsDisplay setFont:[UIFont fontWithName:#"HelveticaNeue" size:13]];
[_resultsDisplay setText:#""];
[_navigationView addSubview: _dateDisplay];
[_navigationView addSubview: _timeRangeDisplay];
[_navigationView addSubview: _resultsDisplay];
// Add two views to the navigation bar
[self.navigationController.navigationBar.superview insertSubview:_navigationView belowSubview:self.navigationController.navigationBar];
[self.navigationController.navigationBar.superview insertSubview:_navigationViewBorder belowSubview:_navigationView];
Why not add the view to your viewController's view, and set up its constraints so that it sits just below the navigationBar, but above the tableView?
If it's only supposed to be there some of the time, you can animate its constraints to show/hide it.
Related
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.
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);
I'm struggling in custom UINavigationBar. The reason i want to customize is because there is same action that can be occur in different view controller. I post some images as an example.
As you can see from the images above. I think you get what i mean. I have been trying and searching, but i don't get the answer i wanted. Furthermore, i have tried using UIView to accomplish this, it worked, but i don't think it is correct way to do this. Therefore, i need help from you guys to lead me to the right path. :) :) Thank you.
You can set custom title view to the navigation bar like this way.
//To hide default back button
self.navigationItem.hidesBackButton=YES;
//Title View for Navigation
UIView *navTitle1 = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 44)];
[navTitle1 setBackgroundColor:[UIColor lightGrayColor]];
//Left View button and separator
UIButton *backBarButton = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 50, 44)];
[backBarButton setTitle:#"Back" forState:UIControlStateNormal];
UIView *ttlview1 = [[UIView alloc] initWithFrame:CGRectMake(51, 0, 1, 44)];
[ttlview1 setBackgroundColor:[UIColor darkGrayColor]];
//Center view with two buttons and seprator for them
UIView *middleView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 121, 44)];
[middleView setBackgroundColor:[UIColor clearColor]];
[middleView setCenter:navTitle1.center];
UIButton *postBarButton = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 60, 44)];
[postBarButton setTitle:#"Post" forState:UIControlStateNormal];
UIView *ttlview2 = [[UIView alloc] initWithFrame:CGRectMake(middleView.frame.size.width/2, 0, 1, 44)];
[ttlview2 setBackgroundColor:[UIColor darkGrayColor]];
UIButton *memeBarButton = [[UIButton alloc] initWithFrame:CGRectMake((middleView.frame.size.width/2)+1, 0, 60, 44)];
[memeBarButton setTitle:#"Meme" forState:UIControlStateNormal];
[middleView addSubview:ttlview2];
[middleView addSubview:postBarButton];
[middleView addSubview:memeBarButton];
//Right button with seprator before that
UIView *ttlview3 = [[UIView alloc] initWithFrame:CGRectMake(self.view.frame.size.width-71, 0, 1, 44)];
[ttlview3 setBackgroundColor:[UIColor darkGrayColor]];
You can refer THIS for more detail.
You can create 2 custom UIBarButtonItem from 2 views, using this document:
From Apple documentation:
Initializes a new item using the specified custom view.
- (id)initWithCustomView:(UIView *)customView
Parameters customView: A custom view representing the item.
Return Value Newly initialized item with the specified properties.
Left bar item: 1 view contains 3 buttons: Project, Kiara Paradize, Artist Impression.
Right bar item: 1 view contains 4 buttons: Sign up | Login (Profile button when user logged in) | Hamburger menu
Then:
self.navigationItem.leftBarButtonItem = UIBarButtonItem from left
Custom View
self.navigationItem.rightBarButtonItem = UIBarButtonItem from right Custom View
I am trying to add segmented control to tableviewheader. I am using the following code to do that
UISegmentedControl *segmentedControl = [[UISegmentedControl alloc]initWithItems:[NSArray arrayWithObjects:#"ALL", #"HOUSE", #"SENATE", nil]];
segmentedControl.frame = CGRectMake(24, 0, 272, 30);
[segmentedControl addTarget:self action:#selector(segmentedControlHasChangedValue:) forControlEvents:UIControlEventValueChanged];
segmentedControl.segmentedControlStyle = UISegmentedControlStyleBar;
segmentedControl.tintColor = [UIColor grayColor];
[self.view addSubview:segmentedControl];
segmentedControl.selectedSegmentIndex = 0;
self.tableView.tableHeaderView = segmentedControl;
I can't set the frame, no matter what value is put its always 100% wide. How can i set the add 24px margin on left and right ?
That is because you are using the segment control as a tableHeaderView. a UITableViewHeaderView will be always be as wide as your tableView. You can only change the height.
Adding to akshaynhegde answer, you can easily achieve this by adding an extra UIView as parent and add the UISegmentControl to that UIView. In this case the parent UIView will take the whole width of UITableView but not the UISegmentControl.
So following should be the change in your code
UIView *view=[[UIView alloc] initWithFrame:CGRectMake(0,0,320.0,30.0)];
[view addSubview:segmentedControl];
self.tableView.tableHeaderView = view;
It should solve your problem.
Cheers.
First, you are adding segmentedControl on controller view [self.view addSubview:segmentedControl] and then assigning it to table header view
self.tableView.tableHeaderView = segmentedControl;
Which is wrong, you need to create a view with size table header size and then add segmentedControl add on view and assign this view to table header view.
Example
**UIView* view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 30)];
UISegmentedControl *segmentedControl = [[UISegmentedControl alloc]initWithItems:[NSArray arrayWithObjects:#"ALL", #"HOUSE", #"SENATE", nil]];
segmentedControl.frame = CGRectMake(24, 0, 272, 30);
[segmentedControl addTarget:self action:#selector(segmentedControlHasChangedValue:) forControlEvents:UIControlEventValueChanged];
segmentedControl.segmentedControlStyle = UISegmentedControlStyleBar;
segmentedControl.tintColor = [UIColor grayColor];
[view addSubview:segmentedControl];
self.tableView.tableHeaderView = view;**
I am facing a really strange issue:
I am instantiating multiple UIImageView inside a for loop with the method CGRectMake, the y origin I am giving seems to be totally wrong on the screen:
Here is my code:
- (void)makeTheView
{
self.view.backgroundColor = [UIColor whiteColor];
UIScrollView *header = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 64, self.view.frame.size.width, 100)];
header.backgroundColor = [UIColor colorWithRed:254/255.0f green:255/255.0f blue:213/255.0f alpha:1.0f];
[self.view addSubview:header];
for (int i = 0; i < 10; i++) {
UIImageView *avatar = [[UIImageView alloc] initWithFrame:CGRectMake(5 + i * 75, 5, 70, 70)];
avatar.image = [UIImage imageNamed:#"bo_pic_baby5.jpg"];
[avatar.layer setCornerRadius:8.0];
avatar.layer.masksToBounds = YES;
NSLog(#"%f", avatar.frame.origin.y);
UILabel *title = [[UILabel alloc] initWithFrame:CGRectMake(0, 50, avatar.frame.size.width, 20)];
title.backgroundColor = [UIColor colorWithRed:148/255.0f green:148/255.0f blue:148/255.0f alpha:0.5f];
title.font = [UIFont fontWithName:#"Arial" size:15];
title.text = #"崔健";
title.textAlignment = NSTextAlignmentCenter;
title.textColor = [UIColor whiteColor];
[avatar addSubview:title];
[header addSubview:avatar];
}
}
According to this code avatar is within header at 5px from the top of header.
But the following is what I obtain visually:
note: when the white area begin, the header view stopped
This is not a real issue since I can reevaluate my frames like this :
CGRectMake(5 + i * 75, - 20, 70, 70)
but it looks really weird, and I am quite sure I am missing something totally trivial here...
I think this will be fixed by:
self.automaticallyAdjustsScrollViewInsets = NO;
Since iOS 7, view controllers automatically adjust scroll view insets so that the scroll view content is not hidden behind the navigation bar because it expects scroll views to start at the top of the screen.
However, the usual solution is to just set the scrollview frame.origin.y to 0.
Your Code is Absolutely Correct , As you are Adding the scrollview on (0,64) Position , So 64 will be count from Bottom of the Navigation Bar, If you want it on top (Just Below the Navigation bar), Change this declaration to as below :
UIScrollView *header = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 100)];