कैसे एक कस्टम UIView आकर्षित करने के लिए जो सिर्फ एक सर्कल है - iPhone ऐप

Question

मैं एक कस्टम UIView के बारे में कैसे जाऊंगा जो सचमुच एक गेंद (2 डी सर्कल) है? क्या मैं सिर्फ ड्राअरक्ट विधि को ओवरराइड करूंगा? और क्या कोई मुझे नीले वृत्त को खींचने के लिए कोड दिखा सकता है?

साथ ही, कक्षा के भीतर उस दृश्य के फ्रेम को बदलना ठीक होगा? या क्या मुझे एक अलग वर्ग से फ्रेम बदलने की आवश्यकता है?

(बस चारों ओर उछलती हुई गेंद को सेट करने की कोशिश कर रहा है)

Answer 1

आप क्वार्ट्जकोर का उपयोग कर सकते हैं और यह कुछ कर सकते हैं -

self.circleView = [[UIView alloc] initWithFrame:CGRectMake(10,20,100,100)];
self.circleView.alpha = 0.5;
self.circleView.layer.cornerRadius = 50;  // half the width/height
self.circleView.backgroundColor = [UIColor blueColor];

Comments

FYI करें, आपके विचार में क्वार्टरकोर का उपयोग करके एक सर्कल होने के लिए, आपके कोने की त्रिज्या को आपके फ्रेम की ऊंचाई / चौड़ाई का आधा होना चाहिए। यह एक सर्कल बनाने का सबसे आसान तरीका है, लेकिन जरूरी नहीं कि यह सबसे कुशल हो। यदि प्रदर्शन महत्वपूर्ण है, तो ड्रॉक्ट शायद बेहतर परिणाम देगा।

— बेंजामिन मेयो

और यह है। 100 की ऊँचाई / चौड़ाई है।

— काल

हाँ, खेद है कि आप पर, काल निर्देशित नहीं था। मैं उल्लेख कर रहा था कि स्टैनले के मामले में वह विभिन्न आकार के विचारों का उपयोग करना चाहता था।

— बेंजामिन मेयो

यदि आपका सर्कल व्यू आकार 100X100 नहीं है, तो कोनेरेडियस

— ग्रेनाइट 33

लेकिन मैंने देखा कि कोनेडरियस के साथ सर्कल कभी-कभी थोड़ा "सपाट" / क्लिप किनारों वाला होता है। कम से कम जब एक सीमा के साथ प्रयोग किया जाता है। कोई विचार क्यों? त्रिज्या दृश्य के आकार का लगभग आधा है। मैंने सोचा कि यह क्लिपिंग मुद्दा हो सकता है, लेकिन ऐसा लगता नहीं है, एक छोटे से उपले के साथ भी कोशिश की - अभी भी एक ही प्रभाव है।

— Ixx

Answer 2

क्या मैं सिर्फ ड्राअरक्ट विधि को ओवरराइड करूंगा?

हाँ:

- (void)drawRect:(CGRect)rect
{
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    CGContextAddEllipseInRect(ctx, rect);
    CGContextSetFillColor(ctx, CGColorGetComponents([[UIColor blueColor] CGColor]));
    CGContextFillPath(ctx);
}

साथ ही, कक्षा के भीतर उस दृश्य के फ्रेम को बदलना ठीक होगा?

आदर्श रूप से नहीं, लेकिन आप कर सकते थे।

या क्या मुझे एक अलग वर्ग से फ्रेम बदलने की आवश्यकता है?

मैं माता-पिता को नियंत्रित करने देता हूं।

Comments

मैं केवल नीले ही नहीं, कस्टम रंग कैसे सेट कर सकता हूं? मैं इस तरह सफेद और नीले रंग का उपयोग करने की कोशिश करता हूं: ([self.colorOfCircle CGColor]) लेकिन कुछ भी नहीं होता है: \

— gaussblurinc

@loldop है स्व। कोलोर ओफिर्कल एक UIColor? यह सेट है? यदि आप उस लाइन पर एक ब्रेकपॉइंट लगाते हैं और मूल्य को देखते हैं, तो क्या यह आप उम्मीद कर रहे हैं? यदि आप यह निर्धारित करते हैं कि इस तथ्य के बाद, आपको अपने दृश्य के उस हिस्से को अमान्य करना होगा जिसमें वृत्त शामिल है।

— स्टीव

@gaussblurinc उपयोग CGContextSetFillColorWithColor(ctx, self.colorOfCircle.CGColor);, समाधान में प्रस्तावित विधि CGColorGetComponentsकेवल कुछ रंगों के साथ काम करती है, देखें stackoverflow.com/questions/9238743/…

— yonilevy

जो कोई भी खुद को इस पर अटक जाता है उसे नोट करें। इसके बजाय rect, मैंने गलती self.frameसे दीर्घवृत्त के लिए उपयोग किया । सही मान है self.bounds। डी 'ओह! :)

— Olie

Answer 3

यहाँ UIBezierPath का उपयोग करके एक और तरीका है (शायद यह बहुत देर हो चुकी है ^ ^) इसके साथ एक सर्कल और मुखौटा बनाएं UIView, इस प्रकार है:

UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 200, 200)];
view.backgroundColor = [UIColor blueColor];

CAShapeLayer *shape = [CAShapeLayer layer];
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:view.center radius:(view.bounds.size.width / 2) startAngle:0 endAngle:(2 * M_PI) clockwise:YES];
shape.path = path.CGPath;
view.layer.mask = shape;

Comments

वास्तव में उस आकृति की परत को मुखौटा बनाने की आवश्यकता नहीं है; आप केवल दृश्य परत के रूप में सीधे आकार की परत का उपयोग कर सकते हैं और इसे भरने का रंग दे सकते हैं। मुखौटा संभवतः काफी अधिक महंगा है।

— जेसी रूसक जूल

UIView की परत CALayer है इसलिए हम इस परत पर आकृति कैसे बना सकते हैं। मुझे लगता है कि हम आकार की परत को जोड़कर देखने के लिए परत को जोड़ते हैं ??

— जिंतामा

आप UIView को उप-वर्ग कर सकते हैं और layerClassइसे आकार की परत बनाने के लिए वर्ग विधि को ओवरराइड कर सकते हैं ।

— जेसी रूसक

@JesseRusak, जो समस्या मुझे आपके सुझाव के साथ हो रही है (UIView की परत पर ही आकार निर्धारित करने के लिए) वह यह है कि आपको बैकग्राउंडर ठीक से उपयोग नहीं करना पड़ेगा। आपको एक fillColor को लागू करने और backgroundColor को क्लियर करने के लिए सेट करने की आवश्यकता होगी, जिसका अर्थ है कि UIView का उपयोगकर्ता स्वाभाविक रूप से बैकग्राउंडर को सेट करने में सक्षम नहीं होगा।

— रिचर्ड वेनबल

Answer 4

स्विफ्ट एक्सटेंशन के साथ मेरा योगदान:

extension UIView {
    func asCircle() {
        self.layer.cornerRadius = self.frame.width / 2;
        self.layer.masksToBounds = true
    }
}

बस कॉल करना myView.asCircle()

Comments

इस उत्तर में सभी विकल्प masksToBoundsसही हैं और उपयोग करने के लिए तैयार selfहैं, लेकिन यह अभी भी सबसे छोटा और सबसे अच्छा समाधान है

— मैक्स डेसिएटोव

Answer 5

स्विफ्ट 3 - कस्टम वर्ग, पुन: उपयोग करने के लिए आसान। यह backgroundColorयूआई बिल्डर में सेट का उपयोग करता है

import UIKit

@IBDesignable
class CircleBackgroundView: UIView {

    override func layoutSubviews() {
        super.layoutSubviews()
        layer.cornerRadius = bounds.size.width / 2
        layer.masksToBounds = true
    }

}

Comments

अति उत्कृष्ट। यह सही, अनुकूली दृष्टिकोण है।

— वूमबल

Answer 6

स्विफ्ट 3 वर्ग:

import UIKit

class CircleView: UIView {

    override func draw(_ rect: CGRect) {
        guard let context = UIGraphicsGetCurrentContext() else {return}

        context.addEllipse(in: rect)
        context.setFillColor(.blue.cgColor)
        context.fillPath()
    }           
}

Answer 7

सर्कल (और अन्य आकृतियों) के पास पहुंचने का एक और तरीका मास्क का उपयोग करके है। आप हलकों या अन्य आकृतियों को आकर्षित करते हैं, सबसे पहले, आपको आवश्यक आकृतियों के मुखौटे बनाते हैं, दूसरे, अपने रंग के वर्ग प्रदान करते हैं और तीसरे, रंग के उन चौकों पर मास्क लगाते हैं। नया कस्टम सर्कल या अन्य आकार पाने के लिए आप मास्क या रंग बदल सकते हैं।

#import <QuartzCore/QuartzCore.h>

@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIView *area1;
@property (weak, nonatomic) IBOutlet UIView *area2;
@property (weak, nonatomic) IBOutlet UIView *area3;
@property (weak, nonatomic) IBOutlet UIView *area4;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    self.area1.backgroundColor = [UIColor blueColor];
    [self useMaskFor: self.area1];

    self.area2.backgroundColor = [UIColor orangeColor];
    [self useMaskFor: self.area2];

    self.area3.backgroundColor = [UIColor colorWithRed: 1.0 green: 0.0 blue: 0.5 alpha:1.0];
    [self useMaskFor: self.area3];

    self.area4.backgroundColor = [UIColor colorWithRed: 1.0 green: 0.0 blue: 0.5 alpha:0.5];
    [self useMaskFor: self.area4];        
}

- (void)useMaskFor: (UIView *)colorArea {        
    CALayer *maskLayer = [CALayer layer];
    maskLayer.frame = colorArea.bounds;
    UIImage *maskImage = [UIImage imageNamed:@"cirMask.png"];
    maskLayer.contents = (__bridge id)maskImage.CGImage;
    colorArea.layer.mask = maskLayer;
}

@end

यहाँ ऊपर दिए गए कोड का आउटपुट है:

Answer 8

आलसी लोगों के लिए एक और विकल्प है। आप इंटरफ़ेस बिल्डर में अपने दृश्य के लिए layer.cornerRadius मुख्य पथ सेट कर सकते हैं । उदाहरण के लिए, यदि आपके दृश्य की चौड़ाई = ऊंचाई 48 है , तो सेट करें :layer.cornerRadius = 24

हालाँकि, यह केवल तभी काम करता है जब आपके पास दृश्य का स्थिर आकार हो (width/height is fixed)और यह इंटरफ़ेस बिल्डर में सर्कल को नहीं दिखा रहा हो।

Answer 9

स्विफ्ट 3 - एक्सकोड 8.1

@IBOutlet weak var myView: UIView!

override func viewDidLoad() {
    super.viewDidLoad() 

    let size:CGFloat = 35.0
    myView.bounds = CGRect(x: 0, y: 0, width: size, height: size)
    myView.layer.cornerRadius = size / 2
    myView.layer.borderWidth = 1
    myView.layer.borderColor = UIColor.Gray.cgColor        
}