How to Center an App Icon Image Vertically in a UITableViewCell

Question

Created 1w

Replies 3

Boosts 0

Participants 2

Hello!

I'm making a list of app icons for users to choose, but when I increase or decrease the font size, the image is still in the same spot and isn't centered vertically with the text. I have it initialized with a frame with hard-coded values, but I was wondering if there was a better way of doing it, such as with constraints or some sort of image scaling.

I've provided code blocks and an image of what is happening.

ImageView Configuration

// App Icon Image
UIImageView *appIconImageView = [[UIImageView alloc] initWithFrame: CGRectMake(12.5, 17, 22.5, 22.5)];
    
// Configurations
UIImageSymbolConfiguration *multicolorConfiguration = [UIImageSymbolConfiguration configurationPreferringMulticolor];
UIImageSymbolConfiguration *sizeConfiguration = [UIImageSymbolConfiguration configurationWithScale: UIImageSymbolScaleSmall];
UIImageSymbolConfiguration *appIconConfiguration = [multicolorConfiguration configurationByApplyingConfiguration: sizeConfiguration];
    
appIconImageView.preferredSymbolConfiguration = appIconConfiguration;
appIconImageView.contentMode = UIViewContentModeScaleAspectFill;
    
self.appIconImage = appIconImageView;
[appIconImageView release];

ImageView Constraints

        [self.appIconImage.firstBaselineAnchor constraintEqualToAnchor: self.contentView.firstBaselineAnchor constant: 5.0],
        [self.appIconImage.leadingAnchor constraintEqualToAnchor: self.contentView.layoutMarginsGuide.leadingAnchor],
        
        // Label
        [self.colorLabel.leadingAnchor constraintEqualToAnchor:self.appIconImage.trailingAnchor constant: 10],
        [self.colorLabel.trailingAnchor constraintEqualToAnchor:self.contentView.layoutMarginsGuide.trailingAnchor],
        [self.colorLabel.topAnchor constraintEqualToAnchor: self.contentView.layoutMarginsGuide.topAnchor],
        [self.colorLabel.bottomAnchor constraintEqualToAnchor: self.contentView.layoutMarginsGuide.bottomAnchor],

Image

Simulator Screenshot - iPhone 16e - 2026-01-21 at 14.00.58.png

Boost

Answer 1

DTS Engineer OP

Apple

1w

Hello dteakell,

Thanks for the code snippets and screenshot. Looks like you're matching firstBaselineAnchor of the app icon to that of the row. Is there a reason why you're choosing to do that? You can simply center them vertically with one another like this:

[self.appIconImage.centerYAnchor constraintEqualToAnchor:self.colorLabel.centerYAnchor];

Thank you for your patience,

Richard Yeh  Developer Technical Support

1

Answer 2

dteakell OP

1w

In response to Richard,

Thank you for your response! I've tried the centerYAnchor and it just clips the label when the text size gets too large.

I've provided my label constraint code below, as well as a picture showing the outcome.

Constraint Code

// App Icon Image
[self.appIconImage.centerYAnchor constraintEqualToAnchor: self.colorLabel.centerYAnchor],
        [self.appIconImage.leadingAnchor constraintEqualToAnchor: self.contentView.layoutMarginsGuide.leadingAnchor],
        
// Label
[self.colorLabel.leadingAnchor constraintEqualToAnchor:self.appIconImage.trailingAnchor constant: 10],
[self.colorLabel.trailingAnchor constraintEqualToAnchor:self.contentView.layoutMarginsGuide.trailingAnchor],
[self.colorLabel.topAnchor constraintEqualToAnchor: self.contentView.layoutMarginsGuide.topAnchor],
[self.colorLabel.bottomAnchor constraintEqualToAnchor: self.contentView.layoutMarginsGuide.bottomAnchor],

Picture

Simulator Screenshot - iPhone 16e - 2026-01-21 at 17.15.40.png

0

Answer 3

DTS Engineer OP

Apple

1w

Hello dteakell,

Assuming that these views are all contained in UITableView cells, you would need to implement the row height estimation delegate callbacks. Furthermore, since your design incorporates the use of variable font sizes, the guide to Creating self-sizing table view cells would definitely be help of you, as it specifically mentions Dynamic Type.

Currently it seems like your row heights are of fixed size, leading the label text to be clipped by design, as they are not resizing to fit the enlarged font.

Thank you for your patience,

Richard Yeh  Developer Technical Support

1