Android Material design 中TabLayout+Viewpager实现导航栏

Material design

1 背景

最近新项目中又是需要用到头部导航栏，想想这些东西平时我们都是自己写，还有文字下面的那条线，还需要算线的滑动距离。好了又是一大堆堆代码。论坛里虽然有很多这样的案例。实现肯定可以实现，只是这样实现起来很麻烦。今天推荐大家一种更简洁的方法使用Material design包中的tablayout+viewpager就可以轻松实现，也不需要自己动手画线算距离。先来看看效果图。

2 导包

这里我们只介绍android studio导包：
我们直接在build.gradle中添加这行代码：

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

添加这个design包就行。

3 布局

<android.support.design.widget.TabLayout
        android:id="@+id/tab"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        app:tabIndicatorColor="@color/colorPrimary"
        app:tabMode="scrollable"
        app:tabSelectedTextColor="@color/colorPrimary"
        app:tabTextColor="#333333" />

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

这里就是我们使用的tablayout，我们一个一个来介绍他的属性：
1.tabIndicatorColor

app:tabIndicatorColor="@color/colorPrimary"

这个属性就是他文字下面的那条线的颜色。这里线不需要我们去绘制，design中给我提供了这条线。
2. tabMode

app:tabMode="scrollable"

这个属性就是如果太多的导航标题会超出屏幕，此时使用这个属性就支持导航栏滑动啦，他的字面也是也是可滑动的。有滑动当然也就有不可滑动“fixed”。少量的标题就可以使用这个属性。

3.tabSelectedTextColor，tabTextColor

app:tabTextColor="#333333"
app:tabSelectedTextColor="@color/colorPrimary"

很容易看出这两个属性就是文字选中状态和未选中状态时候的颜色。

好了布局其实就是这么点，主要就是他的属性需要弄明白就行，下面的Viewpager我就不多介绍了，大家应该用的也很多了。

4 Activity

public class MainActivity extends AppCompatActivity {
    private ViewPager viewPager;
    private TabLayout tabLayout;
    private List<BaseFragment> list;
    private FragmentListAdapter adapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        init();
        list = new ArrayList<>();
        initData(list);
        adapter=new FragmentListAdapter(getSupportFragmentManager(),list);
        viewPager.setAdapter(adapter);
        tabLayout.setupWithViewPager(viewPager);//tablayout和viewpager之前的联动

    }

    private void initData(List<BaseFragment> list) {
        FirstFragment a = new FirstFragment();
        FirstFragment b = new FirstFragment();
        FirstFragment c = new FirstFragment();
        FirstFragment d = new FirstFragment();
        FirstFragment e = new FirstFragment();
        FirstFragment f = new FirstFragment();
        list.add(a);
        list.add(b);
        list.add(c);
        list.add(d);
        list.add(e);
        list.add(f);
    }

    private void init() {
        viewPager = (ViewPager) findViewById(R.id.viewpager);
        tabLayout = (TabLayout) this.findViewById(R.id.tab);
    }
}

其实activity中我们没多少东西，我想大家肯定也看的懂。

---

5 adapter

---

接下来就是他的适配器了viewpager我们一般都有会继承FragmentPagerAdapter这个适配器；

public class FragmentListAdapter extends FragmentPagerAdapter {
    private List<BaseFragment> list;

    public FragmentListAdapter(FragmentManager fm, List<BaseFragment> list) {
        super(fm);
        this.list = list;

    }

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

    @Override
    public int getCount() {
        return list.size();
    }

    @Override
    public CharSequence getPageTitle(int position) {

        return list.get(position).getTitle();
    }

}

适配器的东西也不多，通过构造函数把activity中fragment数量存倒list中。在adapter中拿到list。

到这里大部分代码也就差不多写好了，接下来就是我们的fragment了

---

6 fragment

---

我们谢了一个父类的fragment，通过父类我们拿到标题栏的文本。

public abstract class BaseFragment extends Fragment {
    public abstract String getTitle();
}

这里使用了抽象类。
我们的fragment继承这个basefragment
子类fragment：

public class FirstFragment extends BaseFragment {
    Button button;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container,    @Nullable Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.layout, null);
        button = (Button) rootView.findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(getContext(), RecycleViewActivity.class);
                startActivity(intent);
            }
        });
        return rootView;
    }

    @Override
    public String getTitle() {
        return "Fragment";//这里我们父类中的方法直接获取title文本。
    }

代码就这些。功能基本也就实现了，相比我以前自己写的那种方法真的方便很多。特别是activity中省去了很多的代码，在布局中代码也很简洁。大家不妨可以去试试。对于新手来说很值得学习。而且在我们的项目中也经常会用到，如果有什么错误的地方。希望大家指出。