使用support.design.widget.TabLayout和ViewPager组合成滑动标签组件

使用support.design.widget.TabLayout和ViewPager组合成滑动标签组件

引入

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

布局文件

<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="center"
app:tabIndicatorColor="#FFFF0000"
app:tabMode="scrollable"
app:tabSelectedTextColor="#FF0000FF"
app:tabTextColor="#FF987898">
</android.support.design.widget.TabLayout>

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

找到该控件

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

准备要填充的Fragment和Titles

private void initData() {

for (int i = 0; i < 7; i++) {
mTitle[i] = "title" + i;
}

MyFragment f1 = new MyFragment(getApplicationContext(), "A");
MyFragment f2 = new MyFragment(getApplicationContext(), "B");
MyFragment f3 = new MyFragment(getApplicationContext(), "C");
MyFragment f4 = new MyFragment(getApplicationContext(), "D");
MyFragment f5 = new MyFragment(getApplicationContext(), "E");
MyFragment f6 = new MyFragment(getApplicationContext(), "F");
MyFragment f7 = new MyFragment(getApplicationContext(), "G");
list.add(f1);
list.add(f2);
list.add(f3);
list.add(f4);
list.add(f5);
list.add(f6);
list.add(f7);
}

补充： MyFragment继承自Fragment（一定要使用V4包）

@SuppressLint("ValidFragment")//提示保措时，添加这句话即可
public class MyFragment extends Fragment {
private Context context;
private  String str;

public MyFragment(Context context,String str) {
this.context = context;
this.str=str;
}

@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

TextView tv = new TextView(context);
tv.setText(str);
tv.setTextSize(90);
return tv;
}
}

new FragmentPagerAdapter

重写默认的两个方法，绑定Fragment个数和Fragment（注意这里的Fragment使用V4包的）

手动引入重写getPageTitle方法，绑定tabLayout的标题组

FragmentPagerAdapter adapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
@Override
public int getCount() {
return list.size();
}

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

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

后续设置：

★从adapte的getPageTitle方法中得到tabLayout的标题，

给viewPager设置适配器

互相绑定tablayout和viewpager，使其联动。

tabLayout.setTabsFromPagerAdapter(adapter);//从adapte的getPageTitle方法中得到tabLayout的标题

viewPager.setAdapter(adapter);//略

/*
(互相绑定tablayout和viewpager)这个方法是addOnPageChangeListener和setOnTabSelectedListener的封装。
★但是需要注意一下，setupWithViePager必须在ViewPager.setAdapter()之后调用！
*/

tabLayout.setupWithViewPager(viewPager);