模仿AppStore首页拖拽效果

2015-08-14 20_58_54.gif

效果代码分析

• 一、创建StoryBoard视图结构

  
  
  

  Snip20150814_4.png

Snip20150814_1.png

目大多是应用在拥有导航控制器下)

• 2.首先将一个UITableView拖拽到StoryBoard中并设置约束填充整个StoryBoard

• 3.创建一个UIView添加到UITableView上并为这个view添加约束，保持view相对于导航控制器底部约束为0

• 二、代码实现

• 1.创建一个HJScrollView继承自UIView并添加一个images用来设置显示内容

@interface HJScrollView : UIView
// 添加一个images属性，让控制器控制HJScrollView显示内容
@property (nonatomic, strong) NSArray *images;
@end

• 2.在HJScrollView.m文件中重写images的set方法

 - (void)setImages:(NSArray *)images
{
    _images = images;
    // 获取屏幕宽度
    CGFloat width = [UIScreen mainScreen].bounds.size.width;
    CGFloat heigth = self.frame.size.height;
    NSUInteger count = images.count;
    for (int i = 0; i < images.count; i++) {
        UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(width * i, 0, width, heigth)];
        imageView.image = [UIImage imageNamed:images[i]];
        [self.scrollView addSubview:imageView];
    }
    // 允许分页
    self.scrollView.pagingEnabled = YES;
    self.scrollView.contentSize = CGSizeMake(count * width, 0);
}

• 3.显示数据

    // 自定义的scrollview高度（150是头部视图高度）
    const CGFloat kScrollHeigth = 150;

    @interface ViewController () 

    /** 纪录最原始的偏移量 */
    @property (nonatomic, assign) CGFloat orginalOffsetY;

    @property (weak, nonatomic) IBOutlet HJScrollView *scrollView;
    @property (weak, nonatomic) IBOutlet UITableView *tableView;
    @property (weak, nonatomic) IBOutlet NSLayoutConstraint *scrollTopCons;

    @end

    @implementation ViewController

    - (void)viewDidLoad {
        [super viewDidLoad];
        
        [self setUpScrollView];
        
        // tableview相对于原点的偏移量 = 为视图高度+导航栏高度(64为导航控制器高度)
        self.orginalOffsetY = - (kScrollHeigth + 64);
        
        // 使用内边距将tableView默认top设置在HJScrollView下
        self.tableView.contentInset = UIEdgeInsetsMake(kScrollHeigth + 64, 0, 0, 0);
        
        // 取消ios7以后为scrollview添加的额外滚动区域
        self.automaticallyAdjustsScrollViewInsets = NO;
        
        // 设置tableview的代理
        self.tableView.delegate = self;
        
        // 设置tableview数据源代理
        self.tableView.dataSource = self;
    }

    // 初始化scrollview数据
    - (void)setUpScrollView
    {
        NSArray *arrays = @[@"ad_00", @"ad_01", @"ad_02", @"ad_03", @"ad_04"];
        self.scrollView.images = arrays;
    }

• 4.设置代理，使用代理监听Tableview滚动

 -  (void)scrollViewDidScroll:(UIScrollView *)scrollView
    {
        // 获取当前的偏移量
        CGFloat currentOffsetY = scrollView.contentOffset.y;
        
        // 获取滑动的偏移量和原始偏移量之差
        CGFloat delta = currentOffsetY - self.orginalOffsetY;
        
        // 如果已经滑动到原始位置，当手指向下滑动时，保持头部视图不变
        if (delta <= 0) {
            delta = 0;
        }
        
        // 当手纸向上滑动时，让视图的头部约束为负数，这样就可以将头部视图往上推
        self.scrollTopCons.constant = -delta;
    }

参考文档及代码分享

• 啊崢老师的【一分钟搭建个人详情界面】 |那些人追的干货
• 代码分享：https://github.com/xiaofeixia9/Appstore-Simulate