Android 浅谈 ViewPager与Fregment使用

主要类容:

  1. ViewPager简单讲解
  2. ViewPager最佳实现
  3. Fregment基本简介
  4. Fregment最佳实现
  5. ViewPager与Fregment联合使用

ViewPager的简介和作用

  1. ViewPager是android扩展包v4包中的类,这个类可以让用户左右切换当前的view
  2. ViewPager类直接继承了ViewGroup类,所有它是一个容器类,可以在其中添加其他的view类。
  3. ViewPager类需要一个PagerAdapter适配器类给它提供数据。
  4. ViewPager经常和Fragment一起使用,并且提供了专门的FragmentPagerAdapter和FragmentStatePagerAdapter类供Fragment中的ViewPager使用。

ViewPager的适配器

简介中提到了PagerAdapter,和ListView等控件使用一样,需要ViewPager设置PagerAdapter来完成页面和数据的绑定,这个PagerAdapter是一个基类适配器,我们经常用它来实现app引导图,它的子类有FragmentPagerAdapter和FragmentStatePagerAdapter,这两个子类适配器用于和Fragment一起使用,在安卓应用中它们就像listview一样出现的频繁。

ViewPager最佳继承实践:

  1. 缓存所有的 Fragment,使用一个 List 将数据源对应的 Fragment 都缓存起来
  2. 更新数据源,刷新Fragment, 当有数据源更新的时候,从 List 中取出相应的 Fragment,然后刷新 Adapter
  3. 删除数据时,删除List 中对应的 Fragment,当数据源中删除某项时,将 List 中对应的 Fragment 也删除,然后刷新 Adapter

CommonViewPagerAdapter类代码:

package com.kf.fly.fangweixing.view.fragment.appstore;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

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

/**
 * <pre>
 *     sinlov
 *
 *     /\__/\
 *    /`    '\
 *  ≈≈≈ 0  0 ≈≈≈ Hello world!
 *    \  --  /
 *   /        \
 *  /          \
 * |            |
 *  \  ||  ||  /
 *   \_oo__oo_/≡≡≡≡≡≡≡≡o
 *
 * </pre>
 * 稍微解释一下实现思路:
 * 1、缓存所有的 Fragment
 * 使用一个 List 将数据源对应的 Fragment 都缓存起来
 * 2、更新数据源,刷新 Fragment
 * 当有数据源更新的时候,从 List 中取出相应的 Fragment,然后刷新 Adapter
 * 3、删除数据时,删除 List 中对应的 Fragment
 * 当数据源中删除某项时,将 List 中对应的 Fragment 也删除,然后刷新 Adapter
 */
public class CommonViewPagerAdapter extends FragmentPagerAdapter {



    private final List<Fragment> mFragments = new ArrayList<>();
    private final List<String> mFragmentTitles = new ArrayList<>();

    public CommonViewPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {
        return mFragments.get(position);
    }

    @Override
    public int getCount() {
        return mFragments.size();
    }

    public void addFragment(Fragment fragment, String title) {
        mFragments.add(fragment);
        mFragmentTitles.add(title);
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return mFragmentTitles.get(position);
    }
}

Fragment概述

  1. Fragment是Activity中用户界面的一个行为或者说是一部分。主要是支持大屏幕上动态显示和更为灵活的去组合或是交换UI组件,通过将Activity的布局分割成若干个fragment,可以在运行时编辑activity的呈现,并且那些变化会被保存在由activity管理的后台栈里面。
  2. Fragment必须总是被嵌入到一个activity之中,并且fragment的生命周期直接接受其宿主activity的生命周期的影响。你可以认为fragment是activity的一个模块零件,它有自己的生命周期,接收它自己的输入的事件,并且可以在activity运行时添加或者删除。
  3. 应该将每一个fragment设计为模块化和可复用化的activity组件。也就是说,你可以在多个activity中引用同一个fragment,因为fragment定义了它自己的布局,并且使用它本身生命周期回调的行为。

Fragment最佳实践

  1. Fragment懒加载 与 ViewPager缓存处理
  2. FragmentState没帮我们保存Hidden状态,那就我们自己来保存
  3. 提取出Fragment公共代码,给出需要使用的点的抽象方法,用于继承实现

BaseCompatFragment类代码:

package com.kf.fly.fangweixing.android.view.frament;

import android.content.Context;
import android.os.Bundle;
import android.support.annotation.IdRes;
import android.support.annotation.LayoutRes;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Toast;

import com.kf.fly.fangweixing.android.view.BaseCompatActivity;

/**
 * Created by "sinlov" on 2017/4/11.
 */
public abstract class BaseCompatFragment extends Fragment {

    private static final String STATE_SAVE_IS_HIDDEN = "Fragment:STATE:SAVE_IS_HIDDEN";

    protected String TAG;

    protected BaseCompatActivity mActivity;
    private FragmentManager mFramentManager;

    /**
     * view of this fragment
     */
    protected View contentView;

    @Override
    public void onAttach(Context context) {
        super.onAttach(context);
        TAG = "FLY."+this.getClass().getCanonicalName();
        mActivity = (BaseCompatActivity) getActivity();
        mFramentManager = getFragmentManager();
    }

    /**
     *  FragmentState没帮我们保存Hidden状态,那就我们自己来保存,在页面重启后,我们自己来决定Fragment是否显示!
     *  解决思路转变了,由Activity/父Fragment来管理子Fragment的Hidden状态转变为 由Fragment自己来管理自己的Hidden状态!
     *  优点:不管多深的嵌套Fragment、同级Fragment等场景,全都可以正常工作,不会发生重叠!
     *  缺点:无。
     *  @param savedInstanceState
     */

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (null != savedInstanceState){
            boolean isSupportHidden = savedInstanceState.getBoolean(STATE_SAVE_IS_HIDDEN);

            FragmentTransaction ft = getFragmentManager().beginTransaction();
            if (isSupportHidden) {
                ft.hide(this);
            } else {
                ft.show(this);
            }
            ft.commit();
        }
    }

    @Override
    public void onSaveInstanceState(Bundle outState) {
        super.onSaveInstanceState(outState);
        outState.putBoolean(STATE_SAVE_IS_HIDDEN, isHidden());
    }

    /**
     * 提取出Fragment公共代码,给出需要使用的点的抽象方法,用于继承实现
     * create view by method {@link BaseCompatActivity#setContentView(int)}
     * <br>this method can avid multiple loading xml files
     *
     * @param inflater           {@link LayoutInflater}
     * @param container          {@link ViewGroup}
     * @param savedInstanceState {@link Bundle}
     * @return {@link View}
     */
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        if (null == contentView) {
            initView(savedInstanceState);
            setListeners();
            processLogic(savedInstanceState);
        } else {
            ViewGroup parent = (ViewGroup) contentView.getParent();
            if (null != parent) {
                parent.removeView(contentView);
            }
        }
        return contentView;
    }

    protected void setContentView(@LayoutRes int layoutResID) {
        contentView = LayoutInflater.from(mActivity).inflate(layoutResID, null);
    }

    protected void setContentViewChildMode(@LayoutRes int layoutResID) {
        contentView = LayoutInflater.from(mActivity).inflate(layoutResID, null);
    }

    /**
     * init view
     *
     * @param savedInstanceState {@link Bundle}
     */
    protected abstract void initView(Bundle savedInstanceState);

    /**
     * set view listeners
     */
    protected abstract void setListeners();

    /**
     * process logic and resumes states etc.
     *
     * @param savedInstanceState {@link Bundle}
     */
    protected abstract void processLogic(Bundle savedInstanceState);

    /**
     * find view by id which in content view
     *
     * @param id   view id
     * @param <CV> extends {@link View}
     * @return extends view
     */
    @SuppressWarnings("unchecked")
    protected <CV extends View> CV getViewById(@IdRes int id) {
        return (CV) contentView.findViewById(id);
    }

    protected void showToast(String text){
        Toast.makeText(mActivity, text, Toast.LENGTH_SHORT).show();
    }

    protected void showToast(int id){
        Toast.makeText(mActivity,id,Toast.LENGTH_SHORT).show();
    }


}

ViewPagerFragment类代码:

package com.kf.fly.fangweixing.view.fragment.appstore;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.util.Log;
import android.view.View;

import com.kf.fly.fangweixing.android.view.frament.BaseCompatFragment;

/**
 *
 * Viewpager + Fragment情况下,fragment的生命周期因Viewpager的缓存机制而失去了具体意义
 * 该抽象类自定义一个新的回调方法,当fragment可见状态改变时会触发的回调方法,介绍看下面
 *
 * @see #onFragmentVisibleChange(boolean)
 */
public abstract class ViewPagerFragment extends BaseCompatFragment {

    /**
     * rootView是否初始化标志,防止回调函数在rootView为空的时候触发
     */
    private boolean hasCreateView;

    /**
     * 当前Fragment是否处于可见状态标志,防止因ViewPager的缓存机制而导致回调函数的触发
     */
    private boolean isFragmentVisible;

    /**
     * onCreateView()里返回的view,修饰为protected,所以子类继承该类时,在onCreateView里必须对该变量进行初始化
     */
    protected View rootView;

    @Override
    public void setUserVisibleHint(boolean isVisibleToUser) {
        super.setUserVisibleHint(isVisibleToUser);
        Log.d(TAG, "setUserVisibleHint() -> isVisibleToUser: " + isVisibleToUser);
        if (rootView == null) {
            return;
        }
        hasCreateView = true;
        if (isVisibleToUser) {
            onFragmentVisibleChange(true);
            isFragmentVisible = true;
            return;
        }
        if (isFragmentVisible) {
            onFragmentVisibleChange(false);
            isFragmentVisible = false;
        }
    }

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

    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        if (!hasCreateView && getUserVisibleHint()) {
            onFragmentVisibleChange(true);
            isFragmentVisible = true;
        }
    }

    private void initVariable() {
        hasCreateView = false;
        isFragmentVisible = false;
    }

    /**************************************************************
     *  自定义的回调方法,子类可根据需求重写
     *************************************************************/

    /**
     * 当前fragment可见状态发生变化时会回调该方法
     * 如果当前fragment是第一次加载,等待onCreateView后才会回调该方法,其它情况回调时机跟 {@link #setUserVisibleHint(boolean)}一致
     * 在该回调方法中你可以做一些加载数据操作,甚至是控件的操作,因为配合fragment的view复用机制,你不用担心在对控件操作中会报 null 异常
     *
     * @param isVisible true  不可见 -> 可见
     *                  false 可见  -> 不可见
     */
    protected void onFragmentVisibleChange(boolean isVisible) {
        Log.w(TAG, "onFragmentVisibleChange -> isVisible: " + isVisible);
        if (isVisible){
            onUserVisible();
        }
    }

    /**
     * When fragment visible to lazy loading network data
     */
    protected abstract void onUserVisible();
}

MainActivity代码:

package com.kf.fly.fangweixing;


import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v7.widget.Toolbar;
import android.util.Log;
import android.view.MenuItem;
import android.widget.RadioButton;
import android.widget.RadioGroup;

import com.kf.fly.fangweixing.android.view.BaseCompatActivity;
import com.kf.fly.fangweixing.view.fragment.appstore.CommonViewPagerAdapter;
import com.kf.fly.fangweixing.view.fragment.weixin.WeiXingFragment;

import butterknife.BindView;
import butterknife.ButterKnife;

public class MainActivity extends BaseCompatActivity {

    @BindView(R.id.app_mian_viewpager)
    ViewPager mViewPager;

    @BindView(R.id.main_radiogroup)
    RadioGroup mRadioGroup;

    @BindView(R.id.main_radiobutton_weixing)
    RadioButton radiobuttonWeiXing;

    @BindView(R.id.main_radiobutton_contacts)
    RadioButton radiobuttonContacts;

    @BindView(R.id.main_radiobutton_find)
    RadioButton radiobuttonFind;

    @BindView(R.id.main_radiobutton_my)
    RadioButton radiobuttonMy;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //初始化BindView
        ButterKnife.bind(this);
        initFragment();
        initToolbar();
        monitoringRadioGrop();
    }

    private void initToolbar() {
        Toolbar mToolbar = (Toolbar) findViewById(R.id.tool_bar_main);
        //添加溢出菜单
        mToolbar.inflateMenu(R.menu.setting_menu);
        // 添加菜单点击事件
        mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.item_search:
                        showToast(R.string.main_menu_search);
                        break;
                    case R.id.item_chat:
                        //点击设置菜单
                        showToast(R.string.main_menu_chat);
                        break;
                    case R.id.item_add_person:
                        //点击设置菜单
                        showToast(R.string.main_menu_add_person);
                        break;
                    case R.id.item_richscan:
                        //点击设置菜单
                        showToast(R.string.main_menu_richscan);
                        break;
                    case R.id.item_money:
                        //点击设置菜单
                        showToast(R.string.main_menu_money);
                        break;
                    case R.id.item_help:
                        //点击设置菜单
                        showToast(R.string.main_menu_help);
                        break;
                }
                return false;
            }
        });

    }

    private void initFragment() {

        CommonViewPagerAdapter adapter = new CommonViewPagerAdapter(getSupportFragmentManager());
        adapter.addFragment(new WeiXingFragment(), getString(R.string.main_radiobutton_weixing));
        adapter.addFragment(new WeiXingFragment(), getString(R.string.main_radiobutton_weixing));
        adapter.addFragment(new WeiXingFragment(), getString(R.string.main_radiobutton_weixing));
        adapter.addFragment(new WeiXingFragment(), getString(R.string.main_radiobutton_weixing));
        mViewPager.setAdapter(adapter);
        mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

            /**页面滚动时回调的方法
             * position:当前页面向下滑动的角标
             * positionOffset:当前页面滑动的偏移量
             * positionOffsetPixels:当前页面滑动的偏移量对应的像素值
             * */

            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            /**
             * 页面被选中时回调的方法
             * position  :表示页面的位置
             **/
            @Override
            public void onPageSelected(int position) {
                switch (position) {
                    case 0:
                        radiobuttonWeiXing.setChecked(true);
                        break;
                    case 1:
                        radiobuttonContacts.setChecked(true);
                        break;
                    case 2:
                        radiobuttonFind.setChecked(true);
                        break;
                    case 3:
                        radiobuttonMy.setChecked(true);
                        break;
                }
            }

            /**当页面滚动状态改变时回调的方法
             * 参数包含三种状态:
             *  SCROLL_STATE_IDLE  :停止状态
             *  SCROLL_STATE_DRAGGING:滚动状态
             *  SCROLL_STATE_SETTLING:选中状态
             * */

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

        mViewPager.setCurrentItem(0);
    }




    private void monitoringRadioGrop() {
        mRadioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                switch (checkedId) {
                    case R.id.main_radiobutton_weixing:
                        showToast(R.string.main_radiobutton_weixing);
                        mViewPager.setCurrentItem(0);
                        break;
                    case R.id.main_radiobutton_contacts:
                        showToast(R.string.main_radiobutton_contects);
                        mViewPager.setCurrentItem(1);
                        break;
                    case R.id.main_radiobutton_find:
                        showToast(R.string.main_radiobutton_find);
                        mViewPager.setCurrentItem(2);
                        break;
                    case R.id.main_radiobutton_my:
                        showToast(R.string.main_radiobutton_my);
                        mViewPager.setCurrentItem(3);
                        break;
                    default:
                        Log.d(TAG, "怎么监听的????");
                        break;
                }
            }
        });
    }


    @Override
    protected void processLogic(Bundle savedInstanceState) {

    }
}

效果图:

这里写图片描述

注:MainActivity有项目代码,可以和上一篇联合起来看,希望不会影响,O(∩_∩)O谢谢

希望对你们有帮助O(∩_∩)O谢谢!!!!!!!!!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,684评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,143评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,214评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,788评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,796评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,665评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,027评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,679评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,346评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,664评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,766评论 1 331
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,412评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,015评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,974评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,073评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,501评论 2 343

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,442评论 25 707
  • 作者:李旺成 时间:2016年5月3日 一、PagerAdapter介绍 先看效果图 PagerAdapter简介...
    diygreen阅读 82,706评论 38 309
  • 2017/9/17 晚22:00 冥想内容:内观冥想 冥想时长:30分钟 内观冥想,是我每天真正可以和自己独处,并...
    吉小韦阅读 905评论 1 0
  • 口角炎是发生于上下唇两侧联合处口角区的炎症总称,以皲裂,口角糜烂和结痂为主要症状,故又称口角唇炎,口角糜烂,根据发...
    大兵小将2016阅读 975评论 0 0
  • 一池碧水映西山,一念之间越百年;夕阳如烟秋风起,乾隆湖边坐望天。《圆明园追忆》 ​​​
    众心无相阅读 271评论 2 5