खोज…
वाक्य - विन्यास
// उद्देश्य सी
[उविवि नया] // एक आबंटित वस्तु और आबंटित प्राप्त करें
[[UIView आबंटित] initWithFrame: (पास CGRect)] // एक फ्रेम के साथ आवंटित और प्रारंभिक दृश्य प्राप्त करें
[[उविवि आवंटित] init] // एक दृश्य वस्तु आवंटित और आरंभिक प्राप्त करें
// स्विफ्ट
UIView () // CGRect.zero फ्रेम के साथ एक UIView उदाहरण बनाता है
UIView (फ्रेम: CGRect) // फ्रेम को निर्दिष्ट करने वाला एक UIView उदाहरण बनाता है
UIView.addSubview (UIView) // सबव्यू के रूप में एक और UIView उदाहरण जोड़ें
UIView.hidden // दृश्य की दृश्यता प्राप्त करें या सेट करें
UIView.alpha // दृश्य की अस्पष्टता प्राप्त करें या सेट करें
UIView.setNeedsLayout () // इसके लेआउट को अद्यतन करने के लिए दृश्य को मजबूर करता है
टिप्पणियों
UIView वर्ग स्क्रीन पर एक आयताकार क्षेत्र और उस क्षेत्र में सामग्री के प्रबंधन के लिए इंटरफेस को परिभाषित करता है। रनटाइम के दौरान, एक दृश्य वस्तु अपने क्षेत्र में किसी भी सामग्री के प्रतिपादन को संभालती है और उस सामग्री के साथ किसी भी बातचीत को भी संभालती है।
एक UIView बनाएँ
उद्देश्य सी
CGRect myFrame = CGRectMake(0, 0, 320, 35)
UIView *view = [[UIView alloc] initWithFrame:myFrame];
//Alternative way of defining the frame
UIView *view = [[UIView alloc] init];
CGRect myFrame = view.frame;
myFrame.size.width = 320;
myFrame.size.height = 35;
myFrame.origin.x = 0;
myFrame.origin.y = 0;
view.frame = myFrame;
तीव्र
let myFrame = CGRect(x: 0, y: 0, width: 320, height: 35)
let view = UIView(frame: myFrame)
दृश्य को गोल करें
एक गोल UIView बनाने के लिए, दृश्य की layer लिए एक cornerRadius निर्दिष्ट करें।
यह किसी भी वर्ग पर लागू होता है जो UIView से प्राप्त होता है, जैसे UIImageView ।
प्रोग्राम के रूप में
स्विफ्ट कोड
someImageView.layoutIfNeeded()
someImageView.clipsToBounds = true
someImageView.layer.cornerRadius = 10
उद्देश्य-सी कोड
[someImageView layoutIfNeeded];
someImageView.clipsToBounds = YES;
someImageView.layer.cornerRadius = 10;
उदाहरण
//Swift code
topImageView.layoutIfNeeded()
bottomImageView.layoutIfNeeded()
topImageView.clipsToBounds = true
topImageView.layer.cornerRadius = 10
bottomImageView.clipsToBounds = true
bottomImageView.layer.cornerRadius = bottomImageView.frame.width / 2
//Objective-C code
[topImageView layoutIfNeeded]
[bottomImageView layoutIfNeeded];
topImageView.clipsToBounds = YES;
topImageView.layer.cornerRadius = 10;
bottomImageView.clipsToBounds = YES;
bottomImageView.cornerRadius = CGRectGetWidth(bottomImageView.frame) / 2;
यहां परिणाम है, निर्दिष्ट कोने त्रिज्या का उपयोग करके गोल दृश्य प्रभाव दिखाना:
ध्यान दें
ऐसा करने के लिए आपको क्वार्ट्जकोर ढांचे को शामिल करने की आवश्यकता है।
#import <QuartzCore/QuartzCore.h>
स्टोरीबोर्ड विन्यास
एक गोल दृश्य प्रभाव को स्टोरीबोर्ड में संबंधित गुणों को सेट करके non-programmatically से भी प्राप्त किया जा सकता है।
चूंकि स्टोरीबोर्ड में layer गुण उजागर नहीं होते हैं, इसलिए आपको उपयोगकर्ता परिभाषित रनटाइम एट्रीब्यूट्स अनुभाग के माध्यम से cornerRadius विशेषता को संशोधित करना cornerRadius ।
स्विफ्ट एक्सटेंशन
जब तक यह समान चौड़ाई और ऊंचाई का है तब तक गोल दृश्य को लागू करने के लिए आप इस आसान एक्सटेंशन का उपयोग कर सकते हैं।
extension UIView {
@discardableResult
public func setAsCircle() -> Self {
self.clipsToBounds = true
let frameSize = self.frame.size
self.layer.cornerRadius = min(frameSize.width, frameSize.height) / 2.0
return self
}
}
इसके प्रयेाग के लिए:
yourView.setAsCircle()
एक स्नैपशॉट ले रहा है
आप इस तरह से एक UIView से एक स्नैपशॉट ले सकते हैं:
तीव्र
let snapshot = view.snapshotView(afterScreenUpdates: true)
उद्देश्य सी
UIView *snapshot = [view snapshotViewAfterScreenUpdates: YES];
IBInspectable और IBDesignable का उपयोग करना
हाल ही में Xcode रिलीज में सबसे अच्छे नए फीचर्स में से एक (या दो) IBInspectable गुण और IBDesignable UIView s हैं। इनका आपके एप्लिकेशन की कार्यक्षमता से कोई लेना-देना नहीं है, बल्कि इसके बजाय Xcode में डेवलपर के अनुभव को प्रभावित करते हैं। लक्ष्य यह है कि आप बिना चलाए अपने iOS एप्लिकेशन में कस्टम दृश्य का निरीक्षण कर सकें। तो मान लें कि आपके पास कस्टम दृश्य है जिसे क्रिएटिव रूप से CustomView नाम दिया CustomView जो UIView से विरासत में मिला है। इस कस्टम दृश्य में, यह निर्दिष्ट रंग के साथ पाठ का एक स्ट्रिंग प्रदर्शित करेगा। आप किसी भी पाठ को प्रदर्शित नहीं करने का विकल्प भी चुन सकते हैं। हमें तीन गुणों की आवश्यकता होगी:
var textColor: UIColor = UIColor.blackColor()
var text: String?
var showText: Bool = true
फिर हम कक्षा में drawRect फ़ंक्शन को ओवरराइड कर सकते हैं:
if showText {
if let text = text {
let s = NSString(string: text)
s.drawInRect(rect,
withAttributes: [
NSForegroundColorAttributeName: textColor,
NSFontAttributeName: UIFont(name: "Helvetica Neue", size: 18)!
])
}
}
यह मानते हुए कि text गुण सेट है, यह अनुप्रयोग के चलने पर ऊपरी बाएँ हाथ के कोने में एक स्ट्रिंग खींचेगा। समस्या यह है कि हमें पता नहीं चलेगा कि एप्लिकेशन को चलाने के बिना यह कैसा दिखता है। यह वह जगह है जहाँ IBInspectable और IBDesignable आते हैं। IBInspectable हमें Xcode में व्यू के प्रॉपर्टी वैल्यूज़ को विज़ुअली सेट करने की अनुमति देता है, जैसे बिल्ट इन कंट्रोल्स। IBDesignable हमें स्टोरीबोर्ड में एक दृश्य पूर्वावलोकन दिखाएगा। यहां बताया गया है कि कक्षा को कैसे देखना चाहिए:
@IBDesignable
class CustomView: UIView {
@IBInspectable var textColor: UIColor = UIColor.blackColor()
@IBInspectable var text: String?
@IBInspectable var showText: Bool = true
override func drawRect(rect: CGRect) {
// ...
}
}
या उद्देश्य सी में:
IB_DESIGNABLE
@interface CustomView: UIView
@property (nonatomic, strong) IBInspectable UIColor* textColor;
@property (nonatomic, strong) IBInspectable NSString* text;
@property (nonatomic, assign) IBInspectable BOOL showText;
@end
@implementation CustomView
- (instancetype)init {
if(self = [super init]) {
self.textColor = [UIColor blackColor];
self.showText = YES;
}
return self;
}
- (void)drawRect:(CGRect)rect {
//...
}
@end
अगले स्क्रीनशॉट में दिखाया गया है कि Xcode में क्या होता है। संशोधित वर्ग को जोड़ने के बाद पहला जो होता है। ध्यान दें कि तीन गुणों के लिए तीन नए UI तत्व हैं। पाठ का रंग एक रंग पिकर प्रदर्शित करेगा, पाठ सिर्फ एक इनपुट बॉक्स और पाठ दिखाएँ हमारे लिए विकल्प दे देंगे Off और On जो कर रहे हैं false और true क्रमशः।
अगले रंग बीनने का उपयोग करके लाल रंग में पाठ रंग बदलने के बाद है। साथ ही, drawRect फ़ंक्शन को इसे प्रदर्शित करने के लिए कुछ पाठ प्रदान किए गए हैं। ध्यान दें कि इंटरफ़ेस बिल्डर में दृश्य भी अपडेट किया गया है।
अंत में, संपत्ति निरीक्षक में शो टेक्स्ट Off सेट करना इंटरफ़ेस बिल्डर में टेक्स्ट डिस्प्ले को गायब कर देता है।
हालांकि, हम सब स्थिति आ जब हम गोल बनाने की जरूरत UIView अपने में अनेक दृश्य में Storyboard घोषित करने के .Instead IBDesignable के हर विचारों को Storyboard , इसके बेहतर बनाने के लिए एक Extension की UIView और प्राप्त एक यूजर इंटरफेस सिर्फ अपने हर के लिए बनाया गया UIView कॉर्नर त्रिज्या को सेट करके गोल दृश्य बनाने के लिए प्रोजेक्ट के माध्यम से। स्टोरीबोर्ड में आपके द्वारा बनाए गए किसी भी UIView पर कॉन्फ़िगर करने योग्य सीमा त्रिज्या।
extension UIView {
@IBInspectable var cornerRadius:CGFloat {
set {
layer.cornerRadius = newValue
clipsToBounds = newValue > 0
}
get {
return layer.cornerRadius
}
}
}
एक UIView एनिमेटेड
let view = UIView(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
view.backgroundColor = UIColor.orange
self.view.addSubview(view)
UIView.animate(withDuration: 0.75, delay: 0.5, options: .curveEaseIn, animations: {
//This will cause view to go from (0,0) to
// (self.view.frame.origin.x,self.view.frame.origin.y)
view.frame.origin.x = self.view.frame.origin.x
view.frame.origin.y = self.view.frame.origin.y
}) { (finished) in
view.backgroundColor = UIColor.blueColor()
}
आकार और फ्रेम विशेषताओं के लिए UIView विस्तार
यदि हम दृश्य की उत्पत्ति का एक्स-कॉर्डिनेशन प्राप्त करना चाहते हैं, तो हमें इस तरह लिखना होगा:
view.frame.origin.x
चौड़ाई के लिए, हमें लिखना होगा:
view.frame.size.width
लेकिन अगर हम एक UIView लिए एक सरल एक्सटेंशन जोड़ते हैं, तो हम सभी विशेषताओं को बहुत सरलता से प्राप्त कर सकते हैं, जैसे:
view.x
view.y
view.width
view.height
यह इन विशेषताओं को सेट करने में भी मदद करेगा जैसे:
view.x = 10
view.y = 10
view.width = 100
view.height = 200
और सरल विस्तार होगा:
extension UIView {
var x: CGFloat {
get {
return self.frame.origin.x
}
set {
self.frame = CGRect(x: newValue, y: self.frame.origin.y, width: self.frame.size.width, height: self.frame.size.height)
}
}
var y: CGFloat {
get {
return self.frame.origin.y
}
set {
self.frame = CGRect(x: self.frame.origin.x, y: newValue, width: self.frame.size.width, height: self.frame.size.height)
}
}
var width: CGFloat {
get {
return self.frame.size.width
}
set {
self.frame = CGRect(x: self.frame.origin.x, y: self.frame.origin.y, width: newValue, height: self.frame.size.height)
}
}
var height: CGFloat {
get {
return self.frame.height
}
set {
self.frame = CGRect(x: self.frame.origin.x, y: self.frame.origin.y, width: self.frame.size.width, height: newValue)
}
}
}
हमें किसी प्रोजेक्ट में इस क्लास फाइल को जोड़ना होगा और यह पूरे प्रोजेक्ट में उपयोग करने के लिए उपलब्ध होगा!
क्रमिक रूप से एक और UIView से और में UIView प्रविष्टि और विलोपन का प्रबंधन
मान लें कि आपके पास एक parentView है, जिसमें आप एक नया subView प्रोग्रामेटिक रूप से subView चाहते हैं (जैसे। जब आप एक UIImageView को UIViewController के दृश्य में सम्मिलित करना चाहते हैं), तो आप नीचे दिए अनुसार इसे कर सकते हैं।
उद्देश्य सी
[parentView addSubview:subView];
तीव्र
parentView.addSubview(subView)
तुम भी एक और नीचे subview जोड़ सकते हैं subView2 , जो पहले से ही parentView की एक उप देखने के लिए निम्न कोड का उपयोग कर रहा है:
उद्देश्य सी
[parentView insertSubview:subView belowSubview:subView2];
तीव्र
parentView.insertSubview(subView, belowSubview: subView2)
यदि आप इसे subView2 ऊपर सम्मिलित करना चाहते हैं तो आप इसे इस प्रकार कर सकते हैं:
उद्देश्य सी
[parentView insertSubview:subView aboveSubview:subView2];
तीव्र
parentView.insertSubview(subView, aboveSubview: subView2)
यदि आपके कोड में कहीं आपको एक निश्चित सब subView को सामने लाने की आवश्यकता है, तो अन्य सभी parentView ऊपर, आप इसे इस तरह से कर सकते हैं:
उद्देश्य सी
[parentView bringSubviewToFront:subView];
तीव्र
parentView.bringSubviewToFront(subView)
अंत में, यदि आप subView से parentView subView हटाना चाहते हैं, तो आप नीचे के रूप में कर सकते हैं:
उद्देश्य सी
[subView removeFromSuperview];
तीव्र
subView.removeFromSuperview()
ऑटोलयूट का उपयोग करके UIView बनाएं
UIView *view = [[UIView alloc] init];
[self.view addSubview:view];
//Use the function if you want to use height as constraint
[self addView:view onParentView:self.view withHeight:200.f];
//Use this function if you want to add view with respect to parent and should resize with it
[self addFullResizeConstraintForSubview:view addedOnParentView:self.view];
कार्य
ऑटोलेयट बाधाओं का उपयोग करके निश्चित ऊंचाई के साथ दृश्य जोड़ने का कार्य
-(void)addView:(UIView*)subView onParentView:(UIView*)parentView withHeight:(CGFloat)height{
subView.translatesAutoresizingMaskIntoConstraints = NO;
NSLayoutConstraint *trailing =[NSLayoutConstraint
constraintWithItem:subView
attribute:NSLayoutAttributeTrailing
relatedBy:NSLayoutRelationEqual
toItem:parent
attribute:NSLayoutAttributeTrailing
multiplier:1.0
constant:10.f];
NSLayoutConstraint *top = [NSLayoutConstraint
constraintWithItem:subView
attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:parent
attribute:NSLayoutAttributeTop
multiplier:1.0
constant:10.f];
NSLayoutConstraint *leading = [NSLayoutConstraint
constraintWithItem:subView
attribute:NSLayoutAttributeLeading
relatedBy:NSLayoutRelationEqual
toItem:parent
attribute:NSLayoutAttributeLeading
multiplier:1.0
constant:10.f];
[parent addConstraint:trailing];
[parent addConstraint:top];
[parent addConstraint:leading];
NSLayoutConstraint *heightConstraint =[NSLayoutConstraint
constraintWithItem:subView
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:0
multiplier:0.0
constant:height];
[subView addConstraint:heightConstraint];
}
बनाया गया यूआईवाईयूवाई के लिए फंक्शन का पूर्ण आकार का अवरोध जोड़ें।
-(void)addFullResizeConstraintForSubview:(UIView*)subView addedOnParentView:(UIView*)parentView{
subView.translatesAutoresizingMaskIntoConstraints = NO;
NSLayoutConstraint *trailing =[NSLayoutConstraint
constraintWithItem:subView
attribute:NSLayoutAttributeTrailing
relatedBy:NSLayoutRelationEqual
toItem:parent
attribute:NSLayoutAttributeTrailing
multiplier:1.0
constant:10.f];
NSLayoutConstraint *top = [NSLayoutConstraint
constraintWithItem:subView
attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:parent
attribute:NSLayoutAttributeTop
multiplier:1.0
constant:10.f];
NSLayoutConstraint *leading = [NSLayoutConstraint
constraintWithItem:subView
attribute:NSLayoutAttributeLeading
relatedBy:NSLayoutRelationEqual
toItem:parent
attribute:NSLayoutAttributeLeading
multiplier:1.0
constant:10.f];
NSLayoutConstraint *bottom =[NSLayoutConstraint
constraintWithItem:subView
attribute:NSLayoutAttributeBottom
relatedBy:NSLayoutRelationEqual
toItem:parent
attribute:NSLayoutAttributeBottom
multiplier:1.0
constant:0.f];
[parent addConstraint:trailing];
[parent addConstraint:top];
[parent addConstraint:leading];
[parent addConstraint:bottom];
}
आंतरिक सामग्री के आकार का उपयोग
UIView उपवर्ग का निर्माण करते समय, आंतरिक सामग्री का आकार हार्डकोड ऊंचाई और चौड़ाई की बाधाओं को सेट करने से बचने में मदद करता है
एक वर्ग कैसे इस का उपयोग कर सकता है में एक बुनियादी झलक
class ImageView: UIView {
var image: UIImage {
didSet {
invalidateIntrinsicContentSize()
}
}
// omitting initializers
// convenience init(image: UIImage)
override func intrinsicContentSize() -> CGSize {
return CGSize(width: image.size.width, height: image.size.height)
}
}
यदि आप केवल एक आकार आंतरिक रूप से प्रदान करना चाहते हैं, तो आप उस मान के लिए UIViewNoIntrinsicMetric मान प्रदान कर सकते हैं जिसे आप अनदेखा करना चाहते हैं।
override func intrinsicContentSize() -> CGSize {
return CGSize(width: UIViewNoIntrinsicMetric, height: image.size.width)
}
AutoLayout और इंटरफ़ेस बिल्डर के साथ उपयोग करने पर लाभ
कोई इस ImageView (या UIImageView) को ले सकता है और पर्यवेक्षित केंद्र X के लिए क्षैतिज संरेखण और अनुरक्षण केंद्र Y के लिए ऊर्ध्वाधर संरेखण सेट कर सकता है।
इंटरफ़ेस बिल्डर आपको निम्नलिखित चेतावनी देते हुए इस बिंदु पर शिकायत करेगा:
यह वह जगह है जहाँ Placeholder Intrinsic Size आता है।
आकार निरीक्षक पैनल में जा रहे हैं, और आंतरिक आकार ड्रॉपडाउन के लिए, आप इस मान को डिफ़ॉल्ट से प्लेसहोल्डर पर स्विच कर सकते हैं।
और अब इंटरफ़ेस बिल्डर पिछले चेतावनियों को हटा देगा और आप इस आकार का उपयोग इंटरफ़ेस बिल्डर में देखे गए विचारों को आकार देने के लिए कर सकते हैं।
एक दृश्य हिला
extension UIView {
func shake() {
let animation = CAKeyframeAnimation(keyPath: "transform.translation.x")
animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)
animation.duration = 0.6
animation.values = [-10.0, 10.0, -7.0, 7.0, -5.0, 5.0, 0.0 ]
layer.add(animation, forKey: "shake")
}
}
इस फ़ंक्शन का उपयोग इसे थोड़ा हिलाकर किसी विशिष्ट दृश्य पर ध्यान आकर्षित करने के लिए किया जा सकता है।
