TabLayout、ViewPager和Fragment的多页面滑动

最新推荐文章于 2019-09-10 17:11:33 发布

EasyGOOO

最新推荐文章于 2019-09-10 17:11:33 发布

阅读量737

点赞数

分类专栏： Android

Android 专栏收录该内容

59 篇文章

订阅专栏

本文介绍如何使用ViewPager和TabLayout实现带标签的滑动页面效果。通过定义三个Fragment及对应的布局文件，配合PagerAdapter进行页面切换，并在MainActivity中完成组件间的交互绑定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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