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

UI Frameworks UIKit
dteakell OP
Created
Replies 3
Boosts 0
Views 869
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

Picture 2

- (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],
    ]];
}
Answered by dteakell in 867498022

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],
        ]];
    }
}
Replies  3
Boosts 0
Views  869
Participants  2
RickMaddy OP

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.
dteakell OP
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],
        ]];
    }
}
RickMaddy OP

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.