第一步
添加依赖
compile 'com.android.support:design:23.4.0'
第二步布局中使用
注意要用这个
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context="com.****.****.****.MainActivity"> <android.support.design.widget.TabLayout android:id="@+id/tab_layout" android:layout_width="match_parent" android:layout_height="48dp" android:background="#ffffff" app:tabSelectedTextColor="#FD5055" app:tabIndicatorColor="#FD5055" app:tabTextAppearance="@style/MyTabLayoutTextAppearance" > </android.support.design.widget.TabLayout> <android.support.v4.view.ViewPager android:id="@+id/pager" android:layout_width="match_parent" android:layout_height="match_parent"> </android.support.v4.view.ViewPager> </LinearLayout>第三步加载id'
mTabLayout = (TabLayout) findViewById(R.id.tab_layout);自己填
第四步添加条目
mTabLayout.addTab(mTabLayout.newTab().setText("Tab 1"));//设置文字 mTabLayout.addTab(mTabLayout.newTab().setText("Tab 2"));//设置文字 mTabLayout.addTab(mTabLayout.newTab().setText("Tab 3"));//设置文字 mTabLayout.addTab(mTabLayout.newTab().setText("Tab 4"));//设置文字 // mTabLayout.addTab(mTabLayout.newTab().setText("Tab 2").setIcon(R.mipmap.ic_launcher));//设置图标和文字 // mTabLayout.addTab(mTabLayout.newTab().setIcon(R.mipmap.ic_launcher));//设置图标第五步创建viewpager的集合并添加适配器
mViewPager = (ViewPager) findViewById(R.id.pager);
第一个就是集合
fg = new ArrayList<>(); fg.add(new F1()); fg.add(new F2()); fg.add(new F3()); fg.add(new F4()); mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) { @Override public Fragment getItem(int position) { return fg.get(position); } @Override public int getCount() { return fg.size(); } });第六实现接口
implements TabLayout.OnTabSelectedListener第七注册事件和互相绑定
mViewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(mTabLayout)); mTabLayout.setOnTabSelectedListener(this);
@Override public void onTabSelected(TabLayout.Tab tab) { mViewPager.setCurrentItem(tab.getPosition()); } @Override public void onTabUnselected(TabLayout.Tab tab) { } @Override public void onTabReselected(TabLayout.Tab tab) { }完整代码
package com.****.test.*****; import android.os.Bundle; import android.support.design.widget.TabLayout; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentPagerAdapter; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity; import java.util.ArrayList; import java.util.List; import butterknife.ButterKnife; import fragments.F1; import fragments.F2; import fragments.F3; import fragments.F4; public class MainActivity extends AppCompatActivity implements TabLayout.OnTabSelectedListener{ private TabLayout mTabLayout; private List<Fragment> fg; private ViewPager mViewPager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ButterKnife.bind(this); initView(); initData(); } private void initView() { mTabLayout = (TabLayout) findViewById(R.id.tab_layout); mViewPager = (ViewPager) findViewById(R.id.pager); mTabLayout.addTab(mTabLayout.newTab().setText("Tab 1"));//设置文字 mTabLayout.addTab(mTabLayout.newTab().setText("Tab 2"));//设置文字 mTabLayout.addTab(mTabLayout.newTab().setText("Tab 3"));//设置文字 mTabLayout.addTab(mTabLayout.newTab().setText("Tab 4"));//设置文字 // mTabLayout.addTab(mTabLayout.newTab().setText("Tab 2").setIcon(R.mipmap.ic_launcher));//设置图标和文字 // mTabLayout.addTab(mTabLayout.newTab().setIcon(R.mipmap.ic_launcher));//设置图标 } private void initData() { fg = new ArrayList<>(); fg.add(new F1()); fg.add(new F2()); fg.add(new F3()); fg.add(new F4()); mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) { @Override public Fragment getItem(int position) { return fg.get(position); } @Override public int getCount() { return fg.size(); } }); mViewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(mTabLayout)); mTabLayout.setOnTabSelectedListener(this); } @Override public void onTabSelected(TabLayout.Tab tab) { mViewPager.setCurrentItem(tab.getPosition()); } @Override public void onTabUnselected(TabLayout.Tab tab) { } @Override public void onTabReselected(TabLayout.Tab tab) { } }