Reputation: 3919

Putting a custom view into a UITableView

I have a regular-style UITableView—the one that has a white background and gray horizontal lines to separate the rows.

I have another custom UIView that is just a 100x100 rectangle filled with redColor.

How can I put the latter into the former, such that it appears over the horizontal lines, but is still a “part” of the table view in the sense that when I scroll the table view around, the red view scrolls with it? In fact, I should also be able to put my finger on the red area and scroll the table view.

Once again, if the red view is placed to overlap some horizontal lines, it should appear over the lines. Sadly, when I just add the red view as a subview to the table view, the horizontal lines go over the red view; see this screenshot.

How can this be accomplished?

Upvotes: 8

Answers (7)

shannoga

Reputation: 19869

EDIT

If you are trying to add the view a above the lines (hide the lines) try to use – bringSubviewToFront: to take it to the front of the table view.

[self.tableView bringSubviewToFront:redView];

ELSE

Add the view to the self.tableView.tableHeaderView this will place it above the table view and will scroll with the table view.

UIView *redView = [[UIView alloc]init];
  redView.frame = //set the frame 
  redView.backgroundColor = [UIColor redColor];
  self.tableView.tableHeaderView = redView;

Good Luck

Upvotes: 6

rob mayoff

Reputation: 385500

The correct place to handle the stacking order of your red square is in the layoutSubviews method. The table view sends itself layoutSubviews any time it adds or removes subviews (and at other times).

You need to make a subclass of UITableView that has a reference to the red square:

@interface MyTableView : UITableView

@property (weak, readonly) IBOutlet UIView *redSquare;

@end

You can initialize redSquare in whatever way you want. I just put it in my nib along with the table view, and moved it to be a subview of the table view in awakeFromNib:

@implementation MyTableView

@synthesize redSquare = _redSquare;

- (void)awakeFromNib {
    [self addSubview:self.redSquare];
}

Anyway, to actually make sure the red square is always on top of the table cells and grid lines, override layoutSubviews like this:

- (void)layoutSubviews {
    [super layoutSubviews];
    [self bringSubviewToFront:self.redSquare];
}

Upvotes: 12

Piyush Kashyap

Reputation: 1965

Edit your viewWillAppear delegate with these lines

UIView *redView=[[UIView alloc]initWithFrame:CGRectMake(30,30, 100, 100)];
redView.backgroundColor=[UIColor redColor];
[self.tableView addSubview:redView];

Upvotes: 0

Ahti

Reputation: 1430

So, your problem is basically, that the UITableViewCells of a UITableView are added as Subviews dynamically, and you cannot control wether they are added in front of or behind your view.

So to keep your view at the front, you need to get it back there every time cells may be added, which occurs when the UITableView scrolls.

I would suggest you try adding your custom view as a subview and then override -scrollViewDidScroll like so:

- (void)scrollViewDidScroll {
    [super scrollViewDidScroll];
    // myCustomView is your custom view referenced in an IVar
    [self.tableView bringSubviewToFront:myCustomView];
}

Upvotes: 0

Jeremy

Reputation: 9010

I think what you've described can best be achieved using a UITableViewCell or even a subview of the header. A cell has the inherent ability to scroll the table and can be customized any way you like it. It's essentially a view.

In your situation, for example, you may want the red box to appear by default at the top of the table. You would make the first cell a 'red box' cell, where you would insert your red box into the cell's content view.

Upvotes: 0