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;    }}

实现效果如下：