【Android - 框架】之刷新加载框架Ultra-Pull-To-Refresh的使用

原文地址:http://www.cnblogs.com/itgungnir/p/6211021.html


Ultra-Pull-To-Refresh框架是用来嵌套其他布局,实现下拉刷新和上拉加载的框架。它其中可以嵌套任何控件,ListView、GridView、ScrollView、RecyclerView,甚至TextView。

        这个框架在GitHub上的地址:【Ultra-Pull-To-Refresh-With-Load-More】

 

(1)首先需要导入框架依赖:

    // Ultra-Pull-To-Refresh框架的依赖
    compile 'in.srain.cube:ptr-load-more:1.0.6'

(2)在XML文件中使用:

复制代码
<?xml version="1.0" encoding="utf-8"?>
<!--
    ptr:ptr_duration_to_close_either:头部和底部回弹时间
    ptr:ptr_keep_header_when_refresh:刷新过程中是否保留头部
    ptr:ptr_pull_to_fresh:下拉刷新/释放刷新,默认是释放刷新
    ptr:ptr_ratio_of_header_height_to_refresh:触发刷新时移动的位置比例,指的是与头部的比例
    ptr:ptr_resistance:阻尼系数,越大下拉越吃力
-->
<in.srain.cube.views.ptr.PtrClassicFrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:ptr="http://schemas.android.com/apk/res-auto"
    android:id="@+id/ptr_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    ptr:ptr_duration_to_close_either="1000"
    ptr:ptr_keep_header_when_refresh="true"
    ptr:ptr_pull_to_fresh="false"
    ptr:ptr_ratio_of_header_height_to_refresh="1.2"
    ptr:ptr_resistance="1.7">

    <ListView
        android:id="@+id/id_main_lv_lv"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</in.srain.cube.views.ptr.PtrClassicFrameLayout>
复制代码

(3)MainActivity中的代码:

复制代码
package com.example.itgungnir.testultraptr;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.ArrayAdapter;
import android.widget.ListView;

import java.util.ArrayList;
import java.util.List;

import in.srain.cube.views.ptr.PtrClassicFrameLayout;
import in.srain.cube.views.ptr.PtrDefaultHandler2;
import in.srain.cube.views.ptr.PtrFrameLayout;

public class MainActivity extends AppCompatActivity {
    private PtrClassicFrameLayout ptrLayout;
    private ListView lv;

    private ArrayAdapter<String> adapter;
    private List<String> dataSource;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ptrLayout = (PtrClassicFrameLayout) findViewById(R.id.ptr_layout);
        lv = (ListView) findViewById(R.id.id_main_lv_lv);
    }

    @Override
    protected void onResume() {
        super.onResume();
        initData();
        initView();
        initEvent();
    }

    /**
     * 初始化数据
     */
    private void initData() {
        // 初始化ListView中展示的数据
        dataSource = new ArrayList<>();
        for (int i = 1; i <= 50; i++) {
            dataSource.add("Existed Old List Item " + i);
        }
    }

    /**
     * 初始化布局控件
     */
    private void initView() {
        // 初始化ListView中的数据
        adapter = new ArrayAdapter<String>(MainActivity.this, android.R.layout.simple_list_item_1, dataSource);
        lv.setAdapter(adapter);
        // 为布局设置头部和底部布局,使用自定义头部,注释掉下一行会使用默认头部
        ptrLayout.setHeaderView(new MyPtrRefresher(MainActivity.this));
        // ptrLayout.setFooterView(new MyPtrRefresher(MainActivity.this));
        ptrLayout.addPtrUIHandler(new MyPtrHandler(MainActivity.this, ptrLayout));
    }

    /**
     * 初始化事件
     */
    private void initEvent() {
        // 为布局设置下拉刷新和上拉加载的回调事件
        ptrLayout.setPtrHandler(new PtrDefaultHandler2() {
            @Override
            public void onLoadMoreBegin(PtrFrameLayout frame) { // 上拉加载的回调方法
                frame.postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        dataSource.add("New Bottom List Item");
                        adapter.notifyDataSetChanged();
                        ptrLayout.refreshComplete();
                        lv.smoothScrollToPosition(dataSource.size() - 1);
                    }
                }, 1000);
            }

            @Override
            public void onRefreshBegin(PtrFrameLayout frame) { // 下拉刷新的回调方法
                frame.postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        dataSource.add(0, "New Top List Item");
                        adapter.notifyDataSetChanged();
                        ptrLayout.refreshComplete();
                        lv.smoothScrollToPosition(0);
                    }
                }, 1000);
            }
        });
    }
}
复制代码

(4)头部和尾部布局MyPtrRefresher中的代码:

复制代码
public class MyPtrRefresher extends LinearLayout {
    public MyPtrRefresher(Context context) {
        super(context, null);
        LayoutInflater.from(context).inflate(R.layout.view_ptrrefresher, this);
    }

    public MyPtrRefresher(Context context, AttributeSet attrs) {
        super(context, attrs, 0);
        LayoutInflater.from(context).inflate(R.layout.view_ptrrefresher, this);
    }

    public MyPtrRefresher(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        LayoutInflater.from(context).inflate(R.layout.view_ptrrefresher, this);
    }
}
复制代码

(5)头部和尾部的布局文件:

复制代码
<?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="70.0dip"
    android:background="#DDDDDD"
    android:gravity="center"
    android:orientation="horizontal"
    android:padding="20.0dip">

    <ImageView
        android:id="@+id/id_header_iv_img"
        android:layout_width="30.0dip"
        android:layout_height="30.0dip"
        android:background="@mipmap/ic_launcher"
        android:contentDescription="@string/app_name"
        android:scaleType="fitXY" />

    <TextView
        android:id="@+id/id_header_tv_tip"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10.0dip"
        android:text="Loading......"
        android:textColor="#FF000000"
        android:textSize="16.0sp"
        android:textStyle="bold" />

</LinearLayout>
复制代码

(6)刷新回调类MyPtrHandler中的代码:

复制代码
package com.example.itgungnir.testultraptr;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.view.animation.RotateAnimation;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

import in.srain.cube.views.ptr.PtrFrameLayout;
import in.srain.cube.views.ptr.PtrUIHandler;
import in.srain.cube.views.ptr.indicator.PtrIndicator;

/**
 * 为Ultra-Pull-To-Refresh设置事件回调
 */
public class MyPtrHandler implements PtrUIHandler {
    private Context context;

    private ImageView img;
    private TextView tip;

    public MyPtrHandler(Context context, ViewGroup parent) {
        this.context = context;
        View view = LayoutInflater.from(context).inflate(R.layout.view_ptrrefresher, parent);
        this.img = (ImageView) view.findViewById(R.id.id_header_iv_img);
        this.tip = (TextView) view.findViewById(R.id.id_header_tv_tip);
    }

    @Override
    public void onUIReset(PtrFrameLayout frame) {
    }

    @Override
    public void onUIRefreshPrepare(PtrFrameLayout frame) {
        tip.setText("Pull To Refresh");
    }

    @Override
    public void onUIRefreshBegin(PtrFrameLayout frame) {
        tip.setText("Loading......");
        RotateAnimation animation = new RotateAnimation(0, 360, img.getPivotX(), img.getPivotY());
        animation.setFillAfter(false);
        animation.setDuration(1000);
        animation.setRepeatMode(Animation.RESTART);
        img.startAnimation(animation);
    }

    @Override
    public void onUIRefreshComplete(PtrFrameLayout frame, boolean isHeader) {
        tip.setText("Load Complete");
        Toast.makeText(context, "Load Complete!!", Toast.LENGTH_SHORT).show();
    }

    @Override
    public void onUIPositionChange(PtrFrameLayout frame, boolean isUnderTouch, byte status, PtrIndicator ptrIndicator) {
    }
}
复制代码

这个框架还可以有很多样式,如刷新时隐藏头部、iOS样式、自动刷新等等。更多样式参照GitHub中的源码。


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果你想在使用 `van-pull-refresh` 组件的同时实现滑动加载数据的功能,可以结合使用 `van-pull-refresh` 和 `van-list` 组件。 首先,在模板中使用 `van-pull-refresh` 和 `van-list` 组件来创建下拉刷新和滑动加载的效果。示例如下: ```vue <template> <div> <van-pull-refresh @refresh="onRefresh"> <van-list v-model="list" :finished="finished" @load="onLoad"> <template #default="{ item }"> <!-- 渲染每个数据项的内容 --> <van-cell :title="item.title" :value="item.value" /> </template> </van-list> </van-pull-refresh> </div> </template> <script> export default { data() { return { list: [], // 初始化为空数组 finished: false, // 滑动加载是否已完成 page: 1, // 当前页码 }; }, methods: { onRefresh() { // 下拉刷新时的逻辑 // 可以发送异步请求获取最新数据 // 示例中使用 setTimeout 模拟异步请求 setTimeout(() => { // 假设请求返回的数据是数组 const data = [ { title: 'Title 1', value: 'Value 1' }, { title: 'Title 2', value: 'Value 2' }, { title: 'Title 3', value: 'Value 3' }, ]; // 更新列表数据 this.list = data; // 取消下拉刷新状态 this.$refs.pullRefresh.finishPullDown(); }, 1000); }, onLoad() { // 滑动加载时的逻辑 // 可以发送异步请求获取更多数据 // 示例中使用 setTimeout 模拟异步请求 setTimeout(() => { // 假设请求返回的数据是数组 const data = [ { title: 'Title 4', value: 'Value 4' }, { title: 'Title 5', value: 'Value 5' }, { title: 'Title 6', value: 'Value 6' }, ]; // 更新列表数据 this.list = this.list.concat(data); // 如果已加载完所有数据,设置 finished 为 true if (this.page >= 3) { this.finished = true; } // 加载完成后调用 finishLoad 方法 this.$refs.list.finishLoad(); // 增加页码 this.page++; }, 1000); }, }, }; </script> ``` 在上述示例中,`van-pull-refresh` 组件用于实现下拉刷新的效果,当下拉刷新触发时,会调用 `onRefresh` 方法。在 `onRefresh` 方法中,可以发送异步请求获取最新的数据,并更新列表数据。最后,通过 `finishPullDown` 方法取消下拉刷新状态。 `van-list` 组件用于实现滑动加载的效果,当滑动加载触发时,会调用 `onLoad` 方法。在 `onLoad` 方法中,可以发送异步请求获取更多的数据,并更新列表数据。通过 `finishLoad` 方法告知组件加载完成。 请注意,以上示例中的异步请求使用了 setTimeout 来模拟,实际情况下需要使用适当的方式发送请求。另外,根据具体需求,你可能需要调整代码来满足你的需求。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值