前言
自android5.0出来后，谷歌使用了Material Design设计风格，随着带来了许多新的控件，如:SnackBar，TextinputLayout，以及今天使用的TabLayout，这些新控件的出现使得我们这些开发者更加方便，下面我们用TabLayout实现仿最新版的今日头条顶部导航的效果。
这是我们今天要实现的一个效果:
大家看到这个效果，你会怎么实现它？在以前，我们可以通过以下几种啊方式来实现：
- ViewPagerIndicator + Fragment + ViewPager
- ActionBar + Fragment + ViewPager
- 自定义一个View实现上面的效果
ViewPagerIndicator是一个国外大牛写的一个github开源控件，使用也很简单，但是得设置Activity的主题，这样难免有所耦合，而ActionBar实现简单，但耦合性也高，如果我们程序不使用ActionBar，那么第二种方式就没有了，而且怎么添加右边的更多按钮更是一个大问题，那么今天我们使用谷歌新出的控件TabLayout来实现这一效果，可以说TabLayout实现这种效果最简单最方便了，而且没有耦合，独立封装的一个控件。
下面我们通过代码一步一步地实现上面的导航效果：
代码编写
编码代码之前，添加程序所需要的依赖：
compile 'com.android.support:design:23.0.1'
compile 'com.android.support:support-v4:23.0.1'
第一步：编写布局，activity_main.xml：
<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"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#D33C3C"
android:gravity="center_vertical"
android:orientation="horizontal">
<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
app:tabIndicatorColor="@android:color/transparent"
app:tabMode="scrollable">
</android.support.design.widget.TabLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="8dp"
android:src="@mipmap/ic_plus"/>
</LinearLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"></android.support.v4.view.ViewPager>
</LinearLayout>
说明：
1、 可以看到TabLayout使用和其他控件一样，要注意的是添加命名空间，和设置tabMode属性为可以滚动：
app:tabMode="scrollable">
2、 设置导航底部的指示颜色为透明，即去掉底部的矩形指示器，当然设置成其他颜色那么底部就会有相应颜色的矩形指示器
app:tabIndicatorColor="@android:color/transparent"
第二步：为ViewPager设置Adapter：
ViewPager viewPager = (ViewPager) findViewById(R.id.viewPager);
List<Fragment> fragments = new ArrayList<Fragment>();
for (int i = 0; i < titles.length; i++) {
Fragment fragment = new MyFragment();
Bundle bundle = new Bundle();
bundle.putString("text",titles[i]);
fragment.setArguments(bundle);
fragments.add(fragment);
}
viewPager.setAdapter(new TabFragmentAdapter(fragments, titles, getSupportFragmentManager(), this));
MyFragment.java
package com.lt.tablayouttest;
import android.graphics.Color;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
/**
* Created by lt on 2015/12/14.
*/
public class MyFragment extends Fragment{
private String mText;
@Override
public void onCreate(@Nullable Bundle bundle) {
super.onCreate(bundle);
if(getArguments()!=null){
mText = getArguments().getString("text");
}
}
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
TextView textView = new TextView(getActivity());
ViewGroup.LayoutParams params= new ViewGroup.LayoutParams(-1,-1);
textView.setLayoutParams(params);
textView.setGravity(Gravity.CENTER);
textView.setTextColor(Color.RED);
textView.setText(mText);
return textView;
}
}
说明：我们可以通过fragment.setArguments(Bundle bundle)为fragment传递数据，然后再fragment中通过getArguments()取出bundle中的数据。
TabFragmentAdapter.java
package com.lt.tablayouttest;
import android.content.Context;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import java.util.List;
/**
* Created by lt on 2015/12/14.
*/
public class TabFragmentAdapter extends FragmentPagerAdapter{
private final String[] titles;
private Context context;
private List<Fragment> fragments;
public TabFragmentAdapter(List<Fragment> fragments,String[] titles, FragmentManager fm, Context context) {
super(fm);
this.context = context;
this.fragments = fragments;
this.titles = titles;
}
@Override
public Fragment getItem(int position) {
return fragments.get(position);
}
@Override
public int getCount() {
return titles.length;
}
@Override
public CharSequence getPageTitle(int position) {
return titles[position];
}
}
说明：重写getPageTitle(int position)返回每个页面的导航标题，这样TabLayout会从ViewPager中得到Adapter并通过该方法拿到标题。
第三步：将TabLayouth和ViewPager绑定：
// 初始化
TabLayout tablayout = (TabLayout) findViewById(R.id.tablayout);
// 将ViewPager和TabLayout绑定
tablayout.setupWithViewPager(viewPager);
// 设置tab文本的没有选中（第一个参数）和选中（第二个参数）的颜色
tablayout.setTabTextColors(getResources().getColor(R.color.dark_white),Color.WHITE);
总结
TabLayout实现tab导航效果比以前那些实现新闻资讯类app顶部tab导航效果更加简单方便，技术在更新，我们在进步，更多使用方法FQ查看官方文档：