Search code examples
iosobjective-cuitextviewicarouselnstextattachment

Add Carousel View inside Textview


I am adding data into TextView through sqlite database. I have around 30 to 35 images to be added in it after some Para or Line of data, which i have done through NSTextAttachment. Now what i want to do is wherever there are more that 2 images i want it to be in Carousel View and remaining data after it. Have a look at my code. I tried the different way but not getting success. Any help will be much appreciated.

NSTextAttachment *textAttachment1 = [[NSTextAttachment alloc] init];
    textAttachment1.image = [UIImage imageNamed:@"img1.png"];
    NSTextAttachment *textAttachment = [[NSTextAttachment alloc] init];
    textAttachment.image = [UIImage imageNamed:@"img2.png"];
    NSTextAttachment *textAttachment2 = [[NSTextAttachment alloc] init];
    textAttachment2.image = [UIImage imageNamed:@"img3.png"];
    NSTextAttachment *textAttachment3 = [[NSTextAttachment alloc] init];

    CGFloat oldWidth1 = textAttachment1.image.size.width;
    CGFloat oldWidth = textAttachment.image.size.width;
    CGFloat oldWidth2 = textAttachment2.image.size.width;

    CGFloat scaleFactor1 = oldWidth1 / (self.textViewResearch.frame.size.width + 70);
    CGFloat scaleFactor = oldWidth / (self.textViewResearch.frame.size.width + 70);
    CGFloat scaleFactor2 = oldWidth2 / (self.textViewResearch.frame.size.width + 70);

    textAttachment1.image = [UIImage imageWithCGImage:textAttachment1.image.CGImage scale:scaleFactor1 orientation:UIImageOrientationUp];
    textAttachment.image = [UIImage imageWithCGImage:textAttachment.image.CGImage scale:scaleFactor orientation:UIImageOrientationUp];
    textAttachment2.image = [UIImage imageWithCGImage:textAttachment2.image.CGImage scale:scaleFactor2 orientation:UIImageOrientationUp];

    NSAttributedString *attrStringWithImage1 = [NSAttributedString attributedStringWithAttachment:textAttachment1];
    NSAttributedString *attrStringWithImage = [NSAttributedString attributedStringWithAttachment:textAttachment];
    NSAttributedString *attrStringWithImage2 = [NSAttributedString attributedStringWithAttachment:textAttachment2];

    [attributedString replaceCharactersInRange:NSMakeRange(0, 0) withAttributedString:attrStringWithImage1];
    [attributedString replaceCharactersInRange:NSMakeRange(13740, 0) withAttributedString:attrStringWithImage];
    [attributedString replaceCharactersInRange:NSMakeRange(13741, 0) withAttributedString:attrStringWithImage2];

     self.textView.attributedText = attributedString;

Solution

  • If I understood you correctly, you want to place an image inside a text view and let the text flow around it. Having more than 2 images you want to have a carousel, an instance of the class iCarousel.

    Having a subview inside an instance of UITextView and letting the text float around it, is a known tasks. The easiest way seems to be to use the exclusion path of a text container like this:

    // Get the dimension of the subview
    iCarousel *subview = …; 
    UIBezierPath *subviewPath = [UIBezierPath bezierPathWithRect:subview.frame];
    
    // Somewhere you should add it 
    UITextView *textView = …; // Wherever it comes from
    [textView addSubview:subview];
    
    // Let the text flow around it
    UITextContainer *textContainer = textView.textContainer; // The text container is the region text is laid out in. 
    textContainer.exclusionPaths = [subviewPath]; // Do not lay out in this region.
    

    Of course you have to change the exclusion region, whenever the frame of the subviews change.

    A more flexible and more complex approach is to do the text layout your own. If the above approach does not work, let me know. I will add code for this.