实现的效果就是如下图
首先我们需要定义一个显示的xml文件,定义为activity_fragment.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
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" />
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout>
从代码中,很简单,上面有一个TabLayout的控件,下面定义了一个ViewPager用于显示需要显示的Fragment.
定义一个TestFragment.java类。,这里需要继承FragmentActivity,并且在onCreate方法,初始化
package com.example.glc.testtabfragments;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
/**
* Created by GLC on 2015/11/19.
*/
public class TestFragment extends FragmentActivity {
private ViewPager mViewPager;
private TabLayout mTabLayout;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_fragment);
mViewPager = (ViewPager) findViewById(R.id.viewpager);
mTabLayout = (TabLayout) findViewById(R.id.tablayout);
}
}
做好上面的准备后,我们需要给TabLayout动态赋值Title,并且定义存放Fragment的容器。
package com.example.glc.testtabfragments;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import java.util.ArrayList;
import java.util.List;
/**
* Created by GLC on 2015/11/19.
*/
public class TestFragment extends FragmentActivity {
private ViewPager mViewPager;
private TabLayout mTabLayout;
private List<Fragment> mList;
private String[] mTitles;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_fragment);
mViewPager = (ViewPager) findViewById(R.id.viewpager);
mTabLayout = (TabLayout) findViewById(R.id.tablayout);
mList = new ArrayList<>();
mList.add(0, new OneFragment());
mList.add(1, new TwoFragment());
mTitles = new String[]{"第一页", "第二页"};
}
}
这里我们很简单的设置了一个两个Fragment,onefragment
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="第一页"
/>
</LinearLayout>
package com.example.glc.testtabfragments;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
/**
* Created by GLC on 2015/11/19.
*/
public class OneFragment extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
return inflater.inflate(R.layout.onefragment, container, false);
}
}
然后我们需要定义将数据与ViewPager联系起来的适配器,MyFragmentPagerAdapter,需要继承FragmentStatePagerAdapter,然后重写三个方法,下面在代码中注释这三个方法的作用,
private class MyFragmentPagerAdapter extends FragmentStatePagerAdapter {
private List<Fragment> mList;
private String[] mTitles;
//适配器,绑定数据
public MyFragmentPagerAdapter(FragmentManager fm, List<Fragment> mList, String[] mTitles) {
super(fm);
this.mList = mList;
this.mTitles = mTitles;
}
//根据索引,显示fragment
@Override
public Fragment getItem(int position) {
return mList.get(position);
}
//计算全部的fragment的数量
@Override
public int getCount() {
return mList.size();
}
//根据索引显示不同的tab的title
@Override
public CharSequence getPageTitle(int position) {
return mTitles[position];
}
}
然后需要给ViewPager设置页面变化的监听事件,implements OnPageChangeListener 并且实现三个方法,
//当页面滑动的时候调用
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
//当页面被选中的时候调用,
@Override
public void onPageSelected(int position) {
}
//当页面状态发生改变的时候得到调用
@Override
public void onPageScrollStateChanged(int state) {
}
最后我们给ViewPager和TabLayout设置一些属性。完成整个效果
//给viewpager设置监听事件
mViewPager.addOnPageChangeListener(this);
//给viewpager设置适配器
mViewPager.setAdapter(myFragmentPagerAdapter);
//给tablayout设置模式
mTabLayout.setTabMode(TabLayout.MODE_FIXED);
//将tablayout与viewpager联系起来
mTabLayout.setupWithViewPager(mViewPager);
//个体tablayout设置适配器 mTabLayout.setTabsFromPagerAdapter(myFragmentPagerAdapter);
这样,功能就算实现好了,下面贴上完整的代码。
package com.example.glc.testtabfragments;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.ViewPager;
import java.util.ArrayList;
import java.util.List;
/**
* Created by GLC on 2015/11/19.
*/
public class TestFragment extends FragmentActivity implements ViewPager.OnPageChangeListener {
private ViewPager mViewPager;
private TabLayout mTabLayout;
private List<Fragment> mList;
private String[] mTitles;
private MyFragmentPagerAdapter myFragmentPagerAdapter;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_fragment);
mViewPager = (ViewPager) findViewById(R.id.viewpager);
mTabLayout = (TabLayout) findViewById(R.id.tablayout);
mList = new ArrayList<>();
mList.add(0, new OneFragment());
mList.add(1, new TwoFragment());
mTitles = new String[]{"第一页", "第二页"};
myFragmentPagerAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager(), mList, mTitles);
mViewPager.addOnPageChangeListener(this);
mViewPager.setAdapter(myFragmentPagerAdapter);
mTabLayout.setTabMode(TabLayout.MODE_FIXED);
mTabLayout.setupWithViewPager(mViewPager);
mTabLayout.setTabsFromPagerAdapter(myFragmentPagerAdapter);
}
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
}
@Override
public void onPageScrollStateChanged(int state) {
}
private class MyFragmentPagerAdapter extends FragmentStatePagerAdapter {
private List<Fragment> mList;
private String[] mTitles;
public MyFragmentPagerAdapter(FragmentManager fm, List<Fragment> mList, String[] mTitles) {
super(fm);
this.mList = mList;
this.mTitles = mTitles;
}
@Override
public Fragment getItem(int position) {
return mList.get(position);
}
@Override
public int getCount() {
return mList.size();
}
@Override
public CharSequence getPageTitle(int position) {
return mTitles[position];
}
}
}