UI issues with customized UITableViewCell

Question

I have a customized UITableViewCell. These have the following issues:

The delete button is too far right, overlapping my background. I'd like to set an inset so that it moves it just a little to the left and then it would look great.

Delete button overlapping

The blue highlighted state spans the entire width of the screen, and I'd like it just to be set inside my curved cell background's bounds.

Highlighted state

Is there a way to fix these two issues? Thanks.

Edit: My code is as follows to set the background (just a custom method):

- (UIImage *)cellBackgroundForRowAtIndexPath:(NSIndexPath *)indexPath
{
    NSInteger rowCount = [self tableView:[self tableView] numberOfRowsInSection:0];
    NSInteger rowIndex = indexPath.row;
    UIImage *background = nil;

    if (rowIndex == 0) {
        background = [UIImage imageNamed:@"cell_top.png"];
    } else if (rowIndex == rowCount - 1) {
        background = [UIImage imageNamed:@"cell_bottom.png"];
    } else {
        background = [UIImage imageNamed:@"cell_middle.png"];
    }

    return background;
}

I then call this method inside a reloadTable void method that just gets every cell and updates it after there has been a row update (adding or removing a row, because there are 3 different images for the table). I also call this after my fetched results controller gets all my items from Core Data and loads the table up for the first time.

Edit 2: This is the code for the reloadTable method:

- (void)refreshTable
{
    for (NSInteger j = 0; j < [self.tableView numberOfSections]; ++j)
    {
        for (NSInteger i = 0; i < [self.tableView numberOfRowsInSection:j]; ++i)
        {
            UIImage *background = [self cellBackgroundForRowAtIndexPath:[NSIndexPath indexPathForRow:i inSection:j]];

            UIImageView *cellBackgroundView = [[UIImageView alloc] initWithImage:background];
            cellBackgroundView.image = background;
            UITableViewCell *cell = [self.tableView cellForRowAtIndexPath:[NSIndexPath indexPathForRow:i inSection:j]];
            cell.backgroundView = cellBackgroundView;
        }
    }
}

The problem is: I have no idea how to set margins or width of a tableView or table view cell. Do I need to subclass something? How is it generally done?

I believe these issues both have to do with the bounds of your "customized `UITableViewCell`". Could you post some of that code for us to see? — The Kraken, May 16 '13 at 21:25
After the proper image has been returned, are you setting that to the view of the `UITableViewCell`? — The Kraken, May 16 '13 at 21:32
@TheKraken Yes, in `reloadData`. I have edited my original post with the code for this method. — swiftcode, May 16 '13 at 23:35
the fact that you have created the `refreshTable` — and how it looks like — is a proof that you didnt understand the main concepts behind UITableView and its delegates. you should carefully study this: https://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/TableView_iPhone/AboutTableViewsiPhone/AboutTableViewsiPhone.html — vikingosegundo, May 16 '13 at 23:45
@ikinciviking The `refreshTable` was simply written to fix my user interface, because of those 3 different images. If I have, say, 10 rows, and the user adds a new item, since those are ordered alphabetically, it goes to the appropriate position, and the table image might break. If a row that was at the top gets pushed down, it still has `cell_top.png` as its background, but it's no longer the top cell. That's why I wrote `refreshData`, to get the images fixed after an insertion, deletion or viewDidLoad. — swiftcode, May 17 '13 at 00:16
Yes, you should subclass UITableviewCell. Check out: http://stackoverflow.com/questions/6861431/uitableviewcell-delete-button-frame — savner, May 17 '13 at 00:23
As I said: you should definitely read the documentation and learn about cell reuse. If you rather want to fight the framework than use it in a proper way that is your decision. but no one will be able to help you in a fertile way except telling you: "Read the documentation and do it the right way." — vikingosegundo, May 17 '13 at 00:25

danypata · Accepted Answer · 2013-05-17T07:16:52.183

The problem is your table view frame width, the blue color of the selected cell will fill out the entire cell, so you should reduce the width of your table view so it will have some margins in this way the delete button will also appear a little to the left. But there will still be problems to the first and last cell when you will select them because they have rounded corners but the blue selection won't have rounded corners so I suggest that you should create an .png image for selected state (one first cell, one for middle cells and one for bottom cell)

EDIT

In iOS the concept of margins doesn't exist, I just used that term because I was thinking that it will be more easy to understand but here what you have to do to show a little space in the left and right of the table view:

yourTableView.frame = CGRectMake(leftMarginSpace,
                                 0,
                                 self.view.frame.size.width 
                                     - leftMarginSpace 
                                     - rightMarginSpace, 
                                 self.view.frame.size.height);

So if you have the table view added into a view controller's view then the table view will be positioned at leftMarginSpace distance from left, at the top of the view controller (0 y position), at rightMarginSpace distance from right and will have the view controller's height.

If you add the table view as a subview to another view (not the view controller's view) then you have to change the frame like this:

yourTableView.frame = CGRectMake(leftMarginSpace,
                                     0,
                                     parentView.frame.size.width 
                                         - leftMarginSpace 
                                         - rightMarginSpace, 
                                     parentView.frame.size.height);

I also noticed that you want to create a grouped table view style so you should check the grouped table view.

Could you should me some sample code, please? I don't know how to set the margins. — swiftcode, May 16 '13 at 23:34

UI issues with customized UITableViewCell

1 Answers1