Android ViewPager多页面滑动切换以及动画效果

最新推荐文章于 2018-09-04 17:19:41 发布
最新推荐文章于 2018-09-04 17:19:41 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： UI 界面设计 Android应用开发

原文

 

Android ViewPager多页面滑动切换以及动画效果

一、首先，我们来看一下效果图，这是新浪微博的Tab滑动效果。我们可以手势滑动，也可以点击上面的头标进行切换。与此同方式，

白色横条会移动到相应的页卡头标下。这是一个动画效果，白条是缓慢滑动过去的。好了，接下来我们就来实现它。

 

二、在开始前，我们先要认识一个控件，ViewPager。它是google SDk中自带的一个附加包的一个类，可以用来实现屏幕间的切换。

这个附加包是android-support-v4.jar，在最后的源码中会提供给大家，在libs文件夹中。当然你也可以自己从网上搜索最新的版本。

找到它后，我们需要在项目中添加

 

三、我们先做界面，

界面设计很简单，第一行三个头标，第二行动画图片，第三行页卡内容展示。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:umadsdk="http://schemas.android.com/apk/res/com.LoveBus"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="fill_parent"
        android:layout_height="100.0dip"
        android:background="#FFFFFF" >

        <TextView
            android:id="@+id/text1"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1.0"
            android:gravity="center"
            android:text="页卡1"
            android:textColor="#000000"
            android:textSize="22.0dip" />

        <TextView
            android:id="@+id/text2"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1.0"
            android:gravity="center"
            android:text="页卡2"
            android:textColor="#000000"
            android:textSize="22.0dip" />

        <TextView
            android:id="@+id/text3"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1.0"
            android:gravity="center"
            android:text="页卡3"
            android:textColor="#000000"
            android:textSize="22.0dip" />
    </LinearLayout>

    <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/vPager"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="1.0"
        android:background="#000000"
        android:flipInterval="30"
        android:persistentDrawingCache="animation" />

</LinearLayout>


 

我们要展示三个页卡，所以还需要三个页卡内容的界面设计，这里我们只设置了背景颜色，能起到区别作用即可。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:background="#158684" >
</LinearLayout>


 

四、代码部分要进行初始化的工作

(1) 先来变量的定义

   private ViewPager mPager;//页卡内容
    private List<View> listViews; // Tab页面列表
    private ImageView cursor;// 动画图片
    private TextView t1, t2, t3;// 页卡头标
    private int offset = 0;// 动画图片偏移量
    private int currIndex = 0;// 当前页卡编号
    private int bmpW;// 动画图片宽度

(2) 初始化头标

/**
      * 初始化头标
 */
     private void InitTextView() {
         t1 = (TextView) findViewById(R.id.text1);
         t2 = (TextView) findViewById(R.id.text2);
         t3 = (TextView) findViewById(R.id.text3);
 
         t1.setOnClickListener(new MyOnClickListener(0));
         t2.setOnClickListener(new MyOnClickListener(1));
         t3.setOnClickListener(new MyOnClickListener(2));
     }


 

/**
      * 头标点击监听
 */
     public class MyOnClickListener implements View.OnClickListener {
         private int index = 0;
 
         public MyOnClickListener(int i) {
             index = i;
         }
 
         @Override
         public void onClick(View v) {
             mPager.setCurrentItem(index);
         }
     };


 

相信大家看后都没什么问题，点击第几个，就展示第几个页卡内容。

(3) 初始化页卡内容区

/**
      * 初始化ViewPager
 */
     private void InitViewPager() {
         mPager = (ViewPager) findViewById(R.id.vPager);
         listViews = new ArrayList<View>();
         LayoutInflater mInflater = getLayoutInflater();
         listViews.add(mInflater.inflate(R.layout.lay1, null));
         listViews.add(mInflater.inflate(R.layout.lay2, null));
         listViews.add(mInflater.inflate(R.layout.lay3, null));
         mPager.setAdapter(new MyPagerAdapter(listViews));
         mPager.setCurrentItem(0);
         mPager.setOnPageChangeListener(new MyOnPageChangeListener());
     }


 

我们将三个页卡界面装入其中，默认显示第一个页卡。这里我们还需要实现一个适配器。

/**
      * ViewPager适配器
 */
     public class MyPagerAdapter extends PagerAdapter {
         public List<View> mListViews;
 
         public MyPagerAdapter(List<View> mListViews) {
             this.mListViews = mListViews;
         }
 
         @Override
         public void destroyItem(View arg0, int arg1, Object arg2) {
             ((ViewPager) arg0).removeView(mListViews.get(arg1));
         }
 
         @Override
         public void finishUpdate(View arg0) {
         }
 
         @Override
         public int getCount() {
             return mListViews.size();
         }
 
         @Override
         public Object instantiateItem(View arg0, int arg1) {
             ((ViewPager) arg0).addView(mListViews.get(arg1), 0);
             return mListViews.get(arg1);
         }
 
         @Override
         public boolean isViewFromObject(View arg0, Object arg1) {
             return arg0 == (arg1);
         }
 
         @Override
         public void restoreState(Parcelable arg0, ClassLoader arg1) {
         }
 
         @Override
         public Parcelable saveState() {
             return null;
         }
 
         @Override
         public void startUpdate(View arg0) {
         }
     }


 

这里我们实现了各页卡的装入和卸载

(3) 初始化动画

/**
      * 初始化动画
 */
     private void InitImageView() {
         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 / 3 - bmpW) / 2;// 计算偏移量
         Matrix matrix = new Matrix();
         matrix.postTranslate(offset, 0);
         cursor.setImageMatrix(matrix);// 设置动画初始位置
     }


 

根据屏幕的分辨率和图片的宽度计算动画移动的偏移量

实现页卡切换监听

/**
      * 页卡切换监听
 */
     public class MyOnPageChangeListener 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(0, one, 0, 0);
                 } else if (currIndex == 2) {
                     animation = new TranslateAnimation(two, one, 0, 0);
                 }
                 break;
             case 2:
                 if (currIndex == 0) {
                     animation = new TranslateAnimation(0, 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) {
         }
     }


整个程序：

package com.demo;

import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
import android.graphics.BitmapFactory;
import android.graphics.Matrix;
import android.os.Bundle;
import android.os.Parcelable;
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.LayoutInflater;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.TextView;

/**
 * 
 * @author D.Winter
 * 
 */
public class MainActivity extends Activity {
	private ViewPager mPager;
	private List<View> listViews; 
	private ImageView cursor;// 滑动图标
	private TextView t1, t2, t3;// 仿Tab键的控件
	private int offset = 0;// 偏移量
	private int currIndex = 0;// 对应不同的Tab
	private int bmpW;//Image的宽度

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		InitImageView();
		InitTextView();
		InitViewPager();
	}

	/**
	 * 初始化TextView对象*/
	private void InitTextView() {
		t1 = (TextView) findViewById(R.id.text1);
		t2 = (TextView) findViewById(R.id.text2);
		t3 = (TextView) findViewById(R.id.text3);

		t1.setOnClickListener(new MyOnClickListener(0));
		t2.setOnClickListener(new MyOnClickListener(1));
		t3.setOnClickListener(new MyOnClickListener(2));
	}

	/**
	 * 初始化ViewPager的配置
	 */
	private void InitViewPager() {
		mPager = (ViewPager) findViewById(R.id.vPager);
		listViews = new ArrayList<View>();
		LayoutInflater mInflater = getLayoutInflater();
		listViews.add(mInflater.inflate(R.layout.lay1, null));
		listViews.add(mInflater.inflate(R.layout.lay2, null));
		listViews.add(mInflater.inflate(R.layout.lay3, null));
		mPager.setAdapter(new MyPagerAdapter(listViews));
		mPager.setCurrentItem(0);
		mPager.setOnPageChangeListener(new MyOnPageChangeListener());
	}

	/**
	 * 鍒濆鍖栧姩鐢�	 */
	private void InitImageView() {
		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 / 3 - bmpW) / 2;	
		Matrix matrix = new Matrix();
		matrix.postTranslate(offset, 0);
		cursor.setImageMatrix(matrix);
	}

	/**
	 * ViewPager的Adapter	 */
	public class MyPagerAdapter extends PagerAdapter {
		public List<View> mListViews;

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

		@Override
		public void destroyItem(View arg0, int arg1, Object arg2) {
			((ViewPager) arg0).removeView(mListViews.get(arg1));
		}

		@Override
		public void finishUpdate(View arg0) {
		}

		@Override
		public int getCount() {
			return mListViews.size();
		}

		@Override
		public Object instantiateItem(View arg0, int arg1) {
			((ViewPager) arg0).addView(mListViews.get(arg1), 0);
			return mListViews.get(arg1);
		}

		@Override
		public boolean isViewFromObject(View arg0, Object arg1) {
			return arg0 == (arg1);
		}

		@Override
		public void restoreState(Parcelable arg0, ClassLoader arg1) {
		}

		@Override
		public Parcelable saveState() {
			return null;
		}

		@Override
		public void startUpdate(View arg0) {
		}
	}

	/**
	 * 仿Tab键的事件监听器
	 */
	public class MyOnClickListener implements View.OnClickListener {
		private int index = 0;

		public MyOnClickListener(int i) {
			index = i;
		}

		@Override
		public void onClick(View v) {
			mPager.setCurrentItem(index);
		}
	};

	/**
	 * ViewPager设置滑动的监听器
	 */
	public class MyOnPageChangeListener implements OnPageChangeListener {

		int one = offset * 2 + bmpW;
		int two = one * 2;
		@Override
		public void onPageSelected(int arg0) {
			Animation animation = null;
			switch (arg0) {
			case 0:
				if (currIndex == 1) {
					/**
					 * 设置在X轴方向的动画。
					 * 第一个参数fromXDelta。Image的左上角为(0,0),该参数表示在X轴方向的动画开始位置距离Image左上角的距离
					 * 第二个参数toXDelta。该参数表示在X轴方向动画的结束位置距离Image左上角的距离。
					 * 第三和第四参数同上
					 * 位置的开始点是Image的原始位置，而不是setFillAfter(true)之后的位置
					 */
					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(0, one, 0, 0);
				} else if (currIndex == 2) {
					animation = new TranslateAnimation(two, one, 0, 0);
				}
				break;
			case 2:
				if (currIndex == 0) {
					animation = new TranslateAnimation(0, two, 0, 0);
				} else if (currIndex == 1) {
					animation = new TranslateAnimation(one, two, 0, 0);
				}
				break;
			}
			currIndex = arg0;
			animation.setFillAfter(true);
			animation.setDuration(3000);
			cursor.startAnimation(animation);
		}

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

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

 

五、打完收工，快来看看自己的劳动成果吧


 工程文件：http://download.csdn.net/detail/zhaoshiqing7/4726195

临意
关注
专栏目录
Android ViewPager初探：让页面滑动起来
weixin_30751947的博客
07-28 55
下一篇：《Android ViewPager再探：增加滑动指示条》 ViewPager需要用到适配器PagerAAdapter，以下四个函数需要重写： instantiateItem(ViewGroup container, int position)：创建指定位置的页面视图。适配器增加即将创建的View视图到这里给定的container中。destroyItem(ViewGroup c...
Viewpager轮播添加动画
热门推荐
欢乐斗佛的博客
11-25 3万+
必须知识点 ViewPager是Google自带的翻页控件，存放在V4兼容包中，继承于ViewGroup，官方推荐和Fragment一块使用。我们平时使用的地方主要有2个，一个是app第一次启动的引导页，第二个就是弄几张图片轮播的那种。在第二种使用方式的时候经常配合PagerTabStrip或者PagerTitleStrip来显示一个标签用来指引现在处于第几个页面。 PagerTabStrip
默认初始ViewPager切换到指定页面不需要滑动过程
Sky
10-26 1万+
起因:在做项目过程中遇到从其他界面跳转到新界面(ViewPager实现)中的指定页面,通常使用mViewPager.setCurrentItem(nextItem);来切换到指定页面. 但在实现操作过程中发现,初始界面中默认切换到除第一页面时都会看到从第一页到指定页面的动画滑动效果(因为动画太快在有些设备上面显示会闪一下,然后切换到指定页面) 解决方案: 为了解决这个闪烁的问题,在查
Android基于ViewPager实现滑动欢迎界面（向导界面 引导页）
https://juejin.cn/user/1654096907477549/posts
09-04 5258
前言：天苍苍，野茫茫，风吹草低见牛羊！ 1.项目需求：APP都有自己的向导页面，一般都是第一次安装的时或者第一次进入应用时才有向导页面，项目中有多张广告图需要在欢迎页面显示出来 效果图： 2.具体功能实现：我使用viewPager配合Adapter来滑动处理，滑动事件监听滑动距离，点跟随滑动。 代码展示： SplashActivity package com.mingyans...
简单一步实现ViewPager滑动到指定页加载数据
Android
04-09 5079
Viewpager总是在拖动的时候刷新数据,非常不美观,而且非常容易造成卡顿现象 根据监听onpageselected来显示数据在第一页的时候又不会调用. 其实通过监听pagescrolled事件就可以啦//设置ViewPager的OnPageChangeListener监听器 @Override public void onPageScrolled(int position, floa
Android中实现页面滑动——ViewPager
QuietShake的博客
09-26 6024
ViewPager可以实现多页面滑动切换以及动画效果，在很多开发场合都十分常用，不仅方便实用而且功能强大。ViewPager类直接继承了ViewGroup类，所以它是一个容器类，可以在其中添加其他的view类。 ViewPager是Google SDK自带的附加包v4包的类（即android.support-v4.jar），所以在写布局文件时需要引用完整类名。经验表明这样一个View必然要用到适
ssm9293农家乐管理系统.zip
最新发布
09-28
技术选型 【后端】：Java 【框架】：ssm 【前端】：vue/jsp 【JDK版本】：JDK1.8 【服务器】：tomcat7+ 【数据库】：mysql 5.7+ 包含：项目源码、数据库脚本、项目功能介绍文档等，该项目源码可作为毕设使用。 项目都经过严格调试，确保可以运行！ 具体项目介绍可查看博主文章
基于SpringBoot和Vue的青锋后台管理系统设计源码
09-28
该源码是一款基于SpringBoot和Vue构建的青锋后台管理系统，集成了371个文件，涵盖148个Java源文件、85个Vue组件、58个JavaScript脚本、23个XML配置、12个FTL模板、7个XLS表格、5个属性文件、3个JSON配置、3个HTML页面和3个LESS样式表。系统以SpringBoot为核心框架，结合layui和Activiti工作流，具备代码生成器、自定义表单和拖拽可视化报表大屏等功能，为用户提供了一个功能齐全、易于扩展的脚手架平台。尽管开源代码可能存在不足，但欢迎广大开发者提出宝贵意见。
基于51单片机太阳能锂电池充电电压电流检测液晶显示设计（毕业设计）
09-28
本设计由STC89C52单片机+LCD1602液晶显示电路+A/D转换芯片PCF8591电路+电压检测电路+电流检测电路ACS712-5A+继电器控制电路+电源电路设计而成。 功能描述： 1、通过太阳能电池板给锂电池充电，通过单片机检测太阳能给电池的充电电压和充电电流，并在1602液晶上显示出来！ 2、通过继电器，有过压保护，当锂电池充电电压超过了4.5V或者充电电流超过1A，继电器断开，充电停止。 资料包含： 程序源码 电路图 任务书 答辩技巧 开题报告 参考论文 系统框图 程序流程图 使用到的芯片资料 器件清单 中期报告 等等资料
外鼻梁条超声焊接机_三维3D设计图纸.zip
09-28
外鼻梁条超声焊接机_三维3D设计图纸.zip
基于PHP+JavaScript+CSS的爱宠狼人杀后台服务设计源码
09-28
本项目是一款基于PHP、JavaScript和CSS的爱宠狼人杀后台服务设计源码，总文件量为176个，其中包括124个PHP文件、12个Git忽略文件、5个JSON文件、4个JavaScript文件以及各类字体和图标文件。该系统专为爱宠狼人杀游戏的后台管理设计，旨在提供高效便捷的管理服务。
基于Java的Spring Security基础教程设计源码
09-28
本项目为Java编写的Spring Security基础教程源码，包含85个文件，其中包括52个Java源文件、17个XML配置文件、13个YAML文件、1个Git忽略文件、1个Markdown文件和1个Word文档，旨在为开发者提供Spring Security框架的学习与实践基础。
Nacos持久化SQL脚本-nacos.sql
09-28
Nacos持久化SQL脚本-nacos.sql
基于黔染出山记的蜡染非遗融合现代设计源码
09-28
该项目为黔染出山记蜡染非遗融合现代设计的源码，总计包含145个文件，涵盖76个PNG图片文件、31个JPG图片文件、10个CSS样式文件、10个HTML文件、9个JavaScript文件、2个XML和JSON文件、1个IML文件、1个LICENSE文件以及1个字体文件。该项目旨在将黔染蜡染这一传统技艺与现代设计理念相融合，创新性地推动贵州蜡染手工艺的振兴，使这一文化遗产焕发新活力，融入现代生活，助力非遗传承与发展，同时促进贵州地区的经济增长。
基于Vue框架的连锁店点餐系统设计源码
09-28
该项目是一款基于Vue框架的连锁店点餐系统源码，包含282个文件，涵盖134个Vue组件、57个JavaScript文件、40个PNG图片、9个Markdown文档、9个JSON配置文件、8个SCSS样式表、7个映射文件、4个TypeScript文件以及少量其他辅助文件。该系统以uniDrink命名，模仿麦当劳、肯德基、喜茶和奈雪的茶等知名品牌的连锁店模式，适用于多连锁店场景的点餐服务。
基于Java技术的汽车配件信息管理系统设计源码
09-28
本项目是一款基于Java技术的汽车配件信息管理系统源码，由137个文件组成，其中包括103个XML配置文件、24个Java源文件、2个Git忽略文件、2个属性文件、1个JAR包文件以及相关的其他文件类型。系统专注于汽车配件信息的管理与维护，适用于汽车维修与配件销售行业的信息化建设。
python直接能用的小游戏项目源码
09-28
python直接能用的小游戏项目源码，含有代码注释，满分大作业资源，新手也可看懂，期末大作业、课程设计、高分必看，下载下来，简单部署，就可以使用。该项目可以作为课程设计期末大作业使用，该系统功能完善、界面美观、操作简单、功能齐全、管理便捷，具有很高的实际应用价值。 python直接能用的小游戏项目源码，含有代码注释，满分大作业资源，新手也可看懂，期末大作业、课程设计、高分必看，下载下来，简单部署，就可以使用。该项目可以作为课程设计期末大作业使用，该系统功能完善、界面美观、操作简单、功能齐全、管理便捷，具有很高的实际应用价值。 python直接能用的小游戏项目源码，含有代码注释，满分大作业资源，新手也可看懂，期末大作业、课程设计、高分必看，下载下来，简单部署，就可以使用。该项目可以作为课程设计期末大作业使用，该系统功能完善、界面美观、操作简单、功能齐全、管理便捷，具有很高的实际应用价值。python直接能用的小游戏项目源码，含有代码注释，满分大作业资源，新手也可看懂，期末大作业、课程设计、高分必看，下载下来，简单部署，就可以使用。该项目可以作为课程设计期末大作业使用，该系统功能完善。
Android——ViewPager多页面滑动切换以及动画效果
05-27
ViewPager是一个Android中的View容器，可以让用户在多个页面之间进行滑动切换。要实现多页面滑动切换以及动画效果，可以按照以下步骤： ...以上就是实现Android中ViewPager多页面滑动切换以及动画效果的步骤。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值