初识ViewPager

作者: 狮_子歌歌 | 来源:发表于2016-05-30 19:07 被阅读183次

什么是ViewPager

ViewPager：实现两个完整画面之间的转换

基本用法

1.在布局文件中加入ViewPager组件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center">
        <android.support.v4.view.PagerTitleStrip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="top" />
    </android.support.v4.view.ViewPager>
</LinearLayout>

其中 <android.support.v4.view.ViewPager /> 是ViewPager对应的组件。
2.创建三个布局文件视图，用于ViewPager切换
这里我打算设计一个weatherDemo，于是需要三个视图：chooseWeather、localWeather、setWeather。
choose_weather.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#ffffff">
</LinearLayout>

local_weather.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#ff00ff">
</LinearLayout>

set_weather.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#ffff00">
</LinearLayout>

3.ViewPagerDemo.java

public class ViewPagerDemo extends Activity {
    private View chooseWeather, localWeather, setWeather;
    private ViewPager viewPager;
    private List<View> viewList;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_view_pager_demo);
        viewPager = (ViewPager) findViewById(R.id.viewpager);
        //初始化view，解析布局文件
        LayoutInflater inflater = getLayoutInflater();
        chooseWeather = inflater.inflate(R.layout.choose_weather, null);
        localWeather = inflater.inflate(R.layout.local_weather, null);
        setWeather = inflater.inflate(R.layout.set_weather, null);
        viewList = new ArrayList<View>();
        viewList.add(chooseWeather);
        viewList.add(localWeather);
        viewList.add(setWeather);
        final PagerAdapter pagerAdapter = new PagerAdapter() {
            /**
             * 返回要滑动的view的个数
             * @return
             */
            @Override
            public int getCount() {
                return viewList.size();
            }
            @Override
            public boolean isViewFromObject(View view, Object object) {
                return view == object;
            }
            /**
             * 从当前container中删除指定位置（position）的View;
             * @param container
             * @param position
             * @param object
             */
            @Override
            public void destroyItem(ViewGroup container, int position, Object object) {
                container.removeView(viewList.get(position));
            }
            /**
             * 做了两件事，第一：将当前视图添加到container中，第二：返回当前View
             * @param container
             * @param position
             * @return
             */
            @Override
            public Object instantiateItem(ViewGroup container, int position) {
                container.addView(viewList.get(position));
                //LogUtil.d("inposition", position + "");
                return viewList.get(position);
            }
        };
        viewPager.setAdapter(pagerAdapter);
    }

** PagerAdapter适配器 **
PagerAdapter必须重写以下四个函数：

boolean isViewFromObject(View arg0, Object arg1)
int getCount()
void destroyItem(ViewGroup container, int position,Object object)
Object instantiateItem(ViewGroup container, int position)

ViewPager适配器：PagerAdapter

官方文档
重点:viewpager不直接处理每一个视图而是将各个视图与一个键联系起来。这个键用来跟踪且唯一代表一个页面，不仅如此，该键还独立于这个页面所在adapter的位置。当pageradapter将要改变的时候他会调用startUpdate函数，接下来会调用一次或多次的instantiateItem或者destroyItem。最后在更新的后期会调用finishUpdate。当finishUpdate返回时 instantiateItem返回的对象应该添加到父ViewGroup destroyItem返回的对象应该被ViewGroup删除。方法isViewFromObject(View, Object)代表了当前的页面是否与给定的键相关联。
对于非常简单的pageradapter或许你可以选择用page本身作为键，在创建并且添加到viewgroup后instantiateItem方法里返回该page本身即可destroyItem将会将该page从viewgroup里面移除。isViewFromObject方法里面直接可以返回view == object。

与每一个滑动View对应的Key是什么？

getCount

getCount().png

返回可用的View
destroyItem

destroyItem.png

该方法实现的功能是移除一个给定位置的页面。适配器有责任从容器中删除这个视图。这是为了确保在finishUpdate(viewGroup)返回时视图能够被移除。

instantiateItem

Paste_Image.png

这个函数的实现的功能是创建指定位置的页面视图。适配器有责任增加即将创建的View视图到这里给定的container中，这是为了确保在finishUpdate(viewGroup)返回时，视图已经被添加。
返回值：返回一个代表新增视图页面的Object（Key），这里没必要非要返回视图本身，也可以这个页面的其它容器。也可以是position变量也可以做为Key。

isViewFromObject

Paste_Image.png

该函数用来判断instantiateItem(ViewGroup, int)函数所返回来的Key与一个页面视图是否是代表的同一个视图(即它俩是否是一对键值对)
返回值：如果对应的是同一个View，返回True，否则返回False。

自定义Key

public class ViewPagerDemo extends Activity {
    private View chooseWeather, localWeather, setWeather;
    private ViewPager viewPager;
    private PagerTitleStrip pagerTitleStrip; //viewPager 标题
    private PagerTabStrip pagerTabStrip;//viewpager 的指示器,效果:一条横的粗的下划线
    private List<View> viewList;
    private List<String> titleStringList;//标题内容列表
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_view_pager_demo);
        viewPager = (ViewPager) findViewById(R.id.viewpager);
        LayoutInflater inflater = getLayoutInflater();
        chooseWeather = inflater.inflate(R.layout.choose_weather, null);
        localWeather = inflater.inflate(R.layout.local_weather, null);
        setWeather = inflater.inflate(R.layout.set_weather, null);
        viewList = new ArrayList<View>();
        viewList.add(chooseWeather);
        viewList.add(localWeather);
        viewList.add(setWeather);
        PagerAdapter pagerAdapter = new PagerAdapter() {
            /**
             * 返回要滑动的view的个数
             * @return
             */
            @Override
            public int getCount() {
                return viewList.size();
            }
            @Override
            public boolean isViewFromObject(View view, Object object) {
                int position = Integer.parseInt(arg1.toString())
                LogUtil.d("isposition", position.intValue() + "");
                return view == viewList.get(position);
            }
            /**
             * 从当前container中删除指定位置（position）的View;
             * @param container
             * @param position
             * @param object
             */
            @Override
            public void destroyItem(ViewGroup container, int position, Object object) {
                container.removeView(viewList.get(position));
            }
            /**
             * 做了两件事，第一：将当前视图添加到container中，第二：返回当前View
             * @param container
             * @param position
             * @return
             */
            @Override
            public Object instantiateItem(ViewGroup container, int position) {
                container.addView(viewList.get(position));
                LogUtil.d("inposition", position + "");
                return position;
            }
            /*@Override
            public CharSequence getPageTitle(int position) {                return titleStringList.get(position);
            }*/
        };
        viewPager.setAdapter(pagerAdapter);
    }
}

这个代码中我们实现instantiateItem方法，并且返回position作为创建指定position的View的key。在isViewFromObject方法中，我们需要判断从instantiateItem返回的position(即isViewFromObject方法参数列表中的object)对应的view是否与isViewFromObject方法参数中的view相同。
参考博客:http://blog.csdn.net/harvic880925/article/details/38453725

初识ViewPager

什么是ViewPager

基本用法

ViewPager适配器：PagerAdapter

与每一个滑动View对应的Key是什么？

自定义Key

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读