iOS Draw Blue Unread Dots like in Messages & Mail?

[ArtOfWarfare]

I'd like to have blue unread dots on the left side of my UITableViewCells like in the built in iOS Messages and Mail apps.

What's the easiest way for me to add these dots to my own app? I see that UITableViewCell has a imageView property... should I use that? How should I draw into it? Should I use the image property (where is the file I should use? Or should I make my own?) Or should I use some CG drawing commands? Just wondering what the best way of doing this is.

 

[Duncan C]

I'd like to have blue unread dots on the left side of my UITableViewCells like in the built in iOS Messages and Mail apps.

What's the easiest way for me to add these dots to my own app? I see that UITableViewCell has a imageView property... should I use that? How should I draw into it? Should I use the image property (where is the file I should use? Or should I make my own?) Or should I use some CG drawing commands? Just wondering what the best way of doing this is.

For a tiny little blue dot like that, simply including a PNG image in your project seems easiest. Just create a blue dot in PS, transparent outside the circle, and save it as a PNG with alpha. Remember to create standard and @2x retina sizes.

I suspect that the image property on the standard cell layout would make the image too big. I'd probably create a custom cell. Try using the image property first, though, since that would be simpler. I don't know if resizing the image property of a standard cell smaller will shift everything over, but I doubt it.

 

[ArtOfWarfare]

For a tiny little blue dot like that, simply including a PNG image in your project seems easiest. Just create a blue dot in PS, transparent outside the circle, and save it as a PNG with alpha. Remember to create standard and @2x retina sizes.

I suspect that the image property on the standard cell layout would make the image too big. I'd probably create a custom cell. Try using the image property first, though, since that would be simpler. I don't know if resizing the image property of a standard cell smaller will shift everything over, but I doubt it.

I always find it bizarre how much Apple makes you do on your own with styling UITableViews... Replicating the styles in the built in apps is never anywhere near as simple as it should be.

I'm on vacation and the computer I have with me lacks all of my licenses for my typical art programs, so creating a blue dot with a transparent background is proving difficult (so much for Macs being good for the artistic... Am I the only one baffled that OS X comes with precisely nothing for drawing/painting? It's easier to write a symphony than draw a circle with a Mac out of the box...)

 

[waterskier2007]

something i whipped up in a couple seconds

http://i.imgur.com/rhboRGk.png

 

[ArtOfWarfare]

I took a screenshot of Mail with that blue dot icon, emailed it to my computer, then used crop + instant alpha in Preview to remove the white background. Next, I made a subclass of UITableViewCell that had outlets for the image and my labels and swapped out the basic prototype for a prototype with that image. When I want the image to appear/disappear, I adjust its hidden property accordingly.

It was actually pretty easy once I had the image... not having the proper software to get graphics with me sucks...

 

[KoolStar]

Why not just make it in core graphics and use a view in place of your image view. That way it is resolution independent and can be colored very easy. You could whip something like that up in seconds using PaintCode.

 

[xArtx]

It's a circle with radial gradient varying between a point and a circle
to give the illusion of a sphere (not a dot or circle).
You can move the point to fake variable light sourcing.
But I'll bet Apple just used pngs in the first place.

 

[ArtOfWarfare]

It's a circle with radial gradient varying between a point and a circle
to give the illusion of a sphere (not a dot or circle).
You can move the point to fake variable light sourcing.
But I'll bet Apple just used pngs in the first place.

I found a project on GitHub that extracted all of the pngs that are built into iOS. I skimmed through them (there are tens of thousands - it's bizarre how many animations are actually done frame by frame... The microphone that changes how lit up it is based on volume for Siri? Hundreds of pngs that are just for different volumes for that. The trash icon has dozens of pngs for its lid to come off and go back on.) anyways... I couldn't find that specific png, but I don't doubt it's there.

 

[xArtx]

I found a project on GitHub that extracted all of the pngs that are built into iOS. I skimmed through them (there are tens of thousands - it's bizarre how many animations are actually done frame by frame... The microphone that changes how lit up it is based on volume for Siri? Hundreds of pngs that are just for different volumes for that. The trash icon has dozens of pngs for its lid to come off and go back on.) anyways... I couldn't find that specific png, but I don't doubt it's there.

Not surprised at all, they've done it since the earliest iPods.
I wrote a simple program to do such a thing (and edit the images)
which worked until they started encrypting it.

The battery charge indicator frames in this image are another example...
they could have just drawn a dynamic sized green or red rectangle.

Coming to think of it, the graphics people are going to be different than the programming people,
so they'd need images to look at under a microscope so they can argue over the value of one pixel