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

我们经常看到使用了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.运行实例：


可以实现翻页效果。

二 添加标题
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.运行实例如下：

三 实现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.运行实例：

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

四 实现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
viewpager
viewpager嵌套实例、viewpager实例、vuejs组件开发实例、vue.js 组件实例、js封装组件实例，以便于您获取更多的相关知识。

时间： 2024-12-23 10:19:57

实例讲解Android中ViewPager组件的一些进阶使用技巧_Android的相关文章

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

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

实例讲解Android中ContentProvider组件的使用方法_Android

ContentProvider基本使用为了在应用程序之间交换数据,android提供了ContentProvider,ContentProvider是不同应用程序之间进行数据交换的标准API,当一个应用程序需要把自己的数据暴露给其他程序使用时,该应用程序就可以通过提供ContentPRovider来实现,其他应用程序就可以通过ContentResolver来操作ContentProvider暴露的数据. 实现ContentProvider的步骤: 1)编写一个类,继承ContentProvide

Android中ViewPager组件的基本用法及实现图片切换的示例

ViewPager是android-support-v4.jar包里的组件.在布局文件里标签需要连包名一起 写全称<android.support.v4.view.ViewPager /> 基本用法 ViewPager的基本用法我概括为三步 第一步 在主布局文件里放一个ViewPager组件 第二步 为每个页面建立布局文件,把界面写好 第三步 在主Activity里获取ViewPager组件,并为它设定Adapter. Adapter详细讲讲,ViewPager对应的Adapter继承自Pag

实例讲解Android中的AIDL内部进程通信接口使用_Android

首先描述下我们想要实现的内容,我们希望在一个应用中通过点击按钮,去操作另一个进程中应用的音乐播放功能. 如图,我们点击"播放"时,系统就会去远程调用我们提供的一个service(与当前service不是同一个应用哦),然后操作service中的音乐播放,点击"停止"则会终止播放.想要重新播放的话,必须先点"销毁service",再点播放按钮哦.(至于这里为什么要先点销毁按钮才能播放,完全是为了给大家展示下,远程调用service时,怎么去解绑se

举例讲解Android中ViewPager中的PagerTitleStrip子控件_Android

先看个简单的,先上个效果图,吸引大家一下眼球. 三个页面间的滑动,此时是带着上面的标题一块滑动的. 看一下android 对于PagerTitleStrip的官方解释: PagerTitleStrip是ViewPager的一个关于当前页面.上一个页面和下一个页面的一个非交互的指示器.它经常作为ViewPager控件的一个子控件被被添加在XML布局文件中.在你的布局文件中,将它作为子控件添加在ViewPager中.而且要将它的 android:layout_gravity 属性设置为TOP或BOT

实例讲解Android中的AutoCompleteTextView自动补全组件_Android

AutoCompleteTextView是一个具有自动补全功能的EditView,当用户输入数据后,AutoCompleteTextView就会将用户输入的数据与他自己的adapter中的数据对比,如果用户数据与adapter中的某条数据的开始部分完全匹配,那么adapter中的这条数据就会出现在下拉提示框中. 其常用属性定义如下 <AutoCompleteTextView android:id="@+id/mp002_top_place_input" android:layou

实例讲解Android中的AutoCompleteTextView自动补全组件

AutoCompleteTextView是一个具有自动补全功能的EditView,当用户输入数据后,AutoCompleteTextView就会将用户输入的数据与他自己的adapter中的数据对比,如果用户数据与adapter中的某条数据的开始部分完全匹配,那么adapter中的这条数据就会出现在下拉提示框中. 其常用属性定义如下 <AutoCompleteTextView android:id="@+id/mp002_top_place_input" android:layou

实例讲解Android中的View类以及自定义View控件的方法_Android

View的简单理解和实例 1.View的基本概念在Activity显示的控件 都叫做View(View类 是所有的控件类的父类  比如 文本 按钮) 2.在Activity当中获取代表View的对象Activity读取布局文件生成相对应的 各种View对象 TextView textView=(TextView)findViewBy(R.id.textView) 3.设置view的属性Activity_mian.xml 这样的xml布局文件中发现了,类似@+id/和@id/到底有什么区别呢? 这

实例讲解Android中的View类以及自定义View控件的方法

View的简单理解和实例 1.View的基本概念 在Activity显示的控件 都叫做View(View类 是所有的控件类的父类  比如 文本 按钮) 2.在Activity当中获取代表View的对象 Activity读取布局文件生成相对应的 各种View对象 TextView textView=(TextView)findViewBy(R.id.textView) 3.设置view的属性 Activity_mian.xml 这样的xml布局文件中发现了,类似@+id/和@id/到底有什么区别呢