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




    

    

    

    


frament_tab




    


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 mFragmentList;//各导航的Fragment
    private List mTitle; //导航的标题

    public FragmentAdapter(FragmentManager fragmentManager,Listfragments,Listtitle){
        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 fragmentList;
    private TabLayout tabLayout;
    private TabFragment fragment1,fragment2,fragment3,fragment4,fragment5;
    private List 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

效果图:

Android顶部导航栏TabLayout+ViewPage_第1张图片
这里写图片描述

如有问题欢迎在评论区指出!

你可能感兴趣的:(Android顶部导航栏TabLayout+ViewPage)