как сделать вид похожим на газетный киоск и книжную полку - PullRequest
1 голос
/ 29 декабря 2011

Я хочу создать представление, похожее на книжную полку в NewsStand приложении ... есть ли здесь какой-нибудь готовый проект с открытым исходным кодом, который выполняет эту работу или подобное представление?

РЕДАКТИРОВАТЬ: газетный киоск:

enter image description here

Ответы [ 6 ]

9 голосов
/ 05 января 2012

AQGridView с шаблоном UIImage одной книжной полки. Примером является трамплин, поэтому необходима модификация исходной ячейки. Если вы позволите мне пару минут найти мой компьютер, я с удовольствием выложу исходный код, который должен помочь.

РЕДАКТИРОВАТЬ: Загрузите исходный код AQGridView с Github и разархивируйте файлы в каталог по вашему выбору.

Перейдите к проекту под названием «Image Demo» и к другому проекту под названием «Springboard». Вам нужен проект трамплина. Скопируйте ВСЕ, кроме его ранее существующих элементов в вашем проекте (поэтому исключите main.m и префикс).

Важным набором файлов является класс SpringboardIconCell. Отсюда вы модифицируете ячейку. Вот как я это изложил:

//.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 и источник данных

<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 добавьте:

 _gridView.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"PatternImage.png"]];

В результате получается ячейка размером 250 X 250 с видом заголовка ячейки и видом заголовка снизу. Тем не менее, значком для ячейки являются золотые средние числа 155 X 250.

3 голосов
/ 29 декабря 2011

Я не знаю ни одного проекта с открытым исходным кодом, но вы можете использовать фоновое изображение для самого кадра газетного киоска. Затем над этим вы можете разместить UIScrollView с фоновым изображением «полки». Оттуда, я полагаю, вы можете добавить отдельные новости в виде кнопок UIB или как часть представления таблицы.

2 голосов
/ 04 января 2012

Для этого вы можете сохранить таблицу, в которой заголовок и кнопка Newstand будут отображаться в виде заголовка, а каждая ячейка будет содержать книгу.Book будет UIButton, и вы должны установить изображение одной стойки в качестве фона для ячейки.Создание пользовательской ячейки будет полезным.Я не предпочитаю просмотр с прокруткой, так как там вам нужно управлять координатами каждой книги, и если вы сохраняете фон как отдельное изображение, содержащее много стоек, то будет выглядеть, как будто ваши книги плавают по стойкам.

https://github.com/AlanQuatermain/AQGridView

Попробуйте, если хотите.Я взял логику из этого и реализовал свою собственную сетку.

1 голос
/ 02 января 2012

UITable / ScrollView с предварительно отрисованным фоном книжной полки?

0 голосов
/ 04 января 2012

Просто используйте UIView (с фоном, таким как книжная полка) и UITable (используйте пользовательскую (изменить) ячейку для с изображением полки).Вам не нужно использовать любой готовый его очень просто построить с нуля.

0 голосов
/ 04 января 2012

Просто используйте изображение книжной полки на заднем плане.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...