ইউআইভিউউউউউন্ডে গোলাকার কোণ দেওয়া হচ্ছে


577

আমার লগইন দর্শনটিতে একটি সাবউভিউ রয়েছে যাতে একটি UIActivityViewএবং UILabel"সাইন ইন ইন…" বলা আছে। এই সাবভিউটিতে এমন কোণ রয়েছে যা বৃত্তাকার নয়। আমি কীভাবে তাদের বৃত্তাকার করতে পারি?

আমার এক্সিবের ভিতরে এটি করার কোনও উপায় আছে?


6
আইবিতে এমন কিছু করার জন্য গোলাকার কোণগুলির সাথে একটি পূর্ব-রেন্ডারযুক্ত চিত্রের প্রয়োজন হবে
এড মার্টি

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

উত্তর:


1219

এটা চেষ্টা কর

#import <QuartzCore/QuartzCore.h> // not necessary for 10 years now  :)

...

view.layer.cornerRadius = 5;
view.layer.masksToBounds = true;

দ্রষ্টব্য: আপনি যদি কোনও UIViewControllerদৃষ্টিতে বৃত্তাকার কোণগুলি প্রয়োগ করার চেষ্টা করছেন তবে এটি দেখার নিয়ামকের নির্মাত্রে প্রয়োগ করা উচিত নয়, বরং এটি -viewDidLoadপরে viewতাত্ক্ষণিকভাবে করা উচিত।


6
দ্রষ্টব্য যে সম্পত্তি কেবল আইফোন 3.0 এ বিদ্যমান, পূর্ববর্তী সংস্করণগুলিতে নয়।
কেন্ডাল হেলস্টেটার জেলনার 19

5
আমাকে কেবল এটিই বলতে হবে যে এটি এসও-তে আমি দেখেছি এমন এক তাত্ক্ষণিকভাবে সন্তুষ্ট উত্তর। এখানে চেক করা আমাকে প্রথমে একটি চিত্র সম্পাদকের সাথে লড়াই করার এক ঘন্টা বাঁচিয়েছে এবং আমার দৃষ্টিভঙ্গি রঙ / আকার পরিবর্তনগুলিতে আরও ভঙ্গুর করে তুলেছিল। ধন্যবাদ!
জাস্টিন সেরেলস

20
সম্পর্কিত নোট: যে কোনও ইউআইভিউতে সহজেই আবেদন করার জন্য আরও ভিজ্যুয়াল গুডিতে (অর্থাত্ ছায়া) আগ্রহী যে কোনও ব্যক্তিকে CALayer শ্রেণির রেফারেন্সটি পরীক্ষা করা উচিত। এটির বেশিরভাগই উপরোক্ত উত্তরের মতো এক বা দুটি সম্পত্তি মান নির্ধারণের মতোই সহজ: বিকাশকারী.অ্যাপল.
com/ ম্যাক / লাইব্রেরি / ডকুমেন্টেশন / গ্রাফিকস ইমেজিং /

6
@ বেন কলিন্স (বা অন্য কেউ যাদের এই সমস্যা আছে), নিশ্চিত হয়ে নিন যে আপনার দর্শনটিতে "ক্লিপ সাবভিউ" সেট রয়েছে। আপনি ইন্টারফেস বিল্ডারে এটি পরীক্ষা করতে পারেন।
zem

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

261

মানটির মূল পথ নির্ধারণ করতে আপনি ইন্টারফেস বিল্ডারের ব্যবহারকারী সংজ্ঞায়িত রানটাইম বৈশিষ্ট্যগুলিও ব্যবহার করতে পারেন layer.cornerRadius। আপনি QuartzCoreযদিও গ্রন্থাগারটি অন্তর্ভুক্ত করেছেন তা নিশ্চিত করুন ।

এই ট্রিকটি লেয়ার.বর্ডারউইথ সেট করার জন্যও কাজ করে তবে এটি কাজ করবে না layer.borderColorকারণ এটি একটি CGColorনা হিসাবে প্রত্যাশা করে UIColor

স্টোরিবোর্ডে আপনি প্রভাবগুলি দেখতে পারবেন না কারণ রানটাইমগুলিতে এই পরামিতিগুলি মূল্যায়ন করা হয়।

কোণার ব্যাসার্ধ সেট করতে ইন্টারফেস বিল্ডার ব্যবহার করে


10
Clip Subviewsআইবি ভিউয়ের জন্য বিকল্পটিও চেক করতে ভুলবেন না
পিটার

2
(বা) একটি মূল পথ যুক্ত করুন: স্তর.masks টোবাউন্ডস, প্রকার: বুলিয়ান: চেক করা হয়েছে
অমিতাভ

64

স্টোরিবোর্ডে ফলাফলটি দেখানোর জন্য আপনি এখন ইউআইভিউতে (কোডটি ছবিটি বেলো করুন) একটি সুইফট বিভাগ ব্যবহার করতে পারেন (যদি আপনি বিভাগটি ব্যবহার করছেন, তবে কেবল কর্নার রেডিয়াসটি ব্যবহার করুন এবং একটি মূল পথ হিসাবে লেয়ার.কর্নারেডিয়াস নয়।

extension UIView {
    @IBInspectable var cornerRadius: CGFloat {
        get {
            return layer.cornerRadius
        }
        set {
            layer.cornerRadius = newValue
            layer.masksToBounds = newValue > 0
        }
    }
}

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


এবং যদি আপনি একটি কাস্টম সাব-ক্লাস ব্যবহার করছেন তবে @IBDesignableআইবিতে লাইভ পূর্বরূপ পেতে এটি ট্যাগ করে তা নিশ্চিত করুন ! (আরও nshipster.com/ibinspectable-ibdesignable এ )
ক্লোজাচ

56

দ্রুতগতি

সংক্ষিপ্ত উত্তর:

myView.layer.cornerRadius = 8
myView.layer.masksToBounds = true  // optional

পরিপূরক উত্তর

আপনি যদি এই উত্তরটিতে এসে থাকেন তবে আপনি সম্ভবত ইতিমধ্যে আপনার সমস্যার সমাধানের জন্য যথেষ্ট পরিমাণে দেখেছেন। জিনিসগুলি কেন তারা যা করে তার জন্য কিছুটা আরও চাক্ষুষ ব্যাখ্যা দেওয়ার জন্য আমি এই উত্তরটি যুক্ত করছি।

আপনি যদি নিয়মিত শুরু করেন UIViewতবে এর বর্গাকার কোণ রয়েছে।

let blueView = UIView()
blueView.frame = CGRect(x: 100, y: 100, width: 100, height: 50)
blueView.backgroundColor = UIColor.blueColor()
view.addSubview(blueView)

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

আপনি cornerRadiusভিউয়ের সম্পত্তি পরিবর্তন করে এটি বৃত্তাকার কোণে দিতে পারেন layer

blueView.layer.cornerRadius = 8

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

বৃহত্তর ব্যাসার্ধের মানগুলি আরও বৃত্তাকার কোণ দেয়

blueView.layer.cornerRadius = 25

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

এবং ছোট মানগুলি কম বৃত্তাকার কোণ দেয়।

blueView.layer.cornerRadius = 3

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

এটি ঠিক আপনার সমস্যা সমাধানের জন্য যথেষ্ট। তবে, কখনও কখনও একটি ভিউতে একটি সাবউভি বা একটি সাবলেয়ার থাকতে পারে যা ভিউয়ের সীমানার বাইরে চলে যায়। উদাহরণস্বরূপ, যদি আমি এই জাতীয় উপ ভিউ যোগ করি to

let mySubView = UIView()
mySubView.frame = CGRect(x: 20, y: 20, width: 100, height: 100)
mySubView.backgroundColor = UIColor.redColor()
blueView.addSubview(mySubView)

বা যদি আমি এই জাতীয় সাব লেয়ার যুক্ত করে থাকি

let mySubLayer = CALayer()
mySubLayer.frame = CGRect(x: 20, y: 20, width: 100, height: 100)
mySubLayer.backgroundColor = UIColor.redColor().CGColor
blueView.layer.addSublayer(mySubLayer)

তারপর আমি শেষ হবে

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

এখন, আমি যদি সীমার বাইরে জিনিসগুলি ঝুলতে না চাই, তবে আমি এটি করতে পারি

blueView.clipsToBounds = true

অথবা এটা

blueView.layer.masksToBounds = true

যা এই ফলাফল দেয়:

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

উভয় clipsToBoundsএবং masksToBoundsহয় সমতুল্য । এটি ঠিক যে প্রথমটি ব্যবহার করা হয় UIViewএবং দ্বিতীয়টি ব্যবহার করা হয় CALayer

আরো দেখুন


4
আমি আরও যুক্ত করতে চাই যে কোণার ব্যাসার্ধটিকে সংক্ষিপ্ত দিকের অর্ধেকের সাথে নির্ধারণ করা (এক্ষেত্রে blueView.frame.size.height/2) পুরোপুরি গোলাকার কোণে ফলাফল দেয়।
জোহান বার্গেস

44

একজন অ্যাড মার্টির চেয়ে আলাদা পদ্ধতি:

#import <QuartzCore/QuartzCore.h>

[v.layer setCornerRadius:25.0f];
[v.layer setMasksToBounds:YES];

আইবি থেকে সমস্ত বস্তু লোড করার জন্য আপনার সেটমাস্কটবাউন্ডস দরকার ... আমার সমস্যাটি গোল হয়ে যাওয়ার পরে আমার একটি সমস্যা হয়েছে, তবে আইবি থেকে জিনিসগুলি নেই: /

এটি স্থির এটি = ডি আশা করি এটি সাহায্য করে!


48
এটা আলাদা কিভাবে? ডট সিনট্যাক্স ব্যবহার না করে অন্য?
ব্যবহারকারী 102008

3
[v.layer setMasksToBounds: হ্যাঁ]; । n এই লাইনটি যাদু, এটি আমার বড় সমস্যার সমাধান করে
কুলেন সান

3
আমি আইওএস বিকাশ শুরু করার সময় এটি লিখেছিলাম এবং জানতাম না যে বিন্দু সিনট্যাক্স এবং বন্ধনী সিনট্যাক্সের মধ্যে কোনও পার্থক্য নেই। অতএব আমি এটি "আলাদা" হিসাবে লিখেছি। আমার কোডে আমদানিও অন্তর্ভুক্ত ছিল <> যা এড মার্টির তার মূল প্রতিক্রিয়াতে ছিল না (পরে সম্পাদিত হয়েছিল) এবং তাই আমার উত্তর লোকদের তাদের সমস্যা সমাধান করতে সহায়তা করে (ওরফে এটি আমদানি না করে)।
ক্রিস্টিয়ান ফ্লাটহিম জেনসেন

28

এই ব্লগ পোস্টে বর্ণিত হিসাবে , এখানে একটি ইউআইভিউয়ের কোণে গোল করার একটি পদ্ধতি রয়েছে:

+(void)roundView:(UIView *)view onCorner:(UIRectCorner)rectCorner radius:(float)radius
{
    UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:view.bounds
                                                   byRoundingCorners:rectCorner
                                                         cornerRadii:CGSizeMake(radius, radius)];
    CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
    maskLayer.frame = view.bounds;
    maskLayer.path = maskPath.CGPath;
    [view.layer setMask:maskLayer];
    [maskLayer release];
}

এটি সম্পর্কে দুর্দান্ত অংশটি হ'ল আপনি কোন কোণটি বৃত্তাকার চান তা নির্বাচন করতে পারেন।


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

5
দূরদর্শী। ব্লগ পোস্ট এখন 404 হয়।
অ্যান্থনি সি

এই পদ্ধতিটি পরিষ্কার তবে এটি দৃশ্যের কোনও ছায়া প্রভাব লুকাবে।
থিমস্মাইনার

19

আপনাকে প্রথমে হেডার ফাইলটি আমদানি করতে হবে <QuartzCore/QuartzCore.h>

 #import QuartzCore/QuartzCore.h>

[yourView.layer setCornerRadius:8.0f];
yourView.layer.borderColor = [UIColor redColor].CGColor;
yourView.layer.borderWidth = 2.0f;
[yourView.layer setMasksToBounds:YES];

ব্যবহার করতে মিস করবেন না - setMasksToBoundsঅন্যথায় প্রভাবটি প্রদর্শিত হবে না।


2
"কোয়ার্টজকোর / কোয়ার্টজকোর এইচ" আমদানি করার দরকার নেই
সুধীর কুমার

হ্যাঁ আপনার আমদানি করা দরকার।
লর্ড জসোল্ট

3
পছন্দ করেছেন
মার্ক

14

আপনি নিম্নলিখিত কাস্টম UIViewক্লাস ব্যবহার করতে পারেন যা সীমানার রঙ এবং প্রস্থও পরিবর্তন করতে পারে। এটি হ'ল IBDesignalbeআপনি ইন্টারফেস বিল্ডারেও বৈশিষ্ট্যগুলি পরিবর্তন করতে পারেন।

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

import UIKit

@IBDesignable public class RoundedView: UIView {

    @IBInspectable var borderColor: UIColor = UIColor.white {
        didSet {
            layer.borderColor = borderColor.cgColor
        }
    }

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

    @IBInspectable var cornerRadius: CGFloat = 0.0 {
        didSet {
            layer.cornerRadius = cornerRadius
        }
    }

}

6
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(20, 50, 200, 200)];

view.layer.backgroundColor = [UIColor whiteColor].CGColor;
view.layer.cornerRadius = 20.0;
view.layer.frame = CGRectInset(v.layer.frame, 20, 20);

view.layer.shadowOffset = CGSizeMake(1, 0);
view.layer.shadowColor = [[UIColor blackColor] CGColor];
view.layer.shadowRadius = 5;
view.layer.shadowOpacity = .25;

[self.view addSubview:view];
[view release];

সেটম্যাস্কটোবাউন্ড প্রয়োগ করা গুরুত্বপূর্ণ is একটি পটভূমি রঙ সেট এবং ড্রপ ছায়া নয়।
djskinner

3

সুইফট 4 - আইবি ডিজাইনযোগ্য ব্যবহার করে

   @IBDesignable
    class DesignableView: UIView {
    }

    extension UIView
    {

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

আমি দুঃখিত, তবে আইওএস বিকাশে একজন নতুন হিসাবে। কীভাবে সমাধানটি layer.cornerRadiusআসল অবস্থায় ফিরে আসতে বাধা দেয় ? (ei এক্সকোডের স্টোরিবোর্ডটি কীভাবে জানবে cornerRadiusযে মূলটি UIViewআরম্ভ করার পরে কীভাবে সেট করতে হয়)?
অ্যালানস্ট্যাক


3

- সুইফটুই

SwiftUI- এ আপনি যে কোনওটিতে cornerRadiusসরাসরি Modifier ব্যবহার Viewকরতে পারেন। এই প্রশ্নের উদাহরণস্বরূপ:

Text("Signing In…")
    .padding(16)
    .background(Color.red)
    .cornerRadius(50)

পূর্বরূপ

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

চেকআউট এই উত্তর কিভাবে SE করতে রাউন্ড নির্দিষ্ট কোণে SwiftUI মধ্যে


2

দয়া করে আমদানি করুন Quartzcore frameworkতবে আপনাকে এটি অত্যন্ত গুরুত্বপূর্ণ লাইনটি সেট setMaskToBoundsকরতে হবে TRUE

তারপর: [[yourView layer] setCornerRadius:5.0f];


2
UIView* viewWithRoundedCornersSize(float cornerRadius,UIView * original)
{
    // Create a white border with defined width
    original.layer.borderColor = [UIColor yellowColor].CGColor;
    original.layer.borderWidth = 1.5;

    // Set image corner radius
    original.layer.cornerRadius =cornerRadius;

    // To enable corners to be "clipped"
    [original setClipsToBounds:YES];
    return original;
}

2

এটি প্রগ্রেমেটিকভাবে সিজেটিজে সি করুন

UIView *view = [[UIView alloc] initWithFrame:CGRectMake(20, 50,    200, 200)];

view.layer.backgroundColor = [UIColor whiteColor].CGColor;
view.layer.cornerRadius = 20.0;
view.layer.frame = CGRectInset(v.layer.frame, 20, 20);

[view.layer.shadowOffset = CGSizeMake(1, 0);
view.layer.shadowColor = [[UIColor blackColor] CGColor];
view.layer.shadowRadius = 5;
view.layer.shadowOpacity = .25;][1]

[self.view addSubview:view];

স্টোরিবোর্ড থেকে আমরা এটিও করতে পারি।

 layer.cornerRadius  Number  5

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


2

যদি রাউন্ড কর্নার ভিউডিডোড () এ কাজ না করে তবে ভিউডিডলয়আউটসুভিউ () তে কোড লেখাই ভাল )

-(void)viewDidLayoutSubviews
{
    viewTextfield.layer.cornerRadius = 10.0 ;                                               
    viewTextfield.layer.borderWidth = 1.0f;
    viewTextfield.layer.masksToBounds =  YES;
    viewTextfield.layer.shadowRadius = 5;
    viewTextfield.layer.shadowOpacity = 0.3;
    viewTextfield.clipsToBounds = NO;
    viewTextfield.layer.shadowOffset = CGSizeMake(0.0f, 0.0f);
}

আশাকরি এটা সাহায্য করবে!


0

আপনি একটি চিত্র ব্যবহার করতে পারেন:

UIImage *maskingImage = [UIImage imageNamed:@"bannerBarBottomMask.png"];
CALayer *maskingLayer = [CALayer layer];
maskingLayer.frame = CGRectMake(-(self.yourView.frame.size.width - self.yourView.frame.size.width) / 2
                                , 0
                                , maskingImage.size.width
                                , maskingImage.size.height);
[maskingLayer setContents:(id)[maskingImage CGImage]];
[self.yourView.layer setMask:maskingLayer];

0

রাউন্ড ভিউয়ের জন্য কর্নাররাজ্য সম্পত্তি সেট করুন

চিত্রের জন্য মুখোশগুলি টোবাউন্ডস বুলিয়ান মান এখনও কোণার ব্যাসার্ধের সীমার বাইরে আঁকানো হবে না

view.layer.cornerRadius = 5;

view.layer.masksToBounds = YES;

0

ইউআইভিউ এক্সটেনশন ব্যবহার:

extension UIView {    

func addRoundedCornerToView(targetView : UIView?)
{
    //UIView Corner Radius
    targetView!.layer.cornerRadius = 5.0;
    targetView!.layer.masksToBounds = true

    //UIView Set up boarder
    targetView!.layer.borderColor = UIColor.yellowColor().CGColor;
    targetView!.layer.borderWidth = 3.0;

    //UIView Drop shadow
    targetView!.layer.shadowColor = UIColor.darkGrayColor().CGColor;
    targetView!.layer.shadowOffset = CGSizeMake(2.0, 2.0)
    targetView!.layer.shadowOpacity = 1.0
}
}

ব্যবহার:

override func viewWillAppear(animated: Bool) {

sampleView.addRoundedCornerToView(statusBarView)

}

0

সুইফটে 4.2 এবং এক্সকোড 10.1

let myView = UIView()
myView.frame = CGRect(x: 200, y: 200, width: 200, height: 200)
myView.myViewCorners()
//myView.myViewCorners(width: myView.frame.width)//Pass View width
view.addSubview(myView)

extension UIView {
    //If you want only round corners
    func myViewCorners() {
        layer.cornerRadius = 10
        layer.borderWidth = 1.0
        layer.borderColor = UIColor.red.cgColor
        layer.masksToBounds = true
    }
    //If you want complete round shape, enable above comment line
    func myViewCorners(width:CGFloat) {
        layer.cornerRadius = width/2
        layer.borderWidth = 1.0
        layer.borderColor = UIColor.red.cgColor
        layer.masksToBounds = true
    }
}

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