Android开发 - 使用TabLayout和ViewPager实现顶部导航栏

这里使用TabLayout实现顶部导航栏。TabLayout一般可以和ViewPager一起使用，使用特有的FragmentPagerAdapter。
关于TabLayout滑动好像也有特效
Tablayout使用全解，一篇就够了 - 奔跑吧焦宇

使用之前需要添加依赖

compile 'com.android.support:design:26.1.0'

按照上次代码，修改main_frag_1.xml的代码

filename:main_frag_1.xml

<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:layout_width="match_parent"
        android:layout_height="50dp"
        android:id="@+id/TopNav">android.support.design.widget.TabLayout>
    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:id="@+id/main_frag_1_main">android.support.v4.view.ViewPager>
LinearLayout>

然后新建一个布局文件TabFragment.xml，里面只有一个TextView，作为Tablayout中的子页面。

filename:tab_fragment.xml

<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:layout_gravity="center"
        android:text="text"/>
android.support.constraint.ConstraintLayout>

编写碎片类，加载个布局。

public class TabFragment extends Fragment{
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view=inflater.inflate(R.layout.tab_fragment,container,false);
        return view;
    }
}

喜闻乐见的适配器来了。在上次说ViewPager的时候提到了Fragment特有的适配器，即FragmentPagerAdapter，这次的适配器就继承这个类。
好像TabLayout自己不会设置标题，重写public CharSequence getPageTitle()方法设置标题。
都没多少代码。

public class TabFragmentAdapter extends FragmentPagerAdapter {
    private List<TabFragment> TabFragmentList;
    private List<String> TabTitle;
    public TabFragmentAdapter(FragmentManager fm,List<TabFragment> TabFragmentList,List<String> TabTitle) {
        super(fm);
        this.TabFragmentList=TabFragmentList;
        this.TabTitle=TabTitle;
    }

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

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

最后完善MainFrag_1.java的代码，对数据进行处理。大概需要：

• 通过List设置标题
• newTabFragment实例，也放到List里面
• 在onCreateView()方法通过view获取布局文件中控件实例
• 设置ViewPager适配器
• 调用setupWithViewPager()方法设置TabLayout和ViewPager的关联

filename:MainFrag_1.java
public class MainFrag_1 extends Fragment {
    private ViewPager main_frag_1_main_ViewPager;
    private TabLayout TopNavTabLayout;
    private String [] TabTitle={"一","二","三"};
    private List<TabFragment> TabFragmentList;
    private List<String> TabTitleList;
    private TabFragmentAdapter tabFragmentAdapter;
    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        TabFragmentList=new ArrayList<>();
        TabTitleList=new ArrayList<>();
        for (int i=0;i<3;i++){
            TabTitleList.add(TabTitle[i]);
            TabFragmentList.add(new TabFragment());
        }
        tabFragmentAdapter=new TabFragmentAdapter(getActivity().getSupportFragmentManager(),TabFragmentList,TabTitleList);
        main_frag_1_main_ViewPager.setAdapter(tabFragmentAdapter);
        TopNavTabLayout.setupWithViewPager(main_frag_1_main_ViewPager);
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view=inflater.inflate(R.layout.main_frag_1,container,false);
        main_frag_1_main_ViewPager=view.findViewById(R.id.main_frag_1_main);
        TopNavTabLayout=view.findViewById(R.id.TopNav);
        return view;
    }
}

然后运行

参考链接

Tablayout使用全解，一篇就够了 – 奔跑吧李博