Android viewpager+Fragment和tablayout的使用
前言
我自己学习Viewpager的时候遇到许多坑,现在总结一下;
一、Viewpager +Fragment+ Tablayout
Viewpager现在的app基本上都离不开,主要的功能就是提供一个页面切换滑动的效果,同时也提供了预加载的功能。而tablayout就是结合viewpager使用的一个类似导航栏的标题栏布局。
二、使用步骤
1.添加AndroidX下Viewpager控件和添加XTablayout
在Android下的Gradle Scripts中build.gradle(Moudle:)引入XTablayout依赖
implementation 'com.androidkun:XTabLayout:1.1.4'
在MainActivity里面 ,添加一个viewpager控件和XTablayout控件,大小可以自调,注意初学尽量在LinearLayout里面试,不容易报错。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.androidkun.xtablayout.XTabLayout
android:id="@+id/tb_1"
android:layout_width="match_parent"
android:layout_height="match_parent">
</com.androidkun.xtablayout.XTabLayout>
<androidx.viewpager.widget.ViewPager
android:id="@+id/vp_1"
android:layout_width="match_parent"
android:layout_height="584dp"
android:layout_weight="13">
</androidx.viewpager.widget.ViewPager>
</LinearLayout>
2.新建Fragment类和Fragment视图
先创建三个空白的layout,在创建三个类继承Fragment类
public class Fragment2 extends Fragment {
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View v = inflater.inflate(R.layout.fg1,null);
return v;
}
}
public class Fragment2 extends Fragment {
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View v = inflater.inflate(R.layout.fg2,null);
return v;
}
}
public class Fragment2 extends Fragment {
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View v = inflater.inflate(R.layout.fg3,null);
return v;
}
}
3.在MainActivity里面初始化控件
public class MainActivity extends AppCompatActivity {
private ViewPager vp;
private XTabLayout tb;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();//初始化控件
setVp();//配置viewpager
}
//初试化控件
public void initView(){
vp = findViewById(R.id.vp_1);
tb = findViewById(R.id.tb_1);
}
}
4.创建FragmentPagerAdapter类
public class TabFragmentPagerAdapter extends FragmentPagerAdapter{
List<Fragment> mlist;
ArrayList<String> tabList = new ArrayList<>();//标题tab列表
public TabFragmentPagerAdapter(@NonNull FragmentManager fm,List<Fragment> list) {
super(fm);
this.mlist = list;
//标题添加进列表
tabList.add("首页");
tabList.add("功能");
tabList.add("我的");
Log.d(TAG, "TabFragmentPagerAdapter: "+tabList);
}
@NonNull
@Override
public Fragment getItem(int position) {
return mlist.get(position);//显示第几个页面
}
@Override
public int getCount() {
return mlist.size();//有几个页面
}
@Nullable
@Override
public CharSequence getPageTitle(int position) {
return tabList.get(position);
}
}
5.将viewpager和fragmentAdapter绑定
public void setVp(){
ArrayList aList = new ArrayList();
//实例Fragment
Fragment f1 = new Fragment1();
Fragment f2 = new Fragment2();
Fragment f3 = new Fragment3();
//添加到list
aList.add(f1);
aList.add(f2);
aList.add(f3);
FragmentManager fm = getSupportFragmentManager();//fragment管理器
TabFragmentPagerAdapter adapter = new TabFragmentPagerAdapter(fm,aList);//实例适配器
//Viewpager绑定适配器
vp.setAdapter(adapter);
//设定预加载页数 默认是1
vp.setOffscreenPageLimit(3);
//tablayout绑定viewpager
tb.setupWithViewPager(vp);
}
在MainActivity里面调用setVp方法就行
显示结果
注意:
如果是在Fragment里面嵌套Viewpager+Fragment则要注意几个点:
1.初始化控件 findViewById 时要传入当前视图。
public void initView(View v){
vp2 = v.findViewById(R.id.vp_2);
tb2 = v.findViewById(R.id.tb_2);
}
2.在Fragment里面使用fragment管理器要是用子管理器:
FragmentManager fm = getChildFragmentManager();
嵌套之后的效果图