2

UIButtonを、
非選択時:背景…白 文字色…赤or青 画像:色付き画像
選択時:背景…赤or青 文字色…白 画像:白色画像
に変更したいのですが、buttonをisSelected = true にしても文字色・画像が変更されません。

class GraphViewController: UIViewController {

@IBOutlet weak var monthlyButton: UIButton!
@IBOutlet weak var itemizedButton: UIButton!
var buttonArray: [UIButton]!

override func viewDidLoad() {
    super.viewDidLoad()

    monthlyButton.isSelected = true        
    buttonArray = [monthlyButton,itemizedButton]

    layoutSetting()
}

func layoutSetting(){
    for button in buttonArray{
        button.cornerLayout(.circle)
        button.shadowSetting()
        button.setTitleColor(UIColor.white, for: .selected)
    }
    monthlyButton.setImage(UIImage(named: "PieChart(White)"), for: .selected)
    monthlyButton.borderMake(type: .normal, color: UIColor(hexString: "EA6149")!)
    itemizedButton.setImage(UIImage(named: "LineChart(White)"), for: .selected)
    itemizedButton.borderMake(type: .normal, color: UIColor(hexString: "0096FF")!)
}

func selectButtonChange(sender:UIButton){
    for button in buttonArray{
        if sender == button{
            button.isEnabled = false
            button.alpha = 1.0
            button.buttonTap()
            if button == monthlyButton{
                button.backgroundColor = UIColor(hexString: "EA6149")!
            }else{
                button.backgroundColor = UIColor(hexString: "0096FF")!
            }
        }else{
            button.isSelected = false
            button.isEnabled = true
            button.alpha = 0.3
            button.buttonRelease()
            button.backgroundColor = UIColor.white
        }
    }
}

@IBAction func showComponent(sender: UIButton) {
    sender.isSelected = true
    selectButtonChange(sender: sender)
    print(sender.isSelected)
    print(sender.titleColor(for: .normal)!)
    print(sender.titleColor(for: .selected)!)
}

printの中身は上からそれぞれ
true
UIExtendedSRGBColorSpace 0 0.589801 1 1
UIExtendedGrayColorSpace 1 1
となっています。
改善方法を教えてください。よろしくお願いいたします。

<補足>

extension UIView{
func shadowSetting(){
    let screenHeight = UIScreen.main.bounds.height
    var shadowSize = screenHeight / 100
    if UIDevice.current.userInterfaceIdiom == .phone{
        shadowSize = screenHeight / 75
    }

    self.layer.shadowOpacity = 0.5
    self.layer.shadowOffset = CGSize(width: shadowSize, height: shadowSize)
}

enum cornerType{
    case collectionView
    case verySmall
    case small
    case normal
    case circle
}

func cornerLayout(_ type:cornerType){
    let rate = self.frame.height / self.frame.width
    var side: CGFloat!
    if rate == 1{
        if UIDevice.current.userInterfaceIdiom == .pad{
            side = self.frame.width
        }else{
            side = self.frame.height
        }
    }else if rate > 1{
        side = self.frame.width
    }else{
        side = self.frame.height
    }
    switch type {
    case .collectionView:
        self.layer.cornerRadius = side / 16.0
    case .verySmall:
        self.layer.cornerRadius = side / 8.0
    case .small:
        self.layer.cornerRadius = side / 6.0
    case .normal:
        self.layer.cornerRadius = side / 4.0
    case .circle:
        self.layer.cornerRadius = side / 2.0
    }
}

enum borderSize{
    case veryThin
    case thin
    case normal
    case thick
    case veryThick
}

func borderMake(type:borderSize , color:UIColor){
    switch type {
    case .veryThin:self.layer.borderWidth = self.frame.height / 60
    case .thin:self.layer.borderWidth = self.frame.height / 50
    case .normal:self.layer.borderWidth = self.frame.height / 40
    case .thick:self.layer.borderWidth = self.frame.height / 30
    case .veryThick:self.layer.borderWidth = self.frame.height / 20
    }
    self.layer.borderColor = color.cgColor
}
}
extension UIButton{    
@objc func buttonTap() {
    let shadowSize = UIScreen.main.bounds.height / 100
    if self.layer.shadowOffset.width >= shadowSize{
        self.frame.origin.x += shadowSize / 2
        self.frame.origin.y += shadowSize / 2
        self.layer.shadowOffset = CGSize(width:
            shadowSize / 4, height: shadowSize / 4)
    }
}

@objc func buttonRelease() {
    let shadowSize = self.layer.shadowOffset.height
    if shadowSize < UIScreen.main.bounds.height / 100{
        self.frame.origin.x -= shadowSize * 2
        self.frame.origin.y -= shadowSize * 2
        self.layer.shadowOffset = CGSize(width: shadowSize * 4, height: shadowSize * 4)
    }
}
}
4
  • 残念ながらあなたのコードはiOSには含まれないメソッドを多用しているので、どこを改善すれば良いのか確実なことが言えません。使用しているextension等の中身を全部示していただけますでしょうか。
    – OOPer
    Commented 2018年10月26日 10:51
  • ご指摘ありがとうございます。extensionの中身を追加しました。ついでにextension部分をコメントアウトしてビルドしてみたのですが状況は変わらなかったです。
    – yuu
    Commented 2018年10月27日 8:06
  • コードの修正ありがとうございます。UIColorのextensionは自明だろうということでこちらで補って挙動を確認できました。ビルド可能なコードを示していただくことで、「実際の挙動が確認できる」他、「示されたコードの中に明らかにまずい点がないか確認できる」という大きなメリットがあります。また「extension部分をコメントアウトしてビルドしてみたのですが状況は変わらなかった」というような場合、「事象が再現できる最小限のビルド可能なコード」をお示しいただくと、より早く本質に近づける場合が多いです。今後もご質問を書く機会がありましたら、参考にしていただけると幸いです。
    – OOPer
    Commented 2018年10月27日 13:15
  • アドバイスありがとうございます。extensionの部分など必要のない部分は削除した上で載せるよう、以後気をつけます。
    – yuu
    Commented 2018年10月27日 14:51

1 件の回答 1

0

さて、この辺については私も仕様を誤解していて、挙動を確かめつつあれこれコードをいじってみながら、最初は何が起こっているか理解できなかったのですが、ポイントはこの部分ですね。

    sender.isSelected = true

            button.isEnabled = false

            button.isSelected = false
            button.isEnabled = true

(なぜ、sender.isSelected = trueだけ離れた場所にあるのでしょう…。)

あなたは、「buttonをisSelected = true にして」それと同時にisEnabled = falseにするという処理も行なっています。

UIControl.Stateには、normal, highlighted, selectedなんかの他にdisabledと言う値が定義されているのはご存知でしょうか。

disabledと言うのは要は、enabledじゃない、つまりisEnabled = falseの状態を表しています。ここからがわかりにくい(と言うか私が誤解していた)ところなのですが、少なくともUIButtonは以下の4つの状態を別々に管理しているようです。
(.highlightedなど他の状態は無視。)

  • 通常(非選択かつ有効) (isSelected == false && isEnabled == true)
    .normal

  • 選択かつ有効 (isSelected == true && isEnabled == true)
    .selected

  • 非選択かつ無効 (isSelected == false && isEnabled == false)
    .disabled

  • 選択かつ無効 (isSelected == true && isEnabled == false)
    [.selected, .disabled]


と言うわけで、あなたはボタンの状態を「選択かつ無効」と「通常」の間で切り替えているので、状態別の属性もそれに応じて設定してやらないといけません。for: .selectedと指定している部分を全てfor: [.selected, .disabled]に変更してみて下さい。

button.setTitleColor(.white, for: [.selected, .disabled])

(他の箇所も同様。)

画像やその他の設定がわからないので、あなたの所望の表示・動作になるかどうかまでは保証できませんが、少なくとも「文字色・画像が変更されません」と言う状態は解消されるはずです。

1
  • 上記のように[.selected, .disabled]に変更することで思った通りに動作が起きました。 .isEnabledもbuttonのstateを変化させるプロパティであるということがわかっておらず、上記のミスに至ったようです。理由も含めたわかりやすい御回答ありがとうございました。
    – yuu
    Commented 2018年10月27日 14:48

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。