iOS "New" Ribbon Tutorial?

[loon3y]

i was wondering if there is any info on how to make the "New" Ribbon appear inside my app:

appear on an individual grid view like here:

for now i'll use badges, but they look so outdated, i want to use ribbons because simply they look more elegant and nice, and it kind of tells the user that the app is using the newest features or what not.

 

[robbieduncan]

I don't believe you can.

 

[jnoxx]

Nope..
There is no way, but actually, there is an easy way, just get the image, or make one, and add it on your cell yourself if they are new?
Not really understand what the hard part is

 

[loon3y]

Nope..
There is no way, but actually, there is an easy way, just get the image, or make one, and add it on your cell yourself if they are new?
Not really understand what the hard part is

well the images are all pulling from a database. we're trying to automate everything.


im heading towards just flag the new items and add a badge to it saying "new" on the those grid views



is that theoretically possible? given an individual grid view is just another subview?

 

[Reason077]

im heading towards just flag the new items and add a badge to it saying "new" on the those grid views

is that theoretically possible? given an individual grid view is just another subview?

Of course it's possible. All table/grid/collectionview cells are ultimately just UIView subclasses.

Just make a .png image of a ribbon, with a transparent background, saying "NEW", or whatever you want. Load it into a UIImageView, and add this as a subview of your grid cell when the "new" flag is set. Easy!

 

[Duncan C]

Of course it's possible. All table/grid/collectionview cells are ultimately just UIView subclasses.

Just make a .png image of a ribbon, with a transparent background, saying "NEW", or whatever you want. Load it into a UIImageView, and add this as a subview of your grid cell when the "new" flag is set. Easy!

Or grab the image view's layer and set it's borderColor, borderWidth, and cornerRadius. That will draw an outline around the view in the specified color, without having to create images as PNGs. It's better if the images vary in size.

If you want the "ribbon" to be "outset" (extra space around the image on all sides before the ribbon) then you would add an extra layer to the image view that's frame is larger (calculate the frame on the new layer using CGRectInset). CALayer objects have an addSublayer: method just like UIView objects have an addSubview: method.

Something like this:

//Get the bounds of the image view's layer (in it's coordinate space)

CGRect imageRect = imageView.layer.bounds;

//"outset" the image view so the ribbon isn't directly around the image (optional)
CGRect ribbonRect = CGRectInset(imageRect, -10, -10);

//Create a new layer for the ribbon.
CALayer ribbonLayer = [CALayer layer];
ribbonLayer.frame = ribbonRect;

//Set the border to a pink color (adjust RGB values to taste)
ribbonLayer.borderColor = [[UIColor colorWithRed: 255/255.0 
  green: 36/255.0 
  blue: 107/255 
  alpha: 1.0]CGColor];

//Set the thickness of the ribbon
ribbonLayer.borderWidth = 5;

//Set the corner radius of the ribbon (drawn as a rounded rectangle. Adjust to taste)
ribbonLayer.cornerRadius = 10;

//Add the ribbon layer as a subview of the image view's layer.
[imageView.layer addSubLayer: ribbonLayer];

Disclaimer: That was off the top of my head, and may not be perfect. It's only intended to give you the rough idea.

The ribbon view will be drawn well outside the bounds of the image view, so you may need to increase the spacing around the image view to make room.

 

[loon3y]

thanks to all, thanks duncan.


will try these methods