UIViewContentModeScaleAspectFill क्लिपिंग नहीं


144

मैं एक निश्चित आकार (100x100) का उपयोग करके कुछ थंबनेल छवियों को आकर्षित करने की कोशिश कर रहा हूं UIImageView। मैंने अपनी छवि दृश्य का फ्रेम आकार 100x100 किया है, और करने के contentModeलिए सेट किया है UIViewContentModeScaleAspectFill

मेरी समझ यह है कि इससे छवि को मेरे द्वारा निर्धारित आकार में खींचा जाना चाहिए, और छवि छवि के क्षेत्र को भर देगी, और छवि के किसी भी हिस्से को क्लिप कर देगी जो आकार के बाहर है जो मैं छवि दृश्य के लिए सेट करता हूं। हालाँकि, छवि अभी भी 100x100 आकार से बड़ी या छोटी है जो मैंने इसके लिए निर्धारित की है।

अगर मैं करने के contentModeलिए सेट है UIviewContentModeScaleToFill, तो छवि बिल्कुल 100x100 पर तैयार है, लेकिन यह उन आयामों में फिट करने के लिए विकृत है। किसी भी विचार क्यों पहलू भरने की उम्मीद के अनुसार कतरन नहीं है?

यहाँ मेरा कोड है:

_photoView = [[UIImageView alloc] initWithImage:photoImage];
_photoView.contentMode = UIViewContentModeScaleAspectFill;
[self addSubview:_photoView];

CGRect photoFrame = _photoView.frame;
photoFrame.size = CGSizeMake(100, 100);
_photoView.frame = photoFrame;

बेहतर वर्णन करने के लिए, यहाँ एक स्क्रीनशॉट है जो मैं देख रहा हूँ। हरे वर्ग मैं UIViewयुक्त के UIImageViewसाथ काम कर रहे हैं। मैंने उनकी पृष्ठभूमि का रंग हरा और दृश्य के फ्रेम को 100x100 पर सेट किया है। परीक्षण के रूप में, UIImageViews50x50 के आकार के होते हैं। जैसा कि आप देख सकते हैं, का उपयोग करते समय ...AspectFill, छवियों का आकार 50x50 तक नहीं होता है, और कुछ मामलों में ऑफसेट होता है जहां से मैं उन्हें पसंद करूंगा। उपयोग करते समय ...ScaleToFill, वे सही आकार के होते हैं, लेकिन छवि विकृत होती है।

स्क्रीनशॉट चित्रण समस्या

जवाबों:


352

क्या आप सीमा पर क्लिप सेट करने का प्रयास कर सकते हैं

[_photoview setClipsToBounds:YES];

या सीधे अपने स्टोरीबोर्ड / Xib में यदि आप कर सकते हैं:

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


10
वह यह था - धन्यवाद। (मैंने बेहतर प्रदर्शन के लिए ऊपर दिए गए स्क्रीनशॉट को जोड़ा, जो मैं देख रहा था, उदाहरण के रूप में अगर कोई और इस मुद्दे पर आता है।)
जोश बुहलर

3
InterfaceBuilder में, "क्लिप्स पूर्वावलोकन" के लिए (unhelpfully) का नाम बदल दिया गया है (NB: इस मामले में, यह "सबव्यू" को क्लिब नहीं करता है, नाम गलत है: यह SELF AND सबव्यूशन को क्लिप करता है)
एडम

3
एनआईबी फ़ाइल में 'क्लिप सब्जेक्ट्स' विकल्प को टिक करने से वही काम होता है। चीयर्स।
कोडबर्न

लेकिन अगर आप काइलेयर संपत्ति का उपयोग करके एक छाया जोड़ना चाहते हैं, तो :( इसके पीछे एक और दृश्य जोड़ना मेरे लिए आदर्श नहीं है
रामबेटिनो

यदि आप मेरी तरह ऑटो लेआउट का उपयोग कर रहे हैं, तो एक और संभावित कारण है, जो है NSLayoutConstraint "UIView-Encapsulated-Layout-Height" UIImageView आकार की बाधाओं को तोड़ना।
ईविनिनन

8

यदि आप अपने ज्ञान का विस्तार करना चाहते हैं तो वास्तव में एक अच्छा लेख है कि कैसे iOS UIView स्टैक प्रदान किया जाता हैसंपूर्ण ड्राइंग पाइपलाइन के बारे में अधिक गहराई से लेख भी है ।

संक्षेप में:

  1. रेखांकन - दृश्य की सीमा के समन्वय स्थान में सभी दृश्य की सामग्री rasterised (खींची गई या ऑफ़स्क्रीन पिक्सेल बफ़र) है। यह छवि डेटा या कस्टम ड्राइंग (यानी drawRect:) हो सकता है, लेकिन सबव्यू सामग्री। यह रैस्टिरेशन contentModeप्रॉपर्टी को ध्यान में रखता है।

    किसी दृश्य की सीमा के बाहर कुछ भी छोड़ दिया जाता है।

  2. रचना - परिणाम सबव्यू से सुपरवाइज तक कंपोजिट (एक दूसरे के ऊपर खींचे गए) होते हैं। यह सबव्यू की फ़्रेम प्रॉपर्टी का उपयोग करता है।

    यदि clipsToBoundsसंपत्ति YESसुपरवाइज पर है तो वह अपनी सीमा से बाहर सबव्यू कंटेंट को छोड़ देगा ।


2

एक ही समस्या थी और इसे "क्लिप सबव्यू" पर टिक करके हल किया गया था।

छवि स्टोरीबोर्ड पूर्वावलोकन में सभी दृश्यों (3.5,4,4.7,5.5, आईपैड) के लिए ठीक से दिखाई दे रही थी, लेकिन सिम्युलेटर में नहीं।

जब मैंने "क्लिप साक्षात्कार" पर टिक किया तो समस्या हल हो गई। :)


1

स्टोरीबोर्ड / Xib में सीधे "क्लिप साक्षात्कार" की जाँच ने भी मेरे लिए काम किया। यहाँ छवि विवरण दर्ज करें


0

मेरे उप-आकार बदल रहे थे और मुझे एहसास हुआ कि यह था क्योंकि xib में ऑटो लेआउट सेट था: यहाँ छवि विवरण दर्ज करें


0

अगर सब कुछ विफल रहता है,

क्लिप को देखने के लिए सीमा में करें।

उदाहरण :

  override func viewDidLayoutSubviews() {

    imageProfile.layer.cornerRadius = imageProfile.bounds.size.width/2
    imageProfile.clipsToBounds = true
    imageProfile.layer.masksToBounds = true
 }
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.