Android頂部導航欄TabLayout+ViewPage

上一篇部落格已經詳細介紹了底部導航欄的實作，這篇是在上一篇的基礎上加上頂部導航，不懂的可以看我的上一篇部落格。位址如下：

Android底部導航實作的簡便方法RadioGroup+Fragment

因為很多app都是底部導航和頂部導航嵌套使用，是以現在我講的也是在上一篇部落格的代碼基礎下，在底部導航的Fragment中使用頂部導航，相信如果你學會了怎麼在Fragment使用頂部導航，在Activity中使用的話對你來說應該是小兒科，回歸正題。

頂部導航欄TabLayout+ViewPager

1.修改上一篇的首頁布局檔案即fragment_home.xml,裡面主要由TabLayout和ViewPager組成。Tablayout布局頂部導航，ViewPager布局各導航的内容。同時建立一個frament_tab的布局，裡面就一個TextView，便于分辨出各導航，可根據所需功能自行修改。

fragment_home.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="40dp">

    </android.support.design.widget.TabLayout>

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

    </android.support.v4.view.ViewPager>

</LinearLayout>
           

frament_tab

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="關注"
        android:textSize="20sp"
        android:gravity="center"/>

</LinearLayout>
           

2.建立一個fragment類,TabFragment,注意繼承時繼承android.support.v4.app.Fragment，這個fragment的作用就是各導航的内容

public class TabFragment extends Fragment {
    private TextView titleTv;

    private String mTitle;

    //這個構造方法是便于各導航同時調用一個fragment
    public TabFragment(String title){
        mTitle=title;
    }

    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState){
        View view=inflater.inflate(R.layout.fragment_tab,container,false);
        titleTv=view.findViewById(R.id.tv_title);
        titleTv.setText(mTitle);
        return view;
    }
}
           

3.建立ViewPager的設配器，繼承FragmentPagerAdapter

public class FragmentAdapter extends FragmentPagerAdapter {


    private List<TabFragment> mFragmentList;//各導航的Fragment
    private List<String> mTitle; //導航的标題

    public FragmentAdapter(FragmentManager fragmentManager,List<TabFragment>fragments,List<String>title){
        super(fragmentManager);
        mFragmentList=fragments;
        mTitle=title;

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

    @Override
    public int getCount() {
        return mFragmentList.size();
    }
    @Override
    public CharSequence getPageTitle(int position) {
        return mTitle.get(position);
    }
}
           

4.最後隻需要在HomeFragment布局渲染即可。

public class HomeFragment extends Fragment{
    private ViewPager pager;
    private FragmentAdapter fragmentAdapter;
    private List<TabFragment> fragmentList;
    private TabLayout tabLayout;
    private TabFragment fragment1,fragment2,fragment3,fragment4,fragment5;
    private List<String> mTitles;
    private String [] title={"關注","推薦","廣州","視訊","熱點"};
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState){
        View view=inflater.inflate(R.layout.fragment_home,container,false);
        pager=view.findViewById(R.id.page);
        tabLayout=view.findViewById(R.id.tab_layout);
        return view;
    }

    @Override
    public void onActivityCreated(Bundle savedInstanceState){
        super.onActivityCreated(savedInstanceState);

        fragmentList=new ArrayList<>();
        mTitles=new ArrayList<>();
        for(int i=0;i<title.length;i++){
            mTitles.add(title[i]);
            fragmentList.add(new TabFragment(title[i]));
        }

        fragmentAdapter=new FragmentAdapter(getActivity().getSupportFragmentManager(),fragmentList,mTitles);
        pager.setAdapter(fragmentAdapter);
        tabLayout.setupWithViewPager(pager);//與ViewPage建立關系
    }

}
           

效果圖：

如有問題歡迎在評論區指出！