Android基于ViewPager实现类似微信页面切换效果

更新时间：2018年05月21日 11:44:50 作者：qqazl001

这篇文章主要介绍了Android基于ViewPager实现类似微信页面切换效果，通过Fragment适配器实现页面切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

此文，仅做为个人学习Android，记录成长以及方便复习！

实现ViewPager实现类似微信的页面切换，此文通过Fragment适配器实现

首先在布局文件activity_main.xml添加ViewPager

ViewPager是页面，PagerTabStrip和 PagerTitleStrip是设置标题的

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout 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/view1" 
  android:layout_width="wrap_content" 
  android:layout_height="wrap_content"> 
  <!--页卡标题--> 
  <!--PagerTitleStrip和PagerTabStrip功能差不多一致，使用了PagerTitleStrip那PagerTabStrip会失效--> 
  <android.support.v4.view.PagerTabStrip 
   android:id="@+id/pagerTabStrip" 
   android:layout_width="wrap_content" 
   android:layout_height="wrap_content" 
   /> 
 </android.support.v4.view.ViewPager> 
 
</RelativeLayout>

接下里创建3个布局文件，给ViewPager的适配器引用

view1.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"> 
 
 <ImageView 
  android:id="@+id/img1" 
  android:layout_height="wrap_content" 
  android:layout_width="wrap_content" 
  android:background="@drawable/img1" 
  android:layout_marginLeft="30dp"/> 
 
</LinearLayout>

view2.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"> 
 
 <ImageView 
  android:id="@+id/img2" 
  android:layout_height="match_parent" 
  android:layout_width="match_parent" 
  android:background="@drawable/img2"/> 
 
</LinearLayout>

view3.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"> 
 <ImageView 
  android:id="@+id/img3" 
  android:layout_height="match_parent" 
  android:layout_width="match_parent" 
  android:background="@drawable/img3"/> 
</LinearLayout>

创建3个类继承Fragment，通过Fragment实现onCreateView方法把view.xml布局转换成View
MyFragment1.java

package com.rui.viewpagerdemo; 
 
import android.os.Bundle; 
import android.support.annotation.Nullable; 
import android.support.v4.app.Fragment; 
import android.view.LayoutInflater; 
import android.view.View; 
import android.view.ViewGroup; 
 
/** 
 * Created by qqazl001 on 2018/3/26. 
 */ 
 
public class MyFragment1 extends Fragment{ 
 @Nullable 
 @Override 
 public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { 
  //布局文件转成View 
  //参数1：Fragment需要加载的布局文件 
  //参数2：加载layout的父ViewGroup 
  //参数1：是否返回父ViewGroup对象，false为不 
  View view = inflater.inflate(R.layout.view1,container,false); 
  return view; 
 } 
}

MyFragment2.java

package com.rui.viewpagerdemo; 
 
import android.os.Bundle; 
import android.support.annotation.Nullable; 
import android.support.v4.app.Fragment; 
import android.view.LayoutInflater; 
import android.view.View; 
import android.view.ViewGroup; 
 
/** 
 * Created by qqazl001 on 2018/3/26. 
 */ 
 
public class MyFragment2 extends Fragment{ 
 @Nullable 
 @Override 
 public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { 
  //布局文件转成View 
  //参数1：Fragment需要加载的布局文件 
  //参数2：加载layout的父ViewGroup 
  //参数1：是否返回父ViewGroup对象，false为不 
  View view = inflater.inflate(R.layout.view2,container,false); 
  return view; 
 } 
}

MyFragment3.java

package com.rui.viewpagerdemo; 
 
import android.os.Bundle; 
import android.support.annotation.Nullable; 
import android.support.v4.app.Fragment; 
import android.view.LayoutInflater; 
import android.view.View; 
import android.view.ViewGroup; 
 
/** 
 * Created by qqazl001 on 2018/3/26. 
 */ 
 
public class MyFragment3 extends Fragment{ 
 @Nullable 
 @Override 
 public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { 
  //布局文件转成View 
  //参数1：Fragment需要加载的布局文件 
  //参数2：加载layout的父ViewGroup 
  //参数1：是否返回父ViewGroup对象，false为不 
  View view = inflater.inflate(R.layout.view3,container,false); 
  return view; 
 } 
}

创建适配器，新建类（MyAdapter），继承FragmentPagerAdapter

package com.rui.viewpagerdemo; 
 
import android.support.v4.app.Fragment; 
import android.support.v4.app.FragmentManager; 
import android.support.v4.app.FragmentPagerAdapter; 
import android.support.v4.view.PagerAdapter; 
import android.view.View; 
import android.view.ViewGroup; 
 
import java.util.ArrayList; 
import java.util.List; 
 
/** 
 * Created by qqazl001 on 2018/3/26. 
 */ 
 
public class MyAdapter extends FragmentPagerAdapter{ 
 List<Fragment> listFragment; 
 List<String> listTab = new ArrayList<String>(); 
 
 public MyAdapter(FragmentManager fm,List<Fragment> listFragment,List<String>listTab) { 
  super(fm); 
  this.listFragment=listFragment; 
  this.listTab=listTab; 
 } 
 
 
 @Override 
 public CharSequence getPageTitle(int position) { 
  //返回标题名称 
  return listTab.get(position); 
 } 
 
 @Override 
 public Fragment getItem(int position) { 
  //返回页面内容 
  return listFragment.get(position); 
 } 
 
 @Override 
 public int getCount() { 
  //一共多少个页面 
  return listFragment.size(); 
 } 
}

在Activity实例化组件和适配器并添加监听，添加各种数据源等

监听实现接口OnPageChangeListener

ViewPager，添加监听方法 setOnPageChangeListener() 方法已经被 AS 移除了，建议使用 addOnPageChangeListener() 方法。

MainActivity.java

package com.rui.viewpagerdemo; 
 
import android.annotation.SuppressLint; 
import android.graphics.Color; 
import android.support.v4.app.Fragment; 
import android.support.v4.view.PagerTabStrip; 
import android.support.v4.view.ViewPager; 
import android.support.v7.app.AppCompatActivity; 
import android.os.Bundle; 
import android.view.View; 
import android.widget.Toast; 
 
import java.util.ArrayList; 
import java.util.List; 
//调用接口监听，并实现方法 
public class MainActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener{ 
 private List<Fragment> listFragment;//声明List，存放Fagment 
 private ViewPager viewPager;//声明ViewPager 
 private PagerTabStrip pagerTabStrip;//声明PagerTabStrip 
 private List<String> listTab;//声明List,存放标题 
 
 @SuppressLint("ResourceType") 
 @Override 
 protected void onCreate(Bundle savedInstanceState) { 
  super.onCreate(savedInstanceState); 
  setContentView(R.layout.activity_main); 
  //实例化List 
  listFragment = new ArrayList<Fragment>(); 
  //view加入list 
  listFragment.add(new MyFragment1()); 
  listFragment.add(new MyFragment2()); 
  listFragment.add(new MyFragment3()); 
  //标题加入list 
  listTab = new ArrayList<String>(); 
  listTab.add("第一页"); 
  listTab.add("第二页"); 
  listTab.add("第三页"); 
 
  //为PagerTabStrip设置属性 
  pagerTabStrip = (PagerTabStrip)findViewById(R.id.pagerTabStrip); 
  //pagerTabStrip.setBackgroundColor(color.white); 设置背景色 
  pagerTabStrip.setTextColor(Color.RED); //设置标题文字颜色 
  pagerTabStrip.setDrawFullUnderline(false);//是否显示一条横线 
  pagerTabStrip.setTabIndicatorColor(Color.GREEN);//标题下的短粗线颜色 
 
  //实例化适配器 
  MyAdapter myAdapter = new MyAdapter(getSupportFragmentManager(),listFragment,listTab); 
  //实例化ViewPager 
  viewPager = (ViewPager) findViewById(R.id.view1); 
  //为viewPager加载适配器 
  viewPager.setAdapter(myAdapter); 
  //加载监听事件 
  viewPager.addOnPageChangeListener(this); 
 } 
 
 
 @Override 
 public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { 
  // position-点击滑动的界面的位置 
 
  // positionOffset-点击页面占整个屏幕的百分比 
 
  // positionOffsetPixels-屏幕像素的位置 
 } 
 
 @Override 
 public void onPageSelected(int position) { 
  //滑动到第几页 
  Toast.makeText(MainActivity.this,"第"+(position+1)+"页",Toast.LENGTH_SHORT).show(); 
 } 
 
 @Override 
 public void onPageScrollStateChanged(int state) { 
  //state:滑动状态 
 
  //当页面停止的时候该参数为0，页面开始滑动的时候变成了1， 
 
  //当手指从屏幕上抬起变为了2（无论页面是否从1跳到了2），当页面静止后又变成了0 
 
  //只在0，1，2三个数字之间切换. 
 } 
}

PS:以上很多都使用了 android.support.v4.* 这个包下的类，是为了向下兼容

ViewPager有三个适配器,适配不同的数据源。

1、继承自PagerAdapter的适配器适配List<View>的数据

2、继承自FragmentAdapter的适配器适配List<Fragment>的数据

3、继承自FragmentStateAdapter的适配器适配List<Fragment>的数据

其中后两种的区别是:2没有创建和销毁的过程,3有

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Android最新状态栏处理介绍
大家好，本篇文章主要讲的是Android最新状态栏处理介绍，感兴趣的同学赶快来看一看吧，对你有帮助的话记得收藏一下，方便下次浏览
2021-12-12
Android笔记之:深入为从右向左语言定义复杂字串的详解
本篇文章是对Android中为从右向左语言定义复杂字串进行了详细的分析介绍，需要的朋友参考下
2013-05-05
Android实现定时任务及闹钟
这篇文章主要为大家详细介绍了Android实现定时任务及闹钟，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-06-06
android事件总线EventBus3.0使用方法详解
这篇文章主要为大家详细介绍了android事件总线EventBus3.0使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-11-11
Android判断手机是否联网及自动跳转功能(收藏版)
这篇文章主要介绍了Android判断手机是否联网及自动跳转功能(收藏版),在一些手机端连接wifi我们经常会遇到这样的功能，今天小编通过实例截图给大家介绍下，需要的朋友可以参考下
2019-11-11
Android中RecyclerView布局代替GridView实现类似支付宝的界面
RecyclerView比GridView来得更加强大,不仅是在分割线的绘制方面,在条目的编辑上也做得同样出色,下面就来看一下Android中RecyclerView布局代替GridView实现类似支付宝的界面的实例
2016-06-06
Android小程序实现音乐播放列表
这篇文章主要为大家详细介绍了Android小程序实现音乐播放列表，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-05-05
一步步实现Viewpager卡片翻页效果
一步步实现Viewpager卡片翻页效果，文章很精彩，实现步骤很详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-08-08
Android中自定义一个View的方法详解
这篇文章主要介绍了Android中自定义一个View的方法,结合实例形式较为详细的分析了Android中自定义View的具体步骤与相关注意事项,需要的朋友可以参考下
2016-07-07
Android自定义收音机搜台控件RadioRulerView
这篇文章主要为大家详细介绍了Android自定义收音机搜台控件RadioRulerView的相关代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-04-04

Android基于ViewPager实现类似微信页面切换效果

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具