如何使用自定义SFSymbol配置按钮,通过UIButton.Configuration?

huangapple go评论73阅读模式
英文:

How to configure button via UIButton.Configuration with custom SFSymbol?

问题

我创建了一个按钮:

```swift
private let sortButton: UIButton = {
    let buttonConfig = UIButton.Configuration.plain()
    let button = UIButton(configuration: buttonConfig)
    button.tintColor = R.color.controlSecondaryTypo()
    button.showsMenuAsPrimaryAction = true
    button.changesSelectionAsPrimaryAction = true
    return button
}()

接下来我添加了菜单:

private func setupButton() {
    let items = ["新建", "旧的"]

    let actions: [UIAction] = items.map {
        let action = UIAction(title: $0) { action in
            print("\(action.title)")
        }

        return action
    }

    let menu = UIMenu(options: .singleSelection, children: actions)
    sortButton.menu = menu
}

这是我的按钮显示enter image description here

它默认显示为 chevron.up.chevron.down。如何改成另一个 SFSymbol?例如:chevron.down

我想要能够配置按钮,根据所选的 UIMenu 元素更改标题,并使用自定义的 SFSymbol。


<details>
<summary>英文:</summary>

I create my button: 

private let sortButton: UIButton = {
let buttonConfig = UIButton.Configuration.plain()
let button = UIButton(configuration: buttonConfig)
button.tintColor = R.color.controlSecondaryTypo()
button.showsMenuAsPrimaryAction = true
button.changesSelectionAsPrimaryAction = true
return button
}()

Next I add the menu:

private func setupButton() {
let items = ["New", "Old"]

    let actions: [UIAction] = items.map {
        let action = UIAction(title: $0) { action in
            print(&quot;\(action.title)&quot;)
        }

        return action
    }

    let menu = UIMenu(options: .singleSelection, children: actions)
    sortButton.menu = menu
}
Here is the display of my button[enter image description here](https://i.stack.imgur.com/CJOPy.png)

It is always displayed by default with chevron.up.chevron.down. How can I change to another SFSymbol? Example: chevron.down


I want to be able to configure button that will change the title depending on the selected UIMenu element with a custom SFSymbol

</details>


# 答案1
**得分**: 0

因为使用了`UIButton.Configuration.plain()`,在当前实现中我没有看到通过配置初始化按钮的任何理由,你可以使用`Button()`,然后添加菜单。

但如果你需要配置的话,可以使用`.borderless()`,那个配置可能是你在寻找的。

或者通过扩展创建自己的配置,并对其进行设置。

顺便说一句,如果你的需求需要`.plain()`,你可以做一些巧妙的事情&#128517;&#128556;,比如:

```swift
sortButton.subviews.first(where: { $0 is UIImageView })?.isHidden = true

但我认为简单的Button()或者.borderless()就足够了。

英文:

It is happening because of UIButton.Configuration.plain(), in current implementation I do not see any reason to init button through config, you can Button() and after add you menu.

But if you needed config then use .borderless(), that config might be the one you looking for.

Or make your own config by extension and play with settings of it.

Btw, if .plain() is required for your desires you can make something hacky😅😬, like:

sortButton.subviews.first(where: { $0 is UIImageView })?.isHidden = true

but I think simple Button() or .borderless() would be enough

答案2

得分: 0

当你使用带有菜单的UIButton并启用showsMenuAsPrimaryActionchangesSelectionAsPrimaryAction这两个属性时,按钮会自动显示chevron.up.chevron.down指示器,以表示这是一个弹出式按钮。

UIButton.Configuration有一个名为indicator的属性,默认情况下在将按钮设置为弹出式按钮时为.popup

由于这是一个标准做法,你应该考虑保留图标不变,因为用户会认识它。

但如果你确实想要更改图标,你需要应用自己的按钮图像并移除指示器。

将你的按钮配置代码更改为:

var buttonConfig = UIButton.Configuration.plain()
buttonConfig.indicator = .none // 隐藏标准弹出图标
buttonConfig.image = UIImage(systemName: "chevron.down", withConfiguration: UIImage.SymbolConfiguration(scale: .small)) // 使用新图标
buttonConfig.imagePlacement = .trailing // 将图像放在标题之后
英文:

When you setup a UIButton with a menu and you enable the two properties showsMenuAsPrimaryAction and changesSelectionAsPrimaryAction, then the button displays the chevron.up.chevron.down indicator automatically to indicate that this is a popup button.

UIButton.Configuration has an indicator property that defaults to .popup when you setup the button as a popup button.

Since this is a standard, you should consider leaving the icon as-is since users will recognize what it is.

But if you do want to change the icon, you will need to apply your own button image and remove the indicator.

Change your button configuration code to:

var buttonConfig = UIButton.Configuration.plain()
buttonConfig.indicator = .none // Hide the standard popup icon
buttonConfig.image = UIImage(systemName: &quot;chevron.down&quot;, withConfiguration: UIImage.SymbolConfiguration(scale: .small)) // Use the new icon
buttonConfig.imagePlacement = .trailing // Put the image after the title

huangapple
  • 本文由 发表于 2023年6月29日 01:47:43
  • 转载请务必保留本文链接:https://go.coder-hub.com/76575593.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定