Blue Unread message Dot

Discussion in 'iOS Programming' started by Mr. Chestnut, Feb 20, 2016.

  1. Mr. Chestnut macrumors newbie

    Mr. Chestnut

    Joined:
    Feb 20, 2016
    #1
    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!
     
  2. Dookieman macrumors 6502

    Joined:
    Oct 12, 2009
    #2
    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)
    Code:
    if (self.model.unread isEqual:@YES) {
       self.blueDotImageView = [UIImage imageNamed:@"blueDot.png"];
    } else {
       self.blueDotImageView = nil;
    }
     
  3. AxoNeuron, Feb 21, 2016
    Last edited: Feb 21, 2016

    AxoNeuron macrumors 65816

    AxoNeuron

    Joined:
    Apr 22, 2012
    Location:
    The Left Coast
    #3
    Im nof sure if this is what you were looking for, but to create the actual dot, do the following:

    Code:
    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.
     
  4. Mr. Chestnut thread starter macrumors newbie

    Mr. Chestnut

    Joined:
    Feb 20, 2016
    #4
    Why exactly wouldn't this code work?
     
  5. Dookieman macrumors 6502

    Joined:
    Oct 12, 2009
    #5
    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.
     
  6. AxoNeuron macrumors 65816

    AxoNeuron

    Joined:
    Apr 22, 2012
    Location:
    The Left Coast
    #6
    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.
     

Share This Page