iOS 7 TextKit - टेक्स्ट के साथ इमेज इनलाइन कैसे डालें?


109

मैं UITextView का उपयोग करके निम्नलिखित प्रभाव प्राप्त करने की कोशिश कर रहा हूं:

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

मूल रूप से मैं पाठ के बीच एक छवि सम्मिलित करना चाहता हूं। छवि बस जगह की 1 पंक्ति ले जा सकती है ताकि कोई रैपिंग आवश्यक न हो।

मैंने सिर्फ सबवे में एक UIView जोड़ने की कोशिश की:

UIView *pictureView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 25, 25)];
[pictureView setBackgroundColor:[UIColor redColor]];
[self.textView addSubview:pictureView];

लेकिन यह पाठ पर तैरता है और इसे कवर करता है।

मैंने बहिष्करण रास्तों पर थोड़ा सा पढ़ा था जो इसे लागू करने का एक तरीका प्रतीत होता है। हालाँकि, मैं पूरी तरह से छवि की स्थिति नहीं चाहता - इसके बजाय, यह पाठ के साथ प्रवाह करना चाहिए ( <span>एचटीएमएल में कैसे व्यवहार किया जाता है)।


कुछ जवाबों में NSTextAttachment और NSTextField पर छवि गुणों का उपयोग करने का उल्लेख है, लेकिन मैं यह उल्लेख करना चाहता हूं कि मुझे एक समाधान की आवश्यकता है जो मुझे एक UIView संलग्न करने की अनुमति देता है।
एंडी हिन

5
कमाल है कि मैंने आज सुबह ही WWE नेटवर्क के माध्यम से रॉयल रंबल 2011 (जहां आपकी छवि को हड़पा गया था) को देखा था और आज मैं इस सवाल पर हो रहा हूं।
bpapa

अरे, क्या आपको TextAttachment से जुड़े कुछ वर्किंग कोड का उदाहरण मिला है?
फतहोकू

जवाबों:


180

आपको एक जिम्मेदार स्ट्रिंग का उपयोग करना होगा और उदाहरण के रूप में चित्र जोड़ना होगा NSTextAttachment:

NSMutableAttributedString *attributedString = [[NSMutableAttributedString alloc] initWithString:@"like after"];

NSTextAttachment *textAttachment = [[NSTextAttachment alloc] init];
textAttachment.image = [UIImage imageNamed:@"whatever.png"];

NSAttributedString *attrStringWithImage = [NSAttributedString attributedStringWithAttachment:textAttachment];

[attributedString replaceCharactersInRange:NSMakeRange(4, 1) withAttributedString:attrStringWithImage];

4
मुझे लगता है कि यह अब तक का सबसे करीबी जवाब है। क्या इस तकनीक का उपयोग UIImage के बजाय UIImage के साथ करना संभव है?
एंडी हिन

4
UITextView में परिणामी स्ट्रिंग का उपयोग करते समय यह छवियों को प्रदर्शित नहीं कर रहा है
DeepK SOreadytohelp

6
मैं NSTextAttachment का आकार कैसे बदलूं?
jsetting32

2
@bilobatum, मैं एक से अधिक छवियों को टेक्स्टव्यू में जोड़ना चाहता हूं। तो मैं कैसे जोड़ सकते हैं?
डिकेन शाह

3
`[एट्रिक्टेडस्ट्रिंग इन्सर्टअटैग्डडेडस्ट्रिंग: टेक्स्टअटैचमेंट एटइंडेक्स: 4]` इससे बेहतर हैreplaceCharactersInRange
डॉनटॉन्ग

26

@ बिलोबाटम का कोड जरूरत के हिसाब से स्विफ्ट में बदल गया:

let attributedString = NSMutableAttributedString(string: "like after")

let textAttachment = NSTextAttachment()

textAttachment.image = UIImage(named: "whatever.png")

let attrStringWithImage = NSAttributedString(attachment: textAttachment)

attributedString.replaceCharacters(in: NSMakeRange(4, 1), with: attrStringWithImage)

20

आप NSAttributedString और NSTextAttachment का उपयोग करके देख सकते हैं। छवि को आकार देने के लिए NSTextAttachment को अनुकूलित करने के बारे में अधिक जानकारी के लिए निम्नलिखित लिंक पर एक नज़र डालें। http://ossh.com.au/design-and-technology/software-development/implementing-rich-text-with-images-on-os-x-and-ios/

मेरे उदाहरण में, मैं चौड़ाई को फिट करने के लिए छवि का आकार बदलता हूं, आपके मामले में आप रेखा की ऊंचाई से मेल खाने के लिए छवि का आकार बदलना चाह सकते हैं।


मुझे लगता है कि यह अब तक का सबसे करीबी जवाब है। क्या इस तकनीक का उपयोग UIImage के बजाय UIImage के साथ करना संभव है?
एंडी हिन

आप अपने स्वयं के कस्टम वर्गों पर कुछ बड़े काम करने में सक्षम हो सकते हैं। NSTextAttachment में एक डिफ़ॉल्ट छवि विशेषता होती है और अनुलग्नक को NSAttributedString के भाग के रूप में संग्रहीत किया जाता है। आप शायद अपने खुद के उपवर्ग बना सकते हैं और जो चाहें स्टोर कर सकते हैं। मुझे लगता है कि प्रदर्शन एक छवि प्रदर्शित करने के लिए सीमित है, इसलिए सुनिश्चित नहीं है कि एक यूआईईवीवाई उपयोगी होगा। जैसा कि मुझे याद है कि लेआउटमैन एक छवि की अपेक्षा करता है।
डंकन ग्रोनेवल्ड

1
@AndyHin मैंने इसे स्वयं परीक्षण नहीं किया है, लेकिन एक विकल्प संभवत: आपके रेंडर UIViewकरने के लिए है UIImageऔर फिर इसे ए के रूप में जोड़ें NSTextAttachment। किसी छवि को देखने के लिए इस प्रश्न को प्रस्तुत करने के लिए: http://stackoverflow.com/questions/4334233/how-to-capture-uiview-to-uiimage-without-loss-of-quality-on-retina- प्रदर्शन; lq = 1
माइकल गेलॉर्ड

इसके साथ कोई नया घटनाक्रम?
फतहोकू

5

@ बिलोबाटम के उत्तर पर विस्तार करना , और एक अन्य प्रश्न से इस श्रेणी का उपयोग करना । मैंने इसे पकाया:

उपयोग:

UILabel *labelWithImage = [UILabel new];
labelWithImage.text = @"Tap [new-button] to make a new thing!";
NSAttributedString *stringWithImage = [labelWithImage.attributedText attributedStringByReplacingOccurancesOfString:@"[new-button]" withImage:[UIImage imageNamed:@"MyNewThingButtonImage"] scale:0];
labelWithImage.attributedText = stringWithImage;

कार्यान्वयन:

@interface NSMutableAttributedString (InlineImage)

- (void)replaceCharactersInRange:(NSRange)range withInlineImage:(UIImage *)inlineImage scale:(CGFloat)inlineImageScale;

@end

@interface NSAttributedString (InlineImages)

- (NSAttributedString *)attributedStringByReplacingOccurancesOfString:(NSString *)string withInlineImage:(UIImage *)inlineImage scale:(CGFloat)inlineImageScale;

@end

@implementation NSMutableAttributedString (InlineImages)

- (void)replaceCharactersInRange:(NSRange)range withInlineImage:(UIImage *)inlineImage scale:(CGFloat)inlineImageScale {

    if (floorf(inlineImageScale) == 0)
        inlineImageScale = 1.0f;

    // Create resized, tinted image matching font size and (text) color
    UIImage *imageMatchingFont = [inlineImage imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
    {
        // Font size
        NSDictionary *attributesForRange = [self attributesAtIndex:range.location effectiveRange:nil];
        UIFont *fontForRange = [attributesForRange valueForKey:NSFontAttributeName];
        CGSize imageSizeMatchingFontSize = CGSizeMake(inlineImage.size.width * (fontForRange.capHeight / inlineImage.size.height), fontForRange.capHeight);

        // Some scaling for prettiness
        CGFloat defaultScale = 1.4f;
        imageSizeMatchingFontSize = CGSizeMake(imageSizeMatchingFontSize.width * defaultScale,     imageSizeMatchingFontSize.height * defaultScale);
        imageSizeMatchingFontSize = CGSizeMake(imageSizeMatchingFontSize.width * inlineImageScale, imageSizeMatchingFontSize.height * inlineImageScale);
        imageSizeMatchingFontSize = CGSizeMake(ceilf(imageSizeMatchingFontSize.width), ceilf(imageSizeMatchingFontSize.height));

        // Text color
        UIColor *textColorForRange = [attributesForRange valueForKey:NSForegroundColorAttributeName];

        // Make the matching image
        UIGraphicsBeginImageContextWithOptions(imageSizeMatchingFontSize, NO, 0.0f);
        [textColorForRange set];
        [inlineImage drawInRect:CGRectMake(0 , 0, imageSizeMatchingFontSize.width, imageSizeMatchingFontSize.height)];
        imageMatchingFont = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();
    }

    // Text attachment with image
    NSTextAttachment *textAttachment = [NSTextAttachment new];
    textAttachment.image = imageMatchingFont;
    NSAttributedString *imageString = [NSAttributedString attributedStringWithAttachment:textAttachment];

    [self replaceCharactersInRange:range withAttributedString:imageString];
}

@end

@implementation NSAttributedString (InlineImages)

- (NSAttributedString *)attributedStringByReplacingOccurancesOfString:(NSString *)string withInlineImage:(UIImage *)inlineImage scale:(CGFloat)inlineImageScale {

    NSMutableAttributedString *attributedStringWithImages = [self mutableCopy];

    [attributedStringWithImages.string enumerateOccurancesOfString:string usingBlock:^(NSRange substringRange, BOOL *stop) {
        [attributedStringWithImages replaceCharactersInRange:substringRange withInlineImage:inlineImage scale:inlineImageScale];

    }];

    return [attributedStringWithImages copy];
}

@end

लाइन UIFont *fontForRange = [attributesForRange valueForKey:NSFontAttributeName];को बदलना UIFont *fontForRange = [attributesForRange valueForKey:NSFontAttributeName] ?: [UIFont fontWithName:@"HelveticaNeue" size:12.0];बेहतर होना चाहिए, क्योंकि [विशेषताएँForRange valueForKey: NSFontAttributeName] शून्य हो सकता है अगर यह शब्दकोश में सेट नहीं किया गया था
विक्टर क्वाक

5

सरल उदाहरण में समस्या समाधान है यहां छवि विवरण दर्ज करें

let attachment = NSTextAttachment()
attachment.image = UIImage(named: "qrcode")

let iconString = NSAttributedString(attachment: attachment)
let firstString = NSMutableAttributedString(string: "scan the ")
let secondString = NSAttributedString(string: "QR code received on your phone.")

firstString.append(iconString)
firstString.append(secondString)

self.textLabel.attributedText = firstString
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.