SwipeToLoadLayout之倒包加上啦加载下拉刷新demo

SwipeToLoadLayout 上下拉控件 很不错

她:你想做什么?
我:我想环游世界
然后,我围着她转了一圈。


效果图:



开发工具:android studio 2.2.3
测试机型:夜神模拟器
GitHub地址:https://github.com/Aspsine/SwipeToLoadLayout

如何在我们工程中使用:

1、添加依赖:
maven { url "https://jitpack.io" }


compile 'com.github.Aspsine:SwipeToLoadLayout:1.0.4'


RefreshHeaderView(自己创建):

package com.wentong.administrator.swipetoloaddemo;

import android.content.Context;
import android.util.AttributeSet;
import android.widget.TextView;

import com.aspsine.swipetoloadlayout.SwipeRefreshTrigger;
import com.aspsine.swipetoloadlayout.SwipeTrigger;

/**
 * Created by Administrator on 2017/3/17.
 */

public class RefreshHeaderView extends TextView implements SwipeRefreshTrigger,SwipeTrigger {
    public RefreshHeaderView(Context context) {
        super(context);
    }
    public RefreshHeaderView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public void onRefresh() {
        setText("正在刷新");
    }

    @Override
    public void onPrepare() {
        setText("");
    }

    @Override
    public void onMove(int i, boolean b, boolean b1) {
        if (!b) {
            if (i >= getHeight()) {
                setText("松开后刷新");
            } else {
                setText("下拉刷新");
            }
        } else {
            setText("刷新完毕");
        }
    }

    @Override
    public void onRelease() {

    }

    @Override
    public void onComplete() {
        setText("刷新完成");
    }

    @Override
    public void onReset() {
        setText("");
    }
}

LoadMoreFooterView:

package com.wentong.administrator.swipetoloaddemo;

import android.content.Context;
import android.util.AttributeSet;
import android.widget.TextView;

import com.aspsine.swipetoloadlayout.SwipeLoadMoreTrigger;
import com.aspsine.swipetoloadlayout.SwipeTrigger;

/**
 * Created by Administrator on 2017/3/17.
 */

public class LoadMoreFooterView extends TextView implements SwipeTrigger, SwipeLoadMoreTrigger {
    public LoadMoreFooterView(Context context) {
        super(context);
    }

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

    @Override
    public void onLoadMore() {
        setText("正在加载");
    }

    @Override
    public void onPrepare() {
        setText("");
    }

    @Override
    public void onMove(int i, boolean b, boolean b1) {
        if (!b) {
            if (i <= -getHeight()) {
                setText("松开后加载");
            } else {
                setText("上拉加载更多");
            }
        } else {
            setText("4");
        }
    }

    @Override
    public void onRelease() {
        setText("5");
    }

    @Override
    public void onComplete() {
        setText("加载完成");
    }

    @Override
    public void onReset() {
        setText("");
    }
}


Activity:

package com.wentong.administrator.swipetoloaddemo.activity;

import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.util.Log;

import com.aspsine.swipetoloadlayout.OnLoadMoreListener;
import com.aspsine.swipetoloadlayout.OnRefreshListener;
import com.aspsine.swipetoloadlayout.SwipeToLoadLayout;
import com.wentong.administrator.swipetoloaddemo.R;
import com.wentong.administrator.swipetoloaddemo.adapter.AdapterRecycler;

import java.util.ArrayList;
import java.util.Date;

/**
 * Created by Administrator on 2017/3/17.
 */

public class ActivityRecycler extends AppCompatActivity{

    SwipeToLoadLayout swipeToLoadLayout ;
    RecyclerView recyclerView ;
    AdapterRecycler adapterRecycler ;
    ArrayList<String> arrayList ;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_recycler);

        initView() ;
    }

    private void initView() {
        swipeToLoadLayout = (SwipeToLoadLayout) findViewById(R.id.act_recycler_swipe) ;
        recyclerView = (RecyclerView) findViewById(R.id.swipe_target) ;

        LinearLayoutManager llm = new LinearLayoutManager(this) ;
        llm.setOrientation(LinearLayoutManager.VERTICAL);
        recyclerView.setLayoutManager(llm);

        swipeToLoadLayout.setOnRefreshListener(new OnRefreshListener() {
            @Override
            public void onRefresh() {
                swipeToLoadLayout.postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        swipeToLoadLayout.setRefreshing(false);
                            arrayList.add("下拉刷新出来的:\n" + new Date()) ;
                    }
                } , 2000) ;
            }
        });
        swipeToLoadLayout.setOnLoadMoreListener(new OnLoadMoreListener() {
            @Override
            public void onLoadMore() {
                swipeToLoadLayout.postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        swipeToLoadLayout.setLoadingMore(false);
                        arrayList.add("上拉加载出来的:\n" + new Date() ) ;
                    }
                } , 2000) ;
            }
        });
        adapterRecycler = new AdapterRecycler(this) ;
        arrayList = new ArrayList<>() ;
        for (int i = 0; i <8 ; i++) {
            arrayList.add("模拟的初始数据:" + i) ;
        }
        adapterRecycler.setArrayList(arrayList);
        recyclerView.setAdapter(adapterRecycler);

        swipeToLoadLayout.post(new Runnable() {
            @Override
            public void run() {
                swipeToLoadLayout.setRefreshing(true);
            }
        }) ;

    }

}

XML:

<?xml version="1.0" encoding="utf-8"?>
<com.aspsine.swipetoloadlayout.SwipeToLoadLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".activity.ActivityRecycler"
    android:id="@+id/act_recycler_swipe"
    app:refresh_final_drag_offset="100dp">

    <com.wentong.administrator.swipetoloaddemo.RefreshHeaderView
        android:id="@+id/swipe_refresh_header"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:gravity="center"
        android:background="@color/colorAccent"/>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/swipe_target"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></android.support.v7.widget.RecyclerView>

    <com.wentong.administrator.swipetoloaddemo.LoadMoreFooterView
        android:id="@+id/swipe_load_more_footer"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:gravity="center"
        android:background="@color/colorPrimaryDark"/>

</com.aspsine.swipetoloadlayout.SwipeToLoadLayout>


Adapter:

package com.wentong.administrator.swipetoloaddemo.adapter;

import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import com.wentong.administrator.swipetoloaddemo.R;

import java.util.ArrayList;

/**
 * Created by Administrator on 2017/3/17.
 */

public class AdapterRecycler extends RecyclerView.Adapter<AdapterRecycler.My>{

    Context context ;
    ArrayList<String> arrayList ;

    public ArrayList<String> getArrayList() {
        return arrayList;
    }

    public void setArrayList(ArrayList<String> arrayList) {
        this.arrayList = arrayList;
    }

    public AdapterRecycler(Context context) {
        this.context = context;
        arrayList = new ArrayList<>() ;

    }

    @Override
    public My onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(context).inflate(R.layout.adapter_recycler , parent , false) ;
        My my = new My(view) ;
        return my;
    }

    @Override
    public void onBindViewHolder(My holder, int position) {
        holder.tv_one.setText(arrayList.get(position));
        holder.tv_two.setText(arrayList.get(position));
    }

    @Override
    public int getItemCount() {
        return arrayList.size();
    }

    class My extends RecyclerView.ViewHolder{
        TextView tv_one , tv_two ;
        public My(View itemView) {
            super(itemView);
            tv_one = (TextView) itemView.findViewById(R.id.adapter_recycler_tv_one) ;
            tv_two = (TextView) itemView.findViewById(R.id.adapter_recycler_tv_two) ;
        }
    }
}
注意一点:我在这里写的是recyclerView ,官网上面的是ListView 我在换成RecyclerView时候出现了空指针的异常。
查看简书作者@lavor 查明原因: 就是我们xml文件里的三个子视图id必须和我一样 不然就会出现空指针异常。

OK!

进阶版,效果图:




demo地址:





阅读终点,创作起航,您可以撰写心得或摘录文章要点写篇博文。去创作
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
在 Vue 中实现上和下刷新常用的库有`better-scroll`和`vue-pull-to`等。 ## 使用 better-scroll 实现上和下刷新 1. 安装 better-scroll 库 ```bash npm install better-scroll -S ``` 2. 在需要实现滚动的组件内引入 better-scroll,并进行初始化配置 ```html <template> <div class="scroll-wrapper"> <div class="scroll-content"> <!-- 这里是滚动内容 --> </div> </div> </template> <script> import BScroll from 'better-scroll' export default { mounted() { this.scroll = new BScroll('.scroll-wrapper', { // better-scroll 的配置项 probeType: 3, // 实时派发scroll事件 pullUpLoad: true, // 开启上 pullDownRefresh: true // 开启下刷新 }) this.scroll.on('pullingUp', () => { // 触发上时的操作 }) this.scroll.on('pullingDown', () => { // 触发下刷新时的操作 }) }, destroyed() { this.scroll.destroy() // 销毁 better-scroll 实例 } } </script> ``` 3. 在 better-scroll 的配置项中开启上和下刷新,并添对应的事件监听 ```javascript this.scroll = new BScroll('.scroll-wrapper', { probeType: 3, pullUpLoad: true, // 开启上 pullDownRefresh: true // 开启下刷新 }) // 上事件 this.scroll.on('pullingUp', () => { // 执行上操作 }) // 下刷新事件 this.scroll.on('pullingDown', () => { // 执行下刷新操作 }) ``` ## 使用 vue-pull-to 实现上和下刷新 1. 安装 vue-pull-to 库 ```bash npm install vue-pull-to -S ``` 2. 在需要实现滚动的组件内引入 vue-pull-to,并添对应的事件监听 ```html <template> <vue-pull-to @refresh="onRefresh" @load-more="onLoadMore" :pullDownText="'下刷新'" :pullUpText="'上更多'" :pullingDownText="'释放立即刷新'" :pullingUpText="'释放立即'" > <!-- 这里是滚动内容 --> </vue-pull-to> </template> <script> export default { methods: { onRefresh() { // 触发下刷新时的操作 }, onLoadMore() { // 触发上时的操作 } } } </script> ``` 在 vue-pull-to 组件中,提供了`refresh`和`load-more`两个事件用于触发下刷新和上操作。 3. 在 vue-pull-to 组件中设置相应的文字提示和样式等属性 ```html <vue-pull-to @refresh="onRefresh" @load-more="onLoadMore" :pullDownText="'下刷新'" :pullUpText="'上更多'" :pullingDownText="'释放立即刷新'" :pullingUpText="'释放立即'" > <!-- 这里是滚动内容 --> </vue-pull-to> ``` 在 vue-pull-to 组件中,可以通过`pullDownText`、`pullUpText`、`pullingDownText`和`pullingUpText`等属性来设置文字提示和样式等属性。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

qq_36576738

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值