Androidx 中的 ViewPager 与 ViewPager2
2.2 创建三个 Fragment并设计 各自的 UI 布局
Google官方是建议我们使用Fragment来填充ViewPager的，Fragment由于能够很好地权衡不同大小屏幕的用户体验，也能够使得页面的空间利用更加地合理，推出以来一直广受好评。
我在这里一共创建了三个Fragment，三个fragment的创建完全一样，为了避免文章臃肿，这里就只说一个吧。
2.2.1 FirstFragment 的创建
代码
package com.demo.rico_fragment_01;
import android.os.Bundle;
import androidx.fragment.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
/**
- A simple {@link Fragment} subclass.
*/
public class FirstFragment extends Fragment {
public FirstFragment() {
// Required empty public constructor
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_first, container, false);
}
}
2.2.2 FirstFragment 对应的fragment_first.xml布局文件
这里UI只是简单插入了一个 ImageView，并没有太过复杂化的UI，图片用的是我们福师大的logo
代码
<FrameLayout xmlns:android="schemas.android.com/apk/res/and…"
xmlns:app="schemas.android.com/apk/res-aut…"
xmlns:tools="schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".FirstFragment">
<ImageView
android:id="@+id/imageView_first"
android:layout_width="268dp"
android:layout_height="99dp"
android:layout_gravity="center"
android:src="@mipmap/fjnu_logo" />
2.2.3 预览图
2.2.4 其他
布局的代码也一样，只是引入的图片不同
2.3 适配器类(MyPagerAdapter.java)的编写
谷歌官方给我们提供了两个Fragment 专用的Adapter：FragmentPageAdapter和FragmentStatePagerAdapter
这里可参考教程：ViewPager的简单使用
我使用的是FragmentPageAdapter
代码
（解析都在代码注释里了，就不多赘述了）
package com.demo.rico_fragment_01;
import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentPagerAdapter;
import androidx.fragment.app.FragmentManager;
import java.util.ArrayList;
/*
- 适配器
*/
public class MyPagerAdapter extends FragmentPagerAdapter {
private ArrayList title_list;//放置TabLayout的标题
private ArrayList fragment_list;//放置ViewPager容器下的Fragment
// 构造方法传参：fragment管理器、标题列表、fragment控件列表
public MyPagerAdapter(FragmentManager fm, ArrayList title_list, ArrayList fragment_list) {
super(fm);
this.title_list = title_list;
this.fragment_list = fragment_list;
}
//根据参数，获取一个fragment
@NonNull
public Fragment getItem(int a) {
return fragment_list.get(a);
}
//获取fragment控件列表的大小（有几个fragment“碎片”）
@Override
public int getCount() {
return fragment_list.size();
}
//获取标题位置
@Override
public CharSequence getPageTitle(int a) {
return title_list.get(a);
}
}
2.4.1activity_main.xml 布局文件
思路：整体为垂直方向的线性布局，上面一个高度为70dp的TabLayout，下面为填充的viewpager容器
TabLayout增加三个TabItem:
| 序号 | 标题 |
| --- | --- |
| 1 | 学校 |
| 2 | 学院 |
| 3 | 班级 |
代码
<LinearLayout xmlns:android="schemas.android.com/apk/res/and…"
xmlns:app="schemas.android.com/apk/res-aut…"
xmlns:tools="schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity" >
<com.google.android.material.tabs.TabLayout
android:id="@+id/my_tabLayout"
android:layout_width="match_parent"
android:layout_height="70dp">
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="学校" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="学院" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="班级" />
</com.google.android.material.tabs.TabLayout>
<androidx.viewpager.widget.ViewPager
android:id="@+id/my_viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent">
</androidx.viewpager.widget.ViewPager>
预览图
2.4.2 MainActivity.java的代码编写
我们要做的是
找到TabLayout和三个fragment，将他们给适配器，再由适配器传给MainActivity中的viewpager
代码
package com.demo.rico_fragment_01;
import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager.widget.ViewPager;
import android.os.Bundle;
import java.util.ArrayList;
import com.google.android.material.tabs.TabLayout;
import androidx.fragment.app.Fragment;
public class MainActivity extends AppCompatActivity {
private ViewPager viewPager;
private TabLayout tabLayout;
private ArrayList tab_title_list = new ArrayList<>();//存放标签页标题
private ArrayList fragment_list = new ArrayList<>();//存放ViewPager容器下的Fragment
private Fragment firstFragment, secondFragment, thirdFragment;//三个fragment
private MyPagerAdapter adapter;//适配器
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//找到tablayout 和 viewpager
viewPager = findViewById(R.id.my_viewPager);
tabLayout = findViewById(R.id.my_tabLayout);
//标题
tab_title_list.add("学校");
tab_title_list.add("学院");
tab_title_list.add("班级");
//三个fragment对象
firstFragment = new FirstFragment();
secondFragment = new SecondFragment();
thirdFragment = new ThirdFragment();
//往fragment列表添加内容
fragment_list.add(firstFragment);
fragment_list.add(secondFragment);
fragment_list.add(thirdFragment);
adapter = new MyPagerAdapter(getSupportFragmentManager(), tab_title_list, fragment_list);
viewPager.setAdapter(adapter);
tabLayout.setupWithViewPager(viewPager);//让TabLayout和Viewpager 联系起来，能一起滑动
}
}
