Add custom view to UITableView

Question

I have a UITableView with the usual style - one that has a white background and gray horizontal lines to separate the lines.

I have another custom UIView which is a 100x100 rectangle filled with red.

How can I put the latter in the first so that it appears above horizontal rows, but is still a “part” of the table view in the sense that when I look at the table view around, there is a red scroll with it? In fact, I would also have to put my finger in the red area and scroll the view of the table.

Once again, if the red view is placed to overlap some horizontal lines, it should look on top . Unfortunately, when I simply add a red view as a table view, horizontal lines intersect the red view; see this screen shot .

How can I do that?

Answer 1

EDIT

If you are trying to add a view above the rows (hide the rows), try using – bringSubviewToFront: to move it to the beginning of the table view.

 [self.tableView bringSubviewToFront:redView]; 

ELSE

Add a view to 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; 

Luck

Answer 2

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

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

 @interface MyTableView : UITableView @property (weak, readonly) IBOutlet UIView *redSquare; @end 

You can initialize redSquare any way. I simply placed it in my fir along with the table view and moved it to the table subzone in awakeFromNib :

 @implementation MyTableView @synthesize redSquare = _redSquare; - (void)awakeFromNib { [self addSubview:self.redSquare]; } 

In any case, to ensure that the red square is always on top of the table cells and grid lines, override layoutSubviews as follows:

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

Answer 3

Just add this view to the UITableView as a subview:

 [tableView addSubview:myRedView]; 

For handling interactions and scrolling, see userInteractionEnabled .

Answer 4

Make your view a subview of any normal UITableView subview: header, footer, or any UITableViewCell .

Answer 5

I think what you described can be best achieved with a UITableViewCell or even a subspecies of the header. A cell has the inherent ability to scroll through a table and can be customized as you like. This is essentially a look.

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

Answer 6

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

So, to keep your view in front, you need to return it there every time cells can be added, which happens when scrolling through a UITableView.

I would advise you to try adding your custom view as a preview, and then overriding -scrollViewDidScroll as follows:

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

Answer 7

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];