TabLayout的简单使用

一：导入design,appcompat包

在gradle文件中引入design包，引入之后才可在布局中引入这个控件

dependencies {
   .....
    compile 'com.android.support:appcompat-v7:24.2.1'
    compile 'com.android.support:design:24.2.1'
    compile 'com.android.support:support-v4:24.2.1'
   .....
}

二：布局文件

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabGravity="center"
        app:tabMode="scrollable" />

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

这里我们使用了一个纵向的线性布局，上面是一个TabLayout的导航栏，下面是一个ViewPager，TabLayout+ViewPager+Fragment来配合使用。

上面关于TabLayout的几个属性要简述一下：
app:tabIndicatorColor=”@color/colorPrimary_pink”//指示器的颜色
app:tabTextColor=”@color/colorPrimary_pink”//tab的文字颜色 app:tabSelectedTextColor=”@color/colorPrimary_pinkDark”//选中的tab的文字颜色
app:tabMode=”fixed”//scrollable:可滑动；fixed：不能滑动，平分tabLayout宽度
app:tabGravity=”center”// fill:tabs平均填充整个宽度;center:tab居中显示

三：代码实现(三步)

• 给ViewPager设置适配器
  pager.setAdapter(adapter);

• 让TabLayout关联ViewPager
  tabLayout.setupWithViewPager(pager);

• TabLayout设置适配器
  tabLayout.setTabsFromPagerAdapter(adapter);

完整代码如下：

public class MainActivity extends AppCompatActivity {
    private String[] title = {
            "头条",
            "新闻",
            "娱乐",
            "体育",
            "科技",
            "美女",
            "财经",
            "汽车",
            "房子",
            "头条"
    };
    TabLayout tabLayout;
    ViewPager pager;
    private MyAdapter adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tabLayout = (TabLayout) findViewById(tablayout);
        pager = (ViewPager) findViewById(R.id.vp);
        adapter = new MyAdapter(getSupportFragmentManager());
        initView();
    }

    /**
     * 初始化布局
     */
    private void initView() {
        pager.setAdapter(adapter);
        tabLayout.setupWithViewPager(pager);
        tabLayout.setTabsFromPagerAdapter(adapter);
    }

    class MyAdapter extends FragmentPagerAdapter {

        public MyAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return title[position];
        }

        @Override
        public Fragment getItem(int position) {
            DetailFragment fragment=new DetailFragment();
            Bundle bundle=new Bundle();
            bundle.putString("title",title[position]);
            fragment.setArguments(bundle);
            return fragment;
        }

        @Override
        public int getCount() {
            return title.length;
        }
    }
}

Fragment的代码如下：

public class DetailFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        TextView tv = new TextView(getContext());
        Bundle bundle = getArguments();
        String s = bundle.getString("title");
        tv.setBackgroundColor(Color.rgb((int) (Math.random() * 255), (int) (Math.random() * 255), (int) (Math.random() * 255)));
        tv.setText(s);
        return tv;
    }
}

实现效果如下：