IOS仿支付寶首頁滑動效果
阿新 • • 發佈:2019-02-19
專案來源翻譯大神的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