【问题标题】:UIScrollView/UITableView layering effect like in PathUIScrollView/UITableView 分层效果就像在 Path
【发布时间】:2012-10-18 05:13:35
【问题描述】:

iOS 应用程序 Path 有这个非常酷的分层滚动视图/表格视图组合,我正在尝试弄清楚它是如何工作的。 . .

如果你还没有看到它,有一个图像位于 UITableView 后面,这样当你滚动 tableview 时,背景图像也会滚动,但速度不同。

不确定它们是如何实现这种效果的,但我认为这可能是通过将两个 UIScrollView 层叠在另一个之上并弄乱偏移量/标题。

有没有人遇到过这种效果,如果有的话,有没有人对如何实现它有任何想法?我目前在允许触摸同时滚动两个滚动视图时遇到问题。

谢谢!

【问题讨论】:

    标签: ios uitableview uiscrollview


    【解决方案1】:

    听起来像是一种简单的视差效果。你是一个正确的轨道(或一个正确的轨道,有多种方法可以做到这一点)。

    实现我认为您所要求的最简单的方法是在表格视图后面的滚动视图,它的内容大小与图像背景的高度相同。将您的图像放在此滚动视图中。

    然后,实现 scrollviewdidscroll 方法并检测表格视图何时滚动。使用该信息设置背景图像滚动视图的滚动偏移量。例如,无论您的表格视图滚动的偏移百分比是多少,都将背景滚动设置为相同的百分比。

    或者,如果您不想使用第二个滚动视图,您可以使用百分比偏移量在背景中向上或向下移动 uiimageview。

    再一次,有很多方法可以实现背景移动,我列出了两种简单的方法,但请记住,如果你的图像很大,你需要将它分解成一些更小的部分,或者使用uiscrollview 方法并加载图块。

    /大脑转储。

    【讨论】:

    • 感谢您让我走上正轨!我目前正在将背景图像视图的原点设置为表格视图内容偏移量的函数。似乎越来越近了。 . .随着我越来越近,将更新答案。谢谢!
    【解决方案2】:

    我使用表格视图实现了滚动效果,该表格视图的标题为UIView,高度为 100 像素,背景颜色清晰。在viewDidLoad 中,我正在创建一个与表视图的标题视图(100 像素)具有相同高度的UIImageView,然后创建一个 UIView,我们将其用作表视图的 backgroundView 并在顶部添加 UIImageView其中。在scrollViewDidScroll 委托方法中,根据滚动视图contentOffset.y 的值缩放UIImageView 的框架。

    static CGRect headerImgFrame = {{.0, .0}, {320.0, 100.0}};
    
    ...
    
    - (void)viewDidLoad {
        [super viewDidLoad];
    
        // Do any additional setup after loading the view from its nib.
        _headerImgView = [[UIImageView alloc] initWithFrame: headerImgFrame];
        _headerImgView.image = [UIImage imageNamed: @"test.png"];
        _headerImgView.contentMode = UIViewContentModeCenter;
        _headerImgView.autoresizingMask = UIViewAutoresizingNone;
        _headerImgView.layer.masksToBounds = YES;
    
        UIView *bgView = [[UIView alloc] init];
        bgView.backgroundColor = [UIColor whiteColor];
    
        tableView.backgroundView = bgView;
        [bgView release];
    
        [tableView.backgroundView addSubview: _headerImgView];
        [_headerImgView release];
    }
    
    - (void)scrollViewDidScroll: (UIScrollView *)scrollView {
        CGRect newFrame = CGRectMake(headerImgFrame.origin.x, headerImgFrame.origin.y,
                                     headerImgFrame.size.width, headerImgFrame.size.height - scrollView.contentOffset.y);
    
        _headerImgView.frame = newFrame;    
    }
    

    【讨论】:

    • 我认为您需要将 headerImgFrame.origin.y 更改为 headerImgFrame.origin.y + scrollView.contentOffset.y 以使图像视图保持在顶部。
    猜你喜欢
    • 1970-01-01
    • 2020-03-15
    • 1970-01-01
    • 1970-01-01
    • 2012-03-02
    • 2016-08-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多