【Android 开发】：UI控件之 ViewPager 多页面滑动效果控件的的使用(二)

来源：互联网发布：厦门安胜科技公司知乎编辑：程序博客网时间：2024/05/22 05:08

上一讲：【Android 开发】：UI控件之 ViewPager 多页面滑动效果控件的的使用我们已经讲解了ViewPager的使用效果，这一讲我们继续对上一讲内容进行补充，继续深入学习一下ViewPager的另外的使用方法。

1. 实现效果如下图所画，这里需要注意的是一般我们在加载的时候可以从服务端通过http协议以json 数据格式来传递数据，因为自己还没学过服务端上面知识，所以这里仅做模仿，重点是演示在哪个方法中适合加载网络数据！

2. 案例实现

1) 布局代码

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:paddingBottom="@dimen/activity_vertical_margin"    android:paddingLeft="@dimen/activity_horizontal_margin"    android:paddingRight="@dimen/activity_horizontal_margin"    android:paddingTop="@dimen/activity_vertical_margin"    tools:context=".MainActivity" >    <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:id="@+id/pagertitle"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="top" >        </android.support.v4.view.PagerTitleStrip>    </android.support.v4.view.ViewPager></RelativeLayout>

tab.xml: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" >        <!-- 自定义一个布局，用来填充ViewPager的显示页面，可以来自本地或者网络的数据       例如：图文混排的效果     -->    <ProgressBar        android:id="@+id/progressBar1"        style="?android:attr/progressBarStyleLarge"        android:layout_width="wrap_content"        android:layout_height="wrap_content" /></LinearLayout>

[注意]：自定义布局是可以动态加载进来的

2) 程序主要代码

public class MainActivity extends Activity {    private ViewPager viewPager;    private PagerTitleStrip pagerTitleStrip;        private List<View> list = null;    private List<String> title = null;    private LayoutInflater inflater = null; //动态加载布局使用    private MyAdapter adapter;        @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        initComponent();             /*         * 动态加载布局         * 自定义布局是可以动态加载进来的,它是一个View的对象         * 如果涉及到网络可以在布局中自己定义一些数据，然后从网络中提取出来         */        inflater = LayoutInflater.from(MainActivity.this);        //第一次被加载的布局对象        View tab = inflater.inflate(R.layout.tab, null);                list = new ArrayList<View>();        list.add(tab);        title = new ArrayList<String>();        title.add("title");                //先初始化页面        adapter = new MyAdapter();        viewPager.setAdapter(adapter);        /*         * 查看api文档 setOnPageChangeListener 的几个方法说明         */        viewPager.setOnPageChangeListener(new OnPageChangeListener() {                        @Override            public void onPageSelected(int arg0) {                // TODO Auto-generated method stub                Log.i("MainActivity", "---arg0-->>" + arg0);            }                        @Override            public void onPageScrolled(int a, float b, int c) {                // TODO Auto-generated method stub                Log.i("MainActivity", "---a-->>" + a);                Log.i("MainActivity", "---b-->>" + b);                Log.i("MainActivity", "---c-->>" + c);                Log.i("MainActivity", "------------------------------");            }                        /*             * @see android.support.v4.view.ViewPager.OnPageChangeListener#onPageScrollStateChanged(int)             * 点击pager时调用这个方法。             * 注意我们一般都是在这里开启线程去下载网络的数据，更新UI的操作             */            @Override            public void onPageScrollStateChanged(int d) {                // TODO Auto-generated method stub                View view = inflater.inflate(R.layout.tab, null);                list.add(view);                title.add("new title");                                //刷新容器中的数据                adapter.notifyDataSetChanged();                Log.i("MainActivity", "---d-->>" + d);                Log.i("MainActivity", "------------------------------");            }        });    }        public class MyAdapter extends PagerAdapter{        @Override        public Object instantiateItem(ViewGroup container, int position) {            // TODO Auto-generated method stub            ((ViewPager)container).addView(list.get(position));            return list.get(position);        }                @Override        public void destroyItem(ViewGroup container, int position, Object object) {            // TODO Auto-generated method stub         //   super.destroyItem(container, position, object);            ((ViewPager)container).removeView(list.get(position));        }                @Override        public CharSequence getPageTitle(int position) {            // TODO Auto-generated method stub            return title.get(position);        }                @Override        public int getCount() {            // TODO Auto-generated method stub            return list.size();        }        @Override        public boolean isViewFromObject(View arg0, Object arg1) {            // TODO Auto-generated method stub            return arg0 == arg1;        }     }    @Override    public boolean onCreateOptionsMenu(Menu menu) {        // Inflate the menu; this adds items to the action bar if it is present.        getMenuInflater().inflate(R.menu.main, menu);        return true;    }            private void initComponent(){        viewPager = (ViewPager)findViewById(R.id.viewpager);        pagerTitleStrip = (PagerTitleStrip)findViewById(R.id.pagertitle);    }}

[注意]：当用户第一次去加载的时候必须填充一下页面

3. 程序执行结果

4. 程序说明

注意到这个程序与上一个程序的不同是，这里我们加进了一个监听器，主要是用来监听滑动过程后从网络中下载数据的功能。
1) 查看ViewPager ViewPager.OnPageChangeListener 表示当界面的状态变化的时候这个接口会回调，这里面有三个需要实现的方法，如下图所示：

2）这个程序的重点主要是要判断在那个方法里面写加载网络数据的功能，我们可以通过相应方法中打印 Log 的来进行判断。仔细观察Log的输出情况，可以发现当我们在滑动过程中，都有调用onPageScrollStateChanged(int state)和onPageScrolled(int position, float positionOffset, int positionOffsetPixels)方法，结合api文档的方法说明，我们可以发现在滑动过程中，当新的布局滑进来的时候onPageScrollStateChanged(int state)方法的state值会逐次加1。同样onPageScrolled(int position, float positionOffset, int positionOffsetPixels)方法中，position的值也会逐次+1，positionOffset表示屏幕滑动过程中的偏移量在 [0, 1)之间。Log如下所示，当然最好读者可以自己去演示一遍

【注意】: 所以从这里我们也可以看出，在进行网络加载的过程中，我们最好是把要实现的UI更新操作放在onPageScrollStateChanged()方法进行，因为这个方法是在整个页面被加载的时候才会调用的，而onPageScrolled()方法是只要在滑动过程中，便会调用。