如何使视图看起来像报摊书架 [英] how to make a view to look like the newsstand bookshelf

问题描述

我想构建一个视图，使其看起来像 NewsStand 应用程序中的书架...
在这里是任何现成的开放源代码项目，或类似视图？

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：报摊：

推荐答案

示例是跳板，因此需要修改源单元。如果你允许我几分钟找到我的电脑，我会很乐意发布应该有帮助的源代码。

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.

编辑：从Github下载AQGridView源文件并解压缩将文件放入您选择的目录。

Download the AQGridView source from Github and unzip the files into the directory of your choice.

导航到名为Image Demo的项目和名为Springboard的项目。您需要跳板项目。除了他的项目中已经存在的项目之外，复制其他所有项目（因此排除main.m和前缀）。

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).

重要的文件集是SpringboardIconCell类。从这里，您修改单元格。这是我如何做出的：

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

现在进入你的主视图或者这个书架将会。您需要采用AQGridView委托和数据源

Now go into your main view or wherever this bookshelf will be. You need to adopt the AQGridView delegate and datasource

<AQGridViewDelegate, AQGridViewDataSource>

然后委托方法

- (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) );
}

但是当所有的事情都说完后，你想要一个书架，书架图像的互联网。然后，裁剪它，只有一个水平的架子上显示。在AQGridview中，具有模式图像的背景将会正常工作，因此在viewDidLoad中添加：

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"]];

结果产生一个250 X 250的单元格，其中包含单元格标题视图和底部标题视图。但是，单元格的图标是155 X 250的黄金平均数。

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.

这篇关于如何使视图看起来像报摊书架的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！