Removing the blank spaces on left and right side of the UISearchBar

Question

I am creating a UI component that should display a UILabel and a UISearchBar below.

However, I am not able to align them, the UISearchBar always has extra space on both left and right side (highlighted RED).

I was trying to set the dimensions of searchBarTextField by layout anchors directly, but it didn't work.

I would prefer to do it using layout anchors when possible.

SearchBar.m:

-(id) init {        
    self.titleLabel = [UILabel new];
    self.searchBar = self.searchController.searchBar;
    UIView *searchBarWrapper = [UIView new];

    [self.view addSubview:self.titleLabel];
    [self.view addSubview:searchBarWrapper];
    [searchBarWrapper addSubview:self.searchBar];

    [self.titleLabel setTranslatesAutoresizingMaskIntoConstraints:NO];
    [searchBarWrapper setTranslatesAutoresizingMaskIntoConstraints:NO];
    [self.searchBar setTranslatesAutoresizingMaskIntoConstraints:NO];

    //[self.titleLabel.widthAnchor constraintEqualToAnchor:self.view.widthAnchor multiplier:1.0].active = YES;
    [self.titleLabel.heightAnchor constraintEqualToConstant:14.0].active = YES;
    [self.titleLabel.topAnchor constraintEqualToAnchor:self.view.topAnchor].active = YES;
    [self.titleLabel.leftAnchor constraintEqualToAnchor:self.view.leftAnchor].active = YES;
    [self.titleLabel.rightAnchor constraintEqualToAnchor:self.view.rightAnchor].active = YES;
    //[self.titleLabel.bottomAnchor constraintEqualToAnchor:searchBarTextField.topAnchor].active = YES;

    [searchBarWrapper.widthAnchor constraintEqualToAnchor:self.view.widthAnchor multiplier:1.0].active = YES;
    //[self.searchBar.heightAnchor constraintEqualToConstant:36.0].active = YES;
    [searchBarWrapper.topAnchor constraintEqualToAnchor:self.titleLabel.bottomAnchor].active = YES;
    [searchBarWrapper.bottomAnchor constraintEqualToAnchor:self.view.bottomAnchor].active = YES;
    [searchBarWrapper.leftAnchor constraintEqualToAnchor:self.view.leftAnchor].active = YES;
    [searchBarWrapper.rightAnchor constraintEqualToAnchor:self.view.rightAnchor].active = YES;

    [self.searchBar.topAnchor constraintEqualToAnchor:searchBarWrapper.topAnchor].active = YES;
    [self.searchBar.bottomAnchor constraintEqualToAnchor:searchBarWrapper.bottomAnchor].active = YES;
    [self.searchBar.leftAnchor constraintEqualToAnchor:searchBarWrapper.leftAnchor].active = YES;
    [self.searchBar.rightAnchor constraintEqualToAnchor:searchBarWrapper.rightAnchor constant:16.0].active = YES;

    return self;
}

The UISearchBarTextField is embedded in a UIView to which I don't have access to.

The constraints:

The approach by @BenOng - works fine, but breaks after tapping for the first time:

Answer 1

UISearchBar have this property searchFieldBackgroundPositionAdjustment:UIOffset which you can set to UIOffsetMake(-8,0) to make the left side of the text field align with the left edge of the search bar.

Create a UIView right where the full search bar should be and make the search bar it's subview. Set the right edge of the search bar beyond it's super view till the right edge aligns with the superview, it should be about 16 points extra. Make sure the superview's property clipsToBoundsis set to true, the extra 16 points of search bar background will be clipped.