ios 上拉加载下拉刷新Dome

为练手写了一个小的上拉加载更多下拉刷新的小的Dome 。

没有太多的技术含量，只是作为新手的启发用。是上一篇下拉加载的扩展。先看一下那个再看这个就容易很多。

Dome下载：http://download.csdn.net/detail/u010123208/8062715

先来梳理一下：

上拉家在更多就是上拉之后在底部现实一个视图，用来提示用户上拉加载更多，如果用户上拉就出发事件，进行加载并在试图中给予提示，同时后台加载数据，将添加的数据加入数据数组，最后重新导入列表；

下拉刷新同样的操作，只不过就是将数组清空重新来导入数据；

首先我们要创建两个view 一个是顶部显示，一个在底部显示 ；

在view中要显示现在文字，一张图片，一个活动指示框（当进行网络请求加载数据的时候显示，其他时候隐藏），如果不太理解下载Dome看一下就知道了。

typedef enum {
    InsertStateNomal,    //平常状态
    InsertStateDrapUp,   //上拉状态
    InsertStateDrapDown, //下拉状态
    InsertStateRun,      //正在加载的状态
}InsertState;

@interface HeadView : UIView

@property (nonatomic,strong) UIImageView *imageView;
@property (nonatomic,strong) UILabel *label;
@property (nonatomic,assign) InsertState insertState;
@property (nonatomic,strong) UIActivityIndicatorView *activity;

- (void)setInsertNomal;
- (void)setInsertDrapDown;
- (void)setInsertRun;
@end

@interface FootView : UIView

@property (nonatomic,strong) UIImageView *imageView;
@property (nonatomic,strong) UILabel *label;
@property (nonatomic,assign) InsertState insertState;
@property (nonatomic,strong) UIActivityIndicatorView *activity;

- (void)setInsertNomal;
- (void)setInsertDrapDoUp;
- (void)setInsertRun;

@end

枚举用来指示视图的当前状态；

其实两个视图的内容什么的都完全一样；

//
//  InsertView.m
//  RefreshDome
//
//  Created by 小屁孩 on 14-10-16.
//  Copyright (c) 2014年 XS. All rights reserved.
//

#import "InsertView.h"

@implementation HeadView

@synthesize imageView;
@synthesize label;
@synthesize insertState;
@synthesize activity;

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {

        self.backgroundColor = [UIColor orangeColor];
        //图片
        imageView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"arrow.png"]];
        imageView.frame = CGRectMake(20, frame.size.height-60, 30, 50);
        [self addSubview:imageView];

        //显示的文字
        label = [[UILabel alloc]initWithFrame:CGRectMake(60, frame.size.height-60, 250, 50)];
        label.text = @"下拉刷新...";
        label.textAlignment = NSTextAlignmentCenter;
        [self addSubview:label];

        //状态
        insertState = InsertStateNomal;

        //活动指示器
        activity = [[UIActivityIndicatorView alloc]initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];
        activity.frame = CGRectMake(20,frame.size.height-60, 30, 50);
        [self addSubview:activity];
    }
    return self;
}

//初始状态
-(void)setInsertNomal
{
    insertState = InsertStateNomal;
    label.text = @"下拉刷新.....";
    imageView.layer.transform = CATransform3DMakeRotation(M_PI*2, 0, 0, 1);
    [activity stopAnimating];
    imageView.hidden =NO;
}

//下拉状态
- (void)setInsertDrapDown
{
    insertState = InsertStateDrapDown;
    [UIView beginAnimations:nil context:nil];
    label.text = @"释放后刷新.....";
    imageView.layer.transform = CATransform3DMakeRotation(M_PI, 0, 0, 1);
    [UIView commitAnimations];

}

//刷新状态
- (void)setInsertRun
{
    insertState =InsertStateRun;
    label.text = @"正在刷新.....";
    imageView.hidden = YES;
    [activity startAnimating];
}
@end

@implementation FootView

@synthesize imageView;
@synthesize label;
@synthesize insertState;
@synthesize activity;

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {

        self.backgroundColor = [UIColor orangeColor];
        //图片
        imageView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"arrow.png"]];
        imageView.layer.transform = CATransform3DMakeRotation(M_PI , 0, 0, 1);
        imageView.frame = CGRectMake(20, 10, 30, 50);
        [self addSubview:imageView];

        //文字
        label = [[UILabel alloc]initWithFrame:CGRectMake(60, 10, 250, 50)];
        label.text = @"上拉加载更多.....";
        label.textAlignment = NSTextAlignmentCenter;
        [self addSubview:label];

        //状态
        insertState = InsertStateNomal;

        //活动指示器
        activity = [[UIActivityIndicatorView alloc]initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];
        activity.frame = CGRectMake(20, 10, 30, 50);
        [self addSubview:activity];
    }
    return self;
}

//初始状态
- (void)setInsertNomal
{
    insertState = InsertStateNomal;
    label.text = @"上拉加载更多.....";
    imageView.layer.transform = CATransform3DMakeRotation(M_PI , 0, 0, 1);
    [activity stopAnimating];
    imageView.hidden =NO;
}

//上拉状态
- (void)setInsertDrapDoUp
{
    insertState = InsertStateDrapUp;
    [UIView beginAnimations:nil context:nil];
    label.text = @"释放后加载更多.....";
    imageView.layer.transform = CATransform3DMakeRotation(M_PI * 2, 0, 0, 1);
    [UIView commitAnimations];
}

//加载状态
- (void)setInsertRun
{
    insertState = InsertStateRun;
    label.text = @"正在加载.....";
    imageView.hidden = YES;
    [activity startAnimating];
}
@end

最后就是列表了；

其实在这里面需要注意的：

  • 要怎样为表格添加视图
  • 添加的底部视图随着内容的增多，是不断变化的（这里我用了KVO来控制，当数组元素变化后处理位置）
  • 当完成下拉或者上拉的时候，短暂的视图显示怎么来控制
  • 上拉下拉的判断（UIScrollview代理）条件；
#import <UIKit/UIKit.h>
#import "InsertView.h"

@interface ViewController : UIViewController<UITableViewDataSource,UITableViewDelegate,UIScrollViewDelegate>

@property (weak, nonatomic) IBOutlet UITableView *table;
@property (nonatomic,strong) NSMutableArray *tableArray;

@end
#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController
{
    HeadView *headView;
    FootView *footView;
}

@synthesize tableArray;
@synthesize table;

- (void)viewDidLoad
{
    [super viewDidLoad];
    table.frame = CGRectMake(0, 20, 320, [[UIScreen mainScreen]bounds].size.height-20);
    table.delegate = self;
    table.dataSource = self;
    table.tableFooterView = [[UIView alloc]init];

    //下拉头部视图
    headView = [[HeadView alloc]initWithFrame:CGRectMake(0, -251, DEVICE_FRAME.size.width, 251)];
    [table addSubview:headView];

    //上拉底部视图
    footView = [[FootView alloc]initWithFrame:CGRectMake(0, table.frame.size.height, DEVICE_FRAME.size.width, 251)];
    [table addSubview:footView];

    //初始化数组
    tableArray = [NSMutableArray array];
    for (int i = 0; i<15; i++) {
        NSURL *url=[NSURL URLWithString:@"http://www.sinaimg.cn/qc/photo_auto/chezhan/2012/50/00/15/80046_950.jpg"];
        UIImage *image = [UIImage imageWithData:[NSData dataWithContentsOfURL:url]];
        [tableArray addObject:image];
    }

    float hight =tableArray.count * 60 ;
    if (tableArray.count * 60  < [[UIScreen mainScreen]bounds].size.height ) {
        hight = table.frame.size.height;
    }
    footView.frame = CGRectMake(0, hight, 320, 251);

    [self addObserver:self forKeyPath:@"tableArray" options:NSKeyValueObservingOptionNew context:nil];

}

- (void) addtableMutableArray
{
    for (int i = 0; i<5; i++) {
        NSURL *url=[NSURL URLWithString:@"http://www.sinaimg.cn/qc/photo_auto/chezhan/2012/50/00/15/80046_950.jpg"];
        UIImage *image = [UIImage imageWithData:[NSData dataWithContentsOfURL:url]];
        [self.tableArray addObject:image];
    }
    self.tableArray = tableArray;
    [footView setInsertNomal];
    [self performSelectorOnMainThread:@selector(endThread) withObject:nil waitUntilDone:NO];
}

- (void)endThread
{

    [UIView beginAnimations:nil context:nil];
    table.contentInset = UIEdgeInsetsMake(0, 0, 0, 0);
    [UIView commitAnimations];
    [table reloadData];
    NSLog(@"%d",tableArray.count);
}

- (void) refesh
{
    NSMutableArray *array = [NSMutableArray array];
    for (int i = 0; i<15; i++) {
        NSURL *url=[NSURL URLWithString:@"http://wenwen.sogou.com/p/20110923/20110923201826-1347223277.jpg"];
        UIImage *image = [UIImage imageWithData:[NSData dataWithContentsOfURL:url]];
        [array addObject:image];
    }
    self.tableArray = array;
    [headView setInsertNomal];
    [self performSelectorOnMainThread:@selector(endThread) withObject:nil waitUntilDone:NO];
}

#pragma mark KVO
-(void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context
{
    NSMutableArray *array = [change objectForKey:@"new"];
    float hight =array.count * 60;
    if (array.count * 60  < [[UIScreen mainScreen]bounds].size.height ) {
        hight = [[UIScreen mainScreen]bounds].size.height;
    }
    footView.frame = CGRectMake(0, hight, 320, 251);

}

#pragma mark tabledelegate

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return  tableArray.count;
}
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    return 60;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *identityCell = @"Cell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:identityCell];
    if (cell == nil) {
        cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:identityCell];
    }
    cell.imageView.image = [tableArray objectAtIndex:indexPath.row];
    cell.textLabel.text = @"NibBi";
    return cell;
}

#pragma mark - scrolldelegae

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
    if (headView.insertState == InsertStateDrapDown) {
        [UIView beginAnimations:nil context:nil];
        table.contentInset = UIEdgeInsetsMake(70, 0, 0, 0);
        [headView setInsertRun];
        [UIView commitAnimations];
        [self performSelectorInBackground:@selector(refesh) withObject:nil];

    }
    if (footView.insertState == InsertStateDrapUp) {
        [UIView beginAnimations:nil context:nil];
        table.contentInset = UIEdgeInsetsMake(0, 0, 70, 0);
        [footView setInsertRun];
        [UIView commitAnimations];
        [self performSelectorInBackground:@selector(addtableMutableArray) withObject:nil];
    }
}

-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
  // NSLog(@"%f",scrollView.contentOffset.y);
    //上拉加载更多转换
    if (scrollView.contentOffset.y > scrollView.contentSize.height - scrollView.frame.size.height + 60 && footView.insertState == InsertStateNomal) {
        [UIView beginAnimations:nil context:nil];
        [footView setInsertDrapDoUp];
        [UIView commitAnimations];

    }
    //下拉刷新转换
    if (scrollView.contentOffset.y < -60 && headView.insertState == InsertStateNomal)
    {
        [UIView beginAnimations:nil context:nil];
        [headView setInsertDrapDown];
        [UIView commitAnimations];
    }
}

@end
时间： 2024-11-24 05:30:07

ios 上拉加载下拉刷新Dome的相关文章

Mint-ui中loadmore(上拉加载下拉刷新)组件在ios中滑动会触发点击事件的解决方法

bug说明: Mint-ui中loadmore(上拉加载下拉刷新)组件 在 使用fastclick的情况下 ,在ios设备中滑动会触发点击事件: 解决方法: 我是按需引入,去项目中找到loadmore下的index.js,全部引入的要找mint下面mint-ui.common.js 路径如下:你的项目名/node_modules\mint-ui\lib\loadmore\index.js 搜索 handleTouchEnd ,记得写event进去 handleTouchEnd: function

ListView上拉加载下拉刷新

主要用到了这个几个文件,MainActivity是界面的Activity,MyAdapter是ListView的自定义适配,MyListView是自定义带头部LIistView,如果只需要上拉加载就不需要:activity_main.xml是住界面,item.xml是ListView的子布局里面只有一个TextView,listview_footer.xml是listview的加载更多的底部布局,listview_header.xml是listview的头部布局. MainActivity.ja

XML解析及上拉加载下拉刷新

XML解析及上拉加载下拉刷新 1.XML格式 2.GData和XPath遍历 //配置XML库(配置完才能使用) //(1)添加头文件搜索路径 // Header Search Paths-> /usr/include/libxml2 //(2)添加二进制库 // Link library -> lixml2.dylib //(3)源文件添加编译选项 // -fno-objc-arc //(4)添加头文件 // #import "GDataXMLNode.h"*/ XPat

使用dragloader.js插件实现上拉加载/下拉刷新..

在写代码时候有个需求是,在触屏页面,为了加快页面加载速度,案件列表每页展示5条数据: 然后点击更多,展示下一页数据: 但是为了触屏更好的体验,改为往上滑动案件列表,加载下一页数据:就是要实现上拉加载/下拉刷新的效果: 我只用到了 上拉加载: 参考资料:http://blog.csdn.net/xb12369/article/details/39202711 下面是写的demo: html代码: <!DOCTYPE html> <html lang="en"> &

微信小程序上拉加载下拉刷新

微信小程序实现上拉加载下拉刷新 使用小程序默认提供方法. (1). 在xxx.json 中开启下拉刷新,需要设置backgroundColor,或者是backgroundTextStyle ,因为加载的动画可能会是白色背景,会看不清. { "usingComponents": { "annicate": "/components/annicate/index" }, "navigationBarTitleText": &quo

移动端上拉加载下拉刷新

<template> <div class="wrapper" ref="wrapper"> <div class="content" > <div class="refresh" :class="{ativeRefresh:refresh}">刷新</div> <div class="ct-row" v-for=&quo

xlistview上拉加载 下拉刷新

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent" >

XListView实现上拉加载下拉刷新

package com.loaderman.androiddemo; import android.content.Context; import android.util.AttributeSet; import android.view.MotionEvent; import android.view.View; import android.view.ViewTreeObserver.OnGlobalLayoutListener; import android.view.animation

上拉加载下拉刷新控件WaterRefreshLoadMoreView

效果: 源码: // // SRSlimeView // @author SR // Modified by JunHan on 13-9-18. // #import <UIKit/UIKit.h> #define kStartTo 0.7f #define kEndTo 0.15f #define kAnimationInterval (1.0f / 50.0f) NS_INLINE CGFloat distansBetween(CGPoint p1 , CGPoint p2) { ret