如何實現一個TableView同時滾動的背景？

Question

想象一下，您有一個普通的桌子視圖，其中每行是傳送帶上的物品。您將把這些項目放在表格視圖的每個單元格中，但是當您滾動時，您還希望背景圖像（傳送帶）也滾動。你怎麼能這樣做？

Answer 1

有UITableView背景透明，並添加它後面的UIScrollView與它裏面的UIImageView。爲UITableView滾動時添加一個偵聽器（因爲它是UIScrollView的子類，它具有所有相同的委託方法）。然後，當它滾動時，將它後面的UIScrollView的滾動位置設置爲以編程方式相同。

如果你想扭轉偏移值，你可以在UITableView的後面沒有第二個UIScrollView，只需要一個普通的UIIImageView即可。

Answer 2

您應該能夠通過設置表視圖的背景顏色來實現：

tableView.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"background.png"]]; 

Answer 3

我沒有嘗試過這一點，所以我不知道最好的方法是什麼，但一選項是將背景圖像作爲UIImageView添加到每個單元格，以便每個單元格都具有背景圖像的全尺寸副本。將單元格中的clipsToBounds設置爲NO，並將UIImageView的邊界設置爲負y值，該y值等於從單元格到表格頂部的偏移量。

您可能還想考慮使用UIScrollView而不是UITableView。這個UITableView本身就是一個UIScrollView，所以你可以嘗試添加你的背景圖像作爲你的UITableView的一個子視圖，但是如果這能工作，我會感到很驚訝。我猜UITableView實現不會和國外的子視圖一起玩。

**編輯**

雖然我仍然懷疑的UIScrollView可能是一個更合適的基類，用在這裏，我決定試試我上述的UIImageView伎倆。這很簡單，只要所有的UIImageView共享一個UIImage就不會消耗過多的內存。這裏是我的示例代碼：

// LadderCell.h 
#import <UIKit/UIKit.h> 

@interface LadderCell : UITableViewCell { 
    UIImageView *backgroundImageView; 
    UILabel *titleLabel; 
} 

@property (nonatomic, retain) UIImageView *backgroundImageView; 
@property (nonatomic, retain) UILabel *titleLabel; 

- (void)setIndexPath:(NSIndexPath *)indexPath; 
- (id)initWithImage:(UIImage *)theImage; 
+ (NSString *)reuseIdentifier; 
+ (CGFloat)height; 
@end 

// LadderCell.m 
#import "LadderCell.h" 

@implementation LadderCell 
@synthesize backgroundImageView, titleLabel; 

- (void)dealloc { 
    self.backgroundImageView = nil; 
    self.titleLabel = nil; 
    [super dealloc]; 
} 

- (id)initWithImage:(UIImage *)theImage { 
    if (self = [super initWithStyle:UITableViewCellStyleDefault reuseIdentifier:[LadderCell reuseIdentifier]]) { 
     self.frame = CGRectMake(0.0, 0.0, 320.0, [LadderCell height]); 
     self.clipsToBounds = YES; 
     self.backgroundImageView = [[[UIImageView alloc] initWithImage:theImage] autorelease]; 
     backgroundImageView.autoresizingMask = UIViewAutoresizingFlexibleRightMargin; 
     self.titleLabel = [[[UILabel alloc] initWithFrame:self.bounds] autorelease]; 
     titleLabel.textAlignment = UITextAlignmentCenter; 
     titleLabel.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight; 
     titleLabel.backgroundColor = [UIColor colorWithWhite:1 alpha:0]; 
     [self addSubview:backgroundImageView]; 
     [self addSubview:titleLabel]; 
    } 
    return self; 
} 

- (void)setIndexPath:(NSIndexPath *)indexPath { 
    backgroundImageView.frame = CGRectMake(0.0, 
              -(CGFloat)indexPath.row * [LadderCell height] + 100.0, 
              backgroundImageView.frame.size.width, 
              backgroundImageView.frame.size.height); 
} 

+ (NSString *)reuseIdentifier { 
    return @"LadderCell"; 
} 

+ (CGFloat)height { 
    return 30; 

} 

@end 

// TableBackgroundTestViewController.h 
#import 

@interface TableBackgroundTestViewController : UITableViewController { 
    UIImage *backgroundImage; 
} 

@property (nonatomic, retain) UIImage *backgroundImage; 

@end 

// TableBackgroundTestViewController.m 
#import "TableBackgroundTestViewController.h" 
#import "LadderCell.h" 

@implementation TableBackgroundTestViewController 
@synthesize backgroundImage; 

- (void)dealloc { 
    self.backgroundImage = nil; 
    [super dealloc]; 
} 

- (void)viewDidLoad { 
    [super viewDidLoad]; 
    self.backgroundImage = [UIImage imageNamed:@"background.png"]; 
} 

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView { 
    return 1; 
} 

- (NSInteger)tableView:(UITableView *)table numberOfRowsInSection:(NSInteger)section { 
    return 1000; 
} 

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath { 
    return [LadderCell height]; 
} 

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { 
    LadderCell *cell = (LadderCell *)[tableView dequeueReusableCellWithIdentifier:[LadderCell reuseIdentifier]]; 
    if (!cell) { 
     cell = [[[LadderCell alloc] initWithImage:self.backgroundImage] autorelease]; 
    } 
    [cell setIndexPath:indexPath]; 
    cell.titleLabel.text = [NSString stringWithFormat:@"Row %d", indexPath.row]; 
    return cell; 
} 

@end 

Answer 4

我的建議是類似於埃德馬蒂（他認爲「沒有第二個UIScrollView的」什麼）：

放置UITableView的一個簡單的UIView裏面。使單元格背景透明，以便從桌面下方的背景顯示

在UITableView的下方，放置一個具有所需背景的UIImageView。 UITableView和UIImageView現在都位於相同的封閉UIView中。

收聽UITableView的滾動事件。當檢測到滾動時，只需簡單地更改背景UIImageView位置（frame.origin.y），以便它「堅持」tableview。

您可以將背景作爲一個巨大的圖像，或者有一系列的背景，因此您可以平鋪。您可以獲得一組圖像，並在需要時從頂部/底部添加到陣列中，還可以從屏幕上移除已「滾動」的圖像以節省內存。您需要自己計算所有這些背景圖像的位置，但沒有什麼複雜的。