ViewPager +Fragment实现数据懒加载

最新推荐文章于 2019-10-24 10:09:51 发布

莲芸轩

最新推荐文章于 2019-10-24 10:09:51 发布

阅读量3.7k

点赞数

分类专栏： ViewPager +Fragment 文章标签： viewPager + Fragement

本文链接：https://blog.csdn.net/qq994467433/article/details/83448981

版权

ViewPager +Fragment 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

关于ViewPager延时加载的问题，网上有很多都给了案例了，我自己也看了很多。总结起来就是在用户能看到当前页面才加载数据。然后就是所谓的懒加载只是在需要的时候才加载数据，而其他的控件如TextView这些还是会因为ViewPager 的预加载机制而缓存好。还有懒加载不会把你需要的时间缩短比如你扫描需要10秒，这个时间并不会改变除非你优化性能。
先来个效果图好了
这个是gif来着但是貌似不起作用了如果效果图看不到，那你可以把你的微信强行停止然后再进去，依次点击消息，通讯录，发现，我。你注意观察第一次加载的时候是有一个旋转的小圈圈的，其实就是告诉你正在加载中，之后不管你怎么切换都不会再加载了。我实现的也是这个效果。
好了来看看具体的代码，原理就不分析了~~毕竟现在的我也分析不出来啊~~ 但是还是要介绍点基本东西。首先是在Fragment里面有setUserVisibleHint和getUserVisibleHint方法，就是当界面由可见变成不可见或者不可见变为可见的时候调用。思路就是可见的时候加载数据，不可见的时候不加载。首先来看看抽取的基类Fragment

public abstract class BaseFragment extends Fragment {
    /** Fragment当前状态是否可见 */
    protected boolean isVisible;

    @Override
    public void setUserVisibleHint(boolean isVisibleToUser) {
        super.setUserVisibleHint(isVisibleToUser);

        if(getUserVisibleHint()) {
            isVisible = true;
            onVisible();
        } else {
            isVisible = false;
            onInvisible();
        }
    }
 //  可见
    protected void onVisible() {
        lazyLoad();
    }
   // 不可见
    protected void onInvisible() {

    }

   //延迟加载
   //子类必须重写此方法
    protected abstract void lazyLoad();
}

子类需要实现继承上面那个类，在这里为了体验加载耗时我开了一个异步任务类，并让线程休眠1秒。换到项目中的话还得看你自己的具体任务了。
private static final String TAG = “FragmentOne”;
private View rootView;
/** 标志位，标志已经初始化完成 /
private boolean isPrepared;
/* 是否已被加载过一次，第二次就不再去请求数据了 */
private boolean mHasLoadedOnce;
//加载中的布局
private RelativeLayout loadingLayout;

private TextView textView;
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
    if (rootView == null){
        rootView = inflater.inflate(R.layout.fragment_one,container,false);
        loadingLayout = rootView.findViewById(R.id.dialog_loading);
        textView = rootView.findViewById(R.id.one_text);
        isPrepared = true;
        lazyLoad();
        Log.e(TAG, "onCreateView: =====" );
    }
    return rootView;
}
@Override
protected void lazyLoad() {
    if (!isPrepared || !isVisible || mHasLoadedOnce){
        return;
    }
    new AsyncTask<Void, Void, Boolean>() {

        @Override
        protected void onPreExecute() {
            super.onPreExecute();
            //显示加载进度对话框
            loadingLayout.setVisibility(View.VISIBLE);
        }

        @Override
        protected Boolean doInBackground(Void... params) {
            try {
                Thread.sleep(1000);
                //在这里添加调用接口获取数据的代码
                //doSomething()
            } catch (Exception e) {
                e.printStackTrace();
            }
            return true;
        }

        @Override
        protected void onPostExecute(Boolean isSuccess) {
            if (isSuccess) {
                // 加载成功
                mHasLoadedOnce = true;
                Log.e(TAG, "onPostExecute: =====isSuccedd=====" );
            } else {
                // 加载失败
                Toast.makeText(FragmentOne.this.getActivity(),"我擦咧失败了",Toast.LENGTH_SHORT).show();
            }
            //关闭对话框
            loadingLayout.setVisibility(View.GONE);
            textView.setText("我是碎片一");
        }
    }.execute();
}

@Override
public void onAttach(Context context) {
    super.onAttach(context);
    Log.e(TAG, "onAttach: =====" );
}

@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    Log.e(TAG, "onCreate: =====" );
}

@Override
public void onActivityCreated(@Nullable Bundle savedInstanceState) {
    super.onActivityCreated(savedInstanceState);
    Log.e(TAG, "onActivityCreated: =====" );
}

@Override
public void onStart() {
    super.onStart();
    Log.e(TAG, "onStart: =====" );
}

@Override
public void onResume() {
    super.onResume();
    Log.e(TAG, "onResume: =====" );
}

@Override
public void onPause() {
    super.onPause();
    Log.e(TAG, "onPause: =====" );
}

@Override
public void onStop() {
    super.onStop();
    Log.e(TAG, "onStop: =====" );
}

@Override
public void onDestroyView() {
    super.onDestroyView();
    if (null != rootView){
        ((ViewGroup)rootView.getParent()).removeView(rootView);
        Log.e(TAG, "onDestroyView: =====" );
    }
}

@Override
public void onDestroy() {
    super.onDestroy();
    Log.e(TAG, "onDestroy: =====" );
}

@Override
public void onDetach() {
    super.onDetach();
    Log.e(TAG, "onDetach: =====" );
}

Fragment的布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <RelativeLayout
        android:id="@+id/dialog_loading"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerInParent="true"
        android:visibility="gone">
    <ProgressBar
        android:id="@+id/progress_bar"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerInParent="true"/>
        <TextView
            android:layout_below="@id/progress_bar"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:textSize="50sp"
            android:text="Loading"/>
    </RelativeLayout>
    <TextView
        android:id="@+id/one_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="50sp"
        android:gravity="center"/>
</RelativeLayout>

因为我自己对生命周期的具体流程记得不是特别牢固，所以把所有的周期方法全部都写出来并打印log。子类里面就是需要实现lazyLoad()方法。然后在onCreateView和onDestroyView中的写法是为了防止Fragment视图反复创建和销毁。如果这个你不明白的话可以到ViewPager + Fragment重复销毁加载视图的解决办法去看看。同样为了防止数据的反复加载也设置了一个标志位用来记录数据是否已经加载过了。这样的子类一共有4个，其余的跟这个类似。
接下来是MainActivity

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    private TextView itemOne;
    private TextView itemTwo;
    private TextView itemThree;
    private TextView itemFour;
    private ViewPager viewPager;
    private List<Fragment> myList;
    private MyAdapter myAdapter;
    FragmentOne fragmentOne;
    FragmentTwo fragmentTwo;
    FragmentThree fragmentThree;
    FragmentFour fragmentFour;
    FragmentTransaction fragmentTransaction;
    private static final String TAG = "MainActivity";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        myList = new ArrayList<>();
        fragmentOne = new FragmentOne();
        fragmentTwo = new FragmentTwo();
        fragmentThree = new FragmentThree();
        fragmentFour = new FragmentFour();
        fragmentTransaction = getSupportFragmentManager().beginTransaction();
        myAdapter = new MyAdapter(getSupportFragmentManager(), myList);
        myList.add(fragmentOne);
        myList.add(fragmentTwo);
        myList.add(fragmentThree);
        myList.add(fragmentFour);
        viewPager.setAdapter(myAdapter);
        //初始化第一个页面
        viewPager.setCurrentItem(0);
        //对应的item背景变为红色
        itemOne.setBackgroundColor(Color.RED);
        Log.e(TAG, "onCreate: =======" );
    }

    private void initView() {
        itemOne = findViewById(R.id.item_one);
        itemOne.setOnClickListener(this);
        itemTwo = findViewById(R.id.item_two);
        itemTwo.setOnClickListener(this);
        itemThree = findViewById(R.id.item_three);
        itemThree.setOnClickListener(this);
        itemFour = findViewById(R.id.item_four);
        itemFour.setOnClickListener(this);
        viewPager = findViewById(R.id.view_pager);
        viewPager.setOnPageChangeListener(onPageChangeListener);
    }
    //设置viewPager滑动监听事件，让viewPager滑动的时候菜单栏跟着变化
    ViewPager.OnPageChangeListener onPageChangeListener = new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int i, float v, int i1) {

        }

        @Override
        public void onPageSelected(int i) {

            switch (i) {
                case 0:
                    itemOne.setBackgroundColor(Color.RED);
                    itemTwo.setBackgroundColor(Color.WHITE);
                    itemThree.setBackgroundColor(Color.WHITE);
                    itemFour.setBackgroundColor(Color.WHITE);
                    break;
                case 1:
                    itemOne.setBackgroundColor(Color.WHITE);
                    itemTwo.setBackgroundColor(Color.RED);
                    itemThree.setBackgroundColor(Color.WHITE);
                    itemFour.setBackgroundColor(Color.WHITE);
                    break;
                case 2:
                    itemOne.setBackgroundColor(Color.WHITE);
                    itemTwo.setBackgroundColor(Color.WHITE);
                    itemThree.setBackgroundColor(Color.RED);
                    itemFour.setBackgroundColor(Color.WHITE);
                    break;
                case 3:
                    itemOne.setBackgroundColor(Color.WHITE);
                    itemTwo.setBackgroundColor(Color.WHITE);
                    itemThree.setBackgroundColor(Color.WHITE);
                    itemFour.setBackgroundColor(Color.RED);
                    break;
            }
        }

        @Override
        public void onPageScrollStateChanged(int i) {

        }
    };

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.item_one:
                viewPager.setCurrentItem(0);
                itemOne.setBackgroundColor(Color.RED);
                itemTwo.setBackgroundColor(Color.WHITE);
                itemThree.setBackgroundColor(Color.WHITE);
                itemFour.setBackgroundColor(Color.WHITE);
                break;
            case R.id.item_two:
                viewPager.setCurrentItem(1);
                itemOne.setBackgroundColor(Color.WHITE);
                itemTwo.setBackgroundColor(Color.RED);
                itemThree.setBackgroundColor(Color.WHITE);
                itemFour.setBackgroundColor(Color.WHITE);
                break;
            case R.id.item_three:
                viewPager.setCurrentItem(2);
                itemOne.setBackgroundColor(Color.WHITE);
                itemTwo.setBackgroundColor(Color.WHITE);
                itemThree.setBackgroundColor(Color.RED);
                itemFour.setBackgroundColor(Color.WHITE);
                break;
            case R.id.item_four:
                viewPager.setCurrentItem(3);
                itemOne.setBackgroundColor(Color.WHITE);
                itemTwo.setBackgroundColor(Color.WHITE);
                itemThree.setBackgroundColor(Color.WHITE);
                itemFour.setBackgroundColor(Color.RED);
                break;
        }
    }
}

这个没什么好解释的了，就是基本的用法视图的初始化监听等
MainActivity的布局代码

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/item_one"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="40dp"
            android:gravity="center"
            android:text="@string/item_one"
            android:background="@drawable/item_bg"
            android:textSize="26sp"/>

        <TextView
            android:id="@+id/item_two"
            android:layout_width="0dp"
            android:layout_height="40dp"
            android:layout_weight="1"
            android:gravity="center"
            android:text="@string/item_two"
            android:background="@drawable/item_bg"
            android:textSize="26sp"/>

        <TextView
            android:id="@+id/item_three"
            android:layout_width="0dp"
            android:layout_height="40dp"
            android:layout_weight="1"
            android:gravity="center"
            android:text="@string/item_three"
            android:background="@drawable/item_bg"
            android:textSize="26sp"/>
        <TextView
            android:id="@+id/item_four"
            android:layout_width="0dp"
            android:layout_height="40dp"
            android:layout_weight="1"
            android:gravity="center"
            android:text="@string/item_four"
            android:background="@drawable/item_bg"
            android:textSize="26sp"/>
    </LinearLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />
</LinearLayout>

当然还有适配器啦

public class MyAdapter extends FragmentPagerAdapter {
    private List<Fragment> list;

    public MyAdapter(FragmentManager fm, List<Fragment> list) {
        super(fm);
        this.list = list;
    }
    @Override
    public Fragment getItem(int i) {
        return list.get(i);
    }

    @Override
    public int getCount() {
        return list == null ? 0 : list.size();
    }
}

这个你如果用过ListView就该明白是几个意思了。
好了这样就实现了数据延时加载，并且只加载一次同时Fragment视图也不会反复创建和销毁。这个延时加载的方法我借鉴了一位简书上的作者文章，但是转眼找不到连接了（o(╥﹏╥)o）。总之谢谢他给我的启发啦！
最后附上源码下载

莲芸轩

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
ViewPager +Fragment实现数据懒加载

关于ViewPager延时加载的问题，网上有很多都给了案例了，我自己也看了很多。总结起来就是在用户能看到当前页面才加载数据。然后就是所谓的懒加载只是在需要的时候才加载数据，而其他的控件如TextView这些还是会因为ViewPager 的预加载机制而缓存好。还有懒加载不会把你需要的时间缩短比如你扫描需要10秒，这个时间并不会改变除非你优化性能。先来个效果图好了如果效果图看不到，那你可以把你的微...
复制链接

扫一扫

专栏目录