1、首先在build.gradle(Module:app)中添加依赖。
compile 'com.android.support:appcompat-v7:22.2.0'compile 'com.android.support:design:22.2.0'
2、在页面的布置中我们需要Tabs、三个Fragment和ViewPager来实现滑动的效果。首先,我们我们定义三个Fragment以及对应的Fragment对应的布局文件。
TabFragment1.java文件
public class TabFragment1 extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_tab_fragment1,container,false); }
}
对应的fragment_tab_fragment1.xml文件
<FrameLayout 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"
tools:context="com.example.fumier.viewpagerexample.TabFragment1">
<!-- TODO: Update blank fragment layout -->
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="tab1"
/>
</FrameLayout>
同理TabFragment2、fragment_tab_fragment2.xml文件以及TabFragment3、fragment_tab_fragment3.xml文件
3、实现PagerAdapter类,该类继承自FragmentStatePagerAdapter。
public class PagerAdapter extends FragmentStatePagerAdapter {
int nNumOfTabs;
public PagerAdapter(FragmentManager fm,int nNumOfTabs) {
super(fm); this.nNumOfTabs=nNumOfTabs; }
@Override
public Fragment getItem(int position) {
switch(position) {
case 0:
TabFragment1 tab1=new TabFragment1();
return tab1;
case 1:
TabFragment2 tab2=new TabFragment2();
return tab2;
case 2:
TabFragment3 tab3=new TabFragment3();
return tab3; }
return null; }
@Override
public int getCount() { return nNumOfTabs; }
}
4、具体的MainActivity的实现
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));
tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
final ViewPager viewPager = (ViewPager) findViewById(R.id.pager);
final PagerAdapter adapter = new PagerAdapter
(getSupportFragmentManager(), tabLayout.getTabCount()); viewPager.setAdapter(adapter);
viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
viewPager.setCurrentItem(tab.getPosition());
}
@Override
public void onTabUnselected(TabLayout.Tab tab) { }
@Override
public void onTabReselected(TabLayout.Tab tab) { } }); }
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_main, menu);
return true; }
@Override
public boolean onOptionsItemSelected(MenuItem item) {
int id = item.getItemId();
if (id == R.id.action_settings) { return true; }
return super.onOptionsItemSelected(item); }
}