ViewPager(懒加载)+Fragment+自定义View

最新推荐文章于 2022-07-08 08:36:36 发布
最新推荐文章于 2022-07-08 08:36:36 发布
阅读量1k 收藏
点赞数 1
CC 4.0 BY-SA版权
文章标签： viewpager ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ahaSweater/article/details/66476843
本文介绍如何使用ViewPager结合Fragment构建主界面，讨论了底部导航的两种实现方式，作者倾向于使用ViewPager+Fragment的方式，因为它允许灵活地切换滑动功能。此外，文章还提到了对Fragment的封装，以增强扩展性和维护性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

主界面的UI与设计

现在一般的项目都是底部几个按钮对应这几个fragment这种情况，这种大体上可以有2种写法

  1. FragmentTabHost/（RadiuGroup+RadiuButton）等等一些底部按钮+Fragment来展示
  2. 一些底部按钮+ViewPager+Fragment来实现

这两种我个人更喜欢使用的是第二种，并且在最近的项目中也是用第二种方式来实现的，如果产品说底部按钮对应的页面是不能够滑动的，那么两种没什么区别，(viewPager可以禁止滑动来实现)可后来如果产品又说需要滑动了，那如果用第一种实现的就傻了,而第二种默认就是可以滑动的只需要简单的修改一下就可以

public class ViewPagerMain  extends ViewPager{
    private boolean mIsScroll=true;//通过这个值来判断是否需要禁止滑动

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

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


    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        if (mIsScroll==true){
            return super.onInterceptTouchEvent(ev);
        }else{
            return mIsScroll;
        }


    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        if (mIsScroll==true){
            return super.onTouchEvent(ev);
        }else{
            return mIsScroll;
        }

    }

    public void setIsScroll(boolean isScroll){
        mIsScroll = isScroll;
    }
}

至于底部的那些按钮我并没有使用上面的一些Android原生控件，而是通过
布局文件自己摆放，我个人认为这样的话扩展性更高一些，当然这只是一部分原因后面的代码大家可以看到这么写的好处
底部xml

<LinearLayout
    android:id="@+id/main_bottom_root"
    android:layout_width="match_parent"
    android:layout_height="@dimen/y96"
    android:background="#fff"
    >
    <LinearLayout
        android:id="@+id/home_root"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical"
        android:gravity="center"
        >
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:gravity="center"
            >
            <ImageView
                android:id="@+id/iv_home"
                style="@style/bottom_iv"
                android:background="@drawable/home_selector"
                />
            <TextView
                android:id="@+id/tv_home"
                style="@style/main_tv"
                android:text="晒e晒"
                />
        </LinearLayout>

    </LinearLayout>
    <LinearLayout
        android:id="@+id/rb_message"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical"
        android:gravity="center"
        >
        <ImageView
            android:id="@+id/iv_message"
            style="@style/bottom_iv"
            android:background="@drawable/message_selector" />
        <TextView
            android:id="@+id/tv_message"
            style="@style/main_tv"
            android:text="消息"
            />
    </LinearLayout>
    <LinearLayout
        android:id="@+id/rb_service"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical"
        android:gravity="center"

        >

        <ImageView
            style="@style/bottom_iv"
            android:background="@drawable/service_selector"
            android:id="@+id/iv_service" />

        <TextView
            android:id="@+id/tv_service"
            style="@style/main_tv"
            android:text="服务"
            />

    </LinearLayout>
    <LinearLayout
        android:id="@+id/rb_find"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical"
        android:gravity="center"
        >
        <ImageView
            android:id="@+id/iv_find"
            style="@style/bottom_iv"
            android:background="@drawable/find_selector" />
        <TextView
            android:id="@+id/tv_find"
            style="@style/main_tv"
            android:text="发现"
            />

    </LinearLayout>
    <LinearLayout
        android:id="@+id/rb_my"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical"
        android:gravity="center"
        >
        <ImageView
            android:id="@+id/iv_mine"
            style="@style/bottom_iv"
            android:background="@drawable/mine_selector" />
        <TextView
            android:id="@+id/tv_mine"
            style="@style/main_tv"
            android:text="我的"
            />
    </LinearLayout>

</LinearLayout>


/**
 * 监听底部按钮的切换状态，mMainBottomRoot为底部按钮的根布局，这样封装的话如果底部按钮的数量有变动
 * 这段代码不用发生什么变动，而且下一个项目用到的话直接复制粘贴
private void setBottomListener() {
    int childCount = mMainBottomRoot.getChildCount();
    for (int i = 0; i <childCount ; i++) {
        //获得子布局,为每个子view设置点击事件
        LinearLayout child = (LinearLayout) mMainBottomRoot.getChildAt(i);
        child.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //通过mMainBottomRoot来获得点击view对应的索引值
                int indexOfChild = mMainBottomRoot.indexOfChild(view);
                //根据索引来改变UI效果
                changeUI(indexOfChild);
                //viewPager也跳到对应的Fragment中
                mViewpagerMain.setCurrentItem(indexOfChild, false);
            }
        });
    }
}

/**
 *  当viewPager切换的时候更改底部按钮的UI状态
 * @param position
 */
private void changeUI(int position) {
    for (int i = 0; i <mMainBottomRoot.getChildCount() ; i++) {
        if (i==position){
            setEnable(mMainBottomRoot.getChildAt(i),false);
        }else{
            setEnable(mMainBottomRoot.getChildAt(i),true);
        }


    }
}

/**
 * 更改底部按钮UI状态,如果是view直接setEnable，如果是viewGroup递归遍历其中的view setEnable
 * @param childAt
 * @param b
 */
private void setEnable(View childAt, boolean b) {

    childAt.setEnabled(b);
    if (childAt instanceof ViewGroup){
        for (int i = 0; i < ((ViewGroup) childAt).getChildCount(); i++) {
            setEnable(((ViewGroup) childAt).getChildAt(i),b);
        }
    }
}

至于Fragment 我这里对Fragment展示的布局做了进一步封装，因为现在项目的主界面大体上不外呼刚进来时候弹个ProgressBar，DialogFragmen等与用户进行交互，当数据请求回来再隐藏销毁，如果数据请求失败再展示个失败的界面
这里我对它又进行了一次封装，不仅减少了代码的书写也加强了扩展性和维护性
/**
* BaseFragment
*/

public abstract class MyBaseFragment extends Fragment {

    protected Context context;
    protected StateLayout stateLayout;
    protected boolean isFirst = true;
    protected boolean isPrepared;
    private Unbinder mUnbinder;


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        context = getActivity();
        //防止Fragment重复加载
        if (stateLayout == null) {
            // 说明这个Fragemnt的onCreateView方法是第一次执行
            View view = getContentView();
            mUnbinder = ButterKnife.bind(this, view);
            //对Fragment展示的布局进一步封装
            stateLayout = StateLayout.newInstance(context, view);
            initView();
            initListener();
            //
            isPrepared = true;
        } else {
            ViewGroup parent = (ViewGroup) stateLayout.getParent();
            if (parent != null) {
                parent.removeView(stateLayout);
            }
        }
        return stateLayout;
    }


    /**
     * Fragment当前状态是否可见
     */
    protected boolean isVisible;

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

        if (isVisibleToUser) {
            isVisible = true;
            LogUtil.e(getClass().getName()+"__________setUserVisibleHint");
            onVisible();
        } else {
            isVisible = false;
            onInvisible();
        }
    }

    @Override
    public void onResume() {
        super.onResume();
        LogUtil.e(getClass().getName()+"__________onResume");
        onVisible();
    }

    /**
     * 对initData再进一步的封装
     */
    protected void onVisible() {
        //保证ViewPager能够实现懒加载的方式并保证只有第一次进入这个Fragment的时候才进行数据的加载
        LogUtil.e("isFirst _____________" + isFirst);
        LogUtil.e("isVisible _____________" + isVisible);
        LogUtil.e("isPrepared _____________" + isPrepared);
        if (!isFirst || !isVisible || !isPrepared) {
            return;
        }
        initData();
        isFirst = false;
    }


    /**
     * 不可见
     */
    protected void onInvisible() {


    }


    /**
     * 查找View，增加这个方法是为了略强转
     *
     * @param id
     * @return
     */
    @SuppressWarnings("unchecked")
    public <T> T findView(int id) {
        T view = (T) stateLayout.findViewById(id);
        return view;
    }




    @Override
    public void onDestroy() {
        super.onDestroy();
        if (mUnbinder!=null){
            mUnbinder.unbind();
        }

    }

    /**
     * 返回Fragment自己的名称
     */
    protected  CharSequence getTitle(){
        return getClass().getName();
    };

    /**
     * 初始化View相关的代码写在这个方法中
     */
    public abstract void initView();

    /**
     * 初始化Listener的代码写在这个方法中
     */
    public abstract void initListener();

    /**
     * 初始化数据的代码写在这个方法中
     */
    public abstract void initData();

    /**
     * 返回正常的界面想要展示的View或View的Id
     */
    public abstract View getContentView();
}
public class StateLayout extends FrameLayout {

    private View loadingView;
    private View failView;
    private View emptyView;
    private View contentView;

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

    /**
     * 创建一个StateLayout实现
     * @param contentView 正常想要展示的View
     */
    public static StateLayout newInstance(Context context, View contentView) {
        StateLayout stateLayout = (StateLayout) LayoutInflater.from(context).inflate(R.layout.state_layout, null);
        stateLayout.contentView=contentView;
        // StateLayout inflate之后就有3个状态的View了，还需要第四种状态
        stateLayout.addView(contentView);
        //当添加完成后暂时给隐藏掉
        contentView.setVisibility(View.GONE);
        return stateLayout;
    }



    /**
     * 渲染完毕后展示获取view对象
     */
    @Override
    protected void onFinishInflate() {
        loadingView = findViewById(R.id.loadingView);
        failView = findViewById(R.id.failView);
        emptyView = findViewById(R.id.emptyView);

        showLoadingView();
    }

    /** 显示正在加载的View */
    public void showLoadingView() {
        showView(loadingView);
    }

    /** 显示失败的View */
    public void showFailView() {
        showView(failView);
    }

    /** 显示加载为空的View */
    public void showEmptyView() {
        showView(emptyView);
    }

    /** 显示正常界面的View */
    public void showContentView() {
        showView(contentView);
    }

    /** 
     * 显示指定的View，并且隐藏其它的View
     * @param view 指定要显示的View
     */
    private void showView(View view) {

        for (int i = 0; i < getChildCount(); i++) {
            View child = getChildAt(i); //
            child.setVisibility(view == child ? View.VISIBLE : View.GONE);
        }
    }

}

具体的我就不细说了，
有需要的话可以
下来看看https://github.com/wangrun1992/MainUiFrame

ahaSweater
关注
ViewPager+Fragment+ViewPager+Fragment
publicperson的博客
03-04 3925
最近一段时间，Android行业大不如从前轻松，企业要求越来越高了，就算入职了很多时候Android这块也不太受重视，现在Android开发者还能经常接到新需求就算是很幸运的事了，我最近的工作也是没什么活，闲来无事就整理一下Android的一些东西，以免遗忘。 这次要做的类似于许多新闻资讯类app，底部tab切换不同的功能页面，首页中又可以切换不同的新闻类型页面，当切换到最后一个新闻fragme...
ViewPager+Fragment+MagicIndicator实现多子界面带导航栏滑动
lxy1740的博客
10-22 2025
MagicIndicator ViewPager 指示器框架 —— MagicIndicator 简单使用示例 添加依赖 dependencies { compile project(':magicindicator') } 在布局文件中添加MagicIndicator <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/an
ViewPager的懒加载
04-22
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.youkuaiyun.com/happiness365/article/detail
Fragment结合ViewPager之懒加载 1
09的专栏
08-25 470
什么是懒加载？为什么要用懒加载？ 1、什么是懒加载 懒加载就是当ViewPager和Fragment结合在一起使用时，Fragment呈现在用户面前时才加载数据，当其从未被呈现在用户面前时，不会执行加载数据的代码。这就是我所理解的懒加载。 2、为什么要用懒加载 ViewPager默认会预加载下一页，对于某些重量级的Fragment来说无疑会造成很大的开销，当然了，如果对于你来说这些开销是必
viewpager懒加载
倒骑驴走着瞧的博客
09-20 353
viewpager懒加载 涉及到一下几点： 通过offscreenPageLimit控制缓存page个数，个数为n*2+1 当加载的page超过cache count，会用FragmentManager来释放fragment 当fragment被显示在屏幕上时，setUserVisibleHint为true，不显示为false FragmentPagerAdapter被回收的fragment...
网易布局viewpager+fragment+scrollview+recycleview
09-29
ViewPager通常用于实现页面滑动效果，Fragment则允许在单个Activity中展示多个可交互的视图，ScrollView提供垂直滚动功能，而RecyclerView是一种更优化的ListView，用于显示大量数据并支持动态加载。 【描述】：...
viewpager+fragment 动态更新数据
05-20
3. 数据懒加载：只有当`Fragment`可见时才加载数据，这可以通过重写`Fragment`的`onResume`和`onPause`方法实现。 总结，`ViewPager+Fragment`动态更新数据涉及了Android组件的交互、数据管理、性能优化等多个方面...
viewPager + fragment实现懒加载并且只加载一次
10-27
综上所述，实现`ViewPager` + `Fragment` 的懒加载并仅加载一次，关键在于正确地管理`Fragment` 的生命周期，控制数据的加载时机，并通过自定义`PagerAdapter` 和监听页面切换来实现优化。`...
ViewPager加载自定义View，按钮也可以控制滑动
06-04
ViewPager通过List内容加载list.size()个自定义View，并且可以通过左右按钮实现滑动页面，点击删除按钮可以删除当前显示的内容。
ViewPager懒加载
lixuce1234的博客
04-07 388
ViewPager在日常开发中经常使用. 在一个Pager页面比较复杂时候回使用Fragment来替代View作为ViewPager的页面显示. FragmentPagerAdapter来替代PagerAdapter作为适配器. 参考文档: lvzishen123 但是ViewPager默认是加载三个页面, 当前页面以及左右页面. 如果一个页面的数据量非常大, 会造成流量的浪费和卡顿
关于ViewPager懒加载的问题
Angle0o的博客
07-06 767
由于项目中用到viewpager但是需求是每次尽到页面都要刷新界面,因为viewpager默认是缓存三页即便是设置setoffScreenPageLimit(1);也是默认加载3页的,不信你可以尝试一下,当时在网上搜了好久,有什么换jar包的,还有什么...反正很多,其中有一篇帖子写的很好就是把ViewPager重写了 之后导入你的项目里就OK了,用法和ViewPager一样.
懒加载LazyViewPager
蛮吉的博客
09-18 257
需求只希望一次滑动加载一个Fragment，这个就能满足需求。 /* * Copyright (C) 2011 The Android Open Source Project * * Licensed under the Apache License, Version 2.0 (the "License"); * * you may not use this file except...
ViewPager 懒加载 lazyload
ttlan的博客
07-08 352
ViewPager 懒加载 lazyload 嵌套fragment
android中使用viewpager延迟加载页面
11-11 1169
最重要的一点是:private static final int DEFAULT_OFFSCREEN_PAGES = 0;//默认的加载页面,ViewPager是1个,所以会加载两个Fragment    下面这个是
自定义ViewPager懒加载
丿天邪的博客
01-21 296
       自定义一个ViewPager，把原生ViewPager全拷过来，修改这个DEFAULT_OFFSCREEN_PAGES 值为0。对，就是这种解决方案，但是！没用。因为现在android版本太高，每个版本的v4包是有差异的。这就造成高版本v4包里的ViewPager就算将DEFAULT_OFFSCREEN_PAGES的值改为0，也不起作用的，其中的逻辑变了        解决方案：使用...
ViewPager的懒加载思路
xiong199208的博客
10-03 518
ViewPager的懒加载思路 在android开发中,ViewPager不仅仅是当成简单的轮播图使用,很多时候都用来搭建框架. 在这个页面中,就是两个ViewPager的嵌套,新闻中心是外部ViewPager的一个页面,其内容又是一个ViewPager. 这时候我们就要面对一个问题,ViewPager默认是会预加载的,在这个需求下,预加载会耗费用户非常多的流量,在数据请求过程中,也
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值