Swift中为导航栏右侧购物车按钮添加数量徽章问题

你现在的问题是原本的购物车按钮被数量徽章替换了，想要的是徽章叠加在购物车按钮右上角的效果对吧？我来帮你调整代码，用FontAwesome实现这个需求。

核心思路是：把购物车图标按钮和数量徽章按钮放在同一个父视图容器里，再将这个父视图作为UIBarButtonItem的自定义视图，这样就能实现两个元素的叠加显示了。

完整代码示例 #

// 创建父容器视图，用来容纳购物车按钮和徽章
let containerView = UIView(frame: CGRect(x: 0, y: 0, width: 30, height: 30))

// 1. 创建购物车按钮
let cartButton = UIButton(frame: CGRect(x: 0, y: 0, width: 30, height: 30))
cartButton.titleLabel?.font = UIFont.fontAwesome(ofSize: 20)
cartButton.setTitle(String.fontAwesomeIcon(name: .shoppingCart), for: .normal)
cartButton.setTitleColor(.black, for: .normal) // 根据你的需求调整颜色
containerView.addSubview(cartButton)

// 2. 创建数量徽章按钮
let badgeButton = UIButton(frame: CGRect(x: 20, y: 0, width: 20, height: 20))
badgeButton.titleLabel?.font = UIFont.systemFont(ofSize: 12)
badgeButton.setTitle("3", for: .normal) // 这里替换成你的购物车数量
badgeButton.setTitleColor(.white, for: .normal)
badgeButton.backgroundColor = .red // 徽章背景色，通常用红色
badgeButton.layer.cornerRadius = 10 // 圆角变成圆形
badgeButton.clipsToBounds = true
containerView.addSubview(badgeButton)

// 将容器视图设置为导航栏右侧按钮
let rightBarButtonItem = UIBarButtonItem(customView: containerView)
self.navigationItem.rightBarButtonItem = rightBarButtonItem

关键细节说明 #

• 父容器的尺寸要足够容纳两个按钮，避免元素被截断
• 购物车按钮用FontAwesome的.shoppingCart图标（你之前误写为.github，记得修正）
• 徽章按钮通过调整frame的x和y值，定位在购物车按钮的右上角；如果需要更灵活的布局，也可以用AutoLayout约束
• 徽章的圆角设置为自身高度的一半，就能实现圆形效果
• 可以根据你的APP设计风格，调整图标颜色、徽章背景色、字体大小等参数

这样设置后，就能实现你想要的「购物车按钮上叠加数量徽章」的效果啦～

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