目录
翻页视图ViewPager
之前介绍的列表视图ListView以及下拉框Spinner都只能垂直上下滑动，若想水平左右滑动则需要用到翻页视图ViewPager。ViewPager 是 Android 中用于实现左右滑动翻页效果的布局组件，常用于引导页、图片浏览器、标签页等场景。ViewPager中的一个页面就是一项，相当于ListView的一个列表项，多个页面组成ViewPager的页面项。
翻页视图的用法与列表视图类似，它的数据适配器是翻页适配器PagerAdapter，监听器为页面变更监听器OnPageChangeListener监听页面切换事件。翻页视图有三个常用的方法，说明如下：
setAdapter：设置页面项的适配器。
setCurrentItem：设置当前要显示的页面。
addOnPageChangeListener：添加翻页视图的页面变更监听器。该监听器需要实现三个方法，一个是方法onPageScrollStateChanged，该方法在页面滑动状态变化时触发；一个是方法onPageScrolled，该方法在页面滑动过程中触发；一个是方法onPageSelected，该方法在选中页面即滑动结束后触发。
翻页适配器PagerAdapter的实现原理与基本适配器类似，两者都是抽象类，需要派生该类并实现类中的一些方法。翻页适配器主要实现六个方法，说明如下：
构造方法：指定适配器需要处理的数据集合。
getCount：获取页面项的个数。
isViewFromObject：判断当前视图是否来自指定对象，返回view==object即可。
instantiateItem：实例化指定位置的页面，并将该页面添加到容器中。
destroyItem：从容器中销毁指定位置的页面。
getPageTitle：获取指定页面的标题文本，需要有翻页标签栏时才要实现该方法。
示例代码如下，在页面布局文件中添加一个翻页视图。
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".SeniorWidget.ViewPagerActivity">
<androidx.viewpager.widget.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>item_page.xml的代码，包括一个图片视图，两个文本视图，一个按钮。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:descendantFocusability="blocksDescendants">
<ImageView
android:id="@+id/imageView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:src="@drawable/image_3"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:orientation="vertical">
<TextView
android:id="@+id/textView_1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center"
android:textSize="17sp"
android:textColor="#1269db"
android:text="@string/app_name"/>
<TextView
android:id="@+id/textView_2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:textSize="17sp"
android:text="@string/app_name"/>
</LinearLayout>
<Button
android:id="@+id/button"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_gravity="center"
android:text="Button" />
</LinearLayout>部分Java代码，定义了一个NumberInfo类，一个翻页监听器派生类MyPageAdapter，主要看方法instantiateItem中的代码。
public class ViewPagerActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener {
private int[] image_id = {R.drawable.one, R.drawable.two, R.drawable.three, R.drawable.four, R.drawable.five,
R.drawable.six, R.drawable.seven, R.drawable.eight, R.drawable.nine, R.drawable.zero};
private Integer[] number = {1, 2, 3, 4, 5, 6, 7, 8, 9, 0};
private String[] number_english = {"one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "zero"};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_view_pager);
ViewPager viewPager = findViewById(R.id.viewPager);
MyPageAdapter myPageAdapter = new MyPageAdapter(this,getList());
viewPager.setAdapter(myPageAdapter);
viewPager.setCurrentItem(2);
viewPager.addOnPageChangeListener(this);
}
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
Toast.makeText(this,"正在滑动！",Toast.LENGTH_SHORT).show();
}
@Override
public void onPageScrollStateChanged(int state) {
Toast.makeText(this,"开始滑动！",Toast.LENGTH_SHORT).show();
}
@Override
public void onPageSelected(int position) {
Toast.makeText(this,String.format("滑动结束，当前页面为第%d页",position+1),Toast.LENGTH_SHORT).show();
}
public List<NumberInfo> getList() {
List<NumberInfo> numberInfoList = new ArrayList<NumberInfo>();
for (int i = 0; i < number.length; i++) {
NumberInfo numberInfo = new NumberInfo(image_id[i],number[i],number_english[i]);
numberInfoList.add(numberInfo);
}
return numberInfoList;
}
class NumberInfo {
private int image_id;
private int number;
private String number_english;
public NumberInfo(int image_id,int number,String number_english){
this.image_id = image_id;
this.number = number;
this.number_english = number_english;
}
public int getImage_id() {
return image_id;
}
public void setImage_id(int image_id) {
this.image_id = image_id;
}
public int getNumber() {
return number;
}
public void setNumber(int number) {
this.number = number;
}
public String getNumber_english() {
return number_english;
}
public void setNumber_english(String number_english) {
this.number_english = number_english;
}
}
class MyPageAdapter extends PagerAdapter{
private Context mContext;
private List<NumberInfo> numberInfoList;
class ViewHolder{
public ImageView imageView;
public TextView textView_1;
public TextView textView_2;
public Button button;
}
public MyPageAdapter(Context context,List<NumberInfo> numberInfoList) {
super();
this.mContext = context;
this.numberInfoList = numberInfoList;
}
@NonNull
@Override
public Object instantiateItem(@NonNull ViewGroup container, int position) {
LayoutInflater layoutInflater = LayoutInflater.from(mContext);
View view = layoutInflater.inflate(R.layout.item_page,container,false);
ViewHolder viewHolder = new ViewHolder();
viewHolder.imageView = view.findViewById(R.id.imageView);
viewHolder.textView_1 = view.findViewById(R.id.textView_1);
viewHolder.textView_2 = view.findViewById(R.id.textView_2);
viewHolder.button = view.findViewById(R.id.button);
NumberInfo numberInfo = numberInfoList.get(position);
viewHolder.imageView.setImageResource(numberInfo.getImage_id());
viewHolder.textView_1.setText(String.format("%d", numberInfo.getNumber()));
viewHolder.textView_2.setText(numberInfo.getNumber_english());
viewHolder.button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Toast.makeText(mContext,String.format("点击了第%d项的按钮！",position+1),Toast.LENGTH_SHORT).show();
}
});
container.addView(view);
return view;
}
@Override
public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
container.removeView((View) object);
}
@Override
public int getCount() {
return numberInfoList.size();
}
@Override
public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
return view == object;
}
}
}效果图如下。
实际上用到监听器中的只有一个方法onPageSelected，对此Android提供了简化版的页面变更监听器SimpleOnPageChangeListener，该监听器只需实现方法onPageSelected，代码如下：
viewPager.addOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener(){
@Override
public void onPageSelected(int position) {
Toast.makeText(ViewPagerActivity.this,String.format("滑动结束，当前页面为第%d页",position+1),Toast.LENGTH_SHORT).show();
}
});翻页标签栏PagerTabStrip
翻页标签栏能够让用户找到当前页面是哪一个页面，它显示在翻页视图上方。点击左右标签可以切换到对应页面。示例代码如下，在VIewPager标签下添加PagerTabStrip节点，后在Java代码中重写方法getPageTitle。
<androidx.viewpager.widget.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.viewpager.widget.PagerTabStrip
android:id="@+id/pagerTabStrip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</androidx.viewpager.widget.ViewPager>
方法getPageTitle的代码。
@Nullable
@Override
public CharSequence getPageTitle(int position) {
return numberInfoList.get(position).number_english;
}PagerTabStrip文本的样式修改只能在Java代码中实现，代码示例如下。
PagerTabStrip pagerTabStrip = findViewById(R.id.pagerTabStrip);
pagerTabStrip.setTextSize(TypedValue.COMPLEX_UNIT_SP,20);
pagerTabStrip.setTextColor(Color.GREEN);效果图如下，可以看到在页面上方多了一个标签栏，颜色为绿色。
扫一扫
908
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
