顶部和底部菜单栏TabLayout+ViewPager

本人是初学者，如今看不少app都用到菜单栏，因此就了解了一下，先看一下效果图：

其实这个的实现是用到TabLayout和ViewPager的结合，顶部是TabLayout，中间的空白的部分就是ViewPager。由于底部的相似，因此底部菜单栏也是同样的道理，只是布局文件稍微作了一些调整。

布局文件activity.xml：

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:background="#ed6e7d"
        app:tabGravity="fill"
        app:tabIndicatorColor="#63eadb"
        app:tabMode="scrollable"
        app:tabSelectedTextColor="#444"
        app:tabTextColor="#fff" />

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/tablayout"
        android:layout_weight="1" />

    <android.support.v4.view.ViewPager
        android:id="@+id/bottomviewpager"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/viewpager"
        android:layout_weight="3" />


    <android.support.design.widget.TabLayout
        android:id="@+id/bottomlayout"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_alignParentBottom="true"
        android:background="#c4c4c3"
        app:tabIndicatorColor="#f00"   //下方滚动的下划线的颜色
        app:tabIndicatorHeight="0dp"
        app:tabMode="fixed"
        app:tabPadding="2dp"
        app:tabSelectedTextColor="#052d8c"  //被选中的文字的颜色
        app:tabTextColor="#131111" />     //字体默认的颜色

</LinearLayout>

 

既然有了ViewPager，确定还有适配器Adapter。此处自定义Adapter类。继承FragmentAdapter，由于菜单项通常不少，要用到Fragment，这样更灵活，也可动态加入或删除view。轻量切换，运行更流畅。底部的菜单栏的ViewPager与其相似，就不贴代码了。

public class Adapter extends FragmentPagerAdapter {
    private List<CustomFragment> fragmentList;
    private String titles[];

    public Adapter(FragmentManager fm, List<CustomFragment> fragmentList,String[] titles) {
        super(fm);
        this.titles=titles;
        this.fragmentList = fragmentList;
    }

    @Override
    public Fragment getItem(int position) {
        Fragment fragment=null;
        if (position<fragmentList.size()) {
            fragment=fragmentList.get(position);
        }else {
            fragment=fragmentList.get(0);
        }
        return fragment;
    }

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

//    注意！此方法是返回导航栏的title，没有就看不见文字
    public CharSequence getPageTitle(int position) {
        if (titles != null && titles.length > 0)
            return titles[position];
        return null;
    }

}

菜单项切换时的ViewPager的界面显示的Fragment，此处做为演示，随便设置个TextView。

public class CustomFragment extends Fragment {
    MainActivity mainActivity = new MainActivity();
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment, container, false);
        TextView textView = (TextView) view.findViewById(R.id.textView);
        textView.setText("第页");
        return view;
    }
}

而后是MainActivity：

public class MainActivity extends AppCompatActivity {
    public TabLayout tabLayout;
    private TabLayout bottomtablayout;
    private ViewPager viewPager;
    private ViewPager bottomviewpager;
    private List<CustomFragment> fragmentList;
    private List<Fragment> bottomfragmentlist;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        viewPager= (ViewPager) findViewById(R.id.viewpager);
        bottomviewpager= (ViewPager) findViewById(R.id.bottomviewpager);
        tabLayout= (TabLayout) findViewById(R.id.tablayout);
        bottomtablayout= (TabLayout) findViewById(R.id.bottomlayout);

        fragmentList=new ArrayList<>();
        fragmentList.add(new CustomFragment());
        fragmentList.add(new CustomFragment());
        fragmentList.add(new CustomFragment());
        fragmentList.add(new CustomFragment());
        fragmentList.add(new CustomFragment());
        fragmentList.add(new CustomFragment());
        fragmentList.add(new CustomFragment());
        fragmentList.add(new CustomFragment());
        fragmentList.add(new CustomFragment());
        Adapter adapter=new Adapter(getSupportFragmentManager(),fragmentList,new String[]{"第一栏","第二栏","第三栏","第四栏","第五栏","第二栏","第三栏","第四栏","第五栏"});
        viewPager.setAdapter(adapter);
        tabLayout.setupWithViewPager(viewPager);

//      fragmentList的数量要与后面String的数量一致，



//      下面为底部菜单栏的实现，道理同样，只是加了个图片
        bottomfragmentlist=new ArrayList<>();
        bottomfragmentlist.add(new Fragment());
        bottomfragmentlist.add(new Fragment());
        bottomfragmentlist.add(new Fragment());
        bottomfragmentlist.add(new Fragment());
        BottomAdapter bottomAdapter=new BottomAdapter(getSupportFragmentManager(),bottomfragmentlist,new String[]{"首页","信息","设置","分享"});
        bottomviewpager.setAdapter(bottomAdapter);
        bottomtablayout.setupWithViewPager(bottomviewpager);
        for (int i = 0; i < bottomtablayout.getTabCount(); i++) {
            TabLayout.Tab tab = bottomtablayout.getTabAt(i);
            Drawable d = null;
            switch (i) {
                case 0:
                    d = getResources().getDrawable(R.drawable.home);
                    break;
                case 1:
                    d = getResources().getDrawable(R.drawable.message);
                    break;
                case 2:
                    d = getResources().getDrawable(R.drawable.setting);
                    break;
                case 3:
                    d = getResources().getDrawable(R.drawable.share);
                    break;
            }
            tab.setIcon(d);
        }

    }

}