如何添加汽车布局视差效果 [英] How to add parallax effect in auto layout

问题描述

我使用的自动布局尺寸类。我想补充上的UITableViewCell视差效果，所以我参考。以下链接

I am using auto layout with size class. I want to add parallax effect on UITableViewCell so i ref. following links

• https://github.com/fernandospr/FSParallaxTableView


• https://github.com/jberlana/JBParallaxCell

• https://github.com/fernandospr/FSParallaxTableView
• https://github.com/jberlana/JBParallaxCell

但他们并没有使用自动布局，任何想法如何，当大小类是在和经销商的布局是用来申请ImageView的视差效果。

but they didn't use auto layout , any idea how to apply parallax effect to imageView when size class is on and auto layout is used.

推荐答案

通过自动布局其很容易在添加视差滚动视图（或实现代码如下）。

With auto layout its really easy to add parallax in scrollview (or a tableview).

的主旨在于，除了其它约束，我们添加上已经被添加到内容的单元格中的ImageView一个垂直中心约束，并在滚动我们改变所有的可见细胞的恒定谷垂直约束。 DONE！

The gist is that apart from other constraints we add a vertical centre constraint on the imageView that has been added to the cells content, and on scroll we change the constant vale of all the visible cells vertical constraint. DONE !

下面是示例code

#import <UIKit/UIKit.h>
#define kParallaxRatio 8.0

#pragma mark - Custom Cell

@interface TableViewCell : UITableViewCell
@property (nonatomic,weak) IBOutlet NSLayoutConstraint * verticalCenter;
@end

@implementation TableViewCell
@end


#pragma mark - Custom Table View Controller

@interface TableViewController : UITableViewController
@end

@implementation TableViewController

-(void)scrollViewDidScroll:(UIScrollView *)scrollView {

    NSArray * cells =  [self.tableView visibleCells];
    for (TableViewCell* cell in cells) {
        NSIndexPath * indexPathOfCell = [self.tableView indexPathForCell:cell];
        CGRect cellRect = [self.tableView rectForRowAtIndexPath:indexPathOfCell];
        cell.verticalCenter.constant = (scrollView.contentOffset.y -cellRect.origin.y)/kParallaxRatio;
    }
}

@end

约束

PS：请确保您的图像视图具有比单元格内容查看更高度的高度。我添加了一个高度约束为此，使细胞意见高度图像视图高度的3倍。

PS: Make sure your image view has more height than the cell content View height. I have added a height constraint for this that makes the image views height 3 times the cell views height.

这篇关于如何添加汽车布局视差效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！