How to Constrain a TableView Cell Similarly to Apple's Settings App

Question

Created 5d

Replies 3

Boosts 0

Participants 2

Hello!

I'm creating a settings page for my app and I want it to look as native as possible. I want to know if it's possible to add constraints that make the second label go to the bottom when the text size gets really large (see Picture1) instead of having to force it to be on the right (see Picture 2).

I've left my constraint code for this cell down below, too.

I'm still learning constraints and best practices, so if there's any feedback, I'd love to hear it. Thank you!

Picture 1

Simulator Screenshot - iPhone 16e - 2025-11-24 at 10.34.58.png

Picture 2

Simulator Screenshot - iPhone 16e - 2025-11-24 at 10.42.43.png

- (void) setConstraints {
    [NSLayoutConstraint activateConstraints:@[
        // Cell Title Label
        [self.themeColorLabel.leadingAnchor constraintEqualToAnchor:self.contentView.layoutMarginsGuide.leadingAnchor],
        [self.themeColorLabel.trailingAnchor constraintEqualToAnchor:self.contentView.layoutMarginsGuide.trailingAnchor],
        [self.themeColorLabel.topAnchor constraintEqualToAnchor: self.contentView.layoutMarginsGuide.topAnchor],
        [self.themeColorLabel.bottomAnchor constraintEqualToAnchor: self.contentView.layoutMarginsGuide.bottomAnchor],
        
        // Selected Theme Color Label
        [self.selectedColorLabel.trailingAnchor constraintEqualToAnchor: self.contentView.layoutMarginsGuide.trailingAnchor],
        [self.selectedColorLabel.topAnchor constraintEqualToAnchor: self.contentView.layoutMarginsGuide.topAnchor],
        [self.selectedColorLabel.bottomAnchor constraintEqualToAnchor: self.contentView.layoutMarginsGuide.bottomAnchor],
    ]];
}

Boost

Answer 1

RickMaddy OP

4d

A standard UITableViewCell with a style of .value1 should give the desired results.

If you want your own custom cell class with your own labels, you will need to apply one of two different sets of constraints depending on the current size category. Update the constraints any time the size category changes.

1

Answer 2

dteakell OP

4d

Accepted Answer

I was able to set the constraints conditionally using the UIContentSizeCatagory.

- (void) setConstraints {
    
    // Get the current size catagory of the text
    UIContentSizeCategory catagory = self.traitCollection.preferredContentSizeCategory;
    
    // Put the label on the trailing edge of the cell if the Dynamic Text size is less than large
    if (catagory < UIContentSizeCategoryAccessibilityLarge) {
        [NSLayoutConstraint activateConstraints:@[
            // Cell Title Label
            [self.themeColorLabel.leadingAnchor constraintEqualToAnchor:self.contentView.layoutMarginsGuide.leadingAnchor],
            [self.themeColorLabel.trailingAnchor constraintEqualToAnchor:self.contentView.layoutMarginsGuide.trailingAnchor],
            [self.themeColorLabel.topAnchor constraintEqualToAnchor: self.contentView.layoutMarginsGuide.topAnchor],
            [self.themeColorLabel.bottomAnchor constraintEqualToAnchor: self.contentView.layoutMarginsGuide.bottomAnchor],
            
            // Selected Theme Color Label
            [self.selectedColorLabel.trailingAnchor constraintEqualToAnchor: self.contentView.layoutMarginsGuide.trailingAnchor],
            [self.selectedColorLabel.topAnchor constraintEqualToAnchor: self.contentView.layoutMarginsGuide.topAnchor],
            [self.selectedColorLabel.bottomAnchor constraintEqualToAnchor: self.contentView.layoutMarginsGuide.bottomAnchor],
        ]];
    
    // Put the label below the title in sizes greater than large
    } else {
        [NSLayoutConstraint activateConstraints:@[
            // Cell Title Label
            [self.themeColorLabel.leadingAnchor constraintEqualToAnchor:self.contentView.layoutMarginsGuide.leadingAnchor],
            [self.themeColorLabel.trailingAnchor constraintEqualToAnchor:self.contentView.layoutMarginsGuide.trailingAnchor],
            [self.themeColorLabel.topAnchor constraintEqualToAnchor: self.contentView.layoutMarginsGuide.topAnchor],
            
            // Selected Theme Color Label
            [self.selectedColorLabel.leadingAnchor constraintEqualToAnchor: self.contentView.layoutMarginsGuide.leadingAnchor],
            [self.selectedColorLabel.trailingAnchor constraintEqualToAnchor: self.contentView.layoutMarginsGuide.trailingAnchor],
            [self.selectedColorLabel.topAnchor constraintEqualToAnchor: self.themeColorLabel.bottomAnchor],
            [self.selectedColorLabel.bottomAnchor constraintEqualToAnchor: self.contentView.layoutMarginsGuide.bottomAnchor],
        ]];
    }
}

0

Answer 3

RickMaddy OP

4d

Keep in mind that the user can change the text size category (in the Settings app) while using your app. So your code should be listening for that change and updating the constraints as needed.

1