google官方的下拉刷新+自定义上拉加载更多

转载请标注转载:http://blog.csdn.net/oqihaogongyuan/article/details/50949118        

  google官方的下拉刷新+自定义上拉加载更多   

     现在很多app都是使用的自定义的下拉刷新上拉加载更多,然而google官方为我们提供了下拉刷新操作,我在之前的博客中有撰文针对

  自定义下拉刷新操作并提供源码下载 传送门    自定义下拉刷新及上拉加载更多

  google官方的下拉刷新 传送门       google官方的下拉刷新组件的详细介绍及示例下载

google官方为我们提供了下拉刷新,我们自己增加自定义的上拉加载更多,这样相互结合使用,就出现了一款新的下拉刷新和上拉加载更多的组件,非常推荐在app中增加这中效果。先来看看效果如何,如下gif图,是不是给人耳目一新的感觉呢,最下面提供示例代码供下载学习。



1、自定义listView,因为google为我们提供能下拉刷新的组件

    android.support.v4.widget.SwipeRefreshLayout

   因此我们只需要为自定的listView添加上拉“ 加载更多 ”的功能。

自定义上拉加载更多的listView代码如下:

package com.example.myfirst.pulltorefreshlist;

import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.widget.AbsListView;
import android.widget.ListView;

/**
 * 上拉加载更多的listView,配合Google官方的下拉刷新使用
 * Created by chengguo on 2016/3/21.
 */
public class LoadMoreListView extends ListView implements AbsListView.OnScrollListener {


    private static final String TAG = "RefreshListView";
    /**
     * 底部加载更多部分
     */
    private boolean isScrollToBottom;//判断是不是滑到了底部
    private View footerView; //底部的footer   view
    private int footerViewHeight; //底部view的高度
    private boolean isLoadingMore = false; //判断是不是"加载更多"

    /**
     * listview的接口,监听listview的下来刷新和上拉加载更多
     */
    private OnRefreshListener mOnRefreshListener;


    public LoadMoreListView(Context context) {
        super(context);
    }

    public LoadMoreListView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initFooterView();
        this.setOnScrollListener(this);
    }


    /**
     * 初始化底部view
     */
    private void initFooterView() {
        footerView = View.inflate(getContext(), R.layout.footer_layout, null);
        //设置(0,0)以便系统测量footerView的宽高
        footerView.measure(0, 0);
        footerViewHeight = footerView.getMeasuredHeight();
        footerView.setPadding(0, -footerViewHeight, 0, 0);
        this.addFooterView(footerView);
    }

    /**
     * 监听listview滚动的状态变化,如果滑到了底部,就“加载更多..."
     */
    @Override
    public void onScrollStateChanged(AbsListView view, int scrollState) {

        if (scrollState == SCROLL_STATE_IDLE || scrollState == SCROLL_STATE_FLING) {
            if (isScrollToBottom && !isLoadingMore) {
                isLoadingMore = true;
                footerView.setPadding(0, 0, 0, 0);
                this.setSelection(this.getCount());

                if (mOnRefreshListener != null) {
                    mOnRefreshListener.onLoadingMore();
                }
            }
        }
    }

    /**
     * 监听listview滚动的状态变化,判断当前是不是滑到了底部
     *
     * @param view
     * @param firstVisibleItem
     * @param visibleItemCount
     * @param totalItemCount
     */
    @Override
    public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
        if (getLastVisiblePosition() == (totalItemCount - 1)) {
            isScrollToBottom = true;
        } else {
            isScrollToBottom = false;
        }

    }

    /**
     * 设置监听接口,当为
     *
     * @param listener
     */
    public void setOnRefreshListener(OnRefreshListener listener) {
        mOnRefreshListener = listener;
    }


    /**
     * 为外界提供的方法,当Activity中的加载更多数据加载完后,就调用这个方法来隐藏底部的footerView
     */
    public void loadMoreComplete() {
        footerView.setPadding(0, -footerViewHeight, 0, 0);
        isLoadingMore = false;
    }

    /**
     * 设置接口,供外界实现,监听listview的刷新和加载更多的状态
     */
    public interface OnRefreshListener {
        /**
         * 上拉加载更多
         */
        void onLoadingMore();
    }
}

  2、activity的layout.xml文件如下:

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

    <android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/swipe_google_and_loadmore_refresh_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <com.example.myfirst.pulltorefreshlist.LoadMoreListView
            android:id="@+id/google_and_loadmore_refresh_listview"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

        </com.example.myfirst.pulltorefreshlist.LoadMoreListView>

    </android.support.v4.widget.SwipeRefreshLayout>
</LinearLayout>

    

    3、主activity的代码如下,也有非常详细的代码注释,非常简单,这样一款google下拉刷新+自定义上拉加载更多就诞生了。

package com.example.myfirst.pulltorefreshlist;

import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.support.v4.widget.SwipeRefreshLayout;

import java.util.ArrayList;

/**
 * google下拉刷新和自定义上拉加载更多的activity
 * Created by chengguo on 2016/3/21.
 */
public class GoogleAndLoadMoreActivity extends Activity implements SwipeRefreshLayout.OnRefreshListener, LoadMoreListView.OnRefreshListener {
    private SwipeRefreshLayout swipeRefreshLayout;
    private LoadMoreListView loadMoreListView;
    //对象数据集合
    private ArrayList<ListViewItem> items;
    //listview的数据加载器adapter
    private RefreshListAdapter adapter;

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

        initView();
        initEvent();
        initData();
    }

    /**
     * 初始化列表数据
     */
    private void initData() {
        items = new ArrayList<ListViewItem>();

        //这里只是模拟10个列表项数据,在现实开发中,listview中的数据都是从服务器获取的。
        for (int i = 0; i < 10; i++) {
            ListViewItem item = new ListViewItem();
            item.setUserImg(R.mipmap.ic_launcher);
            item.setUserName("seven" + i);
            item.setUserComment("这是google官方一个下拉刷新ListView+自定义ListView上拉加载跟多");
            items.add(item);
        }

        //为listview配置adapter
        adapter = new RefreshListAdapter(GoogleAndLoadMoreActivity.this, items);
        loadMoreListView.setAdapter(adapter);
    }

    /**
     * 给控件添加事件
     */
    private void initEvent() {
        swipeRefreshLayout.setOnRefreshListener(this);

        //设置圆圈进度条的背景颜色
//        swipeRefreshLayout.setProgressBackgroundColorSchemeColor(
//                getResources().getColor(R.color.colorPrimary));

        //设置进度条变化的颜色
        swipeRefreshLayout.setColorSchemeResources(
                R.color.firstColor,
                R.color.secondColor,
                R.color.thirdColor,
                R.color.forthColor);
    }

    /**
     * 初始化界面控件
     */
    private void initView() {
        swipeRefreshLayout = (SwipeRefreshLayout) findViewById(R.id.swipe_google_and_loadmore_refresh_layout);
        loadMoreListView = (LoadMoreListView) findViewById(R.id.google_and_loadmore_refresh_listview);
        loadMoreListView.setOnRefreshListener(this);
    }

    /**
     * 触发了下拉刷新事件,就会执行onRefresh()方法,这样就能在这个
     * 方法中去执行网络获取最新的数据,然后再刷新到listview上面
     */
    @Override
    public void onRefresh() {
        //因为本例中没有从网络获取数据,因此这里使用Handler演示4秒延迟来从服务器获取数据的延迟现象,以便于大家
        // 能够看到listView正在刷新的状态。大家在现实使用时只需要使用run(){}方法中的代码就行了。
        Handler handler = new Handler();
        handler.postDelayed(new Runnable() {
            @Override
            public void run() {
                //获取最新的list数据
                setRefreshData();
                //通知界面显示,
                adapter.notifyDataSetChanged();
                // 通知listview刷新数据完毕,让listview停止刷新
                swipeRefreshLayout.setRefreshing(false);
            }
        }, 6000);
    }

    /**
     * 模拟加载刷新数据
     */
    private void setRefreshData() {
        //这里只是模拟3个列表项数据,在现实开发中,listview中的数据都是从服务器获取的。
        for (int i = 0; i < 3; i++) {
            ListViewItem item = new ListViewItem();
            item.setUserImg(R.mipmap.ic_launcher);
            item.setUserName("seven" + i);
            item.setUserComment("这是一个下拉刷新,上拉加载更多的ListView");
            items.add(item);
        }
    }

    /**
     * ”加载更多“ 的回调接口方法
     */
    @Override
    public void onLoadingMore() {

        //因为本例中没有从网络获取数据,因此这里使用Handler演示4秒延迟来从服务器获取数据的延迟现象,以便于大家
        // 能够看到listView正在刷新的状态。大家在现实使用时只需要使用run(){}方法中的代码就行了。
        Handler handler = new Handler();
        handler.postDelayed(new Runnable() {
            @Override
            public void run() {
                //获取最新的list数据
                setRefreshData();
                //通知界面显示,
                adapter.notifyDataSetChanged();
                // 通知listview刷新数据完毕,让listview停止刷新,取消加载跟多
                loadMoreListView.loadMoreComplete();
            }
        }, 6000);
    }
}

     点击打开链接下载示例,免积分




  • 7
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue是一个流行的JavaScript框架之一,它可以用于轻松实现网络图片瀑布流、下拉刷新上拉加载更多。以下是一些步骤来实现这些功能。 1. 导入所需模块:Vue-CLI提供了一个便捷的方式来安装和使用需要的组件和库。在这种情况下,你需要安装Vue和vue-infinite-scroll并在代码中导入它们。 ``` import Vue from 'vue' import InfiniteScroll from 'vue-infinite-scroll' Vue.use(InfiniteScroll) ``` 2. 在HTML中创建一个包含瀑布流的容器:使用Vue实现瀑布流,可以使用Masonry.js,可以在CSS Grid/Flexbox布局中实现也可以使用其他可用的库。在这里,Masonry.js被用来构建瀑布流。 ``` <div class="grid" ref="grid"> <div class="grid-item" v-for="(image, i) in images" :key="i"> <img :src="image.url" alt=""> </div> </div> ``` 3. 监听滚动事件并加载更多:将vue-infinite-scroll绑定到容器上,通过监听当前可见区域的滚动位置,以决定何时需要加载更多数据。 ``` <infinite-scroll ref="infiniteScroll" @infinite="loadMore" :distance="100"> </infinite-scroll> ``` 4. 绑定数据源并请求初始数据:使用Vue在代码中设置一个名为“ images”的数据源数组,并在初始加载时通过API请求数据,并在加载完成后更新此数据源。 ``` data () { return { images: [], lastPage: 0, isLoadMore: true, api: 'https://api.flickr.com/services/rest/', apiKey: '<your-api-key>', userId: '<your-user-id>', method: 'flickr.people.getPublicPhotos', perPage: 20, page: 1, format: 'json', nojsoncallback: 1 } }, mounted () { this.loadMore() }, methods: { loadMore () { if (!this.isLoadMore) return this.isLoadMore = false axios.get(this.api, { params: { api_key: this.apiKey, user_id: this.userId, method: this.method, per_page: this.perPage, page: this.page, format: this.format, nojsoncallback: this.nojsoncallback } }).then(response => { this.images = this.images.concat(response.data.photos.photo) this.lastPage = response.data.photos.pages this.page++ this.isLoadMore = true }) } } ``` 总之,使用Vue实现网络图片瀑布流、下拉刷新上拉加载更多可以使你的Web站点更具吸引力,并增加用户体验。以上是一个简单的示例,如果想要实现此功能,你可以按照需要引入适当的库和框架,并根据你的需求自己定制代码。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值