Fragment的应用之底部导航栏的实现（二）之应用ViewPager

来源：互联网发布：ubuntu 14.04 glib 编辑：程序博客网时间：2024/05/18 12:36

效果图

什么是ViewPager

该文要讲到的实际是在Fragment的应用之底部导航栏的实现（一）的基础上应用了ViewPager。使得底部导航栏的切换有了滑动的效果，同时支持了页面的手势滑动切换。

ViewPager

ViewPager在很多App中都会有应用，那它到底干什么的？我以前也没用过，不过专门学习了之后，觉得这个控件还是很好理解的，在我看来它其实和Listview这一类ViewGroup差不多，只不过它是横向滑动的，而且通常情况下每一个item的宽度是屏幕的宽度，再通俗点说就是可以左右滑动切换显示的View，且屏幕上同时只能看到一个item。具体能实现的效果就是上面效果图所展示的那样。

ViewPager的使用

既然ViewPager类似于ListView，那他的使用就应该也类似于它。所以ViewPager也有一个适配器，而且ViewPager通常会和Fragment搭配使用，官方也提供了FragmentPagerAdapter和FragmentStatePagerAdapter两个适配器类供我们使用。关于ViewPager的使用可以有很多东西要写，不过该文中只讨论了它最基本的使用

布局

整体的布局基本上沿用上一篇文章demo的布局。不过在主界面布局上做了一定的修改。
之前是用一个FrameLayout来放置Fragment，而这里自然就要使用ViewPager来代替之前的FrameLayout。注意ViewPager是在V4扩展包当中的

<android.support.v4.view.ViewPager        android:id="@+id/my_viewpager"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_above="@+id/tab_linear"></android.support.v4.view.ViewPager>

自定义Fragment

现在布局文件都准备好了，接下来就是定义要显示的View也就是自定义的Fragment，为了更好的显示滑动切换的效果，给每一个Fragment设置了不同的背景色。

public class FragmentTest extends Fragment{    private String fragmentText;    private int backColor;    private TextView fragmentTextView;    public FragmentTest(String fragmentText,int color) {        this.fragmentText=fragmentText;        this.backColor=color;    }    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {        View view=inflater.inflate(R.layout.test_fragment,container,false);        RelativeLayout relativeLayout= (RelativeLayout) view.findViewById(R.id.fragment_relative_layout);        fragmentTextView= (TextView) view.findViewById(R.id.fragment_text);        relativeLayout.setBackgroundColor(backColor);        fragmentTextView.setText(fragmentText);        return view;    }}

自定义适配器

现在Fragment都已经准备好了，就相当于ListView中自定义的布局item准备好了，所以接下来就是要自定义ViewPager的适配器。让它继承自FragmentPagerAdapter。

重写函数

自定义该适配器需要至少重写两个函数

一个是public Fragment getItem(int position)，重写这个函数就是要根据索引显示对应的Fragment到屏幕上；
一个是public int getCount()，这个函数很显然是返回ViewPager中所有View即Fragment的总数的。

构造器

另外还需要实现一个带FragmentManager的构造器，用于初始化所有的Fragment
下面是自定义MyViewPagerAdapter

public class MyViewPagerAdapter extends FragmentPagerAdapter{    private final int PAFER_NUM=4;    private FragmentTest fragmentTest1;    private FragmentTest fragmentTest2;    private FragmentTest fragmentTest3;    private FragmentTest fragmentTest4;    public MyViewPagerAdapter(FragmentManager fm) {        super(fm);        fragmentTest1=new FragmentTest("Home", Color.rgb(34,139,34));        fragmentTest2=new FragmentTest("List",Color.rgb(255,99,71));        fragmentTest3=new FragmentTest("Polymer",Color.rgb(0,139,139));        fragmentTest4=new FragmentTest("User",Color.rgb(139,0,139));    }    @Override    public Fragment getItem(int position) {        Fragment fragment=null;        switch (position){            case MainActivity.PAGE_ONE:                fragment=fragmentTest1;                break;            case MainActivity.PAGE_TWO:                fragment=fragmentTest2;                break;            case MainActivity.PAGE_THREE:                fragment=fragmentTest3;                break;            case MainActivity.PAGE_FOUR:                fragment=fragmentTest4;                break;            default:                break;        }        return fragment;    }    @Override    public int getCount() {        return PAFER_NUM;    }}

可以看出ViewPager的适配器和ListView这种的适配器不一样，ListView的数据是从构造器传进来的，而ViewPager的适配器的数据源就是Fragment，所以它是直接在自定义适配器定义并初始化了所有的Fragment。

使用ViewPager

ViewPager的基本使用其实很简单。

首先用FindViewById初始化ViewPager的实例viewPager；
调用自定义的MyViewPagerAdapter适配器得到一个适配器实例adapter，然后调用viewPager的setAdapter传入该adapter，这样ViewPager其实就已经准备好了；
接下来还要给ViewPager添加页面滑动的事件监听，重写onPageScrollStateChanged方法以处理手势滑动要处理的逻辑；
利用setCurrentItem方法给viewPager设置一个初始的Fragment；

具体的代码：

public class MainActivity extends AppCompatActivity implements View.OnClickListener,ViewPager.OnPageChangeListener{    LinearLayout homeLinear;    LinearLayout listLinear;    LinearLayout polyLinear;    LinearLayout userLinear;    private FragmentManager mfragmentManger;    private ViewPager viewPager;    private MyViewPagerAdapter myViewPagerAdapter;    public static final int PAGE_ONE=0;    public static final int PAGE_TWO=1;    public static final int PAGE_THREE=2;    public static final int PAGE_FOUR =3;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        homeLinear= (LinearLayout) findViewById(R.id.linear_home);        listLinear= (LinearLayout) findViewById(R.id.linear_list);        polyLinear= (LinearLayout) findViewById(R.id.linear_polymer);        userLinear= (LinearLayout) findViewById(R.id.linear_user);        viewPager= (ViewPager) findViewById(R.id.my_viewpager);        homeLinear.setOnClickListener(this);        listLinear.setOnClickListener(this);        polyLinear.setOnClickListener(this);        userLinear.setOnClickListener(this);        viewPager.addOnPageChangeListener(this);        myViewPagerAdapter=new MyViewPagerAdapter(getSupportFragmentManager());        viewPager.setAdapter(myViewPagerAdapter);        viewPager.setCurrentItem(PAGE_ONE);        homeLinear.performClick();    }    @Override    public void onClick(View view) {        setAllFalse();        switch (view.getId()){            case R.id.linear_home:                homeLinear.setSelected(true);                viewPager.setCurrentItem(PAGE_ONE);                break;            case R.id.linear_list:                listLinear.setSelected(true);                viewPager.setCurrentItem(PAGE_TWO);                break;            case R.id.linear_polymer:                polyLinear.setSelected(true);                viewPager.setCurrentItem(PAGE_THREE);                break;            case R.id.linear_user:                userLinear.setSelected(true);                viewPager.setCurrentItem(PAGE_FOUR);                break;        }    }    private void setAllFalse() {        homeLinear.setSelected(false);        listLinear.setSelected(false);        polyLinear.setSelected(false);        userLinear.setSelected(false);    }    @Override    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {    }    @Override    public void onPageSelected(int position) {    }    @Override    public void onPageScrollStateChanged(int state) {        if(state==2){            setAllFalse();            switch (viewPager.getCurrentItem()){                case PAGE_ONE:                    homeLinear.setSelected(true);                    break;                case PAGE_TWO:                    listLinear.setSelected(true);                    break;                case PAGE_THREE:                    polyLinear.setSelected(true);                    break;                case PAGE_FOUR:                    userLinear.setSelected(true);            }        }    }}

总结

本文主要是应用了ViewPager实现底部菜单导航，不过底部导航的方法和形式还有很多种，后续还会记录其他的一些常用的方式。

欢迎批评指正，小弟感激不尽。

2017.4.12 22:45
806 实验室

0 0