swift - আমি কীভাবে বোতামটি সুইফটে একটি বৃত্তাকার সীমানা রাখতে পারি?




uibutton (9)

@ রিটার্নট্রু জবাবের ভিত্তিতে আমি এটিকে ইন্টারফেস বিল্ডারে প্রয়োগ করতে সক্ষম হয়েছি।

ইন্টারফেস বিল্ডার ব্যবহার করে বৃত্তাকার কোণার বোতামটি পেতে Identity Inspector " User Defined RunTime Attribute " User Defined RunTime Attribute Type = "Number" এবং Value = "10" (বা প্রয়োজনীয় অন্যান্য মান) সহ একটি মূল Path = "layer.cornerRadius" of বোতামটি.

আমি এক্সকোড 6 এর সর্বশেষতম সংস্করণে সুইফ্ট ব্যবহার করে একটি অ্যাপ তৈরি করছি এবং আমি কীভাবে আমার বোতামটি সংশোধন করতে পারি তা জানতে চাই যাতে এটির একটি বৃত্তাকার সীমানা থাকতে পারে যা প্রয়োজনে নিজেকে সামঞ্জস্য করতে পারি। একবার হয়ে গেলে, আমি কীভাবে নিজের পটভূমিতে কোনও পটভূমি যুক্ত না করে সীমান্তের রঙ পরিবর্তন করতে পারি? অন্য কথায় আমি ব্যাকগ্রাউন্ড ছাড়াই কিছুটা গোলাকৃতির বোতাম চাই, কেবল একটি নির্দিষ্ট রঙের 1pt সীমানা।


আপনার প্রয়োজন অনুসারে ইউআইবাটনটি কাস্টমাইজ করতে আপনি ইউআইবাটনের এই সাবক্লাসটি ব্যবহার করতে পারেন।

রেফারেন্সের জন্য এই গিথুব রেপোটি দেখুন

class RoundedRectButton: UIButton {

    var selectedState: Bool = false

    override func awakeFromNib() {
        super.awakeFromNib()
        layer.borderWidth = 2 / UIScreen.main.nativeScale
        layer.borderColor = UIColor.white.cgColor
        contentEdgeInsets = UIEdgeInsets(top: 0, left: 5, bottom: 0, right: 5)
    }


    override func layoutSubviews(){
        super.layoutSubviews()
        layer.cornerRadius = frame.height / 2
        backgroundColor = selectedState ? UIColor.white : UIColor.clear
        self.titleLabel?.textColor = selectedState ? UIColor.green : UIColor.white
    }

    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        selectedState = !selectedState
        self.layoutSubviews()
    }
}

আমি একটি সাধারণ UIButton সাবলকাস তৈরি করেছি যা এর পাঠ্য এবং সীমান্ত রঙগুলির জন্য এবং এটি হাইলাইট করা হলে এর ব্যাকগ্রাউন্ডটিকে tintColor পরিবর্তন করে tintColor

class BorderedButton: UIButton {

required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
    layer.borderWidth = 1.0
    layer.borderColor = tintColor.CGColor
    layer.cornerRadius = 5.0
    clipsToBounds = true
    contentEdgeInsets = UIEdgeInsets(top: 8, left: 8, bottom: 8, right: 8)
    setTitleColor(tintColor, forState: .Normal)
    setTitleColor(UIColor.whiteColor(), forState: .Highlighted)
    setBackgroundImage(UIImage(color: tintColor), forState: .Highlighted)
}
}

এটি একটি ইউআইআইমেজ এক্সটেনশন ব্যবহার করে যা একটি রঙ থেকে একটি চিত্র তৈরি করে, আমি এখানে কোডটি পেয়েছি: https://.com/a/33675160

ডিফল্ট সিস্টেম টাইপ বোতামটি হাইলাইট করা হলে রংগুলিকে কিছুটা সংশোধন করে ইন্টারফেস বিল্ডারে কাস্টম টাইপ করার সময় এটি সর্বোত্তম কাজ করে।


আমি মনে করি এটি সহজ ফর্ম

        Button1.layer.cornerRadius = 10(Half of the length and width)
        Button1.layer.borderWidth = 2

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

//
//  RoundedButton.swift
//

import UIKit

@IBDesignable
class RoundedButton:UIButton {

    @IBInspectable var borderWidth: CGFloat = 0 {
        didSet {
            layer.borderWidth = borderWidth
        }
    }
    //Normal state bg and border
    @IBInspectable var normalBorderColor: UIColor? {
        didSet {
            layer.borderColor = normalBorderColor?.CGColor
        }
    }

    @IBInspectable var normalBackgroundColor: UIColor? {
        didSet {
            setBgColorForState(normalBackgroundColor, forState: .Normal)
        }
    }


    //Highlighted state bg and border
    @IBInspectable var highlightedBorderColor: UIColor?

    @IBInspectable var highlightedBackgroundColor: UIColor? {
        didSet {
            setBgColorForState(highlightedBackgroundColor, forState: .Highlighted)
        }
    }


    private func setBgColorForState(color: UIColor?, forState: UIControlState){
        if color != nil {
            setBackgroundImage(UIImage.imageWithColor(color!), forState: forState)

        } else {
            setBackgroundImage(nil, forState: forState)
        }
    }

    override func layoutSubviews() {
        super.layoutSubviews()

        layer.cornerRadius = layer.frame.height / 2
        clipsToBounds = true

        if borderWidth > 0 {
            if state == .Normal && !CGColorEqualToColor(layer.borderColor, normalBorderColor?.CGColor) {
                layer.borderColor = normalBorderColor?.CGColor
            } else if state == .Highlighted && highlightedBorderColor != nil{
                layer.borderColor = highlightedBorderColor!.CGColor
            }
        }
    }

}

//Extension Required by RoundedButton to create UIImage from UIColor
extension UIImage {
    class func imageWithColor(color: UIColor) -> UIImage {
        let rect: CGRect = CGRectMake(0, 0, 1, 1)
        UIGraphicsBeginImageContextWithOptions(CGSizeMake(1, 1), false, 1.0)
        color.setFill()
        UIRectFill(rect)
        let image: UIImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return image
    }
}

পাশাপাশি সরু টিপসটি নিশ্চিত করুন যে আপনার বোতামটি স্টোরি বোর্ডের কোনও কাস্টম শ্রেণীর সাবক্লাস নয়, এমন ক্ষেত্রে আপনার কোডের সেরা স্থানটি কাস্টম শ্রেণিতে হওয়া উচিত এটি যদি আপনার বাটনটি ডিফল্টর সাবক্লাস থাকে তবে কেবলমাত্র কাস্টম শ্রেণীর বাইরে কাজ করা উচিত self ইউআইবাটন ক্লাস এবং এটির আউটলেট, আশা করি এটি কারও কাছ থেকে রেডিয়ো কোড থেকে আমার বোতামে প্রয়োগ করা হয় না কেন তা ভাবতে সহায়তা করতে পারে।


বৃত্তাকার কোণার সাথে এই বোতামের সীমানার চেষ্টা করুন

anyButton.backgroundColor = .clear

anyButton.layer.cornerRadius = anyButton.frame.height / 2

anyButton.layer.borderWidth = 1

anyButton.layer.borderColor = UIColor.black.cgColor

স্টোরিবোর্ডে এই কাজটি করতে (ইন্টারফেস বিল্ডার ইন্সপেক্টর)

IBDesignable , আমরা IBDesignable জন্য ইন্টারফেস বিল্ডার ইন্সপেক্টরকে আরও বিকল্প যুক্ত করতে এবং সেগুলি স্টোরিবোর্ডে সামঞ্জস্য করতে পারি। প্রথমে আপনার প্রকল্পে নিম্নলিখিত কোড যুক্ত করুন।

@IBDesignable extension UIButton {

    @IBInspectable var borderWidth: CGFloat {
        set {
            layer.borderWidth = newValue
        }
        get {
            return layer.borderWidth
        }
    }

    @IBInspectable var cornerRadius: CGFloat {
        set {
            layer.cornerRadius = newValue
        }
        get {
            return layer.cornerRadius
        }
    }

    @IBInspectable var borderColor: UIColor? {
        set {
            guard let uiColor = newValue else { return }
            layer.borderColor = uiColor.cgColor
        }
        get {
            guard let color = layer.borderColor else { return nil }
            return UIColor(cgColor: color)
        }
    }
}

তারপরে স্টোরিবোর্ডে বোতামগুলির জন্য বৈশিষ্ট্যগুলি কেবল সেট করুন।


@IBOutlet weak var button: UIButton!

...

আমি ব্যাসার্ধের জন্য এই পরামিতিটি যথেষ্ট মনে করি:

button.layer.cornerRadius = 5




uibutton