1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【UIButton.Configuration】ボタンタイトルの自動ハイライトを抑制したい

Last updated at Posted at 2024-11-13

UIButton.Configuration 初心者の @zrn-ns です。

UIButton.Configuration.plain() ベースのボタンを作った際、以下のようなコードを書いたのですが、 勝手に白いハイライトが当たる状態になりました

import UIKit
import PlaygroundSupport

let button: UIButton = .init()
button.configuration = {
    var config: UIButton.Configuration = .plain()
    config.title = "hoge"
    config.baseForegroundColor = .darkGray
    return config
}()

PlaygroundPage.current.setLiveView(button)

output.gif

かなり見づらいですが、ハイライト色を設定していないにも関わらず、タップ時に白いハイライトが当たっています。

試行錯誤

configurationUpdateHandler を実装して、ボタンの状態が変わったときに色を変えたら良いよ!という記事もあったのですが、こちらも同様に、勝手にハイライトが当たってしまいます。

output.gif

答え

AttributedStringでタイトルを設定することでハイライトが無効化されます。

import UIKit
import PlaygroundSupport

let button: UIButton = .init()
button.configuration = {
    var config: UIButton.Configuration = .plain()
    config.attributedTitle = .init("hoge", attributes: .init([
        .foregroundColor: UIColor.darkGray
    ]))
    return config
}()

PlaygroundPage.current.setLiveView(button)

output.gif

もしハイライト色を任意の色に変更したい場合は、以下のように configurationUpdateHandlerattributedTitle の色を変えてあげれば良さそうです。

let button: UIButton = .init()
button.configuration = .plain()
button.configurationUpdateHandler = { button in
    let attributes: AttributeContainer = .init([
        .foregroundColor: button.isHighlighted ? UIColor.green : UIColor.blue
    ])
    button.configuration?.attributedTitle = .init("hoge", attributes: attributes)
}

output.gif

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?