"অফ" অবস্থায় ইউআইএসইচির রঙ পরিবর্তন করুন


102

আমি শিখেছি যে আমরা ইউআইএসউইচ বোতামের চেহারাটি তার "চালু" অবস্থায় পরিবর্তন করতে পারি, তবে "অফ" অবস্থায় ইউআইএসভিচের রঙ পরিবর্তন করাও কি সম্ভব?


আপনি রঙ পরিবর্তন করতে টিন্টকালার সম্পত্তি ব্যবহার করেছেন?
ishষি

উত্তর:


138

# সমাধান # এর সাথে আমার সমাধান:

let onColor  = _your_on_state_color
let offColor = _your_off_state_color

let mSwitch = UISwitch(frame: CGRect.zero)
mSwitch.on = true

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

/*For off state*/
mSwitch.tintColor = offColor
mSwitch.layer.cornerRadius = mSwitch.frame.height / 2.0
mSwitch.backgroundColor = offColor
mSwitch.clipsToBounds = true

ফলাফল:

এখানে চিত্র বর্ণনা লিখুন


6
আরে, @ লংফাম, আমি ব্যাসার্ধের কোডটিতে কিছুটা পরিবর্তন করব। উচ্চতা যদি কখনও পরিবর্তিত হয় তবে আমি ব্যবহার করব: mSwitch.layer.cornerRadius = mSwitch.frame.height / 2 (আমি কেবল প্যারানয়েড)।
ফিলিপ

@ ফিলিপ গ্রিংগো কোনও সমস্যা নেই আপনার ইউআই উপর নির্ভর করে। স্ট্যান্ডার্ড UISwitch31pt হয়।
দীর্ঘ ফ্যাম

133

এটি ব্যবহার করার চেষ্টা করুন

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

@ ব্যারি উইকফফকে সমস্ত ধন্যবাদ।


4
এটি সঠিক উত্তর :) সেটটিন্ট "আউটলাইন" রঙকেও বদলে দেয় যা সাদা পটভূমিতে দৃশ্যত পটভূমিটি "আড়াল করে"।
লুকাসজ 'সেভেরিয়ান' গ্রিলা

4
ব্যাকগ্রাউন্ডটি আয়তক্ষেত্রাকার আকারে রয়েছে সে বিষয়ে সচেতন হন।
লুকাসজ 'সেভেরিয়ান' গ্রিলা

আমার সুইচ সঙ্গে আয়তন পরিবর্তিত CGAffineTransformMakeScale(0.80, 0.80)। এবং এটি স্কেলড ভিউয়ের সাথে কাজ করছে না। কারণ দেখার স্তরটি পুনরায় আকার দেওয়া হয়নি। আমি এই কাজটি কীভাবে করব?
aykutt

4
স্কেল করা দেখার জন্য @aykutt আপনি yourSwitch.layer.cornerRadius = yourSwitch.frame.height / 2 / scaleFactor ব্যবহার করতে পারেন
হান্স Terje Bakke

39

আপনি tintColorস্যুইচটিতে সম্পত্তি ব্যবহার করতে পারেন ।

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

নোট করুন এটির জন্য আইওএস 5+ প্রয়োজন


4
IOS7 এ টিন্টকালার সেট করা আমার জন্য "আউটলাইন" সরিয়ে দেয় (সাদা ব্যাকগ্রাউন্ডের তুলনায় সাদা রঙ) int
লুকাসজ 'সেভেরিয়ান' গ্রিলা

29

সুইফট আইবি ডিজাইনেবল

import UIKit
@IBDesignable

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

পরিচয় পরিদর্শক মধ্যে শ্রেণি সেট

এখানে চিত্র বর্ণনা লিখুন

বৈশিষ্ট্য পরিদর্শকের কাছ থেকে রঙ পরিবর্তন করুন

এখানে চিত্র বর্ণনা লিখুন

আউটপুট

এখানে চিত্র বর্ণনা লিখুন


এটি সুইফট 3
কেতন পি

@ কেটানপি আপনি আরও বিস্তারিতভাবে বিষয়টি ব্যাখ্যা করতে পারেন?
আফজাল আহমদ

এক্সকোড ১১.২.১ চালানো, অ্যাপটি চালানোর সময় কাজ করে, তবে এটি আইবিতে রঙটি দেখায় না .... যাইহোক, ডিভাইসে স্থাপনের সময় এটি কাজ করে।
জুমজুম

13

এখানে বেশ ভাল কৌশল: আপনি কেবলমাত্র ইউআইএসভিচের সমীক্ষায় পৌঁছাতে পারেন যা এটির "অফ" পটভূমি আঁকতে পারে এবং এর পটভূমির রঙ পরিবর্তন করতে পারে। এটি আইওএস 12 এর চেয়ে আইওএস 13-তে অনেক বেশি ভাল কাজ করে:

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

ভবিষ্যতে আইওএসে সাবস্ক্রিপশন চলাকালীন সম্ভবত সাবউভিউস.ফার্স্ট ব্যবহার করা আরও ভাল নয়? সাবভিউয়ের পরিবর্তে [0]।
ইগোর পালাগুটা

হ্যাঁ, ভাল ধারণা আমি যে পরিবর্তন করব।
ম্যাট

7

ইউআইএসউইচের পটভূমির রঙ এবং আকার পরিচালনা করার সেরা উপায়

আপাতত এটি সুইফট ২.৩ কোড

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
        }
    }
}

5

সুইফ্ট 4+ এ:

off অবস্থা:

switch.tintColor = UIColor.blue

on অবস্থা:

switch.onTintColor = UIColor.red

4
এটি আইওএস 13+ এ কাজ করে না, সেটিংয়ের tintColorকোনও প্রভাব নেই।
এরিক

5

সুইফট 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
    }
}

5

আপনার অ্যাপ্লিকেশনটির চারপাশে যদি অন্য স্যুইচগুলির দরকার হয় তবে এটি কাস্টম ক্লাসের মধ্যে @ লংপ্যামের কোডটি প্রয়োগ করা ভাল ধারণা হতে পারে। অন্যরা যেমন উল্লেখ করেছে, "অফ" অবস্থার জন্য আপনাকে পটভূমির রঙও পরিবর্তন করতে হবে, কারণ ডিফল্টটি স্বচ্ছ।

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
  }
}

4

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
}

ইন্টিগ্রেশনসুইচ কি? এবং এছাড়াও আইওএস 11. কাজ বলে মনে হচ্ছে স্বল্পতা পটভূমির রঙ সুইচ কাছাকাছি একটি বৃহত্তর খুঁজছেন দৃশ্যের পরিবর্তন ঘটায় পরিবর্তন
FlowUI। সিম্পলআইটিস্টিং ডটকম

@ আইওএসক্যালেন্ডারভিউ ওয়ান মাইপ্রোফাইল দুঃখিত, এটি হওয়া উচিতswitchControl
মিলান নস

4
@ আইওএসক্যালেন্ডারভিউ ওয়ান মাইপ্রোফাইলে এটি ব্যাকগ্রাউন্ডের রঙ বদলে দেওয়ার কথা, বুলেট নিজেই নয় .. আইওএস-এ চেহারা এবং মনে হয় যে এটি সর্বদা পূর্বনির্ধারিত রঙ ..
মিলান নোস

3

ইউআইএসউইচ 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),
    ])
}

[তবে এখন আমার অন্য উত্তর দেখুন ।]


2

2020 এক্সকোড 11.3.1 এবং সুইফট 5 হিসাবে

কোডের এক লাইনের সাথে ইউআইএসউইচ অফ-স্টেট রঙ নির্ধারণ করার সহজ উপায়টি এখানে । এই পৃষ্ঠাগুলি এখানে লেখার পরে যখন আমি সন্ধান করছিলাম তখন অন্য উত্তরগুলি কার্যকর হয়নি।

আমি যদি অফটি রাষ্ট্রটি লাল হতে সেট করতে চেয়েছিলাম এবং ভিডডিডলড () ফাংশনে যুক্ত হতে পারি তবে এটি হ'ল:

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

দ্রষ্টব্য - এটি আসলে যা করছে তা হ'ল স্যুইচটির পটভূমি রঙ সেট করা। এটি অন-স্টেটেও স্যুইচটির রঙকে প্রভাবিত করতে পারে (যদিও আমার জন্য এটি কোনও সমস্যা ছিল না যেহেতু আমি অন এবং অফ স্টেট একই রঙ হতে চেয়েছিলাম)।

এর সমাধান:

আপনার আইবিএક્શનের অভ্যন্তরে 'যদি অন্যথায়' বিবৃতি দিয়ে রংগুলিতে কেবল টাই করুন। যদি স্যুইচটি বন্ধ থাকে, ব্যাকগ্রাউন্ডটি লাল রঙ করুন। যদি স্যুইচটি চালু থাকে, ব্যাকগ্রাউন্ডটি পরিষ্কার করুন যাতে আপনার নির্বাচিত 'অন' রঙটি সঠিকভাবে প্রদর্শিত হবে।

এটি সুইচ আইবিএક્શનের ভিতরে যায় ।

  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
}

অন্যান্য উত্তরগুলির চেয়ে সহজ বলে মনে হচ্ছে। আশা করি এইটি কাজ করবে!


সুন্দর এবং সহজ উত্তর, আপনাকে অনেক ধন্যবাদ, +1
এমএসি

1

চৌম্বকীয় 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)
  }

}

1

এক্সকোড 11, সুইফট 5

আমি সাবভিউগুলি ব্যবহার পছন্দ করি না, কারণ আপেল কখন হায়ারার্কি পরিবর্তন করবে তা আপনি কখনই জানেন না।

সুতরাং আমি পরিবর্তে মাস্ক ভিউ ব্যবহার করি।

এটি আইওএস 12, আইওএস 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
        }
    }


1

এখানে চিত্র বর্ণনা লিখুন
এখানে চিত্র বর্ণনা লিখুন
100% আইওএস 13.0 এবং সুইফ্ট 5.0 কাজ করছে উভয় রাজ্যের রঙ সেট করুন # আইওএস 13 # সুইফট # সুইফট 5

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

0

এক্সকোড 11, সুইফট 4.2

ম্যাট এর সমাধান দিয়ে শুরু করে আমি এটি একটি কাস্টম, আইবি ডিজাইনযোগ্য নিয়ন্ত্রণে যুক্ত করেছি। এটিতে একটি টাইমিং ইস্যু রয়েছে যা সেট করার 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
    }

}

0

কোড বা স্টোরিবোর্ড ব্যবহার করে প্রকল্পের যে কোনও ইউআইএসইচিতে ব্যবহার করার জন্য উদ্দেশ্য সি বিভাগ:

#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

0

সবশেষে আমি ট্রান্সফর্ম এবং লেয়ার.কোনাররেডিয়াসও ব্যবহার করেছি। তবে আমি এটিতে কেন্দ্রে অনুবাদ অনুবাদ যুক্ত করেছি।

    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
}

এবং আমি ডিজাইনারে ব্যাকগ্রাউন্ড কালার এবং টিন্টকলার ব্যবহার করেছি। আশা করি এটা সাহায্য করবে.

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.