how to make a view to look like the newsstand bookshelf - iphone

Question

I want to build a view to be look like the bookshelf in NewsStand application ...
is here any ready made open source project that does this job or similar view ?
EDIT: newsstand :

Answer 1

AQGridView with a pattern UIImage of a single book shelf. The example is a springboard, so a modification of the source cell is necessary. If you'll allow me a couple minutes to find my computer, I'll gladly post source code that should help.
EDIT: Download the AQGridView source from Github and unzip the files into the directory of your choice.
Navigate to the project called ‘Image Demo’ and the other project called ‘Springboard.’ You want the springboard project. Copy EVERYTHING except his the pre-existing items in your project (so exclude the main.m and the prefix).
The important set of files is the SpringboardIconCell Class. From here, you modify the cell. This is how I layed it out:
//.h
#import <UIKit/UIKit.h>
#import "AQGridViewCell.h"
#import <Foundation/Foundation.h>
#interface SpringBoardIconCell : AQGridViewCell.
{
UIImageView * _iconView;
UILabel * _title;
UILabel * _titleTwo;
}
#property (nonatomic, retain) UIImage * icon;
#property (nonatomic, copy) NSString * title;
#property (nonatomic, retain) NSString * titleTwo;
//.m
#import "SpringBoardIconCell.h"
#import <QuartzCore/QuartzCore.h>
#implementation SpringBoardIconCell
- (id) initWithFrame: (CGRect) frame reuseIdentifier:(NSString *) reuseIdentifier
{
self = [super initWithFrame: frame reuseIdentifier: reuseIdentifier];
if ( self == nil )
return ( nil );
UIBezierPath * path = [UIBezierPath bezierPathWithRoundedRect: CGRectMake(0.0, 0.0, 155.0, 250.0)
cornerRadius: 18.0];
_iconView = [[UIImageView alloc] initWithFrame: CGRectMake(0.0, 0.0, 155.0, 250.0)];
_iconView.backgroundColor = [UIColor clearColor];
_iconView.opaque = NO;
_iconView.layer.shadowPath = path.CGPath;
_iconView.layer.shadowRadius = 0.0;
_iconView.layer.shadowOpacity = 0.0;
_iconView.layer.shadowOffset = CGSizeMake( 20.0, 20.0 );
_title = [[UILabel alloc] initWithFrame: CGRectZero];
_title.highlightedTextColor = [UIColor blackColor];
_title.font = [UIFont boldSystemFontOfSize: 12.0];
_title.adjustsFontSizeToFitWidth = YES;
_title.minimumFontSize = 12.0;
_title.backgroundColor = [UIColor clearColor];
_title.textColor = [UIColor whiteColor];
_title.textAlignment = UITextAlignmentCenter;
_title.numberOfLines = 1;
_titleTwo = [[UILabel alloc] initWithFrame: CGRectZero];
_titleTwo.highlightedTextColor = [UIColor blackColor];
_titleTwo.font = [UIFont fontWithName:#"AmericanTypewriter" size:20];
_titleTwo.adjustsFontSizeToFitWidth = YES;
_titleTwo.minimumFontSize = 18.0;
_titleTwo.backgroundColor = [UIColor clearColor];
_titleTwo.textColor = [UIColor blackColor];
_titleTwo.textAlignment = UITextAlignmentRight;
_titleTwo.numberOfLines = 4;
[self.contentView addSubview: _iconView];
[_iconView addSubview: _title];
[self.contentView addSubview:_titleTwo];
[self.contentView bringSubviewToFront:_titleTwo];
self.contentView.backgroundColor = [UIColor clearColor];
self.backgroundColor = [UIColor clearColor];
self.contentView.opaque = NO;
self.opaque = NO;
self.selectionStyle = AQGridViewCellSelectionStyleNone;
return ( self );
}
- (void) dealloc
{
[_title release];
[_iconView release];
[super dealloc];
}
- (UIImage *) icon
{
return ( _iconView.image );
}
- (void) setIcon: (UIImage *) anIcon
{
_iconView.image = anIcon;
[self setNeedsLayout];
}
- (CALayer *) glowSelectionLayer
{
return ( _iconView.layer );
}
- (NSString *) title
{
return ( _title.text );
}
- (NSString*)titleTwo {
return (_titleTwo.text);
}
- (void) setTitle: (NSString *) title
{
_title.text = title;
[self setNeedsLayout];
}
-(void)setTitleTwo:(NSString *)titleTwo {
_titleTwo.text = titleTwo;
[self setNeedsLayout];
}
- (void) layoutSubviews
{
[super layoutSubviews];
[_titleTwo setFrame:CGRectMake(self.contentView.frame.origin.x + 45, 10, 135, 100.0f)];
CGSize imageSize = _iconView.image.size;
CGRect bounds = CGRectInset( self.contentView.bounds, 10.0, 10.0 );
[_title sizeToFit];
CGRect frame = _title.frame;
frame.size.width = 155.0;
frame.origin.y = CGRectGetMaxY(bounds) - frame.size.height;
frame.origin.x = 0;
_title.frame = frame;
// adjust the frame down for the image layout calculation
bounds.size.height = frame.origin.y - bounds.origin.y;
if ( (imageSize.width <= bounds.size.width) &&
(imageSize.height <= bounds.size.height) )
{
return;
}
// scale it down to fit
CGFloat hRatio = bounds.size.width / imageSize.width;
CGFloat vRatio = bounds.size.height / imageSize.height;
CGFloat ratio = MIN(hRatio, vRatio);
[_iconView sizeToFit];
frame = _iconView.frame;
frame.size.width = floorf(imageSize.width * ratio);
frame.size.height = floorf(imageSize.height * ratio);
frame.origin.x = floorf((bounds.size.width - frame.size.width) * 0.5);
frame.origin.y = floorf((bounds.size.height - frame.size.height) * 0.5);
_iconView.frame = frame;
}
#end
Now go into your main view or wherever this bookshelf will be. You need to adopt the AQGridView delegate and datasource
<AQGridViewDelegate, AQGridViewDataSource>
Then the delegate methods
- (NSUInteger) numberOfItemsInGridView: (AQGridView *) gridView
{
return (_array.count);
}
- (AQGridViewCell *) gridView: (AQGridView *) gridView cellForItemAtIndex: (NSUInteger) index
{
static NSString * EmptyIdentifier = #"EmptyIdentifier";
static NSString * CellIdentifier = #"CellIdentifier";
if ( index == _emptyCellIndex )
{
NSLog( #"Loading empty cell at index %u", index );
AQGridViewCell * hiddenCell = [gridView dequeueReusableCellWithIdentifier: EmptyIdentifier];
if ( hiddenCell == nil )
{
// must be the SAME SIZE AS THE OTHERS
// Yes, this is probably a bug. Sigh. Look at -[AQGridView fixCellsFromAnimation] to fix
hiddenCell = [[[AQGridViewCell alloc] initWithFrame: CGRectMake(0.0, 0.0, 155.0, 250.0)
reuseIdentifier: EmptyIdentifier] autorelease];
}
hiddenCell.hidden = YES;
return ( hiddenCell );
}
SpringBoardIconCell * cell = (SpringBoardIconCell *)[gridView dequeueReusableCellWithIdentifier: CellIdentifier];
if ( cell == nil )
{
cell = [[[SpringBoardIconCell alloc] initWithFrame: CGRectMake(0.0, 0.0, 250.0, 250.0) reuseIdentifier: CellIdentifier] autorelease];
}
UIImage * image = [UIImage imageNamed:#"Image.png"];
cell.icon = image;
return ( cell );
}
- (CGSize) portraitGridCellSizeForGridView: (AQGridView *) gridView
{
return ( CGSizeMake(250.0, 250.0) );
}
But when all is said and done, you want a bookshelf, so get a bookshelf image off of the internet. Then, crop it down so only ONE level of the shelf is showing. In AQGridview, the background with a pattern image will work perfectly, so in viewDidLoad, add in:
_gridView.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:#"PatternImage.png"]];
The results produce a 250 X 250 cell with a cell title view, and a bottom title view. The icon for the cell, however, are the golden mean numbers of 155 X 250.

Answer 2

I don't know of any open source project, but you could use a background image for the newsstand frame itself. Then above that you may place a UIScrollView with a 'shelves' background image. From there I suppose you could add the individual news items as UIButtons or as part of a table view.

Answer 3

For this you can keep tableview where your Newstand title and button will go in header view and each cell will contain a book. Book will be a UIButton and u have to set a single rack image as a background for cell. Creating a custom cell will be beneficial. I dont prefer scroll view since there you need to manage the co-ordinates of each book and if you keep background as single image containing many racks then it will look like your books are floating across the racks.
https://github.com/AlanQuatermain/AQGridView
Try this one if u like. I took the logic from this and implemented my own grid.

Answer 4

UITable/ScrollView with pre-rendered bookshelf background?

Answer 5

Just use a picture of a bookshelf in the background.

Answer 6

Just use UIView (with background like bookshelf) and UITable (use custom (modify) cell for with shelf image). You don't need to use any ready made its very simple to build from scratch.