2011-12-29 2 views
1

NewsStand 응용 프로그램에서 책꽂이처럼 보이도록보기를 만들고 싶습니다 ... 이 작업이나 이와 비슷한 시각을 수행하는 준비된 오픈 소스 프로젝트가 있습니까?뉴스 스탠드 책장처럼 보이게 만드는 방법

편집 : 신문 가판대 :

enter image description here

+1

뉴스 스탠드는 ios5의 apple 's newsstand 앱입니다. – JAHelia

+1

위의 편집을보세요. – JAHelia

+1

: D 당신은 특별한 것을 얻었습니다. 고맙습니다. – JAHelia

답변

9

AQGridView 단일 책장의 UIImage 패턴. 이 예제는 스프링 보드이기 때문에 소스 셀을 수정해야합니다. 컴퓨터를 찾는 데 몇 분이 걸리는 경우 도움이 될만한 소스 코드를 기꺼이 게시 할 것입니다.

편집 : Github에서 AQGridView 소스를 다운로드하고 파일을 원하는 디렉토리에 압축을 풉니 다.

'이미지 데모'라는 프로젝트와 '스프링 보드'라는 다른 프로젝트로 이동합니다. 스프링 보드 프로젝트가 필요합니다. 프로젝트의 기존 항목을 제외하고 모든 것을 복사하십시오 (그래서 main.m과 접두사는 제외하십시오).

중요한 파일 집합은 SpringboardIconCell 클래스입니다. 여기에서 셀을 수정합니다. 이것은 내가 그것을 밖으로 누워 방법은 다음과 같습니다

#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 

//.h

은 이제 기본보기 또는 어디든지이 책장이 될 것입니다로 이동합니다. 그런 다음 대리자 메서드
- (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 위임 및 데이터 소스

<AQGridViewDelegate, AQGridViewDataSource> 

을 채택, 그래서 인터넷의 떨어져 책장 이미지를 얻을 필요가있다. 그런 다음 자르면 서랍의 한 단계 만 표시됩니다.에 추가 viewDidLoad에 너무 AQGridview에서 패턴 이미지와 배경이 완벽하게 작동합니다

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

결과는 셀 제목보기 250 X 250 셀 및 바닥 제목보기를 생산하고 있습니다. 그러나 셀 아이콘은 155 X 250의 황금 평균입니다.

+0

ok ... CodaFi .. 시간을내어 ... 나는 당신을 기다리고 있습니다. – JAHelia

+0

죄송합니다. 너무 오래 걸립니다. 거의 완료되었습니다. – CodaFi

+0

굉장한 CodaFi ... 이것은 정말로 멋진 대답입니다 ... 어쨌든, 저는 연습에서 각 라인을 훑어 볼 것입니다. 그리고 어떤 질문이 있으면 저는 여러분의 대답에 대해 여기에 의견을 말할 것입니다 ... 정말로 당신의 대답에 감사 드리며 오랫동안 유감스럽게 생각하지 않아도된다 :) – JAHelia

3

내가 어떤 오픈 소스 프로젝트의 모르겠지만, 당신은 뉴스 스탠드 프레임 자체에 대한 배경 이미지를 사용할 수 있습니다. 그런 다음 위에 '선반'배경 이미지가있는 UIScrollView를 배치 할 수 있습니다. 거기에서 UIButtons 또는 테이블 뷰의 일부로 개별 뉴스 항목을 추가 할 수 있다고 가정합니다.

1

사전 렌더링 된 책꽂이 배경이있는 UITable/ScrollView?

0

배경에서 책꽂이 사진을 사용하기 만하면됩니다.

2

이것을 위해 당신은 당신의 뉴스 스탠드와 버튼이 헤더보기에 들어가고 각 셀에 책이 들어있는 테이블 뷰를 유지할 수 있습니다. 책은 UIButton이 될 것이고 하나의 랙 이미지를 셀의 배경으로 설정해야합니다. 사용자 지정 셀을 만드는 것이 유용 할 것입니다. 나는 각 책의 좌표를 관리해야하기 때문에 스크롤보기를 선호하지 않으며 여러 랙을 포함하는 단일 이미지로 배경을 유지하면 책이 랙에 떠있는 것처럼 보입니다. U이 좋아하면

https://github.com/AlanQuatermain/AQGridView

이 하나를 시도하십시오. 나는이 논리를 가져 와서 내 자신의 그리드를 구현했습니다.

0

UIView (책꽂이와 같은 배경 사용) 및 UITable (선반 이미지가있는 경우 사용자 정의 (수정) 셀 사용)을 사용하십시오. 준비가되어있는 것을 사용하지 않아도 처음부터 다시 작성할 수 있습니다.

관련 문제