Android开发之ViewPager滑动页面效果实现

jopen 10年前

       我们先来谷歌官方文档对viewpager的介绍,该类允许用户通过页面翻转左右的数据,需要通过实现PagerAdapter适配器来生成视图显示的 页面。因为注意这个类是早期设计和开发的,API可能会改变,并在以后更新兼容库,到时候我们需要做相应的处理。ViewPager最常用于结合 Fragment,这是一个方便的方式来供应和管理每个页面的生命周期,我们后面的博客介绍相关的内容,今天我们先来简单实现viewpager的功能。

MainAcitivity的代码

    package com.example.f10_viewpager;                import java.util.ArrayList;        import java.util.List;        import android.os.Bundle;        import android.app.Activity;        import android.support.v4.view.PagerAdapter;        import android.support.v4.view.PagerTabStrip;        import android.support.v4.view.ViewPager;        import android.view.LayoutInflater;        import android.view.View;        import android.view.ViewGroup;                public class MainActivity extends Activity {                    private View view1, view2, view3;// 需要滑动的页卡            private ViewPager viewPager;            private PagerTabStrip pagerTabStrip;            private List<View> viewList;// 把需要滑动的页卡添加到这个list中            private List<String> titleList;// viewpager的标题                    @Override            public void onCreate(Bundle savedInstanceState) {                super.onCreate(savedInstanceState);                setContentView(R.layout.activity_main);                // 像普通控件一样先初始化                viewPager = (ViewPager) findViewById(R.id.viewpager);                pagerTabStrip = (PagerTabStrip) findViewById(R.id.pagertab);                pagerTabStrip.setDrawFullUnderline(false);//设置下划线不整页显示                pagerTabStrip.setTextSpacing(1000);//设置标题之间的距离                initView();                MyAdapter pagerAdapter = new MyAdapter();                viewPager.setAdapter(pagerAdapter);            }            //填充布局,设置每一页的标题            private void initView() {                view1 = findViewById(R.layout.layout1);                view2 = findViewById(R.layout.layout2);                view3 = findViewById(R.layout.layout3);                viewList = new ArrayList<View>();// 将要分页显示的View装入数组中                viewList.add(view1);                viewList.add(view2);                viewList.add(view3);                titleList = new ArrayList<String>();// 每个页面的Title数据                titleList.add("第一个页面");                titleList.add("第二个页面");                titleList.add("第三个页面");            }                    public class MyAdapter extends PagerAdapter {                @Override                public boolean isViewFromObject(View arg0, Object arg1) {                            return arg0 == arg1;                }                        @Override                public int getCount() {                            return viewList.size();                }                        @Override                public void destroyItem(ViewGroup container, int position, Object object) {                    container.removeView(viewList.get(position));                        }                        @Override                public int getItemPosition(Object object) {                            return super.getItemPosition(object);                }                        @Override                public CharSequence getPageTitle(int position) {                            return titleList.get(position);                        }                        // 将每一页的布局填充如ViewGroup容器中                @Override                public Object instantiateItem(ViewGroup container, int position) {                    container.addView(viewList.get(position));                            return viewList.get(position);                }                    };                }  
</div> </div>
   在我之间浏览博文的时候,有人提到过第30行代码设置标题的距离效果没有实现,不知道为什么,后来我调试了一下,发现应该是这个值要设置的大一些,我这 里设置的就是1000就实现了一个页面只显示一个标题的效果。在layout布局文件下,我们首先得先创建三个简单的布局文件,来实现滑动效果,当然最重 要的是main.xml的代码书写
<?xml version="1.0" encoding="utf-8"?>      <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"          android:layout_width="fill_parent"          android:layout_height="fill_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.PagerTabStrip                    android:id="@+id/pagertab"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:layout_gravity="top"/>                                                                                   </android.support.v4.view.ViewPager>            </LinearLayout>   
</div> </div>