iOS開発-UItableViewスライド視差
2819 ワード
視差スクロールとは、多層の背景を異なる速度で移動させ、立体的な運動効果を形成することであり、Web上での応用が多く、Appでは比較的少ないが、主にUItableViewでの応用が多く、特にUItableViewCell全体の背景が画像である場合、記述内容が少なく、スライド視差が視覚効果を増強することができる.
実装も簡単です.UItableView定義:
スライド時にセルのオフセットを変更するには、次の手順に従います.
MainTable ViewCell定義:
スライド視差呼び出し方式:
実現するのは比較的に簡単で、ネット上にはいろいろなバージョンがあって、この2つの方式は最も簡単な実現です~
実装も簡単です.UItableView定義:
#pragma mark - UITablViewDataSource
-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
return 1;
}
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
return [self.dataSource count];
}
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
MainTableViewCell *mainCell=[tableView dequeueReusableCellWithIdentifier:CELLIDENTIFIER forIndexPath:indexPath];
NSString *desc=[NSString stringWithFormat:@"FlyElephant-%ld",indexPath.row];
[mainCell setBackImage:self.dataSource[indexPath.row] description:desc];
return mainCell;
}
#pragma mark - UITableViewDelegate
-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
return 150;
}
スライド時にセルのオフセットを変更するには、次の手順に従います.
#pragma mark - UIScrollViewDelegate
-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
CGPoint offset=self.tableView.contentOffset;
for (MainTableViewCell *cell in self.tableView.visibleCells) {
// 1
// [cell setImagOffset:offset tableView:self.tableView];
// 2
[cell setAdjustOffset:(cell.frame.origin.y-offset.y)];
}
}
MainTable ViewCell定義:
@interface MainTableViewCell : UITableViewCell
-(void)setBackImage:(NSString *)imageName description:(NSString *)desc;
// 1
-(void)setImagOffset:(CGPoint)contentOffset tableView:(UITableView *)tablView;
// 2
-(void)setAdjustOffset:(CGFloat)offset;
@end
スライド視差呼び出し方式:
-(void)setImagOffset:(CGPoint)contentOffset tableView:(UITableView *)tablView{
//
CGFloat cellOffset = self.frame.origin.y - contentOffset.y;
// + /tableview +
CGFloat percent = (cellOffset+self.frame.size.height)/(tablView.frame.size.height+self.frame.size.height);
// (0-1)
CGFloat extraHeight = self.frame.size.height*OFFSET_RATE;
CGRect frame=self.backImageView.frame;
frame.origin.y=extraHeight*percent;
self.backImageView.frame=frame;
}
-(void)setAdjustOffset:(CGFloat)offset{
CGRect frame = self.backImageView.frame;
frame.origin.y = (offset / 15.0);
self.backImageView.frame = frame;
}
実現するのは比較的に簡単で、ネット上にはいろいろなバージョンがあって、この2つの方式は最も簡単な実現です~