iOS Blue Unread message Dot

[Mr. Chestnut]

Hi,

I'm new to swift and iOS app making, and right now I'm working on a messaging app for a school project.
Currently, I'm having trouble creating the blue unread message dot that appears next to someones name in Messages app. I have an image of the dot, but what i have to code to make it appear every time a new message pops up?

Thanks!

 

[Dookieman]

Hi,

I'm new to swift and iOS app making, and right now I'm working on a messaging app for a school project.
Currently, I'm having trouble creating the blue unread message dot that appears next to someones name in Messages app. I have an image of the dot, but what i have to code to make it appear every time a new message pops up?

Thanks!

You need to have someway of knowing the message is "Unread". I would probably use a property in the model that would hold that value.

Something like: (Not actual code)

if (self.model.unread isEqual:@YES) {
   self.blueDotImageView = [UIImage imageNamed:@"blueDot.png"];
} else {
   self.blueDotImageView = nil;
}

 

[AxoNeuron]

Im nof sure if this is what you were looking for, but to create the actual dot, do the following:

let blueDotView = UIView();
blueDotView.backgroundColor = UIColor.blueColor();
blueDotView.frame = (your frame here, make width = height)
blueDotView.layer.cornerRadius = 0.5 * blueDotView.frame.size.height;
blueDotView.clipsToBounds = true;
containerView.addSubview (blueDotView);

Personally, the idea of using an actual image file as a UI element, with a resolution and everything, seems icky to me so I prefer to create view elements in code whenever possible (though using SVG or some other vector graphics is probably ideal, I find UIViews much easier to work with when making simple shapes like circles). You can even draw shapes using Core Graphics and UIBezierPath, though that rabbit hole is best left for another day.

If you are displaying the messages in a table view, I would suggest using custom table view cell views (with xibs, tutorials on youtube for this). Then when the unread property is true, set the HIDDEN property of the view to be false, and visa versa.

 

[Mr. Chestnut]

You need to have someway of knowing the message is "Unread". I would probably use a property in the model that would hold that value.

Something like: (Not actual code)

if (self.model.unread isEqual:@YES) {
   self.blueDotImageView = [UIImage imageNamed:@"blueDot.png"];
} else {
   self.blueDotImageView = nil;
}

Why exactly wouldn't this code work?

 

[Dookieman]

It could work, but you would need to make the correct data/model/objects to match that. It's also not 100% syntactically correct, I was just trying to give you an idea on how to approach the problem.

 

[AxoNeuron]

Why exactly wouldn't this code work?

Your question isn't very specific. It's like asking "how do I drive a car" or something like that. I don't think anyone here can really help you without more information on what specifically you are having trouble with.

Dookieman's code is just an example. You'd be working with UIImage objects, which encapsulate the actual blue dot image itself. You can use UIImageView to display the UIImage. Personally, I would just have the UIImageView always display the image and set the 'hidden' property to true when you want the blue dot to be hidden, but it's a matter of opinion.

If you don't have any experience in Swift you should really be looking at more basic concepts before you try and paint the Mona Lisa.