TabLayout+Viewpager+Fragment实现类似今日头条顶部导航栏

很多文章类的app页面更多的是顶部导航栏滚动，以便加载更多的数据，类似与今日头条图1，图2是咱要做的玩Android公众号页签


                                         图1                                                                                图2
话不多说，开始上图2的思路以及主要代码：
1、首先调用公众号导航栏的接口是：
       https://wanandroid.com/wxarticle/chapters/json
        方法： GET
2、查看查看某个公众号历史数据接口是：
        https://wanandroid.com/wxarticle/list/408/1/json
        方法：GET 参数：
        公众号 ID：拼接在 url 中，eg:408 
        公众号页码：拼接在url 中，eg:1

主要代码：先对顶部设置状态栏，以及导航栏tabLayout和填充内容的viewpager

<include layout="@layout/main_head_title"></include>
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">
        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="58dp"
            app:tabIndicatorColor="@color/sticky_header_bg"
            app:tabSelectedTextColor="@color/sticky_header_bg"
            app:tabMode="scrollable"/>
</android.support.design.widget.AppBarLayout>
    <!--可滑动的布局内容-->
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

然后设置业务请求接口
public static String baseurl ="https://www.wanandroid.com/";

/**
 * 定义http请求的业务接口，
 */
public interface RetrofitInterface {
    /**
     * 获取公众号列表
     */
    @GET("wxarticle/chapters/json")
    Call<publicChapterbean> PublicList();
    /**
     * 查看某个公众号历史数据
     * http://wanandroid.com/wxarticle/list/405/1/json
     * @param id 公众号 ID
     * @param page 公众号页码
     */
    @GET("/wxarticle/list/{id}/{page}/json")
    Call<HomeListBean> PublicHistoryList(@Path("id")Integer id, @Path("page")Integer page);
}

接下来以Retrofit为网络请求，获取数据，此处需要注意listId,是为第二个接口请求做准备，所以传到ContentFragment中
ContentFragment.newInstance(listId.get(i))，然后将viewpager和tablayout设置关联，FragmentPagerAdapter中有个getPageTitle()方法，可以设置每个导航页签的名字

//1初始化Retorfit对象
        retrofit = new Retrofit.Builder()
                //设置服务器主机地址,非常注意：BaseUrl必须以/结尾，否则报错
                .baseUrl(baseurl)
                //设置Gson为json的转换器
                .addConverterFactory(GsonConverterFactory.create())
                .build();
        //2.创建业务接口类实例对象,create方法内部实际上是用动态代理的方式帮助我们创建了实例对象
        anInterface = retrofit.create(RetrofitInterface.class);
        //3.得到请求的封装对象，包含注解的信息，就是url和参数信息
        Call<publicChapterbean> call = anInterface.PublicList();
        //4.执行异步请求对象
        call.enqueue(new Callback<publicChapterbean>() {
            @Override
            public void onResponse(Call<publicChapterbean> call, Response<publicChapterbean> response) {
                List<publicChapterbean.DataBean> data = response.body().getData();
                for (int i = 0; i < data.size(); i++) {
                    listId.add(data.get(i).getId());
                    listTitles.add(data.get(i).getName());
                    mTabLayout.addTab(mTabLayout.newTab().setText(listTitles.get(i)));
                    fragment =  ContentFragment.newInstance(listId.get(i));
                    fragments.add(fragment);
                }
                FragmentPagerAdapter mAdapter = getFragmentPagerAdapter(data);
                viewpager.setAdapter(mAdapter);
                mTabLayout.setupWithViewPager(viewpager);
                mTabLayout.setTabsFromPagerAdapter(mAdapter);
            }

            @Override
            public void onFailure(Call<publicChapterbean> call, Throwable t) {

            }
        });
 
private FragmentPagerAdapter getFragmentPagerAdapter(final List<publicChapterbean.DataBean> data) {
        return new FragmentPagerAdapter(getSupportFragmentManager()) {
            public Fragment getItem(int position) {
                return fragments.get(position);
            }
            public int getCount() {
                return fragments.size();
            }
            public CharSequence getPageTitle(int position) {
                return listTitles.get(position);
            }
        };
    }

到此第一部分数据加载完毕，接下来到viewpager填充的ContentFragment中，获取每个页签下的id值

public static ContentFragment newInstance(Integer id){
                 ContentFragment fragment = new ContentFragment();
                 Bundle bundle = new Bundle();
                 bundle.putInt("titleId",id);
                 fragment.setArguments(bundle);
                 return fragment;
    }

然后通过第二个接口获取到页签下历史公众号数据，填充对应的adapter即可展示所绘制的公众号页面

//1初始化Retorfit对象
        retrofit = new Retrofit.Builder()
                //设置服务器主机地址,非常注意：BaseUrl必须以/结尾，否则报错
                .baseUrl(baseurl)
                //设置Gson为json的转换器
                .addConverterFactory(GsonConverterFactory.create())
                .build();
        //2.创建业务接口类实例对象,create方法内部实际上是用动态代理的方式帮助我们创建了实例对象
        anInterface = retrofit.create(RetrofitInterface.class);
        //3.得到请求的封装对象，包含注解的信息，就是url和参数信息
        Call<HomeListBean> call = anInterface.PublicHistoryList(ID, page);
        //4.执行异步请求对象
       call.enqueue(new Callback<HomeListBean>() {
                   @Override
                   public void onResponse(Call<HomeListBean> call, Response<HomeListBean> response) {
                       List<HomeListBean.DataBean.DatasBean> datas = response.body().getData().getDatas();
                       listData.addAll(datas);
                       homeListAdapter = new HomeListAdapter(getContext(), R.layout.home_list_item, listData);
                       listview.setAdapter(homeListAdapter);
                   }
                   @Override
                   public void onFailure(Call<HomeListBean> call, Throwable t) {
                       Toast.makeText(getContext(),t.getMessage(),Toast.LENGTH_LONG).show();
                   }
               });

最后简易的效果就制作出来了，希望对大家能有点小帮助，欢迎留言评论！
附上源码地址