UISwitch का रंग "ऑफ" अवस्था में बदलें

Question

मैंने सीखा है कि हम UISwitch बटन की उपस्थिति को उसके "चालू" राज्य में बदल सकते हैं, लेकिन क्या "ऑफ" स्थिति में UISwitch का रंग बदलना संभव है?

Comments

क्या आपने रंग बदलने के लिए टिंटकलर प्रॉपर्टी का इस्तेमाल किया है?

— ऋषि

Answer 1

# स्विफ्ट 2 के साथ मेरा समाधान:

let onColor  = _your_on_state_color
let offColor = _your_off_state_color

let mSwitch = UISwitch(frame: CGRectZero)
mSwitch.on = true

/*For on state*/
mSwitch.onTintColor = onColor

/*For off state*/
mSwitch.tintColor = offColor
mSwitch.layer.cornerRadius = mSwitch.frame.height / 2
mSwitch.backgroundColor = offColor

परिणाम:

Comments

अरे, @ लोंगफैम, मैं सिर्फ त्रिज्या कोड पर थोड़ा बदलाव करूंगा। यदि मैं कभी भी ऊँचाई बदलता है तो मैं उपयोग करूँगा: mSwitch.layer.cornerRadius = mSwitch.frame.height / 2 (मैं सिर्फ पागल हूँ)।

— फेलिप

@ ग्रिड ग्रिंगो कोई समस्या नहीं है। अपने UI पर निर्भर करें। स्टैंडर्ड UISwitch31pt है।

— लॉन्ग फेम

Answer 2

यह प्रयोग करके देखें

yourSwitch.backgroundColor = [UIColor whiteColor];
youSwitch.layer.cornerRadius = 16.0;

सभी @Barry Wyckoff को धन्यवाद।

Comments

यह सही उत्तर है :) सेटटाइंट "आउटलाइन" रंग को बदल देता है और साथ ही जो सफेद पृष्ठभूमि पर "छिपता" है।

— लुकाज़ 'सेवेरियन' ग्रीला

ध्यान रखें कि पृष्ठभूमि आयताकार आकार में है।

— लुकाज़ 'सेवरियान' ग्रीला जूल

मेरा स्विच के साथ आकार बदल दिया गया है CGAffineTransformMakeScale(0.80, 0.80)। और यह स्केल किए गए दृश्य के साथ काम नहीं कर रहा है। क्योंकि दृश्य की परत का आकार परिवर्तन नहीं होता है। मै इसे काम मे कैसे ले सकता हूँ?

— aykutt

@aykutt स्केल किए गए दृश्य के लिए आप yourSwitch.layer.cornerRadius = yourSwitch.frame.height / 2 / scaleFactor का उपयोग कर सकते हैं

— Hans Terje Bakke

Answer 3

आप tintColorस्विच पर संपत्ति का उपयोग कर सकते हैं ।

switch.tintColor = [UIColor redColor]; // the "off" color
switch.onTintColor = [UIColor greenColor]; // the "on" color

ध्यान दें कि इसके लिए iOS 5+ की आवश्यकता है

Comments

IOS7 में टिंटकलर सेट करना मेरे लिए "आउटलाइन" को हटा देता है (सफेद पृष्ठभूमि के खिलाफ टिंट सफेद)।

— लुकाज़ 'सेवेरियन' ग्रीला जूल

Answer 4

स्विफ्ट IBDesignable

import UIKit
@IBDesignable

class UISwitchCustom: UISwitch {
    @IBInspectable var OffTint: UIColor? {
        didSet {
            self.tintColor = OffTint
            self.layer.cornerRadius = 16
            self.backgroundColor = OffTint
        }
    }
}

आइडेंटिटी इंस्पेक्टर में सेट क्लास

गुण निरीक्षक से रंग बदलें

उत्पादन

Comments

यह स्विफ्ट 3

— केतन पी

@KetanP आप मुद्दे को और अधिक विस्तार से बता सकते हैं?

— अफ़ज़ल अहमद

रनिंग Xcode 11.2.1, ऐप को चलाने के दौरान काम करता है, लेकिन यह आईबी में रंग नहीं दिखाता है .... वैसे भी, यह डिवाइस पर तैनात होने पर काम करता है।

— झुमझम

Answer 5

यहाँ एक बहुत अच्छी चाल है: आप सीधे यूआईस्विच के सबव्यू में पहुंच सकते हैं जो इसकी "ऑफ" पृष्ठभूमि खींचता है, और इसकी पृष्ठभूमि का रंग बदलता है। IOS 12 में यह iOS 13 में बेहतर काम करता है:

if #available(iOS 13.0, *) {
    self.sw.subviews[0].subviews[0].backgroundColor = .green
} else if #available(iOS 12.0, *) {
    self.sw.subviews[0].subviews[0].subviews[0].backgroundColor = .green
}

Answer 6

UISwitch की पृष्ठभूमि का रंग और आकार प्रबंधित करने का सबसे अच्छा तरीका है

अभी के लिए यह स्विफ्ट 2.3 कोड है

import Foundation
import UIKit

@IBDesignable
class UICustomSwitch : UISwitch {

    @IBInspectable var OnColor : UIColor! = UIColor.blueColor()
    @IBInspectable var OffColor : UIColor! = UIColor.grayColor()
    @IBInspectable var Scale : CGFloat! = 1.0

    override init(frame: CGRect) {
        super.init(frame: frame)
        self.setUpCustomUserInterface()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        self.setUpCustomUserInterface()
    }


    func setUpCustomUserInterface() {

        //clip the background color
        self.layer.cornerRadius = 16
        self.layer.masksToBounds = true

        //Scale down to make it smaller in look
        self.transform = CGAffineTransformMakeScale(self.Scale, self.Scale);

        //add target to get user interation to update user-interface accordingly
        self.addTarget(self, action: #selector(UICustomSwitch.updateUI), forControlEvents: UIControlEvents.ValueChanged)

        //set onTintColor : is necessary to make it colored
        self.onTintColor = self.OnColor

        //setup to initial state
        self.updateUI()
    }

    //to track programatic update
    override func setOn(on: Bool, animated: Bool) {
        super.setOn(on, animated: true)
        updateUI()
    }

    //Update user-interface according to on/off state
    func updateUI() {
        if self.on == true {
            self.backgroundColor = self.OnColor
        }
        else {
            self.backgroundColor = self.OffColor
        }
    }
}

Answer 7

स्विफ्ट 4+ में:

off राज्य:

switch.tintColor = UIColor.blue

on राज्य:

switch.onTintColor = UIColor.red

Comments

यह iOS 13+ पर काम नहीं करता है, सेटिंग tintColorका कोई प्रभाव नहीं है।

— एरिक

Answer 8

स्विफ्ट 5:

import UIKit

extension UISwitch {    

    func set(offTint color: UIColor ) {
        let minSide = min(bounds.size.height, bounds.size.width)
        layer.cornerRadius = minSide / 2
        backgroundColor = color
        tintColor = color
    }
}

Answer 9

3 चरणों में प्राप्त करने के लिए 4 सबसे आसान और तेज़ तरीका स्विफ्ट :

// background color is the color of the background of the switch
switchControl.backgroundColor = UIColor.white.withAlphaComponent(0.9)

// tint color is the color of the border when the switch is off, use
// clear if you want it the same as the background, or different otherwise
switchControl.tintColor = UIColor.clear

// and make sure that the background color will stay in border of the switch
switchControl.layer.cornerRadius = switchControl.bounds.height / 2

यदि आप मैन्युअल रूप से स्विच का आकार बदलते हैं (जैसे, ऑटोलेयूट का उपयोग करके), तो आपको switch.layer.cornerRadiusओवरराइड करके layoutSubviewsऔर कोने को अपडेट करने वाले सुपर रेडियस को कॉल करने के बाद भी अपडेट करना होगा:

override func layoutSubviews() {
    super.layoutSubviews()
    switchControl.layer.cornerRadius = switchControl.bounds.height / 2
}

Comments

एकीकरण क्या है? और यह भी, IOS 11 में काम करने लगते हैं नहीं करता है पृष्ठभूमि रंग स्विच के चारों ओर एक बड़ा देख दृश्य बदल जाता है बदल रहा है

— FlowUI। SimpleUITesting.com

@iOSCalendarViewOnMyProfile क्षमा करें, यह होना चाहिएswitchControl

— मिलान नोसै

@iCalendarViewOnMyProfile यह पृष्ठभूमि रंग बदलने के लिए माना जाता है, न कि बुलेट के रूप में .. आईओएस में देखो और महसूस करें कि यह हमेशा डिफ़ॉल्ट रंग है

— मिलान नोसै

Answer 10

क्या आपको अपने ऐप के आसपास अन्य स्विच की आवश्यकता है, यह भी एक अच्छा विचार हो सकता है @ कस्टम क्लास के अंदर @ LongPham के कोड को लागू करना। जैसा कि अन्य ने बताया है, "ऑफ" स्थिति के लिए आपको पृष्ठभूमि का रंग बदलने की आवश्यकता होगी, क्योंकि डिफ़ॉल्ट पारदर्शी है।

class MySwitch: UISwitch {

  required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)

    // Setting "on" state colour
    self.onTintColor        = UIColor.green

    // Setting "off" state colour
    self.tintColor          = UIColor.red
    self.layer.cornerRadius = self.frame.height / 2
    self.backgroundColor    = UIColor.red
  }
}

Answer 11

UISwitch offTintColorपारदर्शी है, इसलिए स्विच के पीछे जो भी है वह दिखाता है। इसलिए, पृष्ठभूमि के रंग को मास्क करने के बजाय, यह स्विच के पीछे एक स्विच-आकार की छवि खींचने के लिए पर्याप्त है (यह कार्यान्वयन मानता है कि स्विच ऑटोलॉययूट द्वारा स्थित है):

func putColor(_ color: UIColor, behindSwitch sw: UISwitch) {
    guard sw.superview != nil else {return}
    let onswitch = UISwitch()
    onswitch.isOn = true
    let r = UIGraphicsImageRenderer(bounds:sw.bounds)
    let im = r.image { ctx in
        onswitch.layer.render(in: ctx.cgContext)
        }.withRenderingMode(.alwaysTemplate)
    let iv = UIImageView(image:im)
    iv.tintColor = color
    sw.superview!.insertSubview(iv, belowSubview: sw)
    iv.translatesAutoresizingMaskIntoConstraints = false
    NSLayoutConstraint.activate([
        iv.topAnchor.constraint(equalTo: sw.topAnchor),
        iv.bottomAnchor.constraint(equalTo: sw.bottomAnchor),
        iv.leadingAnchor.constraint(equalTo: sw.leadingAnchor),
        iv.trailingAnchor.constraint(equalTo: sw.trailingAnchor),
    ])
}

[लेकिन अब मेरा दूसरा जवाब देखिए ।]

Answer 12

2020 तक Xcode 11.3.1 और स्विफ्ट 5

यहाँ पर सबसे सरल तरीका है जो मैंने UISwitch ऑफ-स्टेट कलर को कोड की एक लाइन के साथ सेट करने का पाया है । इस पृष्ठ को यहाँ लिखने के बाद से जब मैं देख रहा था तो सबसे पहले यही आया था और अन्य उत्तरों से मदद नहीं मिली।

यदि मैं ऑफ स्टेट को लाल रंग में सेट करना चाहता था, तो इसे व्यूडीडलड () फ़ंक्शन में जोड़ा जा सकता है:

yourSwitchName.subviews[0].subviews[0].backgroundColor = UIColor.red

नोट - यह वास्तव में क्या कर रहा है स्विच का पृष्ठभूमि रंग सेट कर रहा है। यह ऑन-स्टेट में भी स्विच के रंग को प्रभावित कर सकता है (हालांकि मेरे लिए यह समस्या नहीं थी क्योंकि मैं चाहता था कि ऑन और ऑफ स्टेट एक ही रंग हो)।

इसके लिए एक समाधान:

बस अपने IBAction के अंदर 'if' स्टेटमेंट के साथ रंगों में टाई करें। यदि स्विच बंद है, तो पृष्ठभूमि को लाल रंग दें। यदि स्विच चालू है, तो पृष्ठभूमि को साफ छोड़ दें ताकि आपका चुना गया 'रंग' ठीक से प्रदर्शित हो।

यह स्विच IBAction के अंदर जाता है ।

  if yourSwitch.isOn == false {
           yourSwitch.subviews[0].subviews[0].backgroundColor = UIColor.red
    } else {
        yourSwitch.subviews[0].subviews[0].backgroundColor = UIColor.clear
    }

मुझे कुछ व्यवहार मिला, जहां बैकग्राउंड से ऐप को फिर से शुरू करने पर, स्विच बैकग्राउंड स्पष्ट हो जाएगा। इस समस्या को हल करने के लिए, मैंने एप्लिकेशन को अग्रभूमि में हर बार रंग सेट करने के लिए निम्नलिखित कोड में जोड़ा:

 override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)

    NotificationCenter.default.addObserver(
      self,
      selector: #selector(applicationWillEnterForeground(_:)),
      name: UIApplication.willEnterForegroundNotification,
      object: nil)
}

@objc func applicationWillEnterForeground(_ notification: NSNotification) {
   yourSwitch.subviews[0].subviews[0].backgroundColor = UIColor.red
   yourSwitch.subviews[0].subviews[0].backgroundColor = UIColor.red
}

अन्य उत्तरों की तुलना में सरल लगता है। उम्मीद है की वो मदद करदे!

Comments

सुंदर और सरल उत्तर, बहुत बहुत धन्यवाद, +1

— mAc

Answer 13

जादुई 16pt मूल्यों के बिना स्विफ्ट 3 में अधिक सुरक्षित तरीका :

class ColoredBackgroundSwitch: UISwitch {

  var offTintColor: UIColor {
    get {
      return backgroundColor ?? UIColor.clear
    }
    set {
      backgroundColor = newValue
    }
  }

  override func layoutSubviews() {
    super.layoutSubviews()
    let minSide = min(frame.size.height, frame.size.width)
    layer.cornerRadius = ceil(minSide / 2)
  }

}

Answer 14

एक्सकोड 11, स्विफ्ट 5

मैं सब-व्यूज़ का उपयोग करना पसंद नहीं करता, क्योंकि आप कभी नहीं जानते कि सेब कब पदानुक्रम को बदलने वाला है।

इसलिए मैं इसके बजाय मास्क दृश्य का उपयोग करता हूं।

यह iOS 12, iOS 13 के साथ काम करता है

    private lazy var settingSwitch: UISwitch = {
        let swt: UISwitch = UISwitch()
        // set border color when isOn is false
        swt.tintColor = .cloudyBlueTwo
        // set border color when isOn is true
        swt.onTintColor = .greenishTeal

        // set background color when isOn is false
        swt.backgroundColor = .cloudyBlueTwo

        // create a mask view to clip background over the size you expected.
        let maskView = UIView(frame: swt.frame)
        maskView.backgroundColor = .red
        maskView.layer.cornerRadius = swt.frame.height / 2
        maskView.clipsToBounds = true
        swt.mask = maskView

        // set the scale to your expectation, here is around height: 34, width: 21.
        let scale: CGFloat = 2 / 3
        swt.transform = CGAffineTransform(scaleX: scale, y: scale)
        swt.addTarget(self, action: #selector(switchOnChange(_:)), for: .valueChanged)
        return swt
    }()

    @objc
    func switchOnChange(_ sender: UISwitch) {
        if sender.isOn {
            // set background color when isOn is true
            sender.backgroundColor = .greenishTeal
        } else {
            // set background color when isOn is false
            sender.backgroundColor = .cloudyBlueTwo
        }
    }

Answer 15

100% IOS 13.0 और स्विफ्ट 5.0 काम करते हुए दोनों राज्य रंग समान # ios13 #swift # स्विफ्ट 5 स्विच करते हैं

@IBOutlet weak var switchProfile: UISwitch!{
    didSet{
        switchProfile.onTintColor = .red
        switchProfile.tintColor = .red
        switchProfile.subviews[0].subviews[0].backgroundColor = .red
    }
}

Answer 16

एक्सकोड 11, स्विफ्ट 4.2

मैट के समाधान के साथ शुरू करके मैंने इसे एक कस्टम, IBDesignable नियंत्रण में जोड़ा। इसमें एक समयावधि मुद्दा didMoveToSuperview()है जिसे offTintColorसेट किए जाने से पहले कहा जाता है जिसे संभालने की आवश्यकता है।

@IBDesignable public class UISwitchCustom: UISwitch {

    var switchMask: UIImageView?
    private var observers = [NSKeyValueObservation]()

    @IBInspectable dynamic var offTintColor : UIColor! = UIColor.gray {
        didSet {
             switchMask?.tintColor = offTintColor
        }
    }

    override init(frame: CGRect) {
        super.init(frame: frame)
        initializeObservers()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        initializeObservers()
    }

    private func initializeObservers() {
        observers.append(observe(\.isHidden, options: [.initial]) {(model, change) in
            self.switchMask?.isHidden = self.isHidden
        })
    }

    override public func didMoveToSuperview() {
        addOffColorMask(offTintColor)
        super.didMoveToSuperview()
    }

   private func addOffColorMask(_ color: UIColor) {
        guard self.superview != nil else {return}
        let onswitch = UISwitch()
        onswitch.isOn = true
        let r = UIGraphicsImageRenderer(bounds:self.bounds)
        let im = r.image { ctx in
            onswitch.layer.render(in: ctx.cgContext)
            }.withRenderingMode(.alwaysTemplate)
        let iv = UIImageView(image:im)
        iv.tintColor = color
        self.superview!.insertSubview(iv, belowSubview: self)
        iv.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            iv.topAnchor.constraint(equalTo: self.topAnchor),
            iv.bottomAnchor.constraint(equalTo: self.bottomAnchor),
            iv.leadingAnchor.constraint(equalTo: self.leadingAnchor),
            iv.trailingAnchor.constraint(equalTo: self.trailingAnchor),
            ])
        switchMask = iv
        switchMask?.isHidden = self.isHidden
    }

}

Answer 17

कोड या स्टोरीबोर्ड का उपयोग करके परियोजना में किसी भी यूआईस्विच पर उपयोग करने के लिए उद्देश्य सी श्रेणी:

#import <UIKit/UIKit.h>

@interface UISwitch (SAHelper)
@property (nonatomic) IBInspectable UIColor *offTint;
@end

कार्यान्वयन

#import "UISwitch+SAHelper.h"

@implementation UISwitch (SAHelper)
@dynamic offTint;
- (void)setOffTint:(UIColor *)offTint {
    self.tintColor = offTint;   //comment this line to hide border in off state
    self.layer.cornerRadius = 16;
    self.backgroundColor = offTint;
}
@end

Answer 18

अंत में मैंने ट्रांसफॉर्मर और लेयर का उपयोग किया। लेकिन मैंने इसे केंद्र में रखने के लिए अनुवाद जोड़ा है।

    private func setSwitchSize() {
    let iosSwitchSize = switchBlockAction.bounds.size
    let requiredSwitchSize = ...
    let transform = CGAffineTransform(a: requiredSwitchSize.width / iosSwitchSize.width, b: 0,
                                      c: 0, d:  requiredSwitchSize.height / iosSwitchSize.height,
                                      tx: (requiredSwitchSize.width - iosSwitchSize.width) / 2.0,
                                      ty: (requiredSwitchSize.height - iosSwitchSize.height) / 2.0)

    switchBlockAction.layer.cornerRadius = iosSwitchSize.height / 2.0
    switchBlockAction.transform = transform
}

और मैंने डिज़ाइनर में बैकग्राउंड कलर और टिंटकलर का इस्तेमाल किया। आशा करता हूँ की ये काम करेगा।