首页 > 代码库 > ios-上拉加载更多的界面

ios-上拉加载更多的界面

想试一下上拉加载更多怎么实现开始自己的研究之旅,看了两天终于做出了界面。

之所以这么慢是因为,我不知道要将上拉出现的view放在哪,就能在scrollView拉到底部的时候被拉出来。还有就是怎么拉出来之后停在这里。网上下载例子之后研究了两天:



先说一下,在下面处理图片中橘色view的位置的时候用了kvo进行了监听;


先一个枚举 来指示目前刷新view是在哪个状态:

typedef enum {
    RefreshStateLoading = 1,//刷新状态为正在加载
    RefreshStateRelease,    //下拉完成释放之前
    RefreshStateNomal,      //原始状态
}RefreshState;


下面一个类view来描述刷新view


@interface FootView : UIView

@property (nonatomic,strong) UIActivityIndicatorView *activity;//活动指示条
@property (nonatomic,strong) UIImageView *imageView;            //箭头图片
@property (nonatomic,strong) UILabel *infolabel;                //文字指示
@property (nonatomic,assign) RefreshState refreshState;         //刷新的状态

- (void)refreshStateLoading;
- (void)refreshStateNomal;
- (void)refreshStateRelsease;

@end

#import "FootView.h"

@implementation FootView

@synthesize activity;
@synthesize imageView;
@synthesize infolabel;
@synthesize refreshState;

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        self.backgroundColor = [UIColor orangeColor];
        
        //活动指示器初始化
        activity = [[UIActivityIndicatorView alloc]initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];
        activity.frame = CGRectMake(10, 0, 50, 70);
        [self addSubview:activity];
        
        //箭头图片初始化
        imageView = [[UIImageView alloc]initWithFrame:CGRectMake(10, 10, 30, 50)];
        imageView.image = [UIImage imageNamed:@"blackArrow.png"];
        [self addSubview:imageView];
        
        //信息label初始化
        infolabel = [[UILabel alloc]initWithFrame:CGRectMake(100,0 ,100, 70)];
        infolabel.text = @"下拉刷新...";
        infolabel.font = [UIFont fontWithName:@"Helvetica" size:20];
        infolabel.textAlignment = NSTextAlignmentCenter;
        infolabel.textColor = [UIColor blackColor];
        [self addSubview:infolabel];
        
        //设置初始状态
        self.refreshState = RefreshStateNomal;
    }
    return self;
}

//初始状态
- (void)refreshStateNomal
{
    self.refreshState = RefreshStateNomal;
    [self.activity stopAnimating];
    self.infolabel.text = @"下拉加载更多...";
    self.imageView.layer.transform = CATransform3DMakeRotation(M_PI * 2, 0, 0, 1);
    self.imageView.hidden = NO;
}

//正在请求数据时
- (void)refreshStateLoading
{
    self.refreshState = RefreshStateLoading;
    self.imageView.hidden = YES;
    [UIView beginAnimations:nil context:nil];
    self.infolabel.text = @"正在加载...";
    [self.activity startAnimating];
    [UIView commitAnimations];
}

//下拉完成后
- (void)refreshStateRelsease
{
    self.refreshState = RefreshStateRelease;
    [UIView beginAnimations:nil context:nil];
    self.infolabel.text = @"释放后加载...";
    self.imageView.layer.transform = CATransform3DMakeRotation(M_PI, 0, 0, 1);
    [UIView commitAnimations];
    
}



@end

下面来写table

#import <UIKit/UIKit.h>

@interface MyTableVC : UITableViewController<UIScrollViewDelegate>

@property (nonatomic,strong) NSMutableArray *dataArray;//数据


@end

#import "MyTableVC.h"
#import "FootView.h"

#define TABLE_CELL_HIGHT 50.0

@interface MyTableVC ()

@end

@implementation MyTableVC
{
    FootView *footView;
}

@synthesize dataArray;

- (id)initWithStyle:(UITableViewStyle)style
{
    self = [super initWithStyle:style];
    if (self) {
        
    }
    return self;
}

- (void)viewDidLoad
{
    [super viewDidLoad];
    dataArray = [NSMutableArray arrayWithArray:@[@"列表1",@"列表2",@"列表3",@"列表2",@"列表3",@"列表2",@"列表3",@"列表2",@"列表3",@"列表2",@"列表3",@"列表2",@"列表3",@"列表2",@"列表5"]];
    [self addPullToRefreshFooter];
}

//添加FootView指示器
- (void)addPullToRefreshFooter
{
    //FootView初始化
    footView = [[FootView alloc]initWithFrame:CGRectMake(0, dataArray.count*50 , 320, 251)];
    [self.tableView addSubview:footView];
    //监视数据数组
    [self addObserver:self forKeyPath:@"dataArray" options:NSKeyValueObservingOptionNew context:nil];
}




#pragma mark - Table view data source

- (float)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    return TABLE_CELL_HIGHT;
}

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    return 1;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return dataArray.count;
}


- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *inditifierCell = @"Cell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:inditifierCell];
    if (cell == nil) {
        cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:inditifierCell];
    }
    cell.textLabel.text = [dataArray objectAtIndex:indexPath.row];
    
    return cell;
}

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    NSMutableArray *new = [[NSMutableArray alloc]initWithArray:dataArray];
    [new addObject:@"张三"];
    self.dataArray  = new;
    [footView refreshStateNomal];
    self.tableView.contentInset = UIEdgeInsetsMake(0, 0, 0, 0);
    
}

#pragma mark - kvo
//用于监听dataArray数组来设置footview的位置
- (void) observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context
{
    NSLog(@"%d",dataArray.count);
    NSMutableArray *mutableArray = [change objectForKey:@"new"];
    footView.frame = CGRectMake(0,TABLE_CELL_HIGHT* mutableArray.count, 320, 251);
    [self.tableView reloadData];
}

#pragma mark - Scroller

//当scroller滑动时调用
- (void) scrollViewDidScroll:(UIScrollView *)scrollView
{
    if (footView.refreshState == RefreshStateNomal&& scrollView.contentOffset.y > scrollView.contentSize.height - scrollView.frame.size.height + 70) {
        [footView refreshStateRelsease];
    }
}

//当滑动结束时调用
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
    if (footView.refreshState == RefreshStateRelease) {
        [UIView beginAnimations:nil context:nil];
        self.tableView.contentInset = UIEdgeInsetsMake(0, 0, 70, 0);
        [footView refreshStateLoading];
        [UIView commitAnimations];
    }
}

@end


在table中处理一些事件:

为了测试添加数据后footview的位置是否会跟着变动,当点击cell的时候会添加一个数据;

为了测试加载完成后第二次拖拽是否页面还能够完成,当点击cell的时候foottview会停止;


下载代码:http://download.csdn.net/detail/u010123208/8036577

ios-上拉加载更多的界面