TabLayout、ViewPager、FragmentPagerAdapter实现新闻导航栏

        我们利用TabLayout、ViewPager、FragmentPagerAdapter实现了新闻导航栏功能，下面分别详细介绍TabLayout、ViewPager、FragmentPagerAdapter，效果图：

1 TableLayout

        TableLayout在包android.support.design中，AndroidStudio下在build.gradle中加入compile 'com.android.support:design:24.2.1'，rebuild即可，如下图：

TabLayout就是一个普通的组件，在布局中引用即可，如下：

 <android.support.design.widget.TabLayout        android:id="@+id/main_activity_TabLayout"        android:layout_width="match_parent"        android:layout_height="40dp"        app:tabBackground="@color/grey32"        app:tabGravity="center"        app:tabIndicatorColor="@android:color/holo_red_light"        app:tabMode="scrollable"        app:tabSelectedTextColor="@android:color/holo_red_light" />

tabBackground：tab的背景色
tabIndicatorColor：tab下方下划线的颜色
tabSelectedTextColor:：tab选中的文字的颜色
tabTextColor:tab默认的文字颜色
app:tabTextAppearance="@android:style/TextAppearance.Holo.Large" ：改变tab字体大小

app:tabIndicatorHeight="4dp" ：改变下划线的高度

app:tabMode="scrollable" ：设置table模式，可滑动的，或者代码设置mTabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);

默认是fixed：固定的，所有标签展示在一页，标签很多时会被挤压，标签不可滑动。

app:tabGravity="center"：内容显示设置为居中，如果是fill，则是充满

选中了某个tab的监听事件OnTabSelectedListener()，如下：

 mTabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {            @Override            public void onTabSelected(TabLayout.Tab tab) {                Log.i("666", tab.getPosition() + "");            }            @Override            public void onTabUnselected(TabLayout.Tab tab) {            }            @Override            public void onTabReselected(TabLayout.Tab tab) {            }        });

2 ViewPager、PagerAdapter

      ViewPager可展示多个view或者多个fragment，实现左右来回滑动的效果，布局中引用如下：

 <android.support.v4.view.ViewPager        android:id="@+id/main_activity_ViewPager"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:background="@android:color/white" />

    ViewPager展示的多个View或fragment靠PagerAdapter提供：

mViewPager.setAdapter(pagerAdapter);//给ViewPager设置适配器

PageAdapter 必须重写的四个函数：
boolean isViewFromObject(View arg0, Object arg1)
int getCount() 
void destroyItem(ViewGroup container, int position,Object object)
Object instantiateItem(ViewGroup container, int position)

getCount():返回要滑动的VIew的个数

@Override  public int getCount() {      // TODO Auto-generated method stub      return viewList.size();  }  

instantiateItem()：先将当前视图添加到container中，然后返回当前View

@Override  public Object instantiateItem(ViewGroup container, int position) {      // TODO Auto-generated method stub          container.addView(viewList.get(position));                              return viewList.get(position);      }  };  

destroyItem（）：从当前container中删除指定位置（position）的View

@Override  public void destroyItem(ViewGroup container, int position,          Object object) {      // TODO Auto-generated method stub      container.removeView(viewList.get(position));  }  

isViewFromObject(View arg0, Object arg1)用于判断，instantiateItem(ViewGroup, int)函数所返回来的Key与当前页面是否是同一个视图

@Override  public boolean isViewFromObject(View arg0, Object arg1) {      // TODO Auto-generated method stub      return arg0 == arg1;  }  

完整代码如下：

PagerAdapter pagerAdapter = new PagerAdapter() {                            @Override              public boolean isViewFromObject(View arg0, Object arg1) {                  // TODO Auto-generated method stub                  return arg0 == arg1;              }                            @Override              public int getCount() {                  // TODO Auto-generated method stub                  return viewList.size();              }                            @Override              public void destroyItem(ViewGroup container, int position,                      Object object) {                  // TODO Auto-generated method stub                  container.removeView(viewList.get(position));              }                            @Override              public Object instantiateItem(ViewGroup container, int position) {                  // TODO Auto-generated method stub                  container.addView(viewList.get(position));                                                      return viewList.get(position);              }          };  

3 FragmentPagerAdapter

 FragmentPagerAdapter继承自PagerAdapter，专门用于提供Fragment，要重写如下方法：

 @Override    public Fragment getItem(int position) {                return mFragmentsList.get(position);//返回position位置的Fragment    }    @Override    public int getCount() {        return mChannels.size();//总共有多少数据    }    // TabLayout关联viewpager时会调用此方法.    @Override    public CharSequence getPageTitle(int position) {        return mChannels.get(position);    }

4 TabLayout、ViewPager、FragmentPagerAdapter实现新闻导航栏

1 activity_main.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    tools:context="com.xi.liuliu.topnews.MainActivity">    <TextView        android:layout_width="match_parent"        android:layout_height="50dp"        android:background="@android:color/holo_red_light"        android:gravity="center_vertical"        android:paddingLeft="5dp"        android:text="@string/app_name"        android:textColor="@android:color/white" />    <android.support.design.widget.TabLayout        android:id="@+id/main_activity_TabLayout"        android:layout_width="match_parent"        android:layout_height="40dp"        app:tabBackground="@color/grey32"        app:tabGravity="center"        app:tabIndicatorColor="@android:color/holo_red_light"        app:tabMode="scrollable"        app:tabSelectedTextColor="@android:color/holo_red_light" />    <android.support.v4.view.ViewPager        android:id="@+id/main_activity_ViewPager"        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_weight="1"        android:background="@android:color/white" />    <RelativeLayout        android:layout_width="match_parent"        android:layout_height="50dp"        android:background="@color/grey32">        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerVertical="true"            android:layout_marginLeft="15dp"            android:drawableTop="@mipmap/home_index_icon"            android:text="@string/home_index"            android:textColor="@android:color/darker_gray" />        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_alignParentRight="true"            android:layout_centerVertical="true"            android:layout_marginRight="15dp"            android:drawableTop="@mipmap/mine_index_icon"            android:text="@string/mine_index"            android:textColor="@android:color/darker_gray" />    </RelativeLayout></LinearLayout>

2 MainActivity

package com.xi.liuliu.topnews;import android.os.Bundle;import android.support.design.widget.TabLayout;import android.support.v4.view.ViewPager;import android.support.v7.app.AppCompatActivity;import android.util.Log;import java.util.ArrayList;import java.util.List;public class MainActivity extends AppCompatActivity {    private TabLayout mTabLayout;    private ViewPager mViewPager;    private List<ChannelFragment> mFragmentsList;    private List<String> mChannelsList;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        fillDatas();        mViewPager = (ViewPager) findViewById(R.id.main_activity_ViewPager);        mTabLayout = (TabLayout) findViewById(R.id.main_activity_TabLayout);        mTabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);        ChannelFragmentPagerAdapter channelFragmentPagerAdapter = new ChannelFragmentPagerAdapter(getSupportFragmentManager(), mFragmentsList, mChannelsList);        mViewPager.setAdapter(channelFragmentPagerAdapter);//给ViewPager设置适配器        mTabLayout.setupWithViewPager(mViewPager);//将TabLayout和ViewPager关联起来。        mTabLayout.setTabsFromPagerAdapter(channelFragmentPagerAdapter);//给Tabs设置适配器        mTabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {            @Override            public void onTabSelected(TabLayout.Tab tab) {                Log.i("666", tab.getPosition() + "");            }            @Override            public void onTabUnselected(TabLayout.Tab tab) {            }            @Override            public void onTabReselected(TabLayout.Tab tab) {            }        });    }    private void fillDatas() {        mFragmentsList = new ArrayList<>();        mChannelsList = new ArrayList<>();        mChannelsList.add("头条");        mChannelsList.add("社会");        mChannelsList.add("国内");        mChannelsList.add("娱乐");        mChannelsList.add("体育");        mChannelsList.add("军事");        mChannelsList.add("科技");        mChannelsList.add("财经");        mChannelsList.add("时尚");        for (int i = 0; i < mChannelsList.size(); i++) {            ChannelFragment channelFragment = new ChannelFragment();            channelFragment.setChannelTitle(mChannelsList.get(i));            mFragmentsList.add(channelFragment);        }    }}

3 FragmentPagerAdapter

package com.xi.liuliu.topnews;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentPagerAdapter;import java.util.List;/** * Created by liuliu on 2017/6/12. */public class ChannelFragmentPagerAdapter extends FragmentPagerAdapter {    private List<ChannelFragment> mFragmentsList;    private List<String> mChannels;    public ChannelFragmentPagerAdapter(FragmentManager fm, List<ChannelFragment> fragments, List<String> channels) {        super(fm);        mFragmentsList = fragments;        mChannels = channels;    }    @Override    public Fragment getItem(int position) {        return mFragmentsList.get(position);//返回position位置的Fragment    }    @Override    public int getCount() {        return mChannels.size();//总共有多少数据    }    // TabLayout关联viewpager时会调用此方法.    @Override    public CharSequence getPageTitle(int position) {        return mChannels.get(position);    }}

4 Fragment

package com.xi.liuliu.topnews;import android.os.Bundle;import android.support.annotation.Nullable;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.TextView;/** * Created by liuliu on 2017/6/12. */public class ChannelFragment extends Fragment {    private String mChannelTitle;    public void setChannelTitle(String channelTitle) {        mChannelTitle = channelTitle;    }    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {        View view = inflater.inflate(R.layout.channel_fragment_layout, container,false);        TextView textView = (TextView) view.findViewById(R.id.channel_fragment_layout_channel_title);        textView.setText(mChannelTitle);        return view;    }}

项目源码github

参考：

http://blog.csdn.net/android_yh/article/details/51563657

http://blog.csdn.net/harvic880925/article/details/38453725

Android开发交流群：576500546