在很多APP第一次启动时都会出现引导页,在一些APP里面还会包括一些左右滑动翻页和页面轮播切换的情况。在之前也已经学习了AdapterViewFlipper和ViewFlipper,都可以很好的实现,今天继续来学习一个功能更加强大的ViewPager组件。
一、ViewPager简介
ViewPager是android扩展包v4包中的类,这个类可以让用户左右滑动切换当前的view。ViewPager继承自ViewGroup,也就是ViewPager是一个容器类,可以包含其他的View类。
ViewPager的主要方法有以下几个:
关于界面监听的内容,接下来对OnPageChangeListener中的方法进行说明:
上面三个方法的执行顺序:用手指拖动翻页时,最先执行一遍onPageScrollStateChanged(1),然后不断执行onPageScrolled,放手指的时候,直接立即执行一次onPageScrollStateChanged(2),然后立即执行一次onPageSelected,然后再不断执行onPageScrollStateChanged,最后执行一次onPageScrollStateChanged(0)。
在大多数使用适配器的控件里,适配器相对于数据源和视图来说都更加复杂,同时也决定了这个控件主要的功能,ViewPager也不例外。实现一个PagerAdapter时,至少需要重写下面的4个方法:
除了上述4个方法,还有以下一些方法,可根据实际需要进行重写。
ViewPager的具体使用类似于之前学习的列表类组件,首先构造适配器,然后提供数据源,最后加载适配器。
二、ViewPager示例
接下来通过一个简单的示例程序来学习ViewPager的使用。
继续使用WidgetSample工程的advancedviewsample模块,在src/main/res/layout/目录下创建viewpager_layout.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.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</android.support.v4.view.ViewPager>
</LinearLayout>
然后新建几个页面文件,第一个页面命名为viewpager_pager1.xml,其代码如下:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="@drawable/image_01"/>
</RelativeLayout>
另外再新建3个,为了简单布局和上面一样,将其中的代码加载的图片换一下即可。
新建ViewPagerAdapter类,继承PagerAdapter,并重写其方法,代码如下:
package com.jinyu.cqkxzsxy.android.advancedviewsample.adapter;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import java.util.ArrayList;
/**
* @创建者 鑫鱻
* @描述 Android零基础入门到精通系列教程
* 首发微信公众号分享达人秀(ShareExpert)
*/
public class ViewPagerAdapter extends PagerAdapter {
private ArrayList<View> mPageList = null;
public ViewPagerAdapter(ArrayList<View> pageList) {
this.mPageList = pageList;
}
@Override
public int getCount() {
return mPageList.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
View pageView = mPageList.get(position);
container.addView(pageView);
return pageView;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
// 将当前位置的View移除
container.removeView(mPageList.get(position));
}
}
新建ViewPagerActivity.java文件,加载上面新建的布局文件,具体代码如下:
package com.jinyu.cqkxzsxy.android.advancedviewsample;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Toast;
import com.jinyu.cqkxzsxy.android.advancedviewsample.adapter.ViewPagerAdapter;
import java.util.ArrayList;
/**
* @创建者 鑫鱻
* @描述 Android零基础入门到精通系列教程,欢迎关注微信公众号ShareExpert
*/
public class ViewPagerActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener {
private ViewPager mViewPager = null;
private ViewPagerAdapter mAdapter = null;
private ArrayList<View> mPageList = null;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.viewpager_layout);
mViewPager = (ViewPager) findViewById(R.id.view_pager);
mPageList = new ArrayList<>();
LayoutInflater inflater = getLayoutInflater();
mPageList.add(inflater.inflate(R.layout.viewpager_page1, null, false));
mPageList.add(inflater.inflate(R.layout.viewpager_page2, null, false));
mPageList.add(inflater.inflate(R.layout.viewpager_page3, null, false));
mPageList.add(inflater.inflate(R.layout.viewpager_page4, null, false));
mAdapter = new ViewPagerAdapter(mPageList);
mViewPager.setAdapter(mAdapter);
mViewPager.addOnPageChangeListener(this);
}
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
Toast.makeText(this, "第" + (position + 1) + "页", Toast.LENGTH_SHORT).show();
}
@Override
public void onPageScrollStateChanged(int state) {
}
}
修改程序启动的Activity,运行程序,然后左右滑动屏幕,可以看到下图所示界面效果。