首页 网页制作网络编程脚本专栏数据库网站运营网络安全平面设计CMS教程

实例讲解Android中ViewPager组件的一些进阶使用技巧

所属分类： 软件编程 / Android 阅读数： 1186
收藏 0 赞 0 分享

我们经常看到使用了ViewPager的App，在每页上面都会有一个滑块来标志当前处于哪一页。在PagerView包里有android.support.v4.view.PagerTitleStrip和android.support.v4.view.PagerTabStrip两个组件，可以在布局文件中，作为ViewPager的子标签，并设定相对与ViewPager的位置(比如顶部)。但这两个组件都很丑，并且标题会随着页面一起滑动，所以一般都不用。

其实实现一个滑块标志当前页面也很简单，大概需要两步：

第一步 在布局文件ViewPager的上方放置一个ImageView组件，组件可以是图片或是shape资源。注意需要把ImageView的scaleType属性设为matrix，就是说该组件的位置和大小由一个变换矩阵来控制；

第二步 在Activity中为ViewPager组件添加OnPageChangeListener监听器。在OnPageChangeListener里设定matrix，用于控制指示滑块ImageView的位置。该监听器需要实现三个方法：

onPageScrollStateChanged：用于监听滑动状态的改变

onPageScrolled：用于监听滑动的动作

onPageSeleted:用于监听页面的切换，即某个页面被选中了作为当前页面。

一般实现onPageSelected方法就可以，其他两个方法可以空着。另外为了使页面切换时滑块也是平滑地滑动，可以给滑块的ImageView指定一个TranslateAnimation动画，指定动画用setAnimation，TranlateAnimation也很简单，有个构造函数是TranslateAnimation(int beginX,int endX,int beginY,int endY)，将运动矢量的起始位置和终止位置传给它就好了。

下面我们来看五个具体的例子：


一 实现ViewPager（数据源为List<View>）

1.先在main.xml文件中添加一个ViewPager:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  android:layout_width="match_parent" 
  android:layout_height="match_parent" > 
 
  <android.support.v4.view.ViewPager 
    android:id="@+id/pager" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content"> 
  </android.support.v4.view.ViewPager> 
 
</LinearLayout>

2.创建三个View:

<?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/txt1" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_gravity="center" 
    android:textSize="25dp" 
    android:text="第一页" > 
  </TextView> 
 
</LinearLayout> 


<?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/txt2" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="第二页" > 
  </TextView> 
   
</LinearLayout> 


<?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/txt3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="第三页" >
  </TextView>
  
</LinearLayout>

3.创建一个ViewPager适配器类：

package com.yayun.viewpagerdemo; 
 
import java.util.ArrayList; 
import java.util.List; 
 
import android.support.v4.view.PagerAdapter; 
import android.view.View; 
import android.view.ViewGroup; 
 
public class ViewPagerAdapter extends PagerAdapter { 
  private List<View> lViews=new ArrayList<View>(); 
   
  public ViewPagerAdapter(List<View> lViews){ 
    this.lViews=lViews; 
  } 
 
  @Override 
  public int getCount() { 
    return lViews.size(); 
  } 
 
  @Override 
  public boolean isViewFromObject(View arg0, Object arg1) { 
    return arg0==arg1; 
  } 
  @Override 
  public Object instantiateItem(ViewGroup container, int position) { 
    container.addView(lViews.get(position)); 
    return lViews.get(position); 
  } 
  @Override 
  public void destroyItem(ViewGroup container, int position, Object object) { 
    container.removeView(lViews.get(position)); 
  } 
 
}

4.MainActivity.java:

package com.yayun.viewpagerdemo; 
 
import java.util.ArrayList; 
import java.util.List; 
 
import android.support.v7.app.ActionBarActivity; 
import android.support.v7.app.ActionBar; 
import android.support.v4.app.Fragment; 
import android.support.v4.view.PagerAdapter; 
import android.support.v4.view.ViewPager; 
import android.os.Bundle; 
import android.view.LayoutInflater; 
import android.view.Menu; 
import android.view.MenuItem; 
import android.view.View; 
import android.view.ViewGroup; 
import android.view.Window; 
import android.os.Build; 
 
public class MainActivity extends ActionBarActivity { 
  private ViewPager viewPager; 
  private List<View> listViews=null; 
  ViewPagerAdapter pagerAdapter; 
 
  @Override 
  protected void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    requestWindowFeature(Window.FEATURE_NO_TITLE); 
    setContentView(R.layout.activity_main); 
     
    viewPager=(ViewPager) findViewById(R.id.pager); 
    listViews=new ArrayList<View>(); 
    /** 
     * 为Adapter创建数据源 
     */ 
    View view1=View.inflate(this, R.layout.view1, null); 
    View view2=View.inflate(this, R.layout.view2, null); 
    View view3=View.inflate(this, R.layout.view3, null); 
    listViews.add(view1); 
    listViews.add(view2); 
    listViews.add(view3); 
    pagerAdapter=new ViewPagerAdapter(listViews) ; 
    viewPager.setAdapter(pagerAdapter); 
 
  } 
 
}

5.运行实例：

2016323152038108.jpg (707×476)
可以实现翻页效果。

二 添加标题
1.我们需要更改main.xml文件：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  android:layout_width="match_parent" 
  android:layout_height="match_parent" > 
 
  <android.support.v4.view.ViewPager 
    android:id="@+id/pager" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_gravity="center" > 
 
    <android.support.v4.view.PagerTabStrip 
      android:id="@+id/strip" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_gravity="top" > 
    </android.support.v4.view.PagerTabStrip> 
  </android.support.v4.view.ViewPager> 
 
</LinearLayout>

2.需要更改适配器文件：

package com.yayun.viewpagerdemo; 
 
import java.util.ArrayList; 
import java.util.List; 
 
import android.support.v4.view.PagerAdapter; 
import android.view.View; 
import android.view.ViewGroup; 
 
public class ViewPagerAdapter extends PagerAdapter { 
  private List<View> lViews=new ArrayList<View>(); 
  private List<String> titleList=new ArrayList<String>(); 
   
  public ViewPagerAdapter(List<View> lViews,List<String> titleList){ 
    this.lViews=lViews; 
    this.titleList=titleList; 
  } 
 
  @Override 
  public int getCount() { 
    return lViews.size(); 
  } 
 
  @Override 
  public boolean isViewFromObject(View arg0, Object arg1) { 
    return arg0==arg1; 
  } 
  @Override 
  public Object instantiateItem(ViewGroup container, int position) { 
    container.addView(lViews.get(position)); 
    return lViews.get(position); 
  } 
  @Override 
  public void destroyItem(ViewGroup container, int position, Object object) { 
    container.removeView(lViews.get(position)); 
  } 
  /** 
   * 标题 
   */ 
  @Override 
  public CharSequence getPageTitle(int position) { 
    // TODO Auto-generated method stub 
    return titleList.get(position); 
  } 
 
}

3.需要更改MainActivity.java文件：

package com.yayun.viewpagerdemo; 
 
import java.util.ArrayList; 
import java.util.List; 
 
import android.support.v7.app.ActionBarActivity; 
import android.support.v7.app.ActionBar; 
import android.support.v4.app.Fragment; 
import android.support.v4.view.PagerAdapter; 
import android.support.v4.view.PagerTabStrip; 
import android.support.v4.view.ViewPager; 
import android.os.Bundle; 
import android.view.LayoutInflater; 
import android.view.Menu; 
import android.view.MenuItem; 
import android.view.View; 
import android.view.ViewGroup; 
import android.view.Window; 
import android.os.Build; 
 
public class MainActivity extends ActionBarActivity { 
  private ViewPager viewPager; 
  private List<View> listViews=null; 
  ViewPagerAdapter pagerAdapter; 
  PagerTabStrip pagerTabStrip; 
  private List<String> titleList; 
 
  @Override 
  protected void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    requestWindowFeature(Window.FEATURE_NO_TITLE); 
    setContentView(R.layout.activity_main); 
     
    viewPager=(ViewPager) findViewById(R.id.pager); 
    pagerTabStrip=(PagerTabStrip) findViewById(R.id.strip); 
    listViews=new ArrayList<View>(); 
    titleList=new ArrayList<String>(); 
    titleList.add("第一页"); 
    titleList.add("第二页"); 
    titleList.add("第三页"); 
    /** 
     * 为Adapter创建数据源 
     */ 
    View view1=View.inflate(this, R.layout.view1, null); 
    View view2=View.inflate(this, R.layout.view2, null); 
    View view3=View.inflate(this, R.layout.view3, null); 
    listViews.add(view1); 
    listViews.add(view2); 
    listViews.add(view3); 
    pagerAdapter=new ViewPagerAdapter(listViews,titleList) ; 
    viewPager.setAdapter(pagerAdapter); 
 
  } 
 
}

4.运行实例如下：

2016323152232160.jpg (706×473)

三 实现ViewPager(数据源为List<Fragment>)
1.首先我们要创建三个Fragment:

package com.yayun.viewpagerdemo; 
 
import android.os.Bundle; 
import android.support.v4.app.Fragment; 
import android.view.LayoutInflater; 
import android.view.View; 
import android.view.ViewGroup; 
 
public class Fragment1 extends Fragment { 
  @Override 
  public View onCreateView(LayoutInflater inflater, ViewGroup container, 
      Bundle savedInstanceState) { 
    return inflater.inflate(R.layout.view1, container, false); 
  } 
 
} 

package com.yayun.viewpagerdemo; 
 
import android.os.Bundle; 
import android.support.v4.app.Fragment; 
import android.view.LayoutInflater; 
import android.view.View; 
import android.view.ViewGroup; 
 
public class Fragment2 extends Fragment { 
  @Override 
  public View onCreateView(LayoutInflater inflater, ViewGroup container, 
      Bundle savedInstanceState) { 
    return inflater.inflate(R.layout.view2, container, false); 
  } 
 
} 

package com.yayun.viewpagerdemo; 
 
import android.os.Bundle; 
import android.support.v4.app.Fragment; 
import android.view.LayoutInflater; 
import android.view.View; 
import android.view.ViewGroup; 
 
public class Fragment3 extends Fragment { 
  @Override 
  public View onCreateView(LayoutInflater inflater, ViewGroup container, 
      Bundle savedInstanceState) { 
    return inflater.inflate(R.layout.view3, container, false); 
  } 
 
}

2.设置Adapter:

package com.yayun.viewpagerdemo; 
 
import java.util.List; 
 
import android.support.v4.app.Fragment; 
import android.support.v4.app.FragmentManager; 
import android.support.v4.app.FragmentPagerAdapter; 
 
public class MyFragmentPagerAdapter extends FragmentPagerAdapter { 
  List<Fragment> fragmentsList; 
  List<String> titleList; 
 
  public MyFragmentPagerAdapter(FragmentManager fm,List<Fragment> fragmentsList,List<String> titleList) { 
    super(fm); 
    this.fragmentsList=fragmentsList; 
    this.titleList=titleList; 
  } 
 
  @Override 
  public Fragment getItem(int arg0) { 
    // TODO Auto-generated method stub 
    return fragmentsList.get(arg0); 
  } 
 
  @Override 
  public int getCount() { 
    // TODO Auto-generated method stub 
    return fragmentsList.size(); 
  } 
@Override 
/** 
 * 添加标题 
 */ 
public CharSequence getPageTitle(int position) { 
  // TODO Auto-generated method stub 
  return titleList.get(position); 
} 
 
}

3.MainActivity.java:

package com.yayun.viewpagerdemo; 
 
import java.util.ArrayList; 
import java.util.List; 
 
import android.graphics.Color; 
import android.os.Bundle; 
import android.support.v4.app.Fragment; 
import android.support.v4.view.PagerTabStrip; 
import android.support.v4.view.ViewPager; 
import android.support.v4.view.ViewPager.PageTransformer; 
import android.support.v7.app.ActionBarActivity; 
import android.view.View; 
import android.view.Window; 
 
public class MainActivity extends ActionBarActivity { 
  private ViewPager viewPager; 
  private List<View> listViews=null; 
  ViewPagerAdapter pagerAdapter; 
  PagerTabStrip pagerTabStrip; 
  private List<String> titleList; 
  private List<Fragment> fragmentsList; 
  MyFragmentPagerAdapter myFragmentPagerAdapter; 
 
  @Override 
  protected void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    requestWindowFeature(Window.FEATURE_NO_TITLE); 
    setContentView(R.layout.activity_main); 
     
    viewPager=(ViewPager) findViewById(R.id.pager); 
    pagerTabStrip=(PagerTabStrip) findViewById(R.id.strip); 
     
    /** 
     * 设置PagerTabStrip属性 
     */ 
    pagerTabStrip.setBackgroundColor(Color.GREEN); 
    pagerTabStrip.setDrawFullUnderline(false); 
    pagerTabStrip.setTextColor(Color.WHITE); 
    listViews=new ArrayList<View>(); 
    titleList=new ArrayList<String>(); 
    fragmentsList=new ArrayList<Fragment>(); 
    fragmentsList.add(new Fragment1()); 
    fragmentsList.add(new Fragment2()); 
    fragmentsList.add(new Fragment3()); 
    titleList.add("第一页"); 
    titleList.add("第二页"); 
    titleList.add("第三页"); 
    /** 
     * 为Adapter创建数据源 
     */ 
    View view1=View.inflate(this, R.layout.view1, null); 
    View view2=View.inflate(this, R.layout.view2, null); 
    View view3=View.inflate(this, R.layout.view3, null); 
    listViews.add(view1); 
    listViews.add(view2); 
    listViews.add(view3); 
    pagerAdapter=new ViewPagerAdapter(listViews,titleList) ; 
    myFragmentPagerAdapter=new MyFragmentPagerAdapter(getSupportFragmentManager(), fragmentsList, titleList); 
    //viewPager.setAdapter(pagerAdapter); 
    viewPager.setAdapter(myFragmentPagerAdapter); 
 
  } 
 
}


4.运行实例：

2016323152451926.jpg (708×471)

这种方法不会销毁不在当前页面的页面，不能实现页卡的创建和销毁。

四 实现ViewPager(数据源为List<Fragment>实现FargmentStatePagerAdapter)常用
改变Adapter:

package com.yayun.viewpagerdemo; 
 
import java.util.List; 
 
import android.support.v4.app.Fragment; 
import android.support.v4.app.FragmentManager; 
import android.support.v4.app.FragmentPagerAdapter; 
import android.support.v4.app.FragmentStatePagerAdapter; 
import android.view.View; 
 
public class MyFragmentPagerAdapter2 extends FragmentStatePagerAdapter { 
  List<Fragment> fragmentsList; 
  List<String> titleList; 
 
  public MyFragmentPagerAdapter2(FragmentManager fm,List<Fragment> fragmentsList,List<String> titleList) { 
    super(fm); 
    this.fragmentsList=fragmentsList; 
    this.titleList=titleList; 
  } 
 
  @Override 
  public Fragment getItem(int arg0) { 
    // TODO Auto-generated method stub 
    return fragmentsList.get(arg0); 
  } 
 
  @Override 
  public int getCount() { 
    // TODO Auto-generated method stub 
    return fragmentsList.size(); 
  } 
@Override 
/** 
 * 添加标题 
 */ 
public CharSequence getPageTitle(int position) { 
  // TODO Auto-generated method stub 
  return titleList.get(position); 
} 
@Override 
public Object instantiateItem(View container, int position) { 
  // TODO Auto-generated method stub 
  return super.instantiateItem(container, position); 
} 
@Override 
public void destroyItem(View container, int position, Object object) { 
  // TODO Auto-generated method stub 
  super.destroyItem(container, position, object); 
} 
 
}

将MainActivity.java中的Adapter换一下即可，它可以实现页卡的创建和销毁。

五  onPagerChangeListener 监听使用
只需要修改MainActivity.java:

package com.yayun.viewpagerdemo; 
 
import java.util.ArrayList; 
import java.util.List; 
 
import android.graphics.Color; 
import android.os.Bundle; 
import android.support.v4.app.Fragment; 
import android.support.v4.view.PagerTabStrip; 
import android.support.v4.view.ViewPager; 
import android.support.v4.view.ViewPager.OnPageChangeListener; 
import android.support.v4.view.ViewPager.PageTransformer; 
import android.support.v7.app.ActionBarActivity; 
import android.view.View; 
import android.view.Window; 
import android.widget.Toast; 
 
public class MainActivity extends ActionBarActivity implements OnPageChangeListener { 
  private ViewPager viewPager; 
  private List<View> listViews=null; 
  ViewPagerAdapter pagerAdapter; 
  PagerTabStrip pagerTabStrip; 
  private List<String> titleList; 
  private List<Fragment> fragmentsList; 
  MyFragmentPagerAdapter myFragmentPagerAdapter; 
 
  @Override 
  protected void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    requestWindowFeature(Window.FEATURE_NO_TITLE); 
    setContentView(R.layout.activity_main); 
     
    viewPager=(ViewPager) findViewById(R.id.pager); 
    pagerTabStrip=(PagerTabStrip) findViewById(R.id.strip); 
     
    /** 
     * 设置PagerTabStrip属性 
     */ 
    pagerTabStrip.setBackgroundColor(Color.GREEN); 
    pagerTabStrip.setDrawFullUnderline(false); 
    pagerTabStrip.setTextColor(Color.WHITE); 
    listViews=new ArrayList<View>(); 
    titleList=new ArrayList<String>(); 
    fragmentsList=new ArrayList<Fragment>(); 
    fragmentsList.add(new Fragment1()); 
    fragmentsList.add(new Fragment2()); 
    fragmentsList.add(new Fragment3()); 
    titleList.add("第一页"); 
    titleList.add("第二页"); 
    titleList.add("第三页"); 
    /** 
     * 为Adapter创建数据源 
     */ 
    View view1=View.inflate(this, R.layout.view1, null); 
    View view2=View.inflate(this, R.layout.view2, null); 
    View view3=View.inflate(this, R.layout.view3, null); 
    listViews.add(view1); 
    listViews.add(view2); 
    listViews.add(view3); 
    pagerAdapter=new ViewPagerAdapter(listViews,titleList) ; 
    myFragmentPagerAdapter=new MyFragmentPagerAdapter(getSupportFragmentManager(), fragmentsList, titleList); 
    //viewPager.setAdapter(pagerAdapter); 
    viewPager.setAdapter(myFragmentPagerAdapter); 
    viewPager.setOnPageChangeListener(this);//加载监听器 
 
  } 
 
  @Override 
  public void onPageScrollStateChanged(int arg0) { 
    // TODO Auto-generated method stub 
     
  } 
 
  @Override 
  public void onPageScrolled(int arg0, float arg1, int arg2) { 
    // TODO Auto-generated method stub 
     
  } 
 
  @Override 
  public void onPageSelected(int arg0) { 
    Toast.makeText(this, "当前页面为"+(arg0+1), Toast.LENGTH_SHORT).show(); 
     
  } 
 
}

运行实例即可以显示当前页面标签。

更多精彩内容其他人还在看

Android控件系列之CheckBox使用介绍

CheckBox和Button一样，也是一种古老的控件，它的优点在于，不用用户去填写具体的信息，只需轻轻点击，缺点在于只有“是”和“否”两种情况，但我们往往利用它的这个特性，来获取用户的一些信息
收藏 0 赞 0 分享

Android控件系列之EditText使用方法

EditText是接受用户输入信息的最重要控件。通过前面课程的学习，您可能会猜到可以利用EditText.getText()获取它的文本，但真正的项目中，可能没那么简单，需要更多的限制，如文本长度限制，是否数字限制等等
收藏 0 赞 0 分享

Android控件系列之TextView使用介绍

TextView类似一般UI中的Label,TextBlock等控件，只是为了单纯的显示一行或多行文本,本文介绍了Android中文本控件TextView的用法和常用属性的用法
收藏 0 赞 0 分享

asynctask的用法详解

Android UI操作并不是线程安全的并且这些操作必须在UI线程中执行,本文将为您介绍asynctask的用法
收藏 0 赞 0 分享

Android开发 旋转屏幕导致Activity重建解决方法

Android开发文档上专门有一小节解释这个问题。简单来说，Activity是负责与用户交互的最主要机制,接下来为您详细介绍
收藏 0 赞 0 分享

Notification与NotificationManager详细介绍

在Android系统中，发一个状态栏通知还是很方便的。下面我们就来看一下，怎么发送状态栏通知，状态栏通知又有哪些参数可以设置
收藏 0 赞 0 分享

android LinearLayout和RelativeLayout组合实现精确布局方法介绍

用android LinearLayout和RelativeLayout实现精确布局此方法适合很适合新人看
收藏 0 赞 0 分享

android listview优化几种写法详细介绍

这篇文章只是总结下getView里面优化视图的几种写法，需要的朋友可以参考下
收藏 0 赞 0 分享

Android应用开发SharedPreferences存储数据的使用方法

SharedPreferences是Android中最容易理解的数据存储技术，实际上SharedPreferences处理的就是一个key-value（键值对）SharedPreferences常用来存储一些轻量级的数据
收藏 0 赞 0 分享

Android之PreferenceActivity应用详解

为了引入这个概率 首先从需求说起 即：现有某Activity专门用于手机属性设置 那么应该如何做呢
收藏 0 赞 0 分享
查看更多

网络赚钱

更多

站长故事

更多
建站极客
合作伙伴
在线工具
建站极客移动版
聚合全网技术文章，根据你的阅读喜好进行个性推荐
© 2012 - 2020 zhanzhang360.cn Some Rights Reserved.
沪ICP备13040166号-22