上一篇文章已經(jīng)詳細(xì)介紹了底部導(dǎo)航欄的實(shí)現(xiàn)，這篇是在上一篇的基礎(chǔ)上加上頂部導(dǎo)航，不懂的可以看我的上一篇文章。地址如下：
Android底部導(dǎo)航實(shí)現(xiàn)的簡(jiǎn)便方法RadioGroup+Fragment
因?yàn)楹芏郺pp都是底部導(dǎo)航和頂部導(dǎo)航嵌套使用，所以現(xiàn)在我講的也是在上一篇博客的代碼基礎(chǔ)下，在底部導(dǎo)航的Fragment中使用頂部導(dǎo)航，相信如果你學(xué)會(huì)了怎么在Fragment使用頂部導(dǎo)航，在Activity中使用的話對(duì)你來(lái)說(shuō)應(yīng)該是小兒科，回歸正題。
頂部導(dǎo)航欄TabLayout+ViewPager
1.修改上一篇的首頁(yè)布局文件即fragment_home.xml,里面主要由TabLayout和ViewPager組成。Tablayout布局頂部導(dǎo)航，ViewPager布局各導(dǎo)航的內(nèi)容。同時(shí)新建一個(gè)frament_tab的布局，里面就一個(gè)TextView，便于分辨出各導(dǎo)航，可根據(jù)所需功能自行修改。
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="關(guān)注"
android:textSize="20sp"
android:gravity="center"/>
</LinearLayout>
2.新建一個(gè)fragment類,TabFragment,注意繼承時(shí)繼承android.support.v4.app.Fragment，這個(gè)fragment的作用就是各導(dǎo)航的內(nèi)容
public class TabFragment extends Fragment {
private TextView titleTv;
private String mTitle;
//這個(gè)構(gòu)造方法是便于各導(dǎo)航同時(shí)調(diào)用一個(gè)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的設(shè)配器，繼承FragmentPagerAdapter
public class FragmentAdapter extends FragmentPagerAdapter {
private List<TabFragment> mFragmentList;//各導(dǎo)航的Fragment
private List<String> mTitle; //導(dǎo)航的標(biāo)題
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={"關(guān)注","推薦","廣州","視頻","熱點(diǎn)"};
@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建立關(guān)系
}
}
效果圖：
這里寫圖片描述
