Android : 自定义上拉加载的ListView

最新推荐文章于 2026-01-08 10:46:20 发布

原创最新推荐文章于 2026-01-08 10:46:20 发布 · 482 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#android #listview

Android 专栏收录该内容

133 篇文章

订阅专栏

本文介绍如何在Android应用中使用自定义的ListView组件实现分页加载数据的功能，包括底部加载指示、数据加载监听及数据加载完成后的处理。

效果图：

ListView

源代码：

listview_footer.xml

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center"
        android:paddingTop="20dp"
        android:paddingBottom="20dp"
        android:id="@+id/up_load_layout">

        <ProgressBar
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            style="?android:attr/progressBarStyleSmall"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="正在加载..."/>

        </LinearLayout>
</LinearLayout>

UpLoadListView.java

public class UpLoadListView extends ListView implements AbsListView.OnScrollListener {

    /**
     * 加载更多数据的回调接口
     * 在Activity中实现该接口
     */
    public interface ILoadListener{
        void onLoad();
    }

    /**
     * 加载数据的接口
     */
    private ILoadListener loadListener = null;
    public void setLoadListener(ILoadListener listener){
        this.loadListener = listener;
    }

    /**
     * 是否滚动到底部
     */
    private boolean bFooter = false;

    /**
     * 是否正在加载
     */
    private boolean bLoading = false;

    /**
     * 底部布局
     */
    private View footer;

    public UpLoadListView(Context context) {
        super(context);

        init(context);
    }

    public UpLoadListView(Context context, AttributeSet attrs) {
        super(context, attrs);

        init(context);
    }

    public UpLoadListView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        init(context);
    }

    /**
     * 初始化
     */
    private void init(Context context){
        /**
         * 添加底部布局
         */
        LayoutInflater inflater = LayoutInflater.from(context);
        footer = inflater.inflate(R.layout.listview_footer, null);
        footer.findViewById(R.id.up_load_layout).setVisibility(View.GONE);
        this.addFooterView(footer);

        /**
         * 设置滚动监听
         */
        this.setOnScrollListener(this);
    }

    /**
     * 滚动到底部时，显示底部布局，加载数据
     * @param view
     * @param scrollState
     */
    @Override
    public void onScrollStateChanged(AbsListView view, int scrollState) {
        if (bFooter && scrollState == SCROLL_STATE_IDLE){
            if (!bLoading){
                bLoading = true;

                /**
                 * 显示底部布局
                 */
                footer.findViewById(R.id.up_load_layout).setVisibility(View.VISIBLE);

                /**
                 * 加载数据
                 */
                if (loadListener != null){
                    loadListener.onLoad();
                }
            }
        }
    }

    /**
     * 判断是否滚到底部
     * @param view
     * @param firstVisibleItem
     * @param visibleItemCount
     * @param totalItemCount
     */
    @Override
    public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
        Log.i("tag",
                "firstVisibleItem: " + firstVisibleItem +
                " visibleItemCount: " + visibleItemCount +
                " totalItemCount: " + totalItemCount);
        bFooter = (firstVisibleItem + visibleItemCount == totalItemCount);
    }

    /**
     * 加载完毕
     */
    public void loadCompleted(){
        bLoading = false;

        /**
         * 隐藏底部布局
         */
        footer.findViewById(R.id.up_load_layout).setVisibility(View.GONE);
    }
}

测试：

listview_up_load.xml

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

    <UpLoadListView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/up_load_listview"></UpLoadListView>
</LinearLayout>

ListViewUpLoadActivity.java

public class ListViewUpLoadActivity extends Activity {

    private List<Map<String, Object>> data;
    private SimpleAdapter adapter;
    private UpLoadListView listView;

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

        data = new ArrayList<Map<String,Object>>();
        for (int i=0;i<10;i++){
            Map<String,Object> map = new HashMap<String, Object>();
            map.put("pic", R.drawable.toggle_button_off);
            map.put("txt", "慕课网"+i);
            map.put("info", "详细信息详细信息详细信息");
            data.add(map);
        }
        adapter = new SimpleAdapter(this, data,
                R.layout.listview_item,
                new String[]{"pic","txt", "info"},
                new int[]{R.id.item_image, R.id.item_text, R.id.item_info});

        listView = (UpLoadListView)findViewById(R.id.up_load_listview);
        listView.setAdapter(adapter);

        listView.setLoadListener(new UpLoadListView.ILoadListener() {
            @Override
            public void onLoad() {

                Handler handler = new Handler();
                handler.postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        /**
                         * 获取更多数据
                         */
                        for (int i=0;i<2;i++){
                            Map<String,Object> map = new HashMap<String, Object>();
                            map.put("pic", R.drawable.toggle_button_off);
                            map.put("txt", "更多数据"+i);
                            map.put("info", "详细信息详细信息详细信息");
                            data.add(map);
                        }

                        /**
                         * 通知数据更新
                         */
                        adapter.notifyDataSetChanged();

                        /**
                         * 通知加载完毕
                         */
                        listView.loadCompleted();
                    }
                }, 2000);
            }
        });
    }
}

参考资料：Android的ListView分页功能