CODEWITHSUNDEEP
iosswift
kasperonline
kasperonline

Reputation: 21

Positoning a UI Image " In Between " the text of UI Label

My app takes some text data from a web server using API

The text data comes in an array of string. Basically each element is a paragraph. Some times one of the array element is "[IMAGE]" , which means I have to insert a particular image (whose link I also obtain using API) in between the previous and the next para

So for ex the array is [ "AAA" , "BBB" , "[IMAGE]" , "CCC" ]. Then the image has to be displayed in between BBB and CCC

This is where I obtain the response from web server 

let newsText = data[0]["text"] as! [String]
let images = data[0]["images"] as! [[String:Any]]

This is what I've done


for para in newsText{
                    if(para == "[IMAGE]")
                    {
                        print("Image Found")
                        let paraImageLink = images[self.imageCount]["link"] as? String
                        let paraImage = self.urlToImage(url: paraImageLink!)
                        DispatchQueue.main.async {
                            let paraImageView = UIImageView(image: paraImage)
                            paraImageView.frame = CGRect(x: 0, y: 0, width: 100, height: 200)
                            self.view.addSubview(paraImageView)
                        }
                        self.imageCount+=1
                    }
                    else{
                        DispatchQueue.main.async {
                            self.text.text?.append(contentsOf: para+"\n\n\n")
                        }

                    }

                }

Now the image is retrieved and displayed successfully , but it is displayed at the corner of the screen. Which is correct because I put X:0 , Y: 0

But my question is how would I position the image correctly to achieve what I want

This is a screenshot of my simulator , the image is on the top right corner and I want to display it between the paragraphs

screenshot 1

Everything is inside a UI Scroll View , and all the Text below the main image (not the corner one) is in a single UI label

EDIT :

I tried to use Attributed String with attachment as such 

 for para in newsText{
                    if(para == "[IMAGE]")
                    {
                        print("Image Found")
                        let paraImageLink = images[self.imageCount]["link"] as? String
                        let paraImage = self.urlToImage(url: paraImageLink!)
                        let imageAttachement = NSTextAttachment()
                        imageAttachement.image = paraImage
                        let imageString = NSAttributedString(attachment: imageAttachement)
                        DispatchQueue.main.async {

                            self.text.attributedText = imageString
                        }
                        self.imageCount+=1
                    }
                    else{
                        DispatchQueue.main.async {
                            self.text.text?.append(contentsOf: para+"\n\n")
                        }

Problem is it doesn't produce the desired result. Check this screenshot to see what it displaysscreenshot 2.

I guess it is because you can't append the UI label attributed text , if I try to do this

self.text.attributedText.append = imageString

It shows the error Value of type 'NSAttributedString?' has no member 'append'

Upvotes: 1

Views: 96

Answers (1)

Ekramul Hoque
Ekramul Hoque

Reputation: 692

You can do it using an attribute string Like this . First create emptyString varible than when you get string add it to this varible when your get image add it to as NSTextAttachmen

var text = String()

  1. When get image then create attribute attachment like :

let imageAttachment = NSTextAttachment()

2.than add your image to attachment like: imageAttachment.image = UIImage(named: paraImage)

  1. wrap your attchment like : let imageString = NSAttributedString(attachment: imageAttachment) 4.then add the textAttribute attchment to your full string like

text.append(image1String) 5. then append othre text string to your full string like this

text.append(NSAttributedString(string: "End of")) 6.then add your string to your textView like this

textView.attributedText = text

For batter understand your can see this this

Upvotes: 2

Related Questions