Android ViewPager实例教程
在Android中,ViewPager允许用户在数据页面间左右切换。在我们的Android ViewPager应用中,我们将实现一个ViewPager,它可以通过滑动显示三个不同图像和文本的视图。
安卓 ViewPager
安卓的ViewPager小部件可以在支持库中找到,它允许用户向左或向右滑动查看全新的屏幕。今天,我们将通过使用Views和PagerAdapter来实现一个ViewPager。虽然我们也可以使用Fragments来实现相同的功能,但我们将在以后的教程中讨论这个。ViewPager使用PagerAdapter来向MainActivity提供视图,类似于ListAdapter为ListView提供数据的工作。
Android ViewPager 示例
Android ViewPager 示例代码
activity_main.xml 只包含如下所示的 ViewPager。
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
xmlns:tools="https://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout>
以下是MainActivity.java文件。
package com.Olivia.viewpager;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
viewPager.setAdapter(new CustomPagerAdapter(this));
}
}
以上代码中MainActivity的作用是引用ViewPager并设置扩展PagerAdapter的CustomPagerAdapter。在讨论CustomPagerAdapter类之前,让我们先看一下ModelObject类。ModelObject.java
package com.Olivia.viewpager;
public enum ModelObject {
RED(R.string.red, R.layout.view_red),
BLUE(R.string.blue, R.layout.view_blue),
GREEN(R.string.green, R.layout.view_green);
private int mTitleResId;
private int mLayoutResId;
ModelObject(int titleResId, int layoutResId) {
mTitleResId = titleResId;
mLayoutResId = layoutResId;
}
public int getTitleResId() {
return mTitleResId;
}
public int getLayoutResId() {
return mLayoutResId;
}
}
以上的枚举列出了所有ViewPagers的页面。其中包含三个具体布局的页面。以下是单个页面的布局,即view_blue.xml。
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:background="@android:color/holo_blue_dark"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Second View"
android:layout_gravity="center_horizontal"
android:textSize="28sp"
android:textColor="@android:color/black"
android:textStyle="bold"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:id="@+id/textView" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Swipe left to\nFirst View"
android:layout_gravity="center_horizontal"
android:textSize="20sp"
android:textColor="@android:color/black"
android:textStyle="bold"
android:minLines="2"
android:id="@+id/textView2"
android:padding="@dimen/activity_horizontal_margin"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Swipe right to\nThird View"
android:layout_gravity="center_horizontal"
android:textSize="20sp"
android:textColor="@android:color/black"
android:textStyle="bold"
android:padding="@dimen/activity_horizontal_margin"
android:minLines="2"
android:id="@+id/textView3"
android:layout_alignTop="@+id/textView2"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
</RelativeLayout>
这个项目的源代码中给出了剩下的两页相似的布局。CustomPagerAdapter.java。
package com.Olivia.viewpager;
import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class CustomPagerAdapter extends PagerAdapter {
private Context mContext;
public CustomPagerAdapter(Context context) {
mContext = context;
}
@Override
public Object instantiateItem(ViewGroup collection, int position) {
ModelObject modelObject = ModelObject.values()[position];
LayoutInflater inflater = LayoutInflater.from(mContext);
ViewGroup layout = (ViewGroup) inflater.inflate(modelObject.getLayoutResId(), collection, false);
collection.addView(layout);
return layout;
}
@Override
public void destroyItem(ViewGroup collection, int position, Object view) {
collection.removeView((View) view);
}
@Override
public int getCount() {
return ModelObject.values().length;
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
@Override
public CharSequence getPageTitle(int position) {
ModelObject customPagerEnum = ModelObject.values()[position];
return mContext.getString(customPagerEnum.getTitleResId());
}
}
-
- CustomPagerAdapter(Context context):构造函数需要一个Context引用。由于后面要使用该引用来从枚举类中访问各个页面布局,所以将该上下文保存为类的成员变量。
instantiateItem:在这种情况下,我们使用枚举来填充特定枚举值相关联的布局。然后,我们将新充气的布局添加到PagerAdapter所维护的ViewGroup(视图集合)中,并返回该布局。这个方法返回的对象也会在以后用作isViewFromObject方法的第二个参数。
destroyItem:该方法从PagerAdapter维护的ViewGroup中删除特定的视图。
getCount:它简单地返回ViewPager将维护的视图数。对于这个例子,计数是模型对象中的枚举值数量。
isViewFromObject:该方法检查特定对象是否属于给定的位置,这很简单。如前所述,第二个参数的类型是Object,与instantiateItem方法的返回值相同。
getPageTitle:在给定的位置,我们需要为PagerAdapter提供一个标题。这通常表现为ActionBar中的Activity标题,有时选项卡会利用这个方法为每个标签添加标签。在这种情况下,我们仅将其用于标签。
下面的图片展示了应用的运行过程。这结束了关于Android ViewPager的示例教程。您可以从下面的链接下载Android ViewPager项目。
下载安卓ViewPager示例项目