"New" Ribbon Tutorial?

Discussion in 'iOS Programming' started by loon3y, Dec 5, 2012.

  1. loon3y macrumors 65816


    Oct 21, 2011
    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.
  2. robbieduncan Moderator emeritus


    Jul 24, 2002
  3. jnoxx macrumors 65816


    Dec 29, 2010
    Aartselaar // Antwerp // Belgium
    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 :p
  4. loon3y thread starter macrumors 65816


    Oct 21, 2011

    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?
  5. Reason077 macrumors 68020


    Aug 14, 2007
    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!
  6. Duncan C, Dec 5, 2012
    Last edited: Dec 5, 2012

    Duncan C macrumors 6502a

    Duncan C

    Jan 21, 2008
    Northern Virginia
    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.
  7. loon3y thread starter macrumors 65816


    Oct 21, 2011
    thanks to all, thanks duncan.

    will try these methods

Share This Page