Android中ViewPager实现滑动条及与Fragment结合的实例教程

自主实现滑动指示条
先上一个基本效果图:

1.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.testviewpage_2.MainActivity" > 

  <ImageView
  android:id="@+id/cursor"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:scaleType="matrix"
  android:src="@drawable/a" /> 

 <android.support.v4.view.ViewPager
  android:id="@+id/viewpager"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_gravity="center"/> 

</LinearLayout>

采用线性垂直布局,在滑动页面的上方添加一个小水平条。

2.JAVA代码

public class MainActivity extends Activity { 

 private View view1, view2, view3;
 private List<View> viewList;// view数组
 private ViewPager viewPager; // 对应的viewPager 

 private ImageView cursor;
 private int bmpw = 0; // 游标宽度
 private int offset = 0;// // 动画图片偏移量
 private int currIndex = 0;// 当前页卡编号 

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main); 

  viewPager = (ViewPager) findViewById(R.id.viewpager);
  LayoutInflater inflater = getLayoutInflater();
  view1 = inflater.inflate(R.layout.layout1, null);
  view2 = inflater.inflate(R.layout.layout2, null);
  view3 = inflater.inflate(R.layout.layout3, null); 

  viewList = new ArrayList<View>();// 将要分页显示的View装入数组中
  viewList.add(view1);
  viewList.add(view2);
  viewList.add(view3); 

  //初始化指示器位置
  initCursorPos(); 

  viewPager.setAdapter(new MyPagerAdapter(viewList));
  viewPager.setOnPageChangeListener(new MyPageChangeListener()); 

 } 

 //初始化指示器位置
 public void initCursorPos() {
  // 初始化动画
  cursor = (ImageView) findViewById(R.id.cursor);
  bmpw = BitmapFactory.decodeResource(getResources(), R.drawable.a)
    .getWidth();// 获取图片宽度 

  DisplayMetrics dm = new DisplayMetrics();
  getWindowManager().getDefaultDisplay().getMetrics(dm);
  int screenW = dm.widthPixels;// 获取分辨率宽度
  offset = (screenW / viewList.size() - bmpw) / 2;// 计算偏移量 

  Matrix matrix = new Matrix();
  matrix.postTranslate(offset, 0);
  cursor.setImageMatrix(matrix);// 设置动画初始位置
 } 

 //页面改变监听器
 public class MyPageChangeListener implements OnPageChangeListener { 

  int one = offset * 2 + bmpw;// 页卡1 -> 页卡2 偏移量
  int two = one * 2;// 页卡1 -> 页卡3 偏移量 

  @Override
  public void onPageSelected(int arg0) {
   Animation 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(offset, one, 0, 0);
    } else if (currIndex == 2) {
     animation = new TranslateAnimation(two, one, 0, 0);
    }
    break;
   case 2:
    if (currIndex == 0) {
     animation = new TranslateAnimation(offset, two, 0, 0);
    } else if (currIndex == 1) {
     animation = new TranslateAnimation(one, two, 0, 0);
    }
    break;
   }
   currIndex = arg0;
   animation.setFillAfter(true);// True:图片停在动画结束位置
   animation.setDuration(300);
   cursor.startAnimation(animation);
  } 

  @Override
  public void onPageScrolled(int arg0, float arg1, int arg2) {
  } 

  @Override
  public void onPageScrollStateChanged(int arg0) {
  }
 } 

 /**
  * ViewPager适配器
  */
 public class MyPagerAdapter extends PagerAdapter {
  public List<View> mListViews; 

  public MyPagerAdapter(List<View> mListViews) {
   this.mListViews = mListViews;
  } 

  @Override
  public boolean isViewFromObject(View arg0, Object arg1) {
   // TODO Auto-generated method stub
   return arg0 == arg1;
  } 

  @Override
  public int getCount() {
   // TODO Auto-generated method stub
   return mListViews.size();
  } 

  @Override
  public void destroyItem(ViewGroup container, int position, Object object) {
   // TODO Auto-generated method stub
   container.removeView(mListViews.get(position));
  } 

  @Override
  public Object instantiateItem(ViewGroup container, int position) {
   // TODO Auto-generated method stub
   container.addView(mListViews.get(position)); 

   return mListViews.get(position);
  }
 } 

}

3.重点解析
从易到难一步步来讲。
(1)initCursorPos()---初始化指示器位置
游标在初始化显示时,我们要根据屏幕宽度来显示游标位置。先看看这部分代码:

//初始化指示器位置
public void initCursorPos() {
 // 初始化动画
 cursor = (ImageView) findViewById(R.id.cursor);
 bmpw = BitmapFactory.decodeResource(getResources(), R.drawable.a)
   .getWidth();// 获取图片宽度 

 DisplayMetrics dm = new DisplayMetrics();
 getWindowManager().getDefaultDisplay().getMetrics(dm);
 int screenW = dm.widthPixels;// 获取分辨率宽度
 offset = (screenW / viewList.size() - bmpw) / 2;// 计算偏移量 

 Matrix matrix = new Matrix();
 matrix.postTranslate(offset, 0);
 cursor.setImageMatrix(matrix);// 设置动画初始位置
}

可能有些同学不明白的位置在于,初始化位置的偏移量为什么这么算,下面,我画了张图,看下就应该明白了。

最后对于偏移的方法,可用的很多,这里仿网上的代码用了matrix;当然大家可以用其它的偏移方法,一样。
(2)MyPageChangeListener()---页面改变监听器
代码如下 :

public class MyPageChangeListener implements OnPageChangeListener { 

 int one = offset * 2 + bmpw;// 页卡1 -> 页卡2 偏移量
 int two = one * 2;// 页卡1 -> 页卡3 偏移量 

 @Override
 public void onPageSelected(int arg0) {
  Animation 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(offset, one, 0, 0);
   } else if (currIndex == 2) {
    animation = new TranslateAnimation(two, one, 0, 0);
   }
   break;
  case 2:
   if (currIndex == 0) {
    animation = new TranslateAnimation(offset, two, 0, 0);
   } else if (currIndex == 1) {
    animation = new TranslateAnimation(one, two, 0, 0);
   }
   break;
  }
  currIndex = arg0;
  animation.setFillAfter(true);// True:图片停在动画结束位置
  animation.setDuration(300);
  cursor.startAnimation(animation);
 }

原理是这样,根据滑动到的页面,把游标滑动找指定位置。
这里可能有难度的地方在于,数学……
我画了一张图,解释从第一个页面到第二个页面时的距离为什么是“游标宽度+offset*2”,其它距离类似。

使用Fragment实现ViewPager滑动
效果图:

在第一个页面加一个Btn

第一页面向第二页面滑动

第二页面向第三个页面滑动
一些说明:
FragmentPagerAdapter派生自PagerAdapter,它是用来呈现Fragment页面的,这些Fragment页面会一直保存在fragment manager中,以便用户可以随时取用。
这个适配器最好用于有限个静态fragment页面的管理。尽管不可见的视图有时会被销毁,但用户所有访问过的fragment都会被保存在内存中。因此fragment实例会保存大量的各种状态,这就造成了很大的内存开销。所以如果要处理大量的页面切换,建议使用FragmentStatePagerAdapter.
每一个使用FragmentPagerAdapter的ViewPager都要有一个有效的ID集合,有效ID的集合就是Fragment的集合(感谢夫诸同学的提示)
对于FragmentPagerAdapter的派生类,只需要重写getItem(int)和getCount()就可以了。
具体实现:
1、适配器实现——FragmentPagerAdapter
先看完整代码,再细讲:

public class FragAdapter extends FragmentPagerAdapter { 

 private List<Fragment> mFragments; 

 public FragAdapter(FragmentManager fm,List<Fragment> fragments) {
  super(fm);
  // TODO Auto-generated constructor stub
  mFragments=fragments;
 } 

 @Override
 public Fragment getItem(int arg0) {
  // TODO Auto-generated method stub
  return mFragments.get(arg0);
 } 

 @Override
 public int getCount() {
  // TODO Auto-generated method stub
  return mFragments.size();
 } 

}

这里有三个函数,根据第一部分的官方文档,可知,对于FragmentPagerAdapter的派生类,只重写getItem(int)和getCount()就可以了。
对于构造函数,这里申请了一个Fragment的List对象,用于保存用于滑动的Fragment对象,并在创造函数中初始化:

public FragAdapter(FragmentManager fm,List<Fragment> fragments) {
 super(fm);
 // TODO Auto-generated constructor stub
 mFragments=fragments;
}

然后在getItem(int arg0)中,根据传来的参数arg0,来返回当前要显示的fragment。

最后,getCount()返回用于滑动的fragment总数;

从构造函数所以看出,我们要构造Fragment的集合才行,所以下面我们就先产生我们所需要的Fragment类;
2、三个Fragment类
第一个Fragment类:

XML:(layout1.xml)

<?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:background="#ffffff"
 android:orientation="vertical" > 

 <Button android:id="@+id/fragment1_btn"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="show toast"
  />
</LinearLayout>

在其中加入了一个Btn

public class Fragment1 extends Fragment { 

 @Override
 public View onCreateView(LayoutInflater inflater, ViewGroup container,
   Bundle savedInstanceState) {
  // TODO Auto-generated method stub
  View view= inflater.inflate(R.layout.layout1, container, false); 

  //对View中控件的操作方法
  Button btn = (Button)view.findViewById(R.id.fragment1_btn);
  btn.setOnClickListener(new View.OnClickListener() { 

   @Override
   public void onClick(View v) {
    // TODO Auto-generated method stub
    Toast.makeText(getActivity(), "点击了第一个fragment的BTN", Toast.LENGTH_SHORT).show();
   }
  });
  return view;
 }
}

在onCreateView()中返回要显示的View,上面这段代码简单演示了如何对视图里的控件进行操作,难度不大,不再细讲,如果对Fragment不太熟悉的同学,先看看这篇文章:《Android Fragment完全解析,关于碎片你所需知道的一切》

第二个Fragment类:

XML代码:(layout2.xml)原生代码,没有做任何更改

<?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:background="#ffff00"
 android:orientation="vertical" > 

</LinearLayout>
public class Fragment2 extends Fragment { 

 @Override
 public View onCreateView(LayoutInflater inflater, ViewGroup container,
   Bundle savedInstanceState) {
  // TODO Auto-generated method stub
  View view=inflater.inflate(R.layout.layout2, container, false);
  return view;
 } 

}

第三个Fragment类:
XML代码:(layout3.xml)同样,原生代码,没做任何更改

<?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:background="#ff00ff"
 android:orientation="vertical" > 

</LinearLayout>

java代码:

public class Fragment3 extends Fragment { 

 @Override
 public View onCreateView(LayoutInflater inflater, ViewGroup container,
   Bundle savedInstanceState) {
  // TODO Auto-generated method stub
  View view=inflater.inflate(R.layout.layout3, container, false);
  return view;
 } 

}

3、主activity实现
核心代码:

public class MainActivity extends FragmentActivity { 

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main); 

  //构造适配器
  List<Fragment> fragments=new ArrayList<Fragment>();
  fragments.add(new Fragment1());
  fragments.add(new Fragment2());
  fragments.add(new Fragment3());
  FragAdapter adapter = new FragAdapter(getSupportFragmentManager(), fragments); 

  //设定适配器
  ViewPager vp = (ViewPager)findViewById(R.id.viewpager);
  vp.setAdapter(adapter);
 } 

}

首先有一个最值得注意的地方:Activity派生自FragmentActivity,其实这是有关Fragment的基础知识,只有FragmentActivity才能内嵌fragment页面,普通Activity是不行的。

这段代码主要分为两步,第一步:构造适配器;第二步:设定适配器。
先看构造适配器的过程:

//构造适配器
List<Fragment> fragments=new ArrayList<Fragment>();
fragments.add(new Fragment1());
fragments.add(new Fragment2());
fragments.add(new Fragment3());
FragAdapter adapter = new FragAdapter(getSupportFragmentManager(), fragments);

构造一个fragment列表,然后将上面的三个Fragment类对应的实例添加进去,最后生成FragAdapter实例。
至于第二步,设定适配器,没什么好讲的。

时间: 2016-06-28

Android基于ViewPager Fragment实现选项卡

先给大家展示效果图: 1.新建TestFragmen继承Fragment public class TestFragment extends Fragment { private static final String TAG = "TestFragment"; private String hello;// = "hello android"; private String defaultHello = "default value"; pri

Android App中ViewPager与Fragment结合的一些问题解决

在了解ViewPager的工作原理之前,先回顾ListView的工作原理: ListView只有在需要显示某些列表项时,它才会去申请可用的视图对象:如果为所有的列表项数据创建视图对象,会浪费内存: ListView找谁去申请视图对象呢? 答案是adapter.adapter是一个控制器对象,负责从模型层获取数据,创建并填充必要的视图对象,将准备好的视图对象返回给ListView: 首先,通过调用adapter的getCount()方法,ListView询问数组列表中包含多少个对象(为避免出现数组

Android实现Tab布局的4种方式(Fragment+TabPageIndicator+ViewPager)

Android现在实现Tab类型的界面方式越来越多,今天就把常见的实现方式给大家来个总结.目前写了: 1.传统的ViewPager实现 2.FragmentManager+Fragment实现 3.ViewPager+FragmentPagerAdapter实现 4.TabPageIndicator+ViewPager+FragmentPagerAdapter 1.传统的ViewPager实现 主要就是ViewPager+ViewAdapter这个还是比较常见的,就不多说了 效果图: 代码: p

Android中ViewPager获取当前显示的Fragment

前言 在项目中,有时会用到在ViewPager中显示同样类型的Fragment,同时这样的Fragment的个数是动态的,但是PagerAdapter没有给我们提供getCurrentFragment类似的方法.下面就给大家介绍下Android中ViewPager获取当前显示的Fragment的方法,一起看看吧. 一.使用 getSupportFragmentManager().findFragmentByTag()方法 Viewpager + FragmentPagerAdapter 情况下

Android中ViewPager和Fragment的使用

小案例 XML中 <android.support.v4.view.ViewPager android:id="@+id/viewPager" android:layout_width="match_parent" android:layout_height="match_parent"> </android.support.v4.view.ViewPager> 创建Fragment fragments = new Arr

Android App在ViewPager中使用Fragment的实例讲解

据说Android最推荐的是在ViewPager中使用FragMent,即ViewPager中的页面不像前面那样用LayoutInflater直接从布局文件加载,而是一个个Fragment.注意这里的Fragment 是android.support.v4.view包里的Fragment,而不是android.app包里的Fragment. 使用v4包里的Fragment的Activity必须继承自FragmentActivity. 其实使用Fragment与前面不使用Fragment非常类似:

详解Android中fragment和viewpager的那点事儿

在之前的博文<Android 中使用 ViewPager实现屏幕页面切换和页面轮播效果>和<详解Android中Fragment的两种创建方式>以及<Android中fragment与activity之间的交互(两种实现方式)>中我们介绍了ViewPager以及Fragment各自的使用场景以及不同的实现方式. 那如果将他们两结合起来,会不会擦出点火花呢,答案是肯定的.之前在介绍ViewPager时,我们实现了多个ImageView的切换,并配合更新导航原点的状态.那我

Android App中使用ViewPager+Fragment实现滑动切换效果

在android应用中,多屏滑动是一种很常见的风格,没有采用viewpager的代码实现会很长,如果采用ViewPager,代码就会短很多,但是使用ViewPager也有弊端:需要导入android-support-v4.jar.细节无法控制.不过现在情况已经不一样了,android-support-v4中提供了很多实用的功能,以至于现在新建一个android工程默认都会导入这个jar包.那我们就也采用viewpager来做滑动吧.另外一个概念就是Fragment和FragmentActivit

Android中ViewPager实现滑动指示条及与Fragment的配合

自主实现滑动指示条 先上效果图: 1.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

Android 开发之BottomBar+ViewPager+Fragment实现炫酷的底部导航效果

BottomBar BottomBar是Github上的一个开源框架,因为从1.3.3开始不支持fragments了,要自己配置,弄了很久,不管是app的fragment还是V4 的程序总是总是闪退.于是就用这种方式实现了,效果还不错.github有详细说明,多余的就不说了. 这个roughike是这个项目的所有者(大神致敬). 我用的是Android studio开发,fragment全部导的V4的包(以为最开始就支持的是v4的,后面也支持了app.fragment). 首先是dependen

Android开发之ListView的head消失页面导航栏的渐变出现和隐藏

1.Fragment页面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开发之DialogFragment用法实例总结

本文实例讲述了Android开发之DialogFragment用法.分享给大家供大家参考,具体如下: 背景 Android 官方推荐使用 DialogFragment 来代替 Dialog ,可以让它具有更高的可复用性(降低耦合)和更好的便利性(很好的处理屏幕翻转的情况). 而创建 DialogFragment 有两种方式: 1. 覆写其 onCreateDialog 方法 - ① 2. 覆写其 onCreateView 方法 - ② 虽然这两种方式都能实现相同的效果,但是它们各有自己适合的应用

Android开发之Button事件实现与监听方法总结

本文实例总结了Android开发之Button事件实现与监听方法.分享给大家供大家参考,具体如下: 先来介绍Button事件实现的两种方法 main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="

Android开发之button事件监听简单实例

本文实例讲述了Android开发之button事件监听用法.分享给大家供大家参考.具体如下: 事件监听的listener,有以下几种方式: 1.声明一个普通的class,实现OnClickListener接口,然后在button的setOnClickListener中new该类的一个对象. 2.使用匿名内部类,直接 btn.setOnClickListener(new OnClickListener() { @Override public void onClick(View arg0) { S

Android开发之Service用法实例

本文实例讲述了Android开发之Service用法.分享给大家供大家参考.具体分析如下: Service是一个生命周期较长而且没有界面的程序. 下面通过一个播放mp3的例子来学习. 先看MainActivity.java package com.example.servicetest; import android.app.Activity; import android.content.Intent; import android.os.Bundle; import android.view

Android开发之ContentProvider的使用详解

前言         Content Provider为存储数据和获取数据提供了统一的接口,它可以完成在不同应用程序下的数据共享,而在上一篇文章Android开发之SQLite的使用方法讲到的SQLite只能在同一个程序中共享数据.另外android为一些常见的数据,比如说音频,视频,图片,通讯录等提供了Content Provider,这样我们就可以很方便的对这些类型的数据操作了.使用ContentProvider的好处是开发人员不需要考虑数据内部是怎么存储的,比如说如果我们想利用Conten

Android开发之ListView实现Item局部刷新

对于android中的ListView刷新机制,大多数的程序员都是很熟悉的,修改或者添加adapter中的数据源之后,然后调用notifyDataSetChanged()刷新ListView.在这种模式下,我们会在getView中,根据不同的数据源,让控件显示不同的内容.这种模式是最常见的刷新模式,当我们来回滑动ListView的时候,调用adapter的getView方法,然后listview对adapter返回的View进行绘制.这种模式下,View的显示内容或状态都记录在adapter里面

Android开发之ListView列表刷新和加载更多实现方法

本文实例讲述了Android开发之ListView列表刷新和加载更多实现方法.分享给大家供大家参考.具体如下: 上下拉实现刷新和加载更多的ListView,如下: package com.sin.android.ui; import android.content.Context; import android.util.AttributeSet; import android.view.Gravity; import android.view.MotionEvent; import andro

Android开发之TextView控件用法实例总结

本文实例总结了Android开发之TextView控件用法.分享给大家供大家参考,具体如下: TextView控件可以向用户展现文本信息,我们可以设置该文本信息是否能编辑 1.TextView基本使用 在程序中创建TextView对象 在xml文件中布局使用 2.New Android Project-> Project name:TextView Build Target:Android 2.2 Application name:TextViewDemo Package name:com.b5