ইউআইবাটনে সীমানা কীভাবে তৈরি করবেন?

Question

আমি "অ্যাডবটন" নামে আমার অ্যাপ্লিকেশনটিতে কাস্টম বোতামটি ব্যবহার করি এবং আমি এটি সাদা রঙের সাথে বর্ডার করতে চাই কীভাবে আমি আমার কাস্টম বোতামের চারপাশে সাদা রঙের সীমানা পেতে পারি?

Comments

বোতামগুলিতে সীমানা এবং ছায়া যুক্ত করার

— অঙ্কুর

Answer 1

আপনি বোতামের স্তর সম্পত্তি অ্যাক্সেস করে সীমানা বৈশিষ্ট্যগুলি কালায়ারে সেট করতে পারেন।

প্রথমে কোয়ার্টজ যুক্ত করুন

#import <QuartzCore/QuartzCore.h>

বৈশিষ্ট্য সেট করুন:

myButton.layer.borderWidth = 2.0f;
myButton.layer.borderColor = [UIColor greenColor].CGColor;

দেখা:

https://developer.apple.com/documentation/quartzcore/calayer#//apple_ref/occ/cl/CALayer

উপরের লিঙ্কটিতে থাকা ক্যালায়ার আপনাকে অন্যান্য বৈশিষ্ট্য যেমন কর্নার ব্যাসার্ধ, মাস্কটোবাউন্ডস ইত্যাদি সেট করতে দেয় ...

এছাড়াও, বোতাম মজাদার একটি ভাল নিবন্ধ:

https://web.archive.org/web/20161221132308/http://www.apptite.be/tutorial_custom_uibuttons.php

Comments

লক্ষ্য সম্পাদকের বিল্ড ফেজস ট্যাবটির কোয়ার্টকোর কাঠামোর সাথে আপনি আপনার লক্ষ্যটিকে যুক্ত করেছেন তা নিশ্চিত করুন।

— জেকেল

আমার কি কোয়ার্টজ আমদানি করা দরকার? আমি এটি ছাড়াই এখনও বোতামের স্তরটি অ্যাক্সেস করতে পারি। আমার জিজ্ঞাসা করার উদ্দেশ্যটি হ'ল: কোয়ার্টজ আমদানি করার পরে আমরা কী সুবিধা পাচ্ছি

— অ্যালিক্স

প্লাস 1 ব্যবহারের জন্যCGColor

— অনুরাগ শর্মা

Answer 2

এটি খুব সহজ, আপনার ফাইলটিতে কোয়ার্টজকোর শিরোনাম যুক্ত করুন (তার জন্য আপনাকে আপনার প্রকল্পে কোয়ার্টজ ফ্রেমওয়ার্ক যুক্ত করতে হবে)

এবং তারপরে এটি করুন

[[button layer] setCornerRadius:8.0f];

[[button layer] setMasksToBounds:YES];

[[button layer] setBorderWidth:1.0f];

আপনি প্রয়োজন হিসাবে ভাসমান মান পরিবর্তন করতে পারেন।

ভোগ করেন।

---

এখানে কিছু সাধারণ আধুনিক কোড ...

self.buttonTag.layer.borderWidth = 1.0f;
self.buttonCancel.layer.borderWidth = 1.0f;

self.buttonTag.layer.borderColor = [UIColor blueColor].CGColor;
self.buttonCancel.layer.borderColor = [UIColor blueColor].CGColor;

self.buttonTag.layer.cornerRadius = 4.0f;
self.buttonCancel.layer.cornerRadius = 4.0f;

এটি সেগমেন্টেড কন্ট্রোলগুলির অনুরূপ চেহারা।

সুইফটের জন্য আপডেট:

• "কোয়ার্টজকোর" যুক্ত করার দরকার নেই

শুধু কর:

button.layer.cornerRadius = 8.0
button.layer.borderWidth = 1.0
button.layer.borderColor = UIColor.black.cgColor

Answer 3

এবং দ্রুতগতিতে, আপনার "কোয়ার্টজকোর / কোয়ার্টজকোর.এইচ" আমদানি করার দরকার নেই

শুধু ব্যবহার করুন:

button.layer.borderWidth = 0.8
button.layer.borderColor = (UIColor( red: 0.5, green: 0.5, blue:0, alpha: 1.0 )).cgColor

অথবা

button.layer.borderWidth = 0.8
button.layer.borderColor = UIColor.grayColor().cgColor

Comments

এক্সকোড 9 অনুসারে, "সিজি রঙের নাম বদলে নামকরণ করা হয়েছে সিজি কলর"।

— ব্লেন্ডারবেন্ডার

Answer 4

স্তরের সেটিংসটি সমস্যা borderWidthএবং borderColorতা হ'ল আপনি যখন বোতামটি স্পর্শ করবেন তখন হাইলাইট প্রভাবটি অ্যানিমেট করে না।

অবশ্যই, আপনি বোতামের ইভেন্টগুলি পর্যবেক্ষণ করতে পারেন এবং সেই অনুযায়ী সীমানার রঙ পরিবর্তন করতে পারেন তবে এটি অপ্রয়োজনীয় বোধ করে।

অন্য বিকল্পটি হ'ল একটি প্রসারিত UII छवि তৈরি করা এবং এটিকে বোতামের পটভূমির চিত্র হিসাবে সেট করা। আপনি নিজের ইমেজ.এক্সক্যাসেটগুলিতে একটি চিত্র সেট তৈরি করতে পারেন:

তারপরে, আপনি এটিকে বোতামটির ব্যাকগ্রাউন্ড চিত্র হিসাবে সেট করেছেন:

আপনার চিত্রটি যদি কোনও টেম্পলেট চিত্র হয় তবে আপনি বোতামের রঙিন রঙ সেট করতে পারেন এবং সীমান্তটি পরিবর্তন হবে:

স্পর্শ করার সময় সীমানাটি বোতামের বাকি অংশগুলি হাইলাইট করবে।

Comments

আপনি চিত্রটি কী তৈরি করেন?

— বিগফুট 11

সেই চিত্রটি তৈরি করতে আমি স্কেচ ব্যবহার করেছি, তবে আপনি গিম্প, ইলাস্ট্রেটর, ফটোশপ ব্যবহার করতে পারেন ...

— juanjo

চমৎকার উত্তর. চেঞ্জ লেয়ারের চেয়ে এটি ভাল borderWidth।

— আলেকজান্ডার দোলোজ

Answer 5

বোতাম ব্যাসার্ধ পরিবর্তন করতে, রঙ এবং প্রস্থটি আমি এর মতো সেট করেছি:

self.myBtn.layer.cornerRadius = 10;
self.myBtn.layer.borderWidth = 1;
self.myBtn.layer.borderColor =[UIColor colorWithRed:189.0/255.0f green:189.0/255.0f blue:189.0/255.0f alpha:1.0].CGColor;

Answer 6

বেন প্যাকার্ডের উত্তর থেকে এখানে একটি আপডেট সংস্করণ ( সুইফট 3.0.1 ) রয়েছে ।

import UIKit

@IBDesignable class BorderedButton: UIButton {

    @IBInspectable var borderColor: UIColor? {
        didSet {
            if let bColor = borderColor {
                self.layer.borderColor = bColor.cgColor
            }
        }
    }

    @IBInspectable var borderWidth: CGFloat = 0 {
        didSet {
            self.layer.borderWidth = borderWidth
        }
    }

    override var isHighlighted: Bool {
        didSet {
            guard let currentBorderColor = borderColor else {
                return
            }

            let fadedColor = currentBorderColor.withAlphaComponent(0.2).cgColor

            if isHighlighted {
                layer.borderColor = fadedColor
            } else {

                self.layer.borderColor = currentBorderColor.cgColor

                let animation = CABasicAnimation(keyPath: "borderColor")
                animation.fromValue = fadedColor
                animation.toValue = currentBorderColor.cgColor
                animation.duration = 0.4
                self.layer.add(animation, forKey: "")
            }
        }
    }
}

ফলে বাটন আপনার স্টোরিবোর্ড ধন্যবাদ ভিতরে ব্যবহার করা যেতে পারে @IBDesignableএবং @IBInspectableট্যাগ।

এছাড়াও সংজ্ঞাযুক্ত দুটি বৈশিষ্ট্য, আপনাকে সরাসরি ইন্টারফেস নির্মাতায় সীমানা প্রস্থ এবং রঙ সেট করার অনুমতি দেয় এবং ফলাফলটির প্রাকদর্শন করে।

সীমানা ব্যাসার্ধ এবং হাইলাইট বিবর্ণ সময়ের জন্য অন্যান্য বৈশিষ্ট্যগুলি অনুরূপ ফ্যাশনে যুক্ত করা যেতে পারে।

Comments

আমি সুইফট 4-এর উপর প্রতিবন্ধকতা নিয়ে সমস্যা করেছি, আমি পূর্ণ আকারের বোতামটি করেছি (প্রস্থের পাশাপাশি), এক্সকোডে আমি সীমান্তের পূর্বরূপটি খুব ভালভাবে দেখেছি, তবে এমুলেটর বা ডিভাইসটির উপর দিয়ে আমি সীমানাকে আকারের আকার হ্রাস করতে দেখেছি saw বোতামের অভ্যন্তরের পাঠ্য, আমি যুক্ত হওয়া একমাত্র অটলআউট সীমাবদ্ধতাটি অনুভূমিকভাবে কেন্দ্রিক ছিল, কীভাবে এটি ঠিক করবেন? ধন্যবাদ!

— ক্রিশ্চিয়ান চ্যাপারো এ।

@CristianChaparroA। কারণটি হ'ল কেবল prepareForInterfaceBuilderঅ্যাপটি কল করা হবে, আপনি অ্যাপটি চালানোর সময় নয়। এছাড়াও ইউআইএডজেইনেসেটস সেট করে রাখুন awakeFromNib, তারপরে অ্যাপটি চলাকালীন তাও প্রদর্শিত হবে।

— সামিউল

Answer 7

আপনার QuartzCore.hএখন আমদানি করার দরকার নেই । রেফারেন্সে আইওএস 8 এসডিকে এবং এক্সকোড 6.1 নিচ্ছেন।

সরাসরি ব্যবহার করুন:

[[myButton layer] setBorderWidth:2.0f];
[[myButton layer] setBorderColor:[UIColor greenColor].CGColor];

Answer 8

এখানে একটি UIButtonসাবক্লাস রয়েছে যা চিত্র ব্যবহার না করে হাইলাইট স্টেট অ্যানিমেশনকে সমর্থন করে। যখন ভিউটির রঙিন মোড পরিবর্তন হয় তখন এটি সীমানার রঙও আপডেট করে।

class BorderedButton: UIButton {
    override init(frame: CGRect) {
        super.init(frame: frame)

        layer.borderColor = tintColor.CGColor
        layer.borderWidth = 1
        layer.cornerRadius = 5

        contentEdgeInsets = UIEdgeInsets(top: 5, left: 10, bottom: 5, right: 10)
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("NSCoding not supported")
    }

    override func tintColorDidChange() {
        super.tintColorDidChange()

        layer.borderColor = tintColor.CGColor
    }

    override var highlighted: Bool {
        didSet {
            let fadedColor = tintColor.colorWithAlphaComponent(0.2).CGColor

            if highlighted {
                layer.borderColor = fadedColor
            } else {
                layer.borderColor = tintColor.CGColor

                let animation = CABasicAnimation(keyPath: "borderColor")
                animation.fromValue = fadedColor
                animation.toValue = tintColor.CGColor
                animation.duration = 0.4
                layer.addAnimation(animation, forKey: "")
            }
        }
    }
}

ব্যবহার:

let button = BorderedButton(style: .System) //style .System is important

চেহারা:

Answer 9

এটি সুইফট 3.0 ওয়ার্কযুক্ত সর্বশেষ সংস্করণ আগস্ট - 2017 এ বিভিন্ন পদ্ধতিতে অর্জন করা যেতে পারে

বিকল্প 1:

সরাসরি ইউআই বোতামের জন্য সীমানা প্রস্থের সম্পত্তি মানগুলি নির্ধারণ করুন:

  btnUserButtonName.layer.borderWidth = 1.0

ইউআই বোতামের জন্য ডিফল্ট রঙ মান সহ শিরোনাম সেট করুন:

btnUserButtonName.setTitleColor(UIColor.darkGray, for: .normal)

ইউআই বোতামের সীমান্ত সম্পত্তি মানগুলির জন্য ডিফল্ট রঙের সাথে সীমানা সেট করুন:

btnUserButtonName.layer.borderColor = UIColor.red

ইউআই বোতামের জন্য সীমান্তের সম্পত্তি মানগুলির জন্য ব্যবহারকারী নির্ধারিত রঙ সেট করুন:

   let myGrayColor = UIColor(red: 0.889415, green: 0.889436, blue:0.889424, alpha: 1.0 )
   btnUserButtonName.layer.borderColor = myGrayColor.cgColor

বিকল্প 2: [প্রস্তাবিত]

এক্সটেনশন পদ্ধতিটি ব্যবহার করুন, সুতরাং অ্যাপ্লিকেশনটির মাধ্যমে বোতামটি সামঞ্জস্যপূর্ণ দেখাবে এবং যেখানেই কোডের একাধিক লাইনের পুনরাবৃত্তি করার প্রয়োজন হবে না।

//Create an extension class in any of the swift file

extension UIButton {
func setBordersSettings() {
        let c1GreenColor = (UIColor(red: -0.108958, green: 0.714926, blue: 0.758113, alpha: 1.0))
        self.layer.borderWidth = 1.0
        self.layer.cornerRadius = 5.0
        self.layer.borderColor = c1GreenColor.cgColor
        self.setTitleColor(c1GreenColor, for: .normal)
        self.layer.masksToBounds = true
    }
}

কোডে ব্যবহার:

//use the method and call whever the border has to be applied

btnUserButtonName.setBordersSettings()

এক্সটেনশন পদ্ধতি বোতামের আউটপুট:

Answer 10

সুইফট 3 সহ আপডেট করুন

    button.layer.borderWidth = 0.8
    button.layer.borderColor = UIColor.blue.cgColor

Answer 11

**** সুইফটে 3 ****

সীমানা তৈরি করতে

 btnName.layer.borderWidth = 1
 btnName.layer.borderColor = UIColor.black.cgColor

কোণার বৃত্তাকার করা

 btnName.layer.cornerRadius = 5

Answer 12

সুইফট 5

button.layer.borderWidth = 2

সীমান্ত ব্যবহারের রঙ পরিবর্তন করতে

button.layer.borderColor = CGColor(srgbRed: 255/255, green: 126/255, blue: 121/255, alpha: 1)

Comments

বাটন.লেয়ার.বর্ডার কালার = ইউআইসিওলর.gray.cg কালারটিও গ্রহণযোগ্য!

— কার্লোস ইরানো