ViewPager的使用

来源：互联网发布：汽车行业数据编辑：程序博客网时间：2024/05/17 00:53

ViewPager可以实现页面的滚动功能，通常配合PagerTabStrip或者PagerTitleStrip一起使用，从而显示标题。如果要使用PagerTabStrip或者PagerTitleStrip的话，需要把它们作为ViewPager的子控件使用，同时应该设置它们的属性layout_gravity为top或者bottom，表示标题显示在顶部或者底部。ViewPager其实只是一个空页面，需要像ListView一样由PagerAdapter提供内容；

当你实现一个PagerAdapter时，至少需要重载以下几个方法:

instantiateItem(ViewGroup, int) //初始化，添加一个页面并返回当前页面
destroyItem(ViewGroup, int, Object) //移除一个页面
getCount() //返回页面的个数
isViewFromObject(View, Object) //判断返回的页面与当前所在页面是否相同

当我们使用了PagerTitleStrip或者PagerTabStrip是还需要重载getPageTitle（int position）;

示例如下：

布局文件：activity_main.xml

<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="com.example.viewpagerdemo.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.ViewPager></RelativeLayout>

tab1.xml：tab2.xml与tab3.xml基本一样，只是其中的id和text不一样；

<?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" >    <TextView        android:id = "@+id/tab1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:gravity="center"        android:text = "text1" /></LinearLayout>

主活动：MainActivity

package com.example.viewpagerdemo;import java.util.ArrayList;import java.util.List;import android.app.Activity;import android.os.Bundle;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.view.Menu;import android.view.MenuItem;import android.view.View;import android.view.ViewGroup;public class MainActivity extends Activity {private ViewPager viewPager;private ArrayList<View> viewList ;private ArrayList<String> titleList;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);                viewPager = (ViewPager)findViewById(R.id.viewpager);        viewList = new ArrayList<View>();        viewList.add(getLayoutInflater().inflate(R.layout.tab1, null));        viewList.add(getLayoutInflater().inflate(R.layout.tab2, null));        viewList.add(getLayoutInflater().inflate(R.layout.tab3, null));        titleList = new ArrayList<String>();        titleList.add("语文");        titleList.add("数学");        titleList.add("英语");        PagerAdapter pagerAdapter = new PagerAdapter()        {@Overridepublic int getCount() {// TODO Auto-generated method stubreturn viewList.size();}@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {// TODO Auto-generated method stubreturn arg0 == arg1;}public void destroyItem(ViewGroup container,int position,Object object){container.removeView(viewList.get(position));}public Object instantiateItem(ViewGroup container,int position){container.addView(viewList.get(position));return viewList.get(position);}        public CharSequence getPageTitle(int position)        {        return titleList.get(position);        }        };        viewPager.setAdapter(pagerAdapter);    }    @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;    }    @Override    public boolean onOptionsItemSelected(MenuItem item) {        // Handle action bar item clicks here. The action bar will        // automatically handle clicks on the Home/Up button, so long        // as you specify a parent activity in AndroidManifest.xml.        int id = item.getItemId();        if (id == R.id.action_settings) {            return true;        }        return super.onOptionsItemSelected(item);    }}

关于getLayoutInflater()

至于其运行结果虽然可以实现页面的滑动，但是与我们常见的应用却有区别，因为其标题栏也会随着页面的滑动而滑动，给人以一种不和谐的感觉，若要实现标题栏不动的效果，需要自己定义光标；
实现标题栏不动的自定义光标的方法：

示例：

main_activity.xml：

<LinearLayout 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:orientation="vertical"    tools:context="com.example.viewpagercursor.MainActivity" >    <ImageView        android:id = "@+id/cursor"        android:layout_width="match_parent"        android:layout_height = "wrap_content"        android:scaleType="matrix"        android:src = "@drawable/ic_launcher" />    <android.support.v4.view.ViewPager        android:id = "@+id/viewpager"        android:layout_width = "wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center" />"</LinearLayout>

其他布局文件与前面的一样；

MainActivity：

package com.example.viewpagercursor;import java.util.ArrayList;import android.app.Activity;import android.graphics.BitmapFactory;import android.graphics.Matrix;import android.os.Bundle;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPageChangeListener;import android.util.DisplayMetrics;import android.view.Menu;import android.view.MenuItem;import android.view.View;import android.view.ViewGroup;import android.view.animation.Animation;import android.view.animation.TranslateAnimation;import android.widget.ImageView;public class MainActivity extends Activity {private ArrayList<View> viewContainer;private ViewPager viewPager;private ImageView cursor;private int bmpw = 0; //保存图片的宽度private int offest = 0;   //偏移private int currIndex = 0;  //页面编号    @SuppressWarnings("deprecation")@Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        viewPager = (ViewPager)findViewById(R.id.viewpager);        cursor = (ImageView)findViewById(R.id.cursor);        viewContainer = new ArrayList<View>();                viewContainer.add(getLayoutInflater().inflate(R.layout.tab1, null));        viewContainer.add(getLayoutInflater().inflate(R.layout.tab2, null));        viewContainer.add(getLayoutInflater().inflate(R.layout.tab3, null));                PagerAdapter pagerAdapter = new PagerAdapter()        {@Overridepublic int getCount() {// TODO Auto-generated method stubreturn viewContainer.size();}@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {// TODO Auto-generated method stubreturn arg0 == arg1;}public void destroyItem(ViewGroup container,int position, Object object){container.removeView(viewContainer.get(position));}public Object instantiateItem(ViewGroup container,int position){container.addView(viewContainer.get(position));return viewContainer.get(position);}                };        initCursor();        viewPager.setAdapter(pagerAdapter);                viewPager.setOnPageChangeListener(new OnPageChangeListener()        {        int one = offest*2 + bmpw;        int two = one *2;@Overridepublic void onPageScrollStateChanged(int arg0) {// TODO Auto-generated method stub}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {// TODO Auto-generated method stub}@Overridepublic void onPageSelected(int arg0) {// TODO Auto-generated method stubAnimation animation = null;switch(arg0){case 0:{if(currIndex == 1)animation = new TranslateAnimation(one,0,0,0);else if(currIndex == 2)animation = new TranslateAnimation(two,0,0,0);break;}case 1:{if(currIndex == 0)animation = new TranslateAnimation(offest,one,0,0);else if(currIndex == 2)animation = new TranslateAnimation(two,one,0,0);break;}case 2:{if(currIndex == 0)animation = new TranslateAnimation(offest,two,0,0);else if(currIndex == 1)animation = new TranslateAnimation(one,two,0,0);break;}}currIndex = arg0;animation.setFillAfter(true);animation.setDuration(300);cursor.startAnimation(animation);}                });    }    public void initCursor()    {        bmpw = BitmapFactory.decodeResource(getResources(),R.drawable.ic_launcher).getWidth();    DisplayMetrics dm = new DisplayMetrics();    getWindowManager().getDefaultDisplay().getMetrics(dm);    int screenW = dm.widthPixels;    offest = (screenW/viewContainer.size()-bmpw)/2;    Matrix matrix = new Matrix();    matrix.postTranslate(offest, 0);  //水平平移offest    cursor.setImageMatrix(matrix);    //设置初始位置    }    @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;    }    @Override    public boolean onOptionsItemSelected(MenuItem item) {        // Handle action bar item clicks here. The action bar will        // automatically handle clicks on the Home/Up button, so long        // as you specify a parent activity in AndroidManifest.xml.        int id = item.getItemId();        if (id == R.id.action_settings) {            return true;        }        return super.onOptionsItemSelected(item);    }}

关于Matrix ；

关于Animation ；

上面的代码实现了游标的滚动，把一张图片作为游标，其实还可以像其他APP一样实现上面是标题栏，然后是游标，再下面是内容，实现方法差不多，可以参考ViewPager实现多页面滚动以及动画

——每天都要有进步

0 0