skip to Main Content

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("(action.title)")
            }

            return action
        }

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

Here is the display of my buttonenter image description here

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

2

Answers


  1. 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

    Login or Signup to reply.
  2. 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: "chevron.down", withConfiguration: UIImage.SymbolConfiguration(scale: .small)) // Use the new icon
    buttonConfig.imagePlacement = .trailing // Put the image after the title
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search