कोको टच: कैसे बदलें UIView की सीमा का रंग और मोटाई?


275

मैंने निरीक्षक में देखा कि मैं पृष्ठभूमि का रंग बदल सकता हूं, लेकिन मैं सीमा का रंग और मोटाई भी बदलना चाहूंगा, क्या यह संभव है?


जवाबों:


596

सीमा संपत्ति सेट करने के लिए आपको दृश्य की परत का उपयोग करने की आवश्यकता है। उदाहरण के लिए:

#import <QuartzCore/QuartzCore.h>
...
view.layer.borderColor = [UIColor redColor].CGColor;
view.layer.borderWidth = 3.0f;

इस कार्यक्षमता तक पहुँचने के लिए आपको QuartzCore.framework से लिंक करना होगा।


क्या हर तरफ के लिए अलग-अलग चौड़ाई / रंग निर्धारित करने का कोई तरीका है?
lluismontero

2
@lluismontero मुझे डर है कि आपको ड्रा के साथ कस्टम UIView बनाना होगा: इसके लिए विधि
व्लादिमीर

1
यदि मैं ऐसा करता हूं, और इस दृश्य के शीर्ष पर मेरे पास एक एनीमेशन है, जैसे कि एक मॉडल UINavigationController को खारिज करते हुए, मुझे बहुत सारी गड़बड़ियां दिखाई दे रही हैं, यह वर्णन करना मुश्किल है। यदि मैं सीमाओं को निष्क्रिय कर देता हूं, तो सब कुछ सामान्य हो जाता है।
निकु सूरु

5
बस दूसरों के लिए एक सिर। Xcode का सुझाव है कि UIColor को CGColorRef के रूप में ब्रिजिंग करें __bridge CGColorRef। यह काम नहीं करता। इसका [UIColor blackColor].CGColorउत्तर में उल्लेख किया जाना चाहिए ।
GoodSp33d

6
#import <QuartzCore/QuartzCore.h>अब जरूरत नहीं है।
अर्थ-मामले

43

Xcode 6 अपडेट

Xcode के नवीनतम संस्करण के बाद से इसका एक बेहतर समाधान है:

साथ @IBInspectableआप गुण से सीधे सेट कर सकते हैं के भीतरAttributes Inspector

मेरा कस्टम दृश्य @IBInspectable विशेषताएँ

यह User Defined Runtime Attributesआपके लिए सेट है :

यहां छवि विवरण दर्ज करें

इसे स्थापित करने के लिए दो दृष्टिकोण हैं:

विकल्प 1 (स्टोरीबोर्ड में लाइव अपडेट के साथ)

  1. बनाएँ MyCustomView
  2. इससे विरासत मिलती है UIView
  3. सेट करें @IBDesignable(यह दृश्य अपडेट को लाइव बनाता है)। *
  4. अपने रनटाइम एट्रिब्यूट्स (सीमा, आदि) के साथ सेट करें @IBInspectable
  5. अपने दृश्य कक्षा को बदलें MyCustomView
  6. विशेषताएँ पैनल में संपादित करें और स्टोरीबोर्ड में बदलाव देखें :)

`

@IBDesignable
class MyCustomView: UIView {
    @IBInspectable var cornerRadius: CGFloat = 0 {
        didSet {
            layer.cornerRadius = cornerRadius
            layer.masksToBounds = cornerRadius > 0
        }
    }
    @IBInspectable var borderWidth: CGFloat = 0 {
        didSet {
            layer.borderWidth = borderWidth
        }
    }
    @IBInspectable var borderColor: UIColor? {
        didSet {
            layer.borderColor = borderColor?.CGColor
        }
    }
}

* @IBDesignable केवल तभी काम करता है जब शुरू होता हैclass MyCustomView

विकल्प 2 (स्विफ्ट 1.2 के बाद से काम नहीं करना, टिप्पणियां देखें)

अपना UIView क्लास बढ़ाएँ:

extension UIView {
    @IBInspectable var cornerRadius: CGFloat = 0 {
        didSet {
            layer.cornerRadius = cornerRadius
            layer.masksToBounds = cornerRadius > 0
        }
    }
    @IBInspectable var borderWidth: CGFloat = 0 {
        didSet {
            layer.borderWidth = borderWidth
        }
    }
    @IBInspectable var borderColor: UIColor? {
        didSet {
            layer.borderColor = borderColor?.CGColor
        }
    }
}

इस तरह, आपके डिफ़ॉल्ट दृश्य में हमेशा उन अतिरिक्त संपादन योग्य फ़ील्ड होते हैं Attributes Inspector। एक और लाभ यह है कि आपको MycustomViewहर बार कक्षा को बदलना नहीं है । हालाँकि, इसका एक दोष यह है कि आप अपना परिवर्तन तभी देखेंगे जब आप अपना ऐप चलाएंगे।


1
आपका विस्तार आज के रूप में Xcode के नवीनतम संस्करण में काम नहीं करता है।
एडगर अरौटियूनियन

1
मैं @EdgarAroutiounian की पुष्टि करता हूँ कि स्विफ्ट 1.2 में दूसरा दृष्टिकोण अब काम नहीं करता है
सर्गेई ग्रिस्किओव

उद्देश्य-सी के बारे में क्या?
निक कोव

नीचे स्पेन्सेरी 2 के उत्तर की जाँच करें, उन्होंने इसे उद्देश्य-सी में लिखने के लिए समय लिया:
MMachinegun

मान को संग्रहीत नहीं करने और सेट (मान) {} का उपयोग करने और {} को सीधे लेयर तक पहुंचने के लिए एक्सटेंशन को अपडेट करें, यह तब काम करता है।
लाइटनिंगस्ट्राइक

17

आप अपनी इच्छा के रंग के साथ बॉर्डर भी बना सकते हैं।

view.layer.borderColor = [UIColor colorWithRed:r/255.0 green:g/255.0 blue:b/255.0 alpha:1.0].CGColor;

* r, g, b 0 से 255 के बीच के मान हैं।


6
यह ध्यान देने योग्य है कि r, gऔर bशायद तैरना चाहिए; भाजक भी तैरने चाहिए r / 255.0:।

नहीं, C वाक्यविन्यास ऐसा नहीं है जैसा आप कहते हैं। r, g और b int हो सकते हैं, क्योंकि C (और objC IS C) प्रमोशन करने पर int r = 128 से दोगुना हो जाएगा: r / 255.0। वैसे आप डबल हो गए, और क्लैग CGFloat को कास्ट करेगा।
१४:५

10

UIView एक्सटेंशन में @IBInspectables का पालन करें

extension UIView {

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

  @IBInspectable var borderColor: UIColor? {
    get {
      if let color = layer.borderColor {
        return UIColor(CGColor: color)
      }
      return nil
    }
    set(newValue) {
      layer.borderColor = newValue?.CGColor
    }
  }
}

और फिर आपको बॉर्डर कॉरडर और बॉर्डरविद विशेषताओं को एट्रिब्यूट इंस्पेक्टर से सीधे सेट करने में सक्षम होना चाहिए। संलग्न छवि देखें

गुण निरीक्षक


8

जब मैं व्लादिमीर के कैलेयर समाधान का उपयोग करता हूं, और दृश्य के शीर्ष पर मेरे पास एक एनीमेशन है, जैसे कि एक मॉडल UINavigationController को खारिज करते हुए, मुझे बहुत सारे ग्लिट्स दिखाई देते हैं और प्रदर्शन के मुद्दों को आकर्षित करते हैं।

तो, इसे प्राप्त करने का एक और तरीका है, लेकिन glitches और प्रदर्शन हानि के बिना, एक कस्टम UIView बनाना और drawRectसंदेश को लागू करना है:

- (void)drawRect:(CGRect)rect
{
    CGContextRef contextRef = UIGraphicsGetCurrentContext();
    CGContextSetLineWidth(contextRef, 1);
    CGContextSetRGBStrokeColor(contextRef, 255.0, 255.0, 255.0, 1.0);
    CGContextStrokeRect(contextRef, rect);    
}

@ क्रिश आप कलर को वेरिएबल में स्टोर करते हैं और जब आपको बॉर्डर कलर बदलने की जरूरत होती है, तो आप वेरिएबल वैल्यू को बदलते हैं और setNeedsDisplayव्यू पर कॉल करते हैं। यह UIView के रिड्रावल को बाध्य करेगा और अंतर्निहित रूप से फिर से कॉल करेगा drawRect। परीक्षण नहीं किया गया, ...
निकु सूरु जूल

8
view.layer.borderWidth = 1.0
view.layer.borderColor = UIColor.lightGray.cgColor

1
मैं वास्तव में लोगों को एक स्पष्टीकरण के बिना नीचे वोट दिया जा रहा पसंद नहीं है। यह बिना किसी की मदद करता है।
डेविड डेलमोनेट


4

मैं प्रदर्शन को हिट करने के कारण ड्रॉअर को ओवरराइड करने का सुझाव नहीं दूंगा।

इसके बजाय, मैं नीचे (आपके कस्टम uiview में) वर्ग के गुणों को संशोधित करूंगा:

  - (id)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
      self.layer.borderWidth = 2.f;
      self.layer.borderColor = [UIColor redColor].CGColor;
    }
  return self;

ऊपर ले जाते समय मुझे कोई ग्लिच दिखाई नहीं दिया - यह सुनिश्चित नहीं किया कि initWithFrame में डालने से ये बंद क्यों हो जाते हैं? ;-)


3

मैं इसे @ marczking के उत्तर ( विकल्प 1) में जोड़ना चाहता था टिप्पणी के रूप में ) में , लेकिन StackOverflow पर मेरी नीच स्थिति को रोक रहा है।

मैंने उद्देश्य सी के लिए @ marczking के उत्तर का एक पोर्ट किया। आकर्षण की तरह काम करता है, धन्यवाद @marczking!

UIView + Border.h:

#import <UIKit/UIKit.h>

IB_DESIGNABLE
@interface UIView (Border)

-(void)setBorderColor:(UIColor *)color;
-(void)setBorderWidth:(CGFloat)width;
-(void)setCornerRadius:(CGFloat)radius;

@end

UIView + Border.m:

#import "UIView+Border.h"

@implementation UIView (Border)
// Note: cannot use synthesize in a Category

-(void)setBorderColor:(UIColor *)color
{
    self.layer.borderColor = color.CGColor;
}

-(void)setBorderWidth:(CGFloat)width
{
    self.layer.borderWidth = width;
}

-(void)setCornerRadius:(CGFloat)radius
{
    self.layer.cornerRadius = radius;
    self.layer.masksToBounds = radius > 0;
}

@end

2

@IBInspectable मेरे लिए iOS 9, स्विफ्ट 2.0 पर काम कर रहा है

extension UIView {

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

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

@IBInspectable var borderColor: UIColor? {
    get {
        if let color = layer.borderColor {
            return UIColor(CGColor: color)
        }
        return nil
    }
    set(newValue) {
        layer.borderColor = newValue?.CGColor
    }
}

1

यदि आप एक UIView की परत को संपादित नहीं करना चाहते हैं, तो आप हमेशा दूसरे दृश्य में दृश्य एम्बेड कर सकते हैं। माता-पिता के दृश्य का रंग सीमा के रंग के लिए निर्धारित होता है। यह भी थोड़ा बड़ा होगा, यह निर्भर करता है कि आप सीमा को कितना चौड़ा करना चाहते हैं।

बेशक, यह केवल तभी काम करता है जब आपका दृष्टिकोण पारदर्शी न हो और आप केवल एक सीमा रंग चाहते हों। ओपी दृश्य में ही सीमा चाहता था, लेकिन यह एक व्यवहार्य विकल्प हो सकता है।


0

यदि आप अलग-अलग सीमा को अलग-अलग जोड़ना चाहते हैं, तो विशिष्ट शैली के साथ एक उप-योग जोड़ सकते हैं जो एक आसान तरीका है।


0

आइटम का बॉर्डर कलर स्विफ्ट 4.2:

let cell = tableView.dequeueReusableCell(withIdentifier: "Cell_lastOrderId") as! Cell_lastOrder
cell.layer.borderWidth = 1
cell.layer.borderColor = UIColor.white.cgColor
cell.layer.cornerRadius = 10
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.