UIButton 中的按钮和图像对齐问题

Posted 2023-03-21

【中文标题】UIButton 中的按钮和图像对齐问题

【英文标题】：Button and Image Alignment issues in UIButton

【发布时间】：2018-09-06 01:49:20

【问题描述】：

所以我有一个 UIBarbuttonItem，我目前正在根据我已经完成的布局进行设计。

import Foundation
import UIKit

class LocationManager: UIBarButtonItem 
    var viewController: MainViewController?

    lazy var customButton : UIButton = 
        let customButton = UIButton(type: .system)
        customButton.setImage(UIImage(named: "downArrow"), for: .normal)
        customButton.imageEdgeInsets = UIEdgeInsetsMake(0, 20, 0, -10)
        guard let customFont = UIFont(name: "NoirPro-SemiBold", size: 20) else 
            fatalError("""
        Failed to load the "CustomFont-Light" font.
        Make sure the font file is included in the project and the font name is spelled correctly.
        """
            )
        
        customButton.semanticContentAttribute = UIApplication.shared
            .userInterfaceLayoutDirection == .rightToLeft ? .forceLeftToRight : .forceRightToLeft
        customButton.titleLabel?.font = customFont
        customButton.setTitleColor(UIColor.black, for: .normal)
        return customButton
    ()



    override init() 
        super.init()
        setupViews()
    

    @objc func setupViews()
        customView = customButton

    

    required init?(coder aDecoder: NSCoder) 
        fatalError("init(coder:) has not been implemented")
    

我正确地完成了同时使用图像和标题的工作，并为按钮设置了图像插图，加载时外观很棒。但是，当我离开屏幕并返回时，似乎一切都乱了套，图像被移回，有时会出现两张图像，其中一张的尺寸会变形。

我缺少的自定义按钮实现有什么问题吗？

我已经包含了之前和之后的图片

【参考方案1】：

我建议您制作自定义按钮类，然后通过添加子视图来制作标题和图像。在这种情况下 UIImageView 和 UILabel。因为 UIButton 继承自 UIView 你可以很容易地做到这一点。使用这种方式我从来没有遇到过问题。

这是我为您编写的代码：

import UIKit

class ViewController: UIViewController 

lazy var customButton: CustomButton = 
    let button = CustomButton(frame: CGRect(x: 50,
                                            y: 200,
                                            width: view.frame.width - 100,
                                            height: 50))
    // This mask for rotation
    button.autoresizingMask = [.flexibleLeftMargin,
                             .flexibleRightMargin,
                             .flexibleTopMargin,
                             .flexibleBottomMargin]
    button.attrTitleLabel.text = "San Francisco, CA"
    button.addTarget(self, action: #selector(chooseCity), for: .touchUpInside)
    return button
()

override func viewDidLoad() 
    super.viewDidLoad()

    view.backgroundColor = .blue
    view.addSubview(customButton)


@objc func chooseCity() 
    print("Choose city button has pressed")




class CustomButton: UIButton 

private let arrowImageSize: CGSize = CGSize(width: 20, height: 20)
private let sideOffset: CGFloat = 10

override init(frame: CGRect) 
    super.init(frame: frame)

    backgroundColor = .white

    addSubview(attrTitleLabel)
    addSubview(arrowImageView)


required init?(coder aDecoder: NSCoder) 
    fatalError("init(coder:) has not been implemented")


lazy var attrTitleLabel: UILabel = 
    let label = UILabel()
    label.font = UIFont(name: "NoirPro-SemiBold", size: 20)
    label.textColor = .black
    return label
()

lazy var arrowImageView: UIImageView = 
    let iv = UIImageView()
    iv.image = UIImage(named: "arrow_down")
    iv.contentMode = .scaleAspectFit
    return iv
()

override func layoutSubviews() 
    super.layoutSubviews()

    arrowImageView.frame = CGRect(x: self.frame.width - arrowImageSize.width - sideOffset,
                                  y: self.frame.height/2 - arrowImageSize.height/2,
                                  width: arrowImageSize.width,
                                  height: arrowImageSize.height)

    attrTitleLabel.frame = CGRect(x: sideOffset, y: 0, width: self.frame.width - sideOffset*2 - arrowImageSize.width, height: self.frame.height)

外观：

【讨论】：

所以如果我离开然后回来，这个设置不会弄乱方向

会有一些方向错误..给我几分钟，我会编辑修复这些错误的帖子

我也没有得到任何文字，只是一个箭头

文字卡在里面\

检查字体...你确定你有这个吗？