Vertical center on UITableViewCell accessoryView's element

Question

How can I vertically center the content that I have inside a accessoryView from a UITableViewCell? The content is represented by a dynamically added UISwitch that is resized to 50% both width and height using:

switchView.transform = CGAffineTransformMakeScale(0.5, 0.5);

A picture with the problem is:

It seems that you cannot change the position (either using frame, centre, translation transformation) of the accessoryView. — Yuchen, Jan 31 '15 at 17:44

Mundi · Answer 1 · 2015-01-31T16:49:12.590

0

Set the appropriate constraint in interface builder: "Vertical Center in Container".

Screenshot

I would not recommend reducing the size of standard UI elements.

edited Jan 31 '15 at 16:49

answered Jan 31 '15 at 16:43

Mundi

79,884
17
117
140

What constraint do I have to change? – Radu Vlad Jan 31 '15 at 16:46
I updated my answer with a screenshot. It is pretty obvious, though. You should be able to figure out the rest yourself. – Mundi Jan 31 '15 at 16:49
all the UISwitch-es are dynamically added from the code – Radu Vlad Jan 31 '15 at 16:51
Then you are out of luck. You need to subclass your table view cell and put the switch where you want it, rather than using the accessory view. – Mundi Jan 31 '15 at 17:00

score 0 · Accepted Answer · edited May 23 '17 at 12:12

You cannot change the position of a accessoryView. Please refer to the following question:

Can a standard accessory view be in a different position within a UITableViewCell?

It is okay for you to apply transformation such as scale, and rotation to the accessory view. However, you are not able to apply translate transformation to the accessory view. For example,

switchView.transform = CGAffineTransformTranslate(CGAffineTransformMakeScale(0.5, 0.5),10,10);

Only the scale part of the transformation is applied to the switchView. Looking through the apple documentation, I also found this following line of note:

... The accessory view appears in the right side of the cell.

I don't think apple do want you to customized the location of the accessory view. Based on your question, I also tried changing the centre and the frame of the accessoryView, I do notice that the position of the accessoryView is not moving at all.

In short, If you really want to change the size of the UISwitch and move it to the vertical align it in the table view cell, I think you have only one option: You will have to add UISwitch as a subview of the cell and then you will have to freedom to do whatever you want.

score 0 · Answer 3 · answered Feb 27 '15 at 20:18

The best way I could do this is by subclassing UITableViewCell, and overriding layoutSubviews and positioning the accessoryView there:

- (void)layoutSubviews {
    [super layoutSubviews]; 
    self.accessoryView.frame = CGRectMake(self.accessoryView.frame.origin.x + (self.accessoryView.frame.size.width / 2), (self.frame.size.height - (self.accessoryView.frame.size.height / 2)) / 2, self.accessoryView.frame.size.width, f.size.height);
}

I would probably advise you not to resize Apple's prebuilt UI components, especially because Apple's Human Interface Guidelines suggest:

Give tappable controls a hit target of about 44 x 44 points.

The resized switches are smaller.

Nonetheless, I hope this helps!

score 0 · Answer 4 · answered Jul 11 '22 at 07:19

iOS 15.5 / Swift 13.4.1

It's a little bit weird when I set a UIImageView to cell.accessoryView

let iconView = UIImageView(image: .sfSymbol(of: "lock.fill", size: 17, weight: .semibold))
iconView.bounds = .init(x: 0, y: 0, width: 32, height: 32)
iconView.contentMode = .scaleAspectFit
iconView.debugBorder() // Show 1pt border
self.accessoryView = iconView

But when I use an UIView as image view's container, add top/bottom/leading/trailing auto layout, then set container to cell.accessoryView, the image is vertically centered in cell:

let imageContainerView = UIView(frame: .init(x: 0, y: 0, width: 32, height: 32))
let imageView = UIImageView(image: .sfSymbol(of: "lock.fill", size: 17, weight: .semibold))
imageView.contentMode = .scaleAspectFit
imageContainerView.addSubview(imageView)
imageView.debugBorder() // Show 1pt border
imageView.labr.box(imageContainerView, padding: 0).done() // Auto Layout: fill container
self.accessoryView = imageContainerView

Vertical center on UITableViewCell accessoryView's element

4 Answers4