I've decided to use a table header view in my app to hold a search bar and a UISegmentedControl. Here is the viewDidLoad of the view controller:
- (void)viewDidLoad
{
[super viewDidLoad];
self.searchBar = [[UISearchBar alloc] initWithFrame:CGRectMake(0, 65, 320, 44)];
[self.searchBar sizeToFit];
[self.searchBar setUserInteractionEnabled:YES];
[self setSearchController:[[UISearchDisplayController alloc] initWithSearchBar:self.searchBar contentsController:self]];
self.mainSegment = [[UISegmentedControl alloc] initWithItems:#[#"YouTube", #"iTunes"]];
[self.mainSegment setFrame:CGRectMake(8, 109, 305, 29)];
[self.mainSegment setSelectedIndex:0];
[self.mainSegment addTarget:self action:#selector(searchTypeChanged:) forControlEvents:UIControlEventValueChanged];
[self.mainSegment setUserInteractionEnabled:YES];
UIView* headerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 65)];
[headerView setBackgroundColor:[UIColor clearColor]];
[headerView addSubview:self.searchBar];
[headerView addSubview:self.mainSegment];
[headerView bringSubviewToFront:self.searchBar];
[headerView bringSubviewToFront:self.mainSegment];
[headerView setUserInteractionEnabled:YES];
self.tableView.tableHeaderView = headerView;
self.tableView.userInteractionEnabled = YES;
}
This produces a good result:
However, I can't interact with the search bar or the segmented control. I tried setting userInteractionEnabled to YES as shown above, but the problem still remains. Any ideas?
The height of your header view is 65 points. You're inserting your searchbar at Y=65 so it's beyond the bounds of the header rect. Move your searchbar to Y=0 and your segmented control below it, and it's going to work just fine.
Have a nice day :)
USe delegate methods to set up the headerview.Create and return your headerview in this method.
-(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
Dont forget to set up the table header height.
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
and the <UITableviewDatasource> in header file to indicate the class is actually having your datasource methods to that table
A must read doc
Related
I have set header back ground using the code below but I want to change the color of header back again on run time when I click on the button that is added as a subview on the header.
please provide me code, thanks in advance :)
-(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
header = [[UIView alloc]initWithFrame:CGRectMake(0, 0, _tableView.bounds.size.width, 50)];
header.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:#"homeCellHeaderBackGround.png"]];
UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(10, 10, 100, 30)];
label.text = _array[section][#"name"];
label.textColor = [UIColor whiteColor];
[header addSubview:label];
UIButton *button = [[UIButton alloc]initWithFrame:CGRectMake(230, 10, 70, 35)];
[button addTarget:self action:#selector(onExpandButton:) forControlEvents:UIControlEventTouchUpInside];
//[button setTitle:#"Expand" forState:UIControlStateNormal];
[button setTag:section];
[header addSubview:button];
return header;
}
You can modify it in run time by:
first:
you can declare a global variable/propery like:
#property (nonatomic) UIView *tableHeader;
and set it under -(void)viewDidLoad
like
self.tableView.tableHeaderView = self.tableHeader;
or using the delagate:
-(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
return self.tableHeader;
}
and modify it anywhere you like, but dont forget to reload you table section header, probably [tableView reloadSections:NSIndexSet withRowAnimation:UITableViewRowAnimation]; will do.
But
In your case you can retreive/get the tableHeader made inside the delegate:
-(UIView *)tableView:tableView viewForHeaderInSection:section
by
UIView *tableHeaderView = [self tableView:yourTableView viewForHeaderInSection:yourSection];
then modify tableHeaderView..
or simply reassign tableHeader by:
yourTableView.tableHeaderView = tableHeaderView;
your by using header alone, since as i can see it's a global variable..
change/update it directly like:
header.backgroundColor = [UIColor yourNewColor];
hope i've helped you.. happy coding, cheers..
You can change the background color of the section header by following code:
- (IBAction)onExpandButton:(id)sender {
UIView *header = ((UIButton *)sender).superView;
header.backgroundColor = <Whatever UIColor you like>;
...
}
-(IBAction)onExpandButton:(UIButton *)sender
{
UIView *tmpView = [self.YourTableViewName headerViewForSection:sender.tag];
tmpView.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:#"homeCellHeaderBackGround.png"]];
}
-You got the view from your table view header for section method. After you can set your image view on view.
I'm creating a UITableView with more section "closed". When I tap on a section, with a workaround, I make the section explode showing the rows for that section. The problem that I have is that I have to animate the header to collapse it to an half of its width.
This is the code I'm using
-(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
Sport *sport = [self.sportList objectAtIndex:section];
UIView *headerView = [[UIView alloc] initWithFrame:CGRectMake(0.0, 0.0, tableView.frame.size.width, SECTION_HEIGHT)];
headerView.backgroundColor = [UIColor colorWithRed:31.0/255.0 green:59.0/255.0 blue:143.0/255.0 alpha:1.0];
UILabel *sportTitle = [[UILabel alloc] initWithFrame:CGRectMake(10.0, 2.0, tableView.frame.size.width, SECTION_HEIGHT-4)];
sportTitle.textColor = [UIColor whiteColor];
[headerView addSubview:sportTitle];
UIButton *sportButton = [[UIButton alloc] initWithFrame:headerView.frame];
[sportButton addTarget:self action:#selector(didSelectedButton:) forControlEvents:UIControlEventTouchUpInside];
[sportButton setTitle:#"" forState:UIControlStateNormal];
[sportButton setBackgroundColor:[UIColor clearColor]];
sportButton.tag = section;
[headerView addSubview:sportButton];
return headerView;
}
This is the selector:
-(void)didSelectedButton:(UIButton *)_button
{
if (self.delegate && [self.delegate respondsToSelector:#selector(didSelectedSport:)])
{
[self.delegate didSelectedSport:sport];
}
}
The delegate updates only the dataSource and calls the reloadData, making possible the explosion/collapse of the sections. But now I want to animate the changes to the width of the header for that section, is it possible? Thanks
EDIT: I can modify the header using the property superview of the UIButton in the selector, but I have to do it after the controller drew it
Try using the function below. Set your superview of uibutton as the from view in the method.
Create another view with your needed width and set it as to view in the method. Give a animation of choice in options.
[UIView transitionFromView:from
toView:to
duration:.5
options:UIViewAnimationOptionTransitionFlipFromBottom
completion:^(BOOL finished) {
}];
Background: I have a UIViewController which has a UITableView added programmatically. At the top of the UITableView I have a tablHeaderView in which I have placed a UIView. This UIView has a UISearchBar and a segmentedControl. The idea being: that a user can sort the UITableView by some basic categories such as 'Date/Time' or 'Location' etc. They can also search by an item in the programme.
Problem: When I tap the search bar it resizes (which I don't want) and then when I cancel the search it resizes again and stays there until the UIViewController is exited and loaded again.
Code:
-(void)loadTableView
{
usableSpace = [[UIScreen mainScreen] applicationFrame];
usableWidth = usableSpace.size.width;
usableHeight = usableSpace.size.height;
_tableView = [[UITableView alloc] init];
[_tableView setFrame:CGRectMake(0,0,usableWidth, usableHeight)];
[_tableView setDataSource:self];
[_tableView setDelegate:self];
[self.view addSubview:_tableView];
_searchBar = [[UISearchBar alloc] initWithFrame:CGRectMake(0, 0, usableWidth, 44)];
_searchBar.showsCancelButton = YES;
NSLog(#"searchBar height = %fl", _searchBar.frame.size.height);
segmentedControl = [[UISegmentedControl alloc] initWithItems:[NSArray arrayWithObjects:#"Date/Time", #"Location", #"Speaker", nil]];
segmentedControl.frame = CGRectMake(0, (_searchBar.frame.size.height), usableWidth, (usableHeight * 0.075));
[segmentedControl addTarget:self action:#selector(sortList) forControlEvents:UIControlEventValueChanged];
searchDisplayController = [[UISearchDisplayController alloc] initWithSearchBar:_searchBar contentsController:self];
searchDisplayController.delegate = self;
searchDisplayController.searchResultsDataSource = self;
searchDisplayController.searchResultsDelegate = self;
UIView *headerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, usableWidth, (usableHeight * 0.15))];
[headerView addSubview:_searchBar];
[headerView addSubview:segmentedControl];
_tableView.tableHeaderView = headerView;
[self.view addSubview:_tableView];
self.tableView = _tableView;
}
What I have tried: I have tried setting the size of the SearchBar, not setting its size. Not having it in a UIView in the tableHeaderView, instead just having it there on its own.
Why does it resize at all and how can I get it to stop?
EDIT: I have just tried the following: In storyboard (where the UIViewController was originally created) I have selected the UIVC in question and in attributes inspector I deselected 'Under Top Bars' and 'Under Bottom Bars' and this appears to have fixed the first part of the animation problem. Now, when I tap in the search bar, the search becomes active but the searchBar does NOT resize. However, when I cancel the searchBar the searchBar still animates and resizes as per the last image in my screenshot. What could be causing THAT resizing?
i've been banging my head on this for too freakin long... props to this dude here for the clues.
if you want your UISearchBar to be in the header along with other views and to scroll with the header instead of sticking at the top, then you've got to remove it and re-add it after the search completes. to be clear, build your header like you already do and then throw this in there as well to handle the screwy animations.
-(void)searchDisplayControllerDidEndSearch:(UISearchDisplayController *)controller {
[self.mySearchBar removeFromSuperview];
self.mySearchBar.frame = CGRectMake(0, 0, 320, 44);
[self.table.tableHeaderView addSubview:self.mySearchBar];
}
As Timothy Moose notes here, "It seems that UISearchDisplayController makes an undocumented assumption that the search bar is the only content of the header view"
...yay apple.
Ok, after hours of reading up and trying different things I think I have found out how to have a UISearchBar where I want it and it seems to work ok. I believe the problem was to do with either having multiple views in the tableHeaderView OR the UISearchBar did not like being with another view inside a 'containing' view.
Here is the code I ended up with that allowed me to have a segmentedControl at the top of my UITableView AND a UISearchBar which actually sat at the top of my UIView (to which the UITableView was added).
-(void)loadTableView
{
usableSpace = [[UIScreen mainScreen] applicationFrame];
usableWidth = usableSpace.size.width;
usableHeight = usableSpace.size.height;
_tableView = [[UITableView alloc] init];
[_tableView setFrame:CGRectMake(0,0,usableWidth, usableHeight)];
[_tableView setDataSource:self];
[_tableView setDelegate:self];
[self.view addSubview:_tableView];
_searchBar = [[UISearchBar alloc] initWithFrame:CGRectMake(0, 0, usableWidth, 44)];
[_searchBar setShowsCancelButton:YES];
NSLog(#"searchBar height = %fl", _searchBar.frame.size.height);
segmentedControl = [[UISegmentedControl alloc] initWithItems:[NSArray arrayWithObjects:#"Title", #"Date/Time", #"Speaker", nil]];
segmentedControl.frame = CGRectMake(0, (_searchBar.frame.size.height), usableWidth, (usableHeight * 0.075));
segmentedControl.selectedSegmentIndex = 0;
[segmentedControl addTarget:self action:#selector(sortList) forControlEvents:UIControlEventValueChanged];
searchDisplayController = [[UISearchDisplayController alloc] initWithSearchBar:_searchBar contentsController:self];
searchDisplayController.delegate = self;
searchDisplayController.searchResultsDataSource = self;
searchDisplayController.searchResultsDelegate = self;
UIView *headerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, usableWidth, (usableHeight * 0.15))];
[headerView addSubview:segmentedControl];
_tableView.tableHeaderView = headerView;
[self.view addSubview:_tableView];
[self.view addSubview:_searchBar];
self.tableView = _tableView;
}
This meant that I had:
UIViewController with a UINavigationController, UISearchBar, UITableView. The UITableView had a segmentedConrol. The UISearchBar sits just under the UINavigationController and is always present. The UISearchBar sits at the top of the UITableViewController and scrolls with the UITableViewCells.
If anyone knows why the UISearchBar acted as it did in the question then I would be grateful if they could leave a comment. I know that this problem (or very similar) has been experienced by MANY people and I haven't found a definitive answer anywhere.
I can't figure out why this UIButton is not working in the header of my UITableView. It's appearing there but the touch is not working.
The NSLog statement isn't triggering either. It's almost like it's beneath another view or something so that you can see it but the press action doesn't work.
thanks for any help with this
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
UIView *sectionHeader = [[UILabel alloc] initWithFrame:CGRectNull];
sectionHeader.backgroundColor = [UIColor clearColor];
[sectionHeader addSubview:self.topMapView];
// add map launch button
mapLaunchButton = [UIButton buttonWithType:UIButtonTypeCustom];
[mapLaunchButton addTarget:self
action:#selector(mapButtonTouch:)
forControlEvents:UIControlEventTouchDown];
[mapLaunchButton setTitle:#"ggggggg" forState:UIControlStateNormal];
mapLaunchButton.frame = CGRectMake(0, 0, 300, 90);
mapLaunchButton.backgroundColor = [UIColor redColor];
[sectionHeader addSubview:mapLaunchButton];
// [sectionHeader bringSubviewToFront:mapLaunchButton];
self.tableView.tableHeaderView = sectionHeader;
return sectionHeader;
}
- (void)mapButtonTouch:(id)sender {
NSLog(#"map button was touched");
}
I can see more than one mistake -
If your table has only one section (to verify this check for numberOfSectionsInTableView delegate) then remove this line -
self.tableView.tableHeaderView = sectionHeader;
Set sectionHeader.frame to something appropriate (not CGRectNull). The benefit of setting section header (versus table header view) is that when user will scroll the table rows then the section header will stick on top (float) and will not go away. (Plain style table)
Still the problem is not resolved, then please verify his method -
-(CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
return 50; // depending upon the height of the sectionHeader
}
As pointed out by other poster, to capture touch event on UIButton UIControlEventTouchUpInside is preferred event.
EDIT - (as table header view implementation)
If you want to scroll it up then make it as table header (not section header). So remove all this from viewForHeaderInSection and put it inside viewDidLoad of your view controller class. Keep this line (don't remove it in this case) -
self.tableView.tableHeaderView = sectionHeader;
However, above points 2 and 4 still holds true.
If you change UIControlEventTouchDown to UIControlEventTouchUpInside?
One thing is the section header, and another is the table header. You are assigning the same view as both. I'm not sure this is the cause of your problem, but it's something to get you started.
Instead of implementing that method, on your viewDidLoad, create that view and assign it as the self.tableView.tableHeaderView
Additionally, the most common user experience is associated with the UIControlEventTouchUpInside (the action will not execute until the finger is lifted and still inside the button). However this likely has nothing to do with your issue. It's just a matter of when the action is called.
If this doesn't fix your issue let me know and I'll try to check if there's something else I've missed
Cheers!
If you add a view
self.tableView.tableHeaderView = ({
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 0, 184.0f)];
you can add new components: UIImageView, UIlabel...
Its works for me!
I tested.
The final code:
self.tableView.tableHeaderView = ({
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 0, 184.0f)];
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 40, 100, 100)];
imageView.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin;
imageView.image = [UIImage imageNamed:#"avatar.jpg"];
imageView.layer.masksToBounds = YES;
imageView.layer.cornerRadius = 50.0;
imageView.layer.borderColor = [UIColor whiteColor].CGColor;
imageView.layer.borderWidth = 3.0f;
imageView.layer.rasterizationScale = [UIScreen mainScreen].scale;
imageView.layer.shouldRasterize = YES;
imageView.clipsToBounds = YES;
UIButton *mapLaunchButton = [UIButton buttonWithType:UIButtonTypeCustom];
[mapLaunchButton addTarget:self action:#selector(mapButtonTouch:) forControlEvents:UIControlEventTouchDown];
[mapLaunchButton setTitle:#"ggggggg" forState:UIControlStateNormal];
mapLaunchButton.frame = CGRectMake(0, 0, 300, 90);
mapLaunchButton.backgroundColor = [UIColor redColor];
[view addSubview:imageView];
[view addSubview:mapLaunchButton];
view;
});
I had the same problem. Changing UIXXXXX from UILabel to UIView in the following line worked for me:
UIView *sectionHeader = [[UIXXXXX alloc] initWithFrame:CGRectNull];
and I didn't use:
self.tableView.tableHeaderView = sectionHeader;
I'm have been trying to get the header of the table scrolling along with the UITableView. It's finally working, however, now there's a whitespace showing up right under the map view (see screenshot). I had difficulty getting the map in the table header section to scroll with the table and also to get the UIButton to trigger within the table header with a user touch (the UIButton simply expands the map to full screen.).
I asked a question related to this yesterday regarding the scrolling and button touch. Those are working now - I'm sure the coding could be done better, but this is what I have at the moment and have to get this done asap. If I can resolve this whitespace issue I can refactor and optimize the code later.
thanks for any help with this.
notice the whitespace under the map and above the table view in the screenshot - I want to bring the table view so it's close to the map.
in my viewDidLoad: method
// mapview
self.topMapView = [[MKMapView alloc] initWithFrame:CGRectMake(0, 0, 320, 140)];
self.tableView = [[UITableView alloc] initWithFrame:CGRectMake(0,0,self.view.frame.size.height,self.view.frame.size.height)];
self.tableView.dataSource = self;
self.tableView.delegate = self;
self.tableView.backgroundColor = [UIColor whiteColor];
[self.view addSubview:self.tableView];
then in the viewForHeaderInSection: method (It was suggested that this be done in the viewDidLoad: method and I tried that but it gave me more problems
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
UIView *headerView = [[UIView alloc] initWithFrame:CGRectMake(0,0, 320, 140)];
UIButton *showMapButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
showMapButton.frame = CGRectMake(0.0, 0, 320.0, 140.0);
[showMapButton setTitle:#"show map" forState:UIControlStateNormal];
[showMapButton addTarget:self
action:#selector(mapDetailViewDisplay:)
forControlEvents:UIControlEventTouchDown];
[headerView addSubview:self.topMapView];
[headerView showMapButton];
self.tableView.tableHeaderView = headerView;
return headerView;
}
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section {
return 140;
}
Just add this in you ViewDidLoad method
self.automaticallyAdjustsScrollViewInsets = NO;
[UITableView tableHeaderView] is something different than viewForHeaderInSection but you are setting the same object to both of them.
You should rather set self.tableView.tableHeaderView in viewDidLoad: or return a headerView through viewForHeaderInSection delegate method depending on what kind of behaviour you are trying to achieve.
try to move all code in - (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section leaving only return headerView
in viewDidLoad
and change
UIView *headerView = [[UIView alloc] init];
instead of
UIView *headerView = [[UIView alloc] initWithFrame:CGRectMake(0,0, 320, 140)];