【Android】ViewPager+TabLayout实现商城APP底部栏

【Android】ViewPager+TabLayout实现商城APP底部栏

简述

在这里,用一个如图的商城APP的界面的例子,来简单地介绍一下如何用ViewPager搭配TabLayout来实现这样常见的可滑动栏


一、ViewPager部分

ViewPager是android扩展包v4包中的类,这个类可以让用户左右滑动切换当前的view

  1. ViewPager类直接继承了ViewGroup类,所有它是一个容器类,可以在其中添加其他的view类。
  2. ViewPager类需要一个PagerAdapter适配器类给它提供数据。
  3. ViewPager经常和Fragment一起使用,并且提供了专门的FragmentPagerAdapter和FragmentStatePagerAdapter类供Fragment中的ViewPager使用。

由于我们使用ViewPager一般搭配Fragment,所以先把几个简单的显示文字的Fragment给实现出来。
只需要如下面代码一样简单地实现即可

//fragment_main.xml
<?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">
    <TextView
        android:text="这里是主页"
        android:layout_centerInParent="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</RelativeLayout>
public class MainFragment extends Fragment{
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater,ViewGroup container,Bundle savedInstanceState) {
        View v = inflater.inflate(R.layout.fragment_main,container,false);
        return v;
    }

    public static MainFragment newInstance(){
        return new MainFragment();
    }
}

准备好三个界面的Fragment以后,我们开始学习使用ViewPager
我们在这里使用了一个Fragment的List来保存要添加到ViewPager的Fragment。
然后将三个Fragment都添加到这个List中

private List<Fragment> mFragments = new ArrayList<>();
//省略
mFragments.add(main);
mFragments.add(shop);
mFragments.add(me);

然后配置ViewPager的Adapter,将Fragment都对应上即可。

值得注意的是,在FragmentStatePagerAdapter的构造方法中,需要将FragmentManager传入,所以要先获取到对应的FragmentManager。由于我们用到的Fragment是v4包中的Fragment,所以要用到getSupportFragmentManager()方法来获取FragmentManager

FragmentManager fm = getSupportFragmentManager();
mViewPager.setAdapter(new FragmentStatePagerAdapter(fm) {
    @Override
    public Fragment getItem(int position) {
        return mFragments.get(position);
    }

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

这样,就可以在ViewPager上左右滑动以显示不同的页面了。

关于ViewPager的更多使用,可以参考这篇文章ViewPager 全面剖析及使用详解


二、TabLayout部分

然后我们需要配置TabLayout,以使得ViewPager的滑动可以关联底部Tab的滑动。

下面是ViewPager与TabLayout的布局代码

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

<android.support.design.widget.TabLayout
        android:id="@+id/tab"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#EEE"
        app:tabTextColor="@color/textColor"
        app:tabSelectedTextColor="@color/selectedColor">
        <android.support.design.widget.TabItem
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:icon="@drawable/ic_main"
            android:text="主页"/>
        <android.support.design.widget.TabItem
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:icon="@drawable/ic_shop"
            android:text="商城"/>
        <android.support.design.widget.TabItem
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:icon="@drawable/ic_me"
            android:text="我的"/>
    </android.support.design.widget.TabLayout>

可以看到。我们在TabLayout中加入了三个TabItem,分别对应了三个Fragment,并且设置了对应的图片资源,然后将TabLayout的颜色属性进行了更改。
关于TabLayout的具体使用,可以参考这篇文章Material Design 之 TabLayout 的使用

TabLayout的效果如图:

之后,我们就要对TabLayout与ViewPager进行关联,这里TabLayout为这样的功能设计了对应的Listener,只用分别对TabLayout和ViewPager设置对应的Listener即可:

代码如下:

mTabLayout.setOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(mViewPager));
mViewPager.setOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(mTabLayout));

就这样,我们的ViewPager+TabLayout实现网上商城底部栏的demo就实现了,效果如图:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

%d 博主赞过: