আইফোনে আমি কীভাবে একটি গোলাকার কোণযুক্ত ইউআইবাবেল তৈরি করব?

Question

বৃত্তাকার কোণে তৈরি ইউআইএলবেলগুলি তৈরি করার জন্য কি কোনও অন্তর্নির্মিত উপায় রয়েছে? উত্তরটি যদি না হয় তবে কীভাবে এইরকম একটি অবজেক্ট তৈরি করা যায়?

Answer 1

iOS 3.0 এবং তারপরে

আইফোন ওএস 3.0 এবং পরে শ্রেণিতে cornerRadiusসম্পত্তি সমর্থন করে CALayer। প্রতিটি দৃশ্যের একটি CALayerউদাহরণ রয়েছে যা আপনি ম্যানিপুলেট করতে পারেন। এর অর্থ আপনি এক লাইনে বৃত্তাকার কোণগুলি পেতে পারেন:

view.layer.cornerRadius = 8;

আপনি করতে হবে #import <QuartzCore/QuartzCore.h>CALayer হেডার এবং বৈশিষ্ট্য অ্যাক্সেস পেতে এবং QuartzCore ফ্রেমওয়ার্ক লিঙ্ক করুন।

আইওএস 3.0 এর আগে

এটি করার একটি উপায়, যা আমি সম্প্রতি ব্যবহার করেছি, তা হল একটি ইউআইভিউ সাবক্লাস তৈরি করা যা কেবল একটি বৃত্তাকার আয়তক্ষেত্র আঁকবে, এবং তারপরে ইউআইআইএবেল বা, আমার ক্ষেত্রে, ইউআইটিএক্সটভিউ, এর ভিতরে একটি সংক্ষিপ্তসার তৈরি করবে। বিশেষ করে:

1. একটি UIViewসাবক্লাস তৈরি করুন এবং এর মতো কিছু নাম দিন RoundRectView।
2. ইন RoundRectViewএর drawRect:পদ্ধতি, বৃত্তাকার কোণ জন্য প্রান্ত এবং CGContextAddArcToPoint () জন্য () CGContextAddLineToPoint মত কোর গ্রাফিক্স কল ব্যবহার দৃশ্য সীমার কাছাকাছি একটি পাথ আঁকুন।
3. একটি UILabelউদাহরণ তৈরি করুন এবং এটিকে রাউন্ডরেক্টভিউর একটি উপদর্শন করুন।
4. রাউন্ডআরেক্টভিউয়ের সীমানায় কিছু পিক্সেল ইনসেট হিসাবে লেবেলের ফ্রেমটি সেট করুন। (উদাহরণস্বরূপ, label.frame = CGRectInset(roundRectView.bounds, 8, 8);)

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

Comments

view.layer.cornerRadius এখনও পুরো ভিউ আঁকবে (এটি সক্ষম হওয়ার পরিবর্তে অফস্ক্রিন) এবং কেবলমাত্র কোরএ্যানিমেশন স্তরে এটি আপনার দর্শনটি ক্লিপ করবে। ব্যয়টি হ'ল এটি কোনও ইউআইএসক্রোলভিউতে সক্ষম করে এটির সাথে যে কোনও মতামত রাখবে, আপনার স্ক্রোলিং কার্য সম্পাদন করবে।

— জ্যাক বোলিং

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

— বেনজাদো

আপনি যদি কোডের পরিবর্তে ইন্টারফেস বিল্ডারে এটি করতে চান তবে আপনি সনাক্তকারী পরিদর্শকটিতে একটি মূল সংজ্ঞা "লেয়ার.কর্নারার্যাডিয়াস" দিয়ে একটি ব্যবহারকারী সংজ্ঞায়িত রানটাইম অ্যাট্রিবিউট সেট করতে পারেন।

— ক্রিস ভাসেল্লি

Answer 2

আইওএস 7.1 বা তার পরে থাকা ডিভাইসগুলির জন্য, আপনাকে যুক্ত করতে হবে:

yourUILabel.layer.masksToBounds = YES;
yourUILabel.layer.cornerRadius = 8.0;

Comments

কোণার ব্যাসার্ধটি সেট করুন তবে স্ক্রোলিং / অ্যানিমেশনের জন্য মাস্কটোবাউন্ডগুলি ধীর। যদি আপনি স্তরটির ব্যাকগ্রাউন্ডের রঙ বনাম সেট করে থাকেন যা .1.১ এ স্তরটির কর্নার রেডিয়াসের সাথে একযোগে যথেষ্ট (যেখানে এটি কেবল কোণাররেডিয়াস দিয়ে কাজ করা বন্ধ করে দিয়েছিল)।

— অ্যারন জিনম্যান 21

Answer 3

OSCarsWyck উত্তরের উপর ভিত্তি করে সুইফট আইওএস 8 এর জন্য:

yourUILabel.layer.masksToBounds = true
yourUILabel.layer.cornerRadius = 8.0

Comments

সোফ্টে উদ্দেশ্যমূলক সি উত্তরগুলির অনুবাদ সহ স্ট্যাক ওভারফ্লোকে বিশৃঙ্খলা করবেন না, বিশেষত যখন এই ক্ষেত্রে একমাত্র পরিবর্তনটি পরিবর্তিত YESহয় true।

— mluisbrown

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

— সিকেপি 78

মূল উত্তরটি সম্পাদনা এবং সেখানে সুইফট অনুবাদ যুক্ত করার বিষয়ে কীভাবে?

— মারিওন আর্নে

Answer 4

1. আপনি একটি আছে UILabelবলা হয়: myLabel।
2. আপনার "এম" বা "এইচ" ফাইল আমদানিতে: #import <QuartzCore/QuartzCore.h>

3. আপনার viewDidLoadএই লাইন লিখুন:self.myLabel.layer.cornerRadius = 8;

   • আপনি কীভাবে কোণার রেডিয়াসের মানটি 8 থেকে অন্যান্য সংখ্যায় পরিবর্তন করতে চান তার উপর নির্ভর করে :)

শুভকামনা

Answer 5

আপনি যে কোনও নিয়ন্ত্রণের সীমানার প্রস্থের সাহায্যে বৃত্তাকার সীমানা তৈরি করতে পারেন: -

CALayer * l1 = [lblName layer];
[l1 setMasksToBounds:YES];
[l1 setCornerRadius:5.0];

// You can even add a border
[l1 setBorderWidth:5.0];
[l1 setBorderColor:[[UIColor darkGrayColor] CGColor]];

শুধু lblNameআপনার সাথে প্রতিস্থাপন UILabel।

দ্রষ্টব্য: - আমদানি করতে ভুলবেন না<QuartzCore/QuartzCore.h>

Answer 6

আমি UILabelএই প্রভাবটি অর্জনের জন্য একটি সুইফট সাবক্লাস তৈরি করেছি । সর্বাধিক বিপরীতে আমি স্বয়ংক্রিয়ভাবে পাঠ্যের রঙকে কালো বা সাদাতে সেট করেছি।

ফলাফল

ব্যবহৃত এস-পোস্টস:

• কোনও ইউআইএলবেলের চারপাশে কীভাবে সীমানা আঁকবেন?
• কোনও ইউআইভিউর বাইরে সীমানা যুক্ত করুন
• ইউআইকোলার অন্ধকার বা উজ্জ্বল কিনা তা পরীক্ষা করে দেখুন?

খেলার মাঠ

এটি কেবল কোনও আইওএস প্লেগ্রাউন্ডে পেস্ট করুন:

//: Playground - noun: a place where people can play

import UIKit

class PillLabel : UILabel{

    @IBInspectable var color = UIColor.lightGrayColor()
    @IBInspectable var cornerRadius: CGFloat = 8
    @IBInspectable var labelText: String = "None"
    @IBInspectable var fontSize: CGFloat = 10.5

    // This has to be balanced with the number of spaces prefixed to the text
    let borderWidth: CGFloat = 3

    init(text: String, color: UIColor = UIColor.lightGrayColor()) {
        super.init(frame: CGRectMake(0, 0, 1, 1))
        labelText = text
        self.color = color
        setup()
    }

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

    func setup(){
        // This has to be balanced with the borderWidth property
        text = "  \(labelText)".uppercaseString

        // Credits to https://stackoverflow.com/a/33015915/784318
        layer.borderWidth = borderWidth
        layer.cornerRadius = cornerRadius
        backgroundColor = color
        layer.borderColor = color.CGColor
        layer.masksToBounds = true
        font = UIFont.boldSystemFontOfSize(fontSize)
        textColor = color.contrastColor
        sizeToFit()

        // Credits to https://stackoverflow.com/a/15184257/784318
        frame = CGRectInset(self.frame, -borderWidth, -borderWidth)
    }
}


extension UIColor {
    // Credits to https://stackoverflow.com/a/29044899/784318
    func isLight() -> Bool{
        var green: CGFloat = 0.0, red: CGFloat = 0.0, blue: CGFloat = 0.0, alpha: CGFloat = 0.0
        self.getRed(&red, green: &green, blue: &blue, alpha: &alpha)
        let brightness = ((red * 299) + (green * 587) + (blue * 114) ) / 1000

        return brightness < 0.5 ? false : true
    }

    var contrastColor: UIColor{
        return self.isLight() ? UIColor.blackColor() : UIColor.whiteColor()
    }
}

var label = PillLabel(text: "yellow", color: .yellowColor())

label = PillLabel(text: "green", color: .greenColor())

label = PillLabel(text: "white", color: .whiteColor())

label = PillLabel(text: "black", color: .blackColor())

Answer 7

আর একটি পদ্ধতি হ'ল ইউআইএলবেলের পিছনে পিএনজি রাখা। আমার বেশ কয়েকটি লেবেলের সাথে মতামত রয়েছে যা একক ব্যাকগ্রাউন্ড png এর ওভারলে করে যা পৃথক লেবেলের জন্য সমস্ত শিল্পকর্ম রয়েছে।

Answer 8

xCode 7.3.1 আইওএস 9.3.2

 _siteLabel.layer.masksToBounds = true;
  _siteLabel.layer.cornerRadius = 8;

Answer 9

আপনি যদি চান UI এর বৃত্তাকার কোণ মত বস্তু ( UILabel, UIView, UIButton, UIImageView) স্টোরিবোর্ড দ্বারা তারপর সেট clip to boundsসত্য এবং সেট User Defined Runtime Attributesহিসাবে কী পাথ layer.cornerRadiusটাইপ = নম্বর এবং মান = 9 (আপনার প্রয়োজন হিসাবে)

Answer 10

    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 100, 30)];
    label.text = @"Your String.";
    label.layer.cornerRadius = 8.0;
    [self.view addSubview:label];

Answer 11

সুইফট 3

আপনি যদি অন্যান্য উত্তরগুলির পাশাপাশি পটভূমির রঙের সাথে গোলাকার লেবেল চান তবে আপনার layerপাশাপাশি পটভূমির রঙও সেট করতে হবে । viewপটভূমির রঙ সেট করার সময় এটি কাজ করে না ।

label.layer.cornerRadius = 8
label.layer.masksToBounds = true
label.layer.backgroundColor = UIColor.lightGray.cgColor

আপনি যদি অটো লেআউট ব্যবহার করছেন, লেবেলের চারপাশে কিছু প্যাডিং চান এবং লেবেলের আকারটি ম্যানুয়ালি সেট করতে চান না, আপনি ইউআইএলবেল সাবক্লাস তৈরি করতে এবং intrinsincContentSizeসম্পত্তি ওভাররাইড করতে পারেন :

class LabelWithPadding: UILabel {
    override var intrinsicContentSize: CGSize {
        let defaultSize = super.intrinsicContentSize
        return CGSize(width: defaultSize.width + 12, height: defaultSize.height + 8)
    }
}

দুটি একত্রিত করার জন্য আপনাকে সেটও করতে হবে label.textAlignment = center, অন্যথায় পাঠ্যটি প্রান্তিককরণে রেখে দেওয়া হবে।

Answer 12

মনোোটুচ / জ্যামারিন.আইওএস এ আমি একই সমস্যাটি সমাধান করেছি:

UILabel exampleLabel = new UILabel(new CGRect(0, 0, 100, 50))
        {
            Text = "Hello Monotouch red label"
        };
        exampleLabel.Layer.MasksToBounds = true;
        exampleLabel.Layer.CornerRadius = 8;
        exampleLabel.Layer.BorderColor = UIColor.Red.CGColor;
        exampleLabel.Layer.BorderWidth = 2;

Answer 13

সুইফট ২.০ এ নিখুঁতভাবে কাজ করে

    @IBOutlet var theImage: UIImageView! //you can replace this with any UIObject eg: label etc


    override func viewDidLoad() {
        super.viewDidLoad()
//Make sure the width and height are same
        self.theImage.layer.cornerRadius = self.theImage.frame.size.width / 2
        self.theImage.layer.borderWidth = 2.0
        self.theImage.layer.borderColor = UIColor.whiteColor().CGColor
        self.theImage.clipsToBounds = true

    }

Answer 14

আপনি কি UIButtonইন্টারফেস বিল্ডার (যেটি কোণে বৃত্তাকার রয়েছে) থেকে সেটি ব্যবহার করে চেষ্টা করেছেন এবং এটিকে লেবেলের মতো দেখানোর জন্য সেটিংসটি নিয়ে পরীক্ষা-নিরীক্ষা করেছেন। আপনি যদি চান তা হ'ল স্থির পাঠ্যটির মধ্যে প্রদর্শন করা।

Answer 15

এক্সকোড 8.1.2 এ স্যুইফট 3 এর সাথে সূক্ষ্মভাবে কাজ করে, আগস্ট 2017 এর সময় পরীক্ষিত

বৃত্তাকার প্রান্তগুলি সেট করার মূল বৈশিষ্ট্য "কর্নাররিডিয়াস", যেখানে আপনি যদি আপনার অ্যাপ্লিকেশনের সমস্ত লেবেলের জন্য একই স্টাইল ব্যবহার করেন তবে আমি একটি এক্সটেনশন পদ্ধতির জন্য সুপারিশ করব।

কোড:

 // extension Class
extension UILabel {

    // extension user defined Method
    func setRoundEdge() {
        let myGreenColor = (UIColor(red: -0.108958, green: 0.714926, blue: 0.758113, alpha: 1.0))
        //Width of border
        self.layer.borderWidth = 1.0
        //How much the edge to be rounded
        self.layer.cornerRadius = 5.0

        // following properties are optional
        //color for border
        self.layer.borderColor = myGreenColor.cgColor
        //color for text
        self.textColor = UIColor.red
        // Mask the bound
        self.layer.masksToBounds = true
        //clip the pixel contents
        self.clipsToBounds = true
    }
}

আউটপুট:

কেন এক্সটেনশন পদ্ধতি?

একটি সুইফ্ট ফাইল তৈরি করুন এবং নিম্নলিখিত কোডটি যুক্ত করুন, এতে "ইউআইএলবেল" শ্রেণিতে এক্সটেনশন পদ্ধতি রয়েছে, যেখানে এই পদ্ধতিটি ব্যবহারকারী সংজ্ঞায়িত তবে আপনার অ্যাপ্লিকেশনটিতে সমস্ত লেবেলের জন্য কাজ করবে এবং ধারাবাহিকতা এবং পরিষ্কার কোড বজায় রাখতে সহায়তা করবে, যদি আপনি ভবিষ্যতে যে কোনও স্টাইল পরিবর্তন করতে কেবল এক্সটেনশন পদ্ধতিতে প্রয়োজন।

Answer 16

আপনি ঠিক কী করছেন তার উপর নির্ভর করে আপনি একটি চিত্র তৈরি করতে পারেন এবং এটিকে ব্যাকগ্রাউন্ড হিসাবে অগ্রগতি হিসাবে সেট করতে পারেন।