iOS开发：XLPagerTabStrip标签图标大小修改失败求助

Hey there! I’ve run into this exact problem before with XLPagerTabStrip—tweaking the asset’s dimensions alone won’t work because the framework’s default cell enforces its own layout rules for the icon. Let’s walk through two reliable solutions to get your icon size adjusted properly.

Solution 1: Create a Custom Pager Tab Cell (Recommended) #

This is the most stable approach since it gives you full control over the cell’s layout. Here’s how to implement it:

1. Build a custom cell subclass
   Make a new class that inherits from IndicatorCell:

   import UIKit
   import XLPagerTabStrip
   
   class CustomPagerTabCell: IndicatorCell {
       override func awakeFromNib() {
           super.awakeFromNib()
           setupImageViewConstraints()
       }
       
       override func layoutSubviews() {
           super.layoutSubviews()
           setupImageViewConstraints()
       }
       
       private func setupImageViewConstraints() {
           guard let imageView = imageView else { return }
           
           // Disable auto-resizing mask to use custom constraints
           imageView.translatesAutoresizingMaskIntoConstraints = false
           
           // Set your desired icon size (e.g., 30x30)
           NSLayoutConstraint.activate([
               imageView.widthAnchor.constraint(equalToConstant: 30),
               imageView.heightAnchor.constraint(equalToConstant: 30),
               imageView.centerXAnchor.constraint(equalTo: self.centerXAnchor),
               imageView.centerYAnchor.constraint(equalTo: self.centerYAnchor)
           ])
           
           // Ensure the icon scales correctly without distortion
           imageView.contentMode = .scaleAspectFit
       }
   }
   

2. Register and use the custom cell in your PagerTabStripViewController
   Update your view controller to register the custom cell and configure it:

   import XLPagerTabStrip
   
   class YourPagerController: ButtonBarPagerTabStripViewController {
       override func viewDidLoad() {
           super.viewDidLoad()
           // Register your custom cell
           register(CustomPagerTabCell.self, forCellWithReuseIdentifier: "CustomPagerTabCell")
       }
       
       override func viewControllers(for pagerTabStripController: PagerTabStripViewController) -> [UIViewController] {
           // Return your child view controllers here
           let chatVC = ChatViewController()
           chatVC.itemInfo = IndicatorInfo(image: UIImage(named: "ic_chats"), highlightedImage: UIImage(named: "ic_chats"))
           
           return [chatVC]
       }
       
       override func configureCell(_ cell: CellInfo, for indicatorInfo: IndicatorInfo) {
           guard let customCell = cell.cell as? CustomPagerTabCell else { return }
           // Assign the icon images to the custom cell
           customCell.imageView?.image = indicatorInfo.image
           customCell.imageView?.highlightedImage = indicatorInfo.highlightedImage
       }
   }
   

Solution 2: Adjust Default Cell’s ImageView Directly #

If you want a quicker fix without creating a custom cell, you can modify the default cell’s image view constraints directly. Note that this depends on the framework’s internal structure, but it works for older versions like the one you’re using (compatible with Xcode 10.2.1):

override func configureCell(_ cell: CellInfo, for indicatorInfo: IndicatorInfo) {
    super.configureCell(cell, for: indicatorInfo)
    
    guard let defaultCell = cell.cell as? IndicatorCell else { return }
    let imageView = defaultCell.imageView!
    
    imageView.translatesAutoresizingMaskIntoConstraints = false
    NSLayoutConstraint.activate([
        imageView.widthAnchor.constraint(equalToConstant: 30),
        imageView.heightAnchor.constraint(equalToConstant: 30)
    ])
    imageView.contentMode = .scaleAspectFit
}

Why Changing Asset Dimensions Didn’t Work #

XLPagerTabStrip’s default IndicatorCell automatically scales the image to fit its predefined layout bounds—completely ignoring the original asset’s size. That’s why resizing the image in Assets didn’t make a difference; you need to override the cell’s layout rules to enforce your desired icon size.

内容的提问来源于stack exchange，提问作者DragonFire