頂部和底部菜單欄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);
        }

    }

}