1. 程式人生 > >IOS仿支付寶首頁滑動效果

IOS仿支付寶首頁滑動效果

專案來源翻譯大神的swift 本版為objectc版本,
大神地址:
這裡寫連結內容

一.效果圖如下:
這裡寫圖片描述

沒什麼邏輯可講述的,直接給原始碼吧:

//
//  ViewController.m
//  ZFBHome
//
//  Created by 劉xx on 2018/6/12.
//  Copyright © 2018 liuxx. All rights reserved.
//

#import "ViewController.h"
#import "HeadView.h"

#define SCREEN_HEIGHT                      [UIScreen mainScreen].bounds.size.height
#define SCREEN_WIDTH [UIScreen mainScreen].bounds.size.width @interface ViewController ()<UITableViewDelegate,UITableViewDataSource,UIScrollViewDelegate> @property (nonatomic) UIView *coverNavView; @property (nonatomic) UIView *mainNavView; @property (nonatomic) HeadView *headerView; @property
(nonatomic) UITableView *tableView; @property (nonatomic) HeadView * childView; @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; [self buildUI]; } -(void) buildUI{ self.coverNavView = [[UIView alloc] initWithFrame:CGRectMake(0, 20, SCREEN_WIDTH, 64)]; self
.coverNavView.alpha = 0; self.coverNavView.backgroundColor = [UIColor blueColor]; [self.view addSubview:self.coverNavView]; UIButton *scan_mini = [UIButton buttonWithType:UIButtonTypeCustom]; scan_mini.frame = CGRectMake(10,(64 - 35) / 2,35,35); [scan_mini setImage:[UIImage imageNamed:@"pay_mini@2x"] forState:UIControlStateNormal]; [self.coverNavView addSubview:scan_mini]; UIButton *pay_mini = [UIButton buttonWithType:UIButtonTypeCustom]; pay_mini.frame = CGRectMake(60,(64 - 35) / 2,35,35); [pay_mini setImage:[UIImage imageNamed:@"pay_mini@2x"] forState:UIControlStateNormal]; [self.coverNavView addSubview:pay_mini]; UIButton *add = [UIButton buttonWithType:UIButtonTypeCustom]; add.frame = CGRectMake(SCREEN_WIDTH - 60,(64 - 35) / 2,35,35); [add setImage:[UIImage imageNamed:@"pay_mini@2x"] forState:UIControlStateNormal]; [self.coverNavView addSubview:add]; self.mainNavView = [[UIView alloc] initWithFrame:CGRectMake(0, 20, SCREEN_WIDTH, 64)]; self.mainNavView.backgroundColor = [UIColor blueColor]; [self.view addSubview:self.mainNavView]; UISearchBar *searchBar = [[UISearchBar alloc] initWithFrame:CGRectMake(10, 8, 322, 44)]; searchBar.text = @"遊戲"; [self.mainNavView addSubview:searchBar]; UIButton *contact = [UIButton buttonWithType:UIButtonTypeCustom]; contact.frame = CGRectMake(SCREEN_WIDTH - 60,(64 - 35) / 2,35,35); [contact setImage:[UIImage imageNamed:@"home_contacts@2x"] forState:UIControlStateNormal]; [self.mainNavView addSubview:contact]; //構建導航與選單欄 self.childView = [[HeadView alloc] init]; //構建滾動列表 self.tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 84, SCREEN_WIDTH, SCREEN_HEIGHT - 84) style: UITableViewStylePlain]; self.tableView.delegate = self; self.tableView.dataSource = self; self.headerView = self.childView; self.headerView.frame = CGRectMake(0, 0, SCREEN_WIDTH, 305); [self.tableView addSubview:self.headerView]; self.tableView.tableHeaderView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, 305)]; self.tableView.scrollIndicatorInsets = UIEdgeInsetsMake(305, 0, 0, 0); [self.view addSubview:self.tableView]; } - (void)viewDidLayoutSubviews{ [super viewDidLayoutSubviews]; self.headerView.frame = CGRectMake(0, 0, SCREEN_WIDTH, 305); } - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{ return 1; } - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{ return 15; } static NSString* cellID = @"cellID"; - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{ UITableViewCell* tableViewCell = [tableView dequeueReusableCellWithIdentifier:cellID]; if (tableViewCell == nil) { tableViewCell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellID]; } tableViewCell.textLabel.text = @"test"; return tableViewCell; } //實現滾動UIScrollViewDelegate 協議 - (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{ CGFloat offsetY = scrollView.contentOffset.y; if(offsetY > 0 && offsetY < 24){ [self.tableView setContentOffset:CGPointMake(0, 0) animated:true]; } else if(offsetY >= 24 && offsetY < 95){ [self.tableView setContentOffset:CGPointMake(0, 95) animated:true]; } } - (void)scrollViewDidScroll:(UIScrollView *)scrollView{ CGFloat offsetY = scrollView.contentOffset.y; if(offsetY <= 0){ self.headerView.frame = CGRectMake(0, offsetY, SCREEN_WIDTH, 305); [self.childView changAlpha:1]; self.coverNavView.alpha = 0; self.mainNavView.alpha = 1; } else if(offsetY > 0 && offsetY < 95){ CGFloat alpha = (1 - offsetY / 95) > 0 ? (1 - offsetY / 95) : 0; [self.childView changAlpha:alpha / 3]; if(alpha > 0.9){ self.coverNavView.alpha = 0; self.mainNavView.alpha = alpha / 5; }else{ self.mainNavView.alpha = 0; self.coverNavView.alpha = 1 - alpha; if(alpha <= 0.75){ [self.childView changAlpha:0]; } } } } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; } @end

headView.h:

//
//  HeadView.h
//  ZFBHome
//
//  Created by 劉小兵 on 2018/6/12.
//  Copyright © 2018 liuxx. All rights reserved.
//  頭部檢視 主要包括 可變化導航檢視的與 網格選單檢視

#import <UIKit/UIKit.h>

@interface HeadView : UIView<UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout>

@property(nonatomic,strong) UIView* headTopView;
@property(nonatomic,strong) UICollectionView* menuView;


-(void) changAlpha:(CGFloat) alpha;

@end

headView.m

//
//  HeadView.m
//  ZFBHome
//
//  Created by 劉小兵 on 2018/6/12.
//  Copyright © 2018 liuxx. All rights reserved.
//

#import "HeadView.h"
#import "UIButton+ImgLabel.h"

#define SCREEN_HEIGHT                      [UIScreen mainScreen].bounds.size.height
#define SCREEN_WIDTH                       [UIScreen mainScreen].bounds.size.width

@implementation HeadView


-(instancetype) initWithFrame:(CGRect)frame{
    if(self = [super initWithFrame:frame]){
        [self initView];
    }
    return self;
}

-(void) initView{
    NSLog(@"26-----------");
    //構建頭部檢視容器
    self.headTopView = [[UIView alloc] initWithFrame:CGRectMake(0, 20, SCREEN_WIDTH, 95)];
    self.headTopView.backgroundColor = [UIColor cyanColor];
    [self addSubview:self.headTopView];

    UIButton* scanBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    scanBtn.frame = CGRectMake(10, 7.5, 100, 80);
    scanBtn.backgroundColor = [UIColor redColor];
    [scanBtn setImage:[UIImage imageNamed:@"home_scan@2x"] forState:UIControlStateNormal];
    [scanBtn setTitle:@"scan" forState:UIControlStateNormal];
    [scanBtn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    [scanBtn layoutButtonWithEdgeInsetsStyle:MKButtonEdgeInsetsStyleBottom imageTitleSpace:10];
    [self.headTopView addSubview:scanBtn];




    //1.初始化layout
    UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
    self.menuView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 95, SCREEN_WIDTH, 240) collectionViewLayout:layout];
    self.menuView.dataSource = self;
    self.menuView.delegate = self;
    self.menuView.backgroundColor = [UIColor whiteColor];
    [self.menuView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"collectionCell"];
    [self addSubview:self.menuView];

}

-(void) changAlpha:(CGFloat)alpha{

    self.headTopView.alpha = alpha;
}



//實現協議方法
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{


    return 1;
}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{

    return 12;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{

    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"collectionCell" forIndexPath:indexPath];
    cell.backgroundColor = [UIColor cyanColor];
    return cell;
}


- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{

    CGFloat width = (SCREEN_WIDTH - 100) / 4;
    return CGSizeMake(width, 50);
}

- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section{

    return 20;
}

- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{


    return UIEdgeInsetsMake(10, 15, 10, 15);

}





@end