How to override accessoryView in UITableViewCell to change it's position

Question

By default the accessoryView on the UITableViewCell is positioned to the far right on the cell. I am sub-classing the UITableViewCell to try and change this position to move it over more the left, however, it has no effect and it remains to the right. Any ideas on how to do this?

- (void) layoutSubviews
{
    [super layoutSubviews];
    self.accessoryView.frame = CGRectMake(100, self.accessoryView.frame.origin.y, self.accessoryView.frame.size.width, self.accessoryView.frame.size.height);
    self.accessoryView.layer.borderWidth = 1;
    self.accessoryView.layer.borderColor = [[UIColor redColor] CGColor];
}

enter image description here

Here's the answer: http://stackoverflow.com/a/2876263/294661 — Peter Warbo, May 27 '13 at 22:30
You can alternatively edit the the accessoryView image itself to have it leave more white space to the right. — Matt, May 27 '13 at 20:45
AFAIK the default value of `accessoryView` is `nil`. You have to create the view first and assign it to this property in order to customize it. — Michał Ciuba, May 27 '13 at 20:28

score 7 · Answer 1 · answered May 27 '13 at 20:04

7

Implement layoutSubviews in your cell subclass, call super as the first thing you do and then modify the frames of the subviews you want to change.

answered May 27 '13 at 20:04

Wain

118,658
15
128
151

Wain, I tried that and nothing changed. In fact, I tried changing the background color, adding borders, setting a large height and nothing changes. It's still putting the check mark accessory type to the far right. – Flea May 27 '13 at 20:18
Can you show the code for creating the cell and the layoutSubviews implementation please. – Wain May 27 '13 at 20:27
Technically, because you're using the accessoryType rather than the accessory view we're relying on the framework implementation and it would seem that it isn't using the accessoryView. You should probably create a UIImageView and assign it to the accessoryView. – Wain May 27 '13 at 20:36
Thanks Wain. I just removed the accessory type on the cell and I still can't even get the `accessoryview` to even show up using the code above. – Flea May 27 '13 at 20:44
The custom cell is being created and layoutSubviews called ? – Wain May 27 '13 at 20:46

score 1 · Answer 2 · answered Jan 30 '14 at 18:02

This is similar to Flea's solution; pushes the image by the given amount instead of a fixed frame:

static CGFloat const kRightOffset = 10.0;

cell.accessoryView = ({UIImageView * imgV = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"image.png"]];
                CGRect frame = imgV.frame;
                frame.size.width = frame.size.width + kRightOffset;
                imgV.frame = frame;
                [imgV setContentMode:UIViewContentModeLeft];
                imgV; });

score 0 · Accepted Answer · edited Mar 27 '14 at 05:41

0

Based on Matt's tip the only way I found to do this was to just use my own UIImageView and use the image of my choice and then set the frame coordinates to what I needed. This allowed the accessoryView to expand. Apparently this is the only way to manipulate it.

UIImage *indicatorImage = [UIImage imageNamed:@"BV-icon_57x57"];
        UIImageView *view = [[UIImageView alloc] initWithImage:indicatorImage];
        view.frame = CGRectMake(0, 0, 100, 20);
        [view setContentMode:UIViewContentModeLeft];//without this line the image will just be stretched;
        cell.accessoryView = view;

edited Mar 27 '14 at 05:41

Ben

967
3
9
23

answered May 28 '13 at 20:31

Flea

11,176
6
72
83

I am using your code, but its not taking image to left... its still at right... any idea why?? – Fahim Parkar Nov 18 '13 at 13:59
Hey Fahim, Unfortunately, I don't have access to the code any more, I am on a different job all together or I would look for you. I know this was a royal pain to try and make work. – Flea Nov 18 '13 at 15:57
2

@FahimParkar this is definitely a day late and a dollar short but I've been fighting this issue tonight and figure out how to get Flea's solution to work. You have to use `setContentMode` to left justify the image. Otherwise it just stretches it. I've edited the solution. – Ben Mar 27 '14 at 05:38

score 0 · Answer 4 · edited Mar 25 '21 at 13:46

The easiest way would be to define a custom cell, set Accessory to none, place an imageview that acts on behalf of the accessory view wherever you like, and define a tap gesture handler for the cell (if you want to limit tap gesture to only the image, just add tap gesture only to imageview instead of entire cell). This gives a lot of flexibility, plus we don't have to deal with the annoyances that accessoryview brings (for me at least - i dislike the border on the right of the cell)

In your custom cell setup code:

let tap = UITapGestureRecognizer(target: self, action: #selector(onCellTapped(_:)))
self.contentView.addGestureRecognizer(tap)

@objc private func onCellTapped(_: Any) {
   //your code here - i added an imageview that changes image on user tap - to indicate selected/deselected
}

How to override accessoryView in UITableViewCell to change it's position

4 Answers4