ios 如何在UIButton中添加工卡

fxnxkyjh  于 2023-02-17  发布在  iOS
关注(0)|答案(3)|浏览(138)

在我的应用程序中,我需要在左上角添加计数到UIButtonUIButtonItem。这是如何可能的,以及如何添加MIBadgeButton到我的项目。

j2qf4p5b

j2qf4p5b1#

要将工卡计数添加到UIButton,您需要将自定义视图作为子视图添加到UIButton,没有直接的方法。要将MIBadgeButton添加到项目:2种方式:
1.通过链接https://github.com/mustafaibrahim989/MIBadgeButton中提到的CocoaPods添加
1.添加为子模块-〉从Github下载项目。复制MIBadgeButton和MIBadgeLabel文件,然后将它们添加到您的项目中。请参考它们的示例项目以获得清晰的理解

zbdgwd5y

zbdgwd5y2#

您可以使用此pod
首先克隆xcode中的repo,然后导入文件中的库
1.添加podfile到你的项目
1.添加这行'pod BadgeControl'到你的播客文件
你的播客文件会是这样的

platform :ios, '9.0'
target 'myProject' do
use_frameworks!
# Pods for myProject
pod 'BadgeControl'
end

然后关闭您的Xcode项目然后在您的终端中安装pod
然后打开myProject.xc工作空间而不是myProject.xcodeproj
打开故事板添加按钮,将其连接到您的viewcontroller文件并为其命名,然后导入BadgeControl

import BadgeControl
class ViewController: UIViewController {

@IBOutlet weak var badgeButton: UIButton!

private var upperLeftBadge: BadgeController!

override func viewDidLoad() {
    super.viewDidLoad()

    // Add badge to button
    upperLeftBadge = BadgeController(for: badgeButton, in: .upperLeftCorner, badgeBackgroundColor: #colorLiteral(red: 0.9674351811, green: 0.2441418469, blue: 0.4023343325, alpha: 1) , badgeHeight: 20, badgeTextColor: UIColor.white, borderWidth: 3)

    upperLeftBadge.addOrReplaceCurrent(with: "123 or abc", animated: true)

    upperLeftBadge.animateOnlyWhenBadgeIsNotYetPresent = true
    upperLeftBadge.animation = BadgeAnimations.leftRight
}
}

您可以将标记"upperLeftCorner"的位置更改为"lowerLeftCorner"、"upperRightCorner"和"lowerRightCorner
您可以将动画"leftRight"更改为rightLeft、淡入和滚动
您还可以将badgeBackgroundColor和badgeTextColor更改为所需的任何颜色
您还可以更改badgeHeight
更改此行

upperLeftBadge.animateOnlyWhenBadgeIsNotYetPresent = false

如果你想动画时,徽章已出现在视图上。
运行项目。

wko9yo5t

wko9yo5t3#

我通过定义UIButton的一个子类解决了这个问题,其中包括一个用于添加徽章的函数和另一个用于删除徽章的函数。

class ButtonWithBadge: UIButton {

required init() {
        super.init(frame: .zero)
    }

required init?(coder: NSCoder) {
    super.init(coder: coder)
}

func addBadge(withBadgeTag tag: Int, badgeSize size: CGSize = CGSize(width: 7, height: 7), indentTop: CGFloat = 3, indentRight: CGFloat = 3) {
    let badge: UILabel = {
        let bdg = UILabel(frame: CGRect(x: 0, y: 0, width: size.width, height: size.height))
        bdg.tag = tag
        bdg.translatesAutoresizingMaskIntoConstraints = false
        bdg.layer.cornerRadius = bdg.bounds.size.height / 2
        bdg.layer.masksToBounds = true
        bdg.backgroundColor = .systemRed
        return bdg
    }()
    self.addSubview(badge)
    NSLayoutConstraint.activate([
        badge.rightAnchor.constraint(equalTo: self.rightAnchor, constant:  -indentRight),
        badge.topAnchor.constraint(equalTo: self.topAnchor, constant: indentTop),
        badge.widthAnchor.constraint(equalToConstant: size.width),
        badge.heightAnchor.constraint(equalToConstant: size.height)
        ])
}

func removeBadge(withBadgeTag tag: Int) {
    if let badge = self.viewWithTag(tag) {
            badge.removeFromSuperview()
        }
}

}
函数“addBadge”的可选参数允许在默认值不合适的情况下定义标记的大小以及相对于按钮的topAnchor和rightAnchor的位置。
为了便于使用,可以在情节提要中添加一个按钮并将其链接到类ButtonWithBadge,然后根据需要打开或关闭标记:

class ViewController: UIViewController {

@IBOutlet weak var myButton: ButtonWithBadge!

override func viewDidLoad() {
    super.viewDidLoad()
    view.addSubview(myButton)
}

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)
    
    // if condition for showing badge with defaults ( size = 7, indents = 3):
    myButton.addBadge(withBadgeTag: 12345)
    
    // or alternatively create badge with size 10 and indents of 5
    myButton.addBadge(withBadgeTag: 12345, badgeSize: CGSize(width: 10, height: 10), indentTop: 5, indentRight: 5)
    
    // if condition is equal to no badge:
    myButton.removeBadge(withBadgeTag: 12345)
}

}
如果您想在工卡中显示内容(例如数字),只需调整大小,并将输入作为附加参数添加到函数“addBadge”中,然后将其分配给标签

相关问题