UITableView Parallax Background a la Path

最新推荐文章于 2024-06-13 14:09:53 发布

zl19870208

最新推荐文章于 2024-06-13 14:09:53 发布

阅读量83

点赞数

本文链接：https://blog.csdn.net/zl19870208/article/details/84397748

版权

本文介绍如何在UITableView中实现类似Path应用的Parallax背景效果。通过设置透明的表头视图，并在用户滚动时调整底层图片的位置来创建深度感。具体步骤包括添加偏移的背景图片、实现UIScrollViewDelegate并响应滚动事件。

摘要由CSDN通过智能技术生成

Original Link: [url]http://rowboatrevolution.com/2012/02/uitableview-parallax-background-a-la-path/[/url]

Path does a clever little parallax trick when you overscroll the main timeline view. This effect gives a nice sense of depth between the tableview and background image.

Reproducing it is quite easy, and only requires a few entry points.

The gist: give the UITableView a transparent header, through which we see the positioned background image. When the user scrolls, if the scroll offset is negative, position the underlying image accordingly.

1. Add a UIImageView behind the UITableView and offset it a bit vertically from its natural state. This gives some room for it to move vertically and still be onscreen.


- (void)viewDidLoad {
    [super viewDidLoad];

    // Create an empty table header view with small bottom border view
    UIView *tableHeaderView = [[UIView alloc] initWithFrame: CGRectMake(0.0, 0.0, self.view.frame.size.width, 180.0)];
    UIView *blackBorderView = [[UIView alloc] initWithFrame: CGRectMake(0.0, 179.0, self.view.frame.size.width, 1.0)];
    blackBorderView.backgroundColor = [UIColor colorWithRed: 0.0 green: 0.0 blue: 0.0 alpha: 0.8];
    [tableHeaderView addSubview: blackBorderView];
    [blackBorderView release];

    _tableView.tableHeaderView = tableHeaderView;
    [tableHeaderView release];

    // Create the underlying imageview and offset it
    _headerImageYOffset = -150.0;
    _headerImage = [[UIImageView alloc] initWithImage: [UIImage imageNamed: @"header-image.png"]];
    CGRect headerImageFrame = _headerImage.frame;
    headerImageFrame.origin.y = _headerImageYOffset;
    _headerImage.frame = headerImageFrame;
    [self.view insertSubview: _headerImage belowSubview: _tableView];
}

2. Hook up your controller as a UIScrollViewDelegate and implement the scrollViewDidScroll callback.
3. For each call, move the underlying image a multiple of the scroll offset.


- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    CGFloat scrollOffset = scrollView.contentOffset.y;
    CGRect headerImageFrame = _headerImage.frame;

    if (scrollOffset < 0) {
         // Adjust image proportionally
        headerImageFrame.origin.y = _headerImageYOffset - ((scrollOffset / 3));
    } else {
         // We're scrolling up, return to normal behavior
        headerImageFrame.origin.y = _headerImageYOffset - scrollOffset;
    }
    _headerImage.frame = headerImageFrame;
}

You could take this even further by having multiple images relatively offset, creating a nice multi-layer parallax.