目录
Android ViewPager (页面切换组件)
ViewPaper
PagerAdapter
范例
参考文档
Android ViewPager 翻页标签栏
PagerTitleStrip
范例
参考文档
Android ViewPager 翻页标签栏(含下划线)
范例
参考文档
Android 中的 ViewPager 组件是一个可以在多个页面之间进行滑动切换的视图容器。它通常用于创建包含多个页面(Fragment 或 View)的用户界面,用户可以通过手势(左右滑动)或者程序控制来切换不同的页面。
使用 ViewPager 可以实现一些常见的功能,比如创建引导页、图片轮播、选项卡式布局等。通过适配器(Adapter)来为 ViewPager 提供页面内容,并利用 FragmentPagerAdapter 或 FragmentStatePagerAdapter 来管理页面的生命周期。
在创建 ViewPager 时,可以通过 XML 布局文件定义 ViewPager 控件,然后通过特定的 Adapter(PagerAdapter 的子类)将 View 和 ViewPager 绑定在一起。对于 ViewPager,推荐使用 Fragment 来填充每个页面,这样能更方便地生成和管理每个页面的生命周期。
Android 官方推荐使用 FragmentPagerAdapter 或 FragmentStatePagerAdapter 这两个专用的 Adapter 类来管理 ViewPager 中的页面。它们分别适用于不同的场景:
PagerAdapter 是一个抽象类,需要创建子类并重写其中的四个方法来实现对 ViewPager 中页面的管理:
通过重写这四个方法,可以实现对 ViewPager 中页面的管理和操作,包括添加、移除和判断页面对象。这使得开发者能够灵活地控制 ViewPager 中每个页面的行为,并根据需要进行定制化的处理。
1、创建布局文件 activity_main.xml:
2、创建 fragment_layout.xml 布局文件,作为 ViewPager 中每个页面的布局:
3、创建一个简单的 Fragment 类 MyFragment.java:
package com.example.myapplication;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
public class MyFragment extends Fragment {
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_layout, container, false);
}
}
4、在 MainActivity 中设置 ViewPager 和 FragmentStatePagerAdapter:
package com.example.myapplication;
import android.os.Bundle;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentStatePagerAdapter;
import androidx.viewpager.widget.ViewPager;
public class MainActivity extends AppCompatActivity {
private ViewPager viewPager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewPager = findViewById(R.id.viewPager);
MyPagerAdapter pagerAdapter = new MyPagerAdapter(getSupportFragmentManager());
viewPager.setAdapter(pagerAdapter);
}
private class MyPagerAdapter extends FragmentStatePagerAdapter {
public MyPagerAdapter(FragmentManager fm) {
super(fm, BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT);
}
@NonNull
@Override
public Fragment getItem(int position) {
return new MyFragment();
}
@Override
public int getCount() {
return 3; // 例如,这里返回3表示有3个页面
}
}
}
上面的ViewPager 总觉得还缺少些什么,能添加上标题一起切换就好了。Android 官方早就帮我们想好了,它们提供了 PagerTitleStrip 与 PagerTabStrip 用来制作 ViewPaper 的标题栏,前者是普通文字,后者会附带下划线,它们会随着页面切换而切换。
在 XML 中创建 PagerTitleStrip 的示例代码如下:
然后,可以通过以下方法来定制 PagerTitleStrip 的外观:
1、创建布局文件 activity_main.xml:
2、创建 fragment_layout.xml 布局文件,作为 ViewPager 中每个页面的布局:
3、创建一个简单的 Fragment 类 MyFragment.java:
package com.example.myapplication;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
public class MyFragment extends Fragment {
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_layout, container, false);
}
}
4、在 MainActivity 中设置 ViewPager 和 FragmentStatePagerAdapter,并为每个页面设置标题:
package com.example.myapplication;
import android.os.Bundle;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentStatePagerAdapter;
import androidx.viewpager.widget.ViewPager;
public class MainActivity extends AppCompatActivity {
private ViewPager viewPager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewPager = findViewById(R.id.viewPager);
MyPagerAdapter pagerAdapter = new MyPagerAdapter(getSupportFragmentManager());
viewPager.setAdapter(pagerAdapter);
}
private class MyPagerAdapter extends FragmentStatePagerAdapter {
private String[] pageTitle = {"页 1", "页 2", "页 3"};
public MyPagerAdapter(FragmentManager fm) {
super(fm, BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT);
}
@Override
public CharSequence getPageTitle(int position) {
return pageTitle[position];
}
@NonNull
@Override
public Fragment getItem(int position) {
return new MyFragment();
}
@Override
public int getCount() {
return 3; // 例如,这里返回3表示有3个页面
}
}
}
我们就来试一试 PagerTabStrip 来给 ViewPager 的标题添加下划线效果。
接着用上面的范例,只需要将activity_main.xml 修改一下。