项目Demo:https://github.com/liaozhoubei/CustomViewDemo

下拉刷新和加载重多

下拉刷新以及加载重多就点儿单效益于资讯类的app最易找到,当您想查看有没发新型的情报的上就待将手指在屏幕上往下同样拉就能创新数据,而加载重多则是关至手上页面底部的时节想找到往期的内容,这时手指向上等同拉,往期情就加载出来。现在虽深受我们落实这个意义吧,效果如下:

澳门新濠天地水舞间 1

Refreshlist.gif

兑现原理

由效果图被分析,我们好得出以下结论:

1、整体布局是以ListView实现的

2、上拉加载是当顶部多多少,加载重多就是以底层多数量。

接下来我们当查ListVew的详细资料,我们得看来它们富有addHeaderView()方法,将数据增长到顶部,同时也具addFooterView()方法,将数据增长到脚。

本我们都亮什么当顶部及底添加数据了,但是下拉的当儿来下拉属性的布局,上拉加载重多也起一个布局,这同时是怎么回事呢?

的确,这是一个格外让人迷惑的地方,但是一旦我们换一个思路,假而它本就是是当何,但是却叫隐形起来也?

答案却是凡如此,ListView先设置头布局及顶部,但是也无以屏幕被显,只有在下拉的时段才显得出来,同时以下拉的时候链接网络加载重多数据,这就是兑现加载重多的法则!

总体都分析好了,现在我们虽来看望代码是如何兑现的吧!

代码实现下拉刷新

尽管如此实现加载重多之职能是乘让Listview,但是ListVew并没有主意落实我们纪念要的富有机能,所以我们好透过继承ListView来落实我们得的力量。代码如下:

public class RefreshListView extends ListView implements OnScrollListener {

private View mHeaderView; // 头布局
private float downY; // 按下的y坐标
private float moveY; // 移动后的y坐标
private int mHeaderViewHeight; // 头布局高度
public static final int PULL_TO_REFRESH = 0;// 下拉刷新
public static final int RELEASE_REFRESH = 1;// 释放刷新
public static final int REFRESHING = 2; // 刷新中
private int currentState = PULL_TO_REFRESH; // 当前刷新模式
private RotateAnimation rotateUpAnim; // 箭头向上动画
private RotateAnimation rotateDownAnim; // 箭头向下动画
private View mArrowView; // 箭头布局
private TextView mTitleText; // 头布局标题
private ProgressBar pb; // 进度指示器
private TextView mLastRefreshTime; // 最后刷新时间
private OnRefreshListener mListener; // 刷新监听
private View mFooterView; // 脚布局
private int mFooterViewHeight; // 脚布局高度
private boolean isLoadingMore; // 是否正在加载更多

public RefreshListView(Context context) {
    super(context);
    init();
}

public RefreshListView(Context context, AttributeSet attrs) {
    super(context, attrs);
    init();
}

public RefreshListView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
    init();
}

/**
 * 初始化头布局, 脚布局 滚动监听
 */
private void init() {
    initHeaderView();
    initAnimation();
    initFooterView();
    setOnScrollListener(this);
}

/**
 * 初始化脚布局
 */
private void initFooterView() {
    mFooterView = View.inflate(getContext(), R.layout.layout_footer_list, null);
    mFooterView.measure(0, 0);
    mFooterViewHeight = mFooterView.getMeasuredHeight();
    // 隐藏脚布局
    mFooterView.setPadding(0, -mFooterViewHeight, 0, 0);
    addFooterView(mFooterView);
}

/**
 * 初始化头布局的动画
 */
private void initAnimation() {
    // 向上转, 围绕着自己的中心, 逆时针旋转0 -> -180.
    rotateUpAnim = new RotateAnimation(0f, -180f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
            0.5f);
    rotateUpAnim.setDuration(300);
    rotateUpAnim.setFillAfter(true); // 动画停留在结束位置

    // 向下转, 围绕着自己的中心, 逆时针旋转 -180 -> -360
    rotateDownAnim = new RotateAnimation(-180f, -360, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
            0.5f);
    rotateDownAnim.setDuration(300);
    rotateDownAnim.setFillAfter(true); // 动画停留在结束位置

}

/**
 * 初始化头布局
 */
private void initHeaderView() {

    mHeaderView = View.inflate(getContext(), R.layout.layout_header_list, null);
    mArrowView = mHeaderView.findViewById(R.id.iv_arrow);
    pb = (ProgressBar) mHeaderView.findViewById(R.id.pb);
    mTitleText = (TextView) mHeaderView.findViewById(R.id.tv_title);
    mLastRefreshTime = (TextView) mHeaderView.findViewById(R.id.tv_desc_last_refresh);

    // 提前手动测量宽高
    mHeaderView.measure(0, 0);// 按照设置的规则测量

    mHeaderViewHeight = mHeaderView.getMeasuredHeight();
    System.out.println(" measuredHeight: " + mHeaderViewHeight);

    // 设置内边距, 可以隐藏当前控件 , -自身高度
    mHeaderView.setPadding(0, -mHeaderViewHeight, 0, 0);

    // 在设置数据适配器之前执行添加 头布局/脚布局 的方法.
    addHeaderView(mHeaderView);
}

@Override
public boolean onTouchEvent(MotionEvent ev) {

    // 判断滑动距离, 给Header设置paddingTop
    switch (ev.getAction()) {
    case MotionEvent.ACTION_DOWN:
        downY = ev.getY();
        System.out.println("downY: " + downY);

        break;
    case MotionEvent.ACTION_MOVE:
        moveY = ev.getY();
        System.out.println("moveY: " + moveY);
        // 如果是正在刷新中, 就执行父类的处理
        if (currentState == REFRESHING) {
            return super.onTouchEvent(ev);
        }

        float offset = moveY - downY; // 移动的偏移量
        // 只有 偏移量>0, 并且当前第一个可见条目索引是0, 才放大头部
        if (offset > 0 && getFirstVisiblePosition() == 0) {

            // int paddingTop = -自身高度 + 偏移量

            int paddingTop = (int) (-mHeaderViewHeight + offset);
            mHeaderView.setPadding(0, paddingTop, 0, 0);

            if (paddingTop >= 0 && currentState != RELEASE_REFRESH) {// 头布局完全显示
                System.out.println("切换成释放刷新模式: " + paddingTop);
                // 切换成释放刷新模式
                currentState = RELEASE_REFRESH;
                updateHeader(); // 根据最新的状态值更新头布局内容
            } else if (paddingTop < 0 && currentState != PULL_TO_REFRESH) { // 头布局不完全显示
                System.out.println("切换成下拉刷新模式: " + paddingTop);
                // 切换成下拉刷新模式
                currentState = PULL_TO_REFRESH;
                updateHeader(); // 根据最新的状态值更新头布局内容
            }

            return true; // 当前事件被我们处理并消费
        }

        break;
    case MotionEvent.ACTION_UP:

        // 根据刚刚设置状态
        if (currentState == PULL_TO_REFRESH) {
            // - paddingTop < 0 不完全显示, 恢复
            mHeaderView.setPadding(0, -mHeaderViewHeight, 0, 0);
        } else if (currentState == RELEASE_REFRESH) {
            // - paddingTop >= 0 完全显示, 执行正在刷新...
            mHeaderView.setPadding(0, 0, 0, 0);
            currentState = REFRESHING;
            updateHeader();
        }
        break;

    default:
        break;
    }

    return super.onTouchEvent(ev);
}

/**
 * 根据状态更新头布局内容
 */
private void updateHeader() {
    switch (currentState) {
    case PULL_TO_REFRESH: // 切换回下拉刷新
        // 做动画, 改标题
        mArrowView.startAnimation(rotateDownAnim);
        mTitleText.setText("下拉刷新");

        break;
    case RELEASE_REFRESH: // 切换成释放刷新
        // 做动画, 改标题
        mArrowView.startAnimation(rotateUpAnim);
        mTitleText.setText("释放刷新");

        break;
    case REFRESHING: // 刷新中...
        mArrowView.clearAnimation();
        mArrowView.setVisibility(View.INVISIBLE);
        pb.setVisibility(View.VISIBLE);
        mTitleText.setText("正在刷新中...");

        if (mListener != null) {
            mListener.onRefresh(); // 通知调用者, 让其到网络加载更多数据.
        }

        break;

    default:
        break;
    }
}

/**
 * 刷新结束, 恢复界面效果
 */
public void onRefreshComplete() {
    if (isLoadingMore) {
        // 加载更多
        mFooterView.setPadding(0, -mFooterViewHeight, 0, 0);
        isLoadingMore = false;
    } else {
        // 下拉刷新
        currentState = PULL_TO_REFRESH;
        mTitleText.setText("下拉刷新"); // 切换文本
        mHeaderView.setPadding(0, -mHeaderViewHeight, 0, 0);// 隐藏头布局
        pb.setVisibility(View.INVISIBLE);
        mArrowView.setVisibility(View.VISIBLE);
        String time = getTime();
        mLastRefreshTime.setText("最后刷新时间: " + time);
    }

}
// 将获取的时间格式化
private String getTime() {
    long currentTimeMillis = System.currentTimeMillis();
    SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
    return format.format(currentTimeMillis);
}

public interface OnRefreshListener {

    void onRefresh(); // 下拉刷新

    void onLoadMore();// 加载更多
}

public void setRefreshListener(OnRefreshListener mListener) {
    this.mListener = mListener;
}

// public static int SCROLL_STATE_IDLE = 0; // 空闲
// public static int SCROLL_STATE_TOUCH_SCROLL = 1; // 触摸滑动
// public static int SCROLL_STATE_FLING = 2; // 滑翔
@Override
public void onScrollStateChanged(AbsListView view, int scrollState) {
    // 状态更新的时候
    System.out.println("scrollState: " + scrollState);
    if (isLoadingMore) {
        return; // 已经在加载更多.返回
    }

    // 最新状态是空闲状态, 并且当前界面显示了所有数据的最后一条. 加载更多
    if (scrollState == SCROLL_STATE_IDLE && getLastVisiblePosition() >= (getCount() - 1)) {
        isLoadingMore = true;
        System.out.println("scrollState: 开始加载更多");
        mFooterView.setPadding(0, 0, 0, 0);

        setSelection(getCount()); // 跳转到最后一条, 使其显示出加载更多.

        if (mListener != null) {
            mListener.onLoadMore();
        }
    }
}

@Override
public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
    // 滑动过程
}

}

代码分析

同样看上去,这其间的代码是格外多之,但是呢无非是分为这几乎片:

1、隐藏头布局(下拉刷新)和脚布局(加载重多)

2、设置触摸事件,在下拉的早晚显得头布局,上拉的当儿显得脚布局

3、在下拉以及上拉之实践的上,我们尽动画,更换头布局及脚步局里面的长空(箭头、文字等)

4、设置回掉方法,在下拉或上拉的时节以数据传回到,同时更新ListView中之数码

那么我们不怕以这几片一个一个之讲课吧!

开辟界面的上隐藏头布局(下拉刷新)

隐藏头布局之代码在偏下办法中:

private void initHeaderView() {

    mHeaderView = View.inflate(getContext(), R.layout.layout_header_list, null);
    mArrowView = mHeaderView.findViewById(R.id.iv_arrow);
    pb = (ProgressBar) mHeaderView.findViewById(R.id.pb);
    mTitleText = (TextView) mHeaderView.findViewById(R.id.tv_title);
    mLastRefreshTime = (TextView) mHeaderView.findViewById(R.id.tv_desc_last_refresh);

    // 提前手动测量宽高
    mHeaderView.measure(0, 0);// 按照设置的规则测量
    mHeaderViewHeight = mHeaderView.getMeasuredHeight();
    System.out.println(" measuredHeight: " + mHeaderViewHeight);

    // 设置内边距, 可以隐藏当前控件 , -自身高度
    mHeaderView.setPadding(0, -mHeaderViewHeight, 0, 0);

    // 在设置数据适配器之前执行添加 头布局/脚布局 的方法.
    addHeaderView(mHeaderView);
}

鉴于藏脚步局的法子以及隐藏头布局的办法去不要命,这里就是非同小可讲解隐藏头布局的主意。

于前头我们询问及ListView中有addHeaderView()方法,将视图或者数增长到ListVew的顶部,这里就是是起化头布局,然后以那个加载到顶部。重要之是随即三推行代码:

    mHeaderView.measure(0, 0);// 按照设置的规则测量
    mHeaderViewHeight = mHeaderView.getMeasuredHeight();        
    mHeaderView.setPadding(0, -mHeaderViewHeight, 0, 0);

干什么而动measure()方法,这是为ListView是以Activity执行setContentView()加载了布局之后才后高度和增幅。但是咱于起定义控件被若超前收获控件里面的子布局的可观和宽窄,而在measure()传入0这是代表以原有的,在XML中设定好的深浅获取宽高。

接下来便是setPadding()方法,这个法是匪是十分熟悉,Padding是设置布局之内边距。ListVew的顶部的离开为0,也即是刚刚在屏幕的顶部,而用mHeaderView头布局的Top顶部的比方设置也负数,那么mHeaderView将无见面当屏幕被显得出,大家好好新建一个色试试Pading的效能。

以上就是是隐藏头布局的代码,然后将藏匿好之条布局直接助长到LisView之中就得了。

设置触摸事件,在下拉的当儿显得头布局

onTouchEvent()触摸事件中之代码:

switch (ev.getAction()) {
    case MotionEvent.ACTION_DOWN:
        downY = ev.getY();
        break;
    case MotionEvent.ACTION_MOVE:
        moveY = ev.getY();
        // 如果当前已经在下拉刷新状态,那么就不刷新
        if (currentState == REFRESHING) {
            return super.onTouchEvent(ev);
        }
        float offset = moveY - downY; // 移动的偏移量
        if (offset > 0 && getFirstVisiblePosition() == 0) {
            int paddingTop = (int) (-mHeaderViewHeight + offset);
            mHeaderView.setPadding(0, paddingTop, 0, 0);
            if (paddingTop >= 0 && currentState != RELEASE_REFRESH) {// 头布局完全显示
                currentState = RELEASE_REFRESH;
                updateHeader(); // 根据最新的状态值更新头布局内容
            } else if (paddingTop < 0 && currentState != PULL_TO_REFRESH) { // 头布局不完全显示
                currentState = PULL_TO_REFRESH;
                updateHeader(); // 根据最新的状态值更新头布局内容
            }
            return true; // 当前事件被我们处理并消费
        }
        break;
    case MotionEvent.ACTION_UP:
        if (currentState == PULL_TO_REFRESH) {
            mHeaderView.setPadding(0, -mHeaderViewHeight, 0, 0);
        } else if (currentState == RELEASE_REFRESH) {
            mHeaderView.setPadding(0, 0, 0, 0);
            currentState = REFRESHING;
            updateHeader();
        }
        break;

    default:
        break;
    }

以就段代码中,主要是装mHeaderView的setPadding()方法,在目前ListView条目为顶部率先长时就拿其PaddingTop内边距顶部的偏离不断的回落,依据手指运动的相距从负数转为正数,将mHeaderView显示出来。

于下拉的时显得动画

在触摸事件中发生updateHeader()方法,这是为此来推行选择执行动画以及更换文字的一个措施,当我们下去头布局,头布局了展示的时光该下箭头变为上箭头,同时更换文字;在纵下拉,手指离开屏幕的上,箭头消失,变成循环速度长条

装回调方法,更新ListView中的数量

末就是是回调方法了,在这边创办了一个Interface接口类OnRefreshListener,这中有少数只章程,一个凡是下拉刷新时多多少,一个凡加载重多时加数据。

此类似在setRefreshListener中为应用,但咱的RefreshListView自定义控件被利用时,调用setRefreshListener方法,这是将重复写OnRefreshListener接口的有数独主意,在里传出要增加的数量,并且更新适配器,这时RefreshListView就能实时更新数据了。

总结

下拉刷新的自定义视图就说到这里就是收了,我们的精通自定义视图也交此就寿终正寝了。

尽管如此身为精通自定义视图,但说实话这只有是应用层的自定义视图的运用,仍然是基于Android提供的框架中改,如果真想创立有属于自己的自定义视图,恐怕要上Android底层或者框架层写代码吧!

唯独不管怎么样,学习完马上几个从定义视图,相信在应用层这面的自定义视图都非会见产生极怪的窘迫了。

于此间的几首文章被,提纲挈领的游说了每个品种中比较根本的道,关于现实的逻辑并没详解,所以就上头要大家差不多扣代码,又或者直接敲代码,这样才能够清楚当下其中说涵盖的文化。

项目Demo:https://github.com/liaozhoubei/CustomViewDemo

扩大阅读:

Android 精通自定义视图(1)
http://www.jianshu.com/p/c2195269ce44

Android 精通自定义视图(2)
http://www.jianshu.com/p/092e126b623f

Android 精通自定义视图(3)
http://www.jianshu.com/p/1660479e76ef

Android 精通自定义视图(4)
http://www.jianshu.com/p/850e387fc9d8

网站地图xml地图