Android 中使用 ViewPager实现屏幕页面切换和页面轮播效果

之前关于如何实现屏幕页面切换,写过一篇博文《Android中使用ViewFlipper实现屏幕切换》,相比ViewFlipper,ViewPager更适用复杂的视图切换,而且Viewpager有自己的adapter,这也让其适应复杂对象,实现数据的动态加载。

ViewPager是谷歌官方给我们提供的一个兼容低版本安卓设备的软件包,里面包囊了只有在安卓3.0以上可以使用的api。而viewpager就是其中之一,利用它,我们可以做很多事情,从最简单的导航,到页面菜单等等。

下面我们就展示下ViewPager可以实现的两种简单效果:

第一种:屏幕的页面的切换(与ViewFlipper的实现效果类似)

实现效果如下(4张视图(layout)):

第一步:在layout布局文件里加入主布局文件viewpager_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:id="@+id/vp">
<android.support.v4.view.PagerTabStrip
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/tap">
</android.support.v4.view.PagerTabStrip>
</android.support.v4.view.ViewPager>
</LinearLayout>

注意事项:

<1、这里ViewPager和PagerTabStrip都要把包名写全了,不然会ClassNotFound

<2、API中说:在布局xml把PagerTabStrip当做ViewPager的一个子标签来用,不能拿出来,不然还是会报错

<3、在PagerTabStrip标签中可以用属性android:layout_gravity=TOP|BOTTOM来指定title的位置

<4、如果要显示出PagerTabStrip某一页的title,需要在ViewPager的adapter中实现getPageTitle(int)

第二步:在layout中建立要展示切换的视图文件(示例中共四个layout1/2/3/4.xml,这里写一个典型):

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@mipmap/a1"
android:scaleType="centerCrop"
android:id="@+id/iv1" />
</LinearLayout>

第三步:Java中Activity的实现代码ViewPagerDemo.java(这里未设置pagerTabStrip的属性):

在Activity里实例化ViewPager组件,并设置它的Adapter(就是PagerAdapter,方法与ListView一样的)

实现一个PagerAdapter,覆盖以下方法:

instantiateItem(ViewGroup, int)//用来实例化页卡

destroyItem(ViewGroup, int, Object)//删除页卡

getCount() //返回页卡的数量

isViewFromObject(View, Object)//判断两个对象是否相等

getPageTitle(int position)//设置标签显示的标题

设置指示标签的属性

pagerTabStrip.setTabIndicatorColor();//指示器的颜色

pagerTabStrip.setBackgroundColor();//背影色

pagerTabStrip.setTextColor(Color.WHITE);//字体颜色

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.ViewGroup;
import java.util.ArrayList;
/**
* Created by panchengjia on 2016/12/1.
*/
public class ViewPagerDemo extends AppCompatActivity {
private ViewPager vp;
//声明存储ViewPager下子视图的集合
ArrayList<View> views = new ArrayList<>();
//显示效果中每个视图的标题
String[] titles={"一号美女","二号美女","三号美女","四号美女"};
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.viewpager_layout);
vp= (ViewPager) findViewById(R.id.vp);
initView();//调用初始化视图方法
vp.setAdapter(new MyAdapter());//设置适配器
}
//初始化视图的方法(通过布局填充器获取用于滑动的视图并存入对应的的集合)
private void initView() {
View v1 = getLayoutInflater().inflate(R.layout.layout1,null);
View v2 = getLayoutInflater().inflate(R.layout.layout2,null);
View v3 = getLayoutInflater().inflate(R.layout.layout3,null);
View v4 = getLayoutInflater().inflate(R.layout.layout4,null);
views.add(v1);
views.add(v2);
views.add(v3);
views.add(v4);
}
class MyAdapter extends PagerAdapter{
@Override
public int getCount() {
return views.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view==object;
}
//重写销毁滑动视图布局(将子视图移出视图存储集合(ViewGroup))
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(views.get(position));
}
//重写初始化滑动视图布局(从视图集合中取出对应视图,添加到ViewGroup)
@Override
public Object instantiateItem(ViewGroup container, int position) {
View v =views.get(position);
container.addView(v);
return v;
}
@Override
public CharSequence getPageTitle(int position) {
return titles[position];
}
}
}

第二种:页面轮播效果视图(程序首次启动的引导页实现)

实现效果如下(3张视图滑动引导):

开始代码前注释:

1、本次未实现循环轮播效果;2、导航原点资源图片注解:default_holo为未选中状态,touched_holo为选中后实心状态。(也可自己用Shape绘制)

第一步:在layout布局文件里加入主布局文件viewpager_layout.xml

主布局为FrameLayout,在ViewPager(这里因为存在导航原点,不设置PagerTabStrip)上嵌套包含3个导航原点(由滑动视图数量决定)的linearLayout布局(本次设置该布局位于底部):

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.administrator.myapplication11.MainActivity">
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/vp">
</android.support.v4.view.ViewPager>
<LinearLayout
android:id="@+id/point_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:orientation="horizontal">
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="@mipmap/default_holo"/>
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="@mipmap/default_holo" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="@mipmap/default_holo"
android:id="@+id/imageView" />
</LinearLayout>
</FrameLayout>

第二步:Layout中用于滑动切换的视图(示例中共三个layout1/2/3.xml,这里写一个典型)与第一种相同

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@mipmap/genie"/>
</LinearLayout>

第三步:Java中Activity的实现代码MainActivity.java

通过实现OnPageChangeListener接口实现在视图切换时导航原点状态的变化),其中关于OnPageChangeListener中方法的详细解释,请参考博文

《ViewPager的setOnPageChangeListener方法详解》这里不做赘述:

import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import java.util.ArrayList;
/**
* Created by panchengjia on 2016/11/30.
*/
public class MainActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener{
private ViewPager vp;
private LinearLayout point_layout;
ArrayList<View> views =new ArrayList<>();
//实例化存储imageView(导航原点)的集合
ArrayList<ImageView> imageViews = new ArrayList<>();
int currImage;//记录当前页(导航原点)
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
vp= (ViewPager) findViewById(R.id.vp);
initView();//调用初始化视图方法
initPoint();//调用初始化导航原点的方法
vp.addOnPageChangeListener(this);
vp.setAdapter(new MyAdapter());
}
/*将point_layout中包含的imageView(导航原点)添加到imageViewS集合中
*并设置layout1(第一视图)的导航原点(对应集合0下标)的图片
* 为touched_holo(触摸状态的图片)
*/
private void initPoint() {
point_layout= (LinearLayout) findViewById(R.id.point_layout);
int counnt = point_layout.getChildCount();//获取point数量
for (int i=0;i<counnt;i++){
imageViews.add((ImageView) point_layout.getChildAt(i));
}
imageViews.get(0).setImageResource(R.mipmap.touched_holo);
}
private void initView() {
View v1=getLayoutInflater().inflate(R.layout.layout1,null);
View v2=getLayoutInflater().inflate(R.layout.layout2,null);
View v3=getLayoutInflater().inflate(R.layout.layout3,null);
views.add(v1);
views.add(v2);
views.add(v3);
}
//OnPageChangeListener的方法,这里不做具体实现
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
//设置滑动到对应位置的视图后,导航原点的不同状态(图片)
@Override
public void onPageSelected(int position) {
ImageView preView = imageViews.get(currImage);
preView.setImageResource(R.mipmap.default_holo);
ImageView currView = imageViews.get(position);
currView.setImageResource(R.mipmap.touched_holo);
currImage = position;
}
//OnPageChangeListener的方法,这里不做具体实现
@Override
public void onPageScrollStateChanged(int state) {
}
class MyAdapter extends PagerAdapter {
@Override
public int getCount() {
return views.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view==object;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(views.get(position));
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
View v = views.get(position);
container.addView(v);
return v;
}
}
}

至此,本次的ViewPager实现示例所需代码已完成,当然这只是ViewPager最简单的功能,后续还会更新一些ViewPager的高级用法,欢迎小伙伴们继续支持。

以上所述是小编给大家介绍的Android 中使用 ViewPager实现屏幕页面切换和页面轮播效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

时间: 2016-11-30

Android 使用ViewPager自动滚动循环轮播效果

对Android 利用ViewPager实现图片可以左右循环滑动效果,感兴趣的朋友可以直接点击查看内容详情. 主要介绍如何实现ViewPager自动播放,循环滚动的效果及使用.顺便解决ViewPager嵌套(ViewPager inside ViewPager)影响触摸滑动及ViewPager滑动速度设置问题. 先给大家展示下效果图,喜欢的朋友可以下载源码: 1.实现 没有通过ScheduledExecutorService或Timer定期执行某个任务实现,而是简单的通过handler发送消息去

Android使用ViewPager实现自动轮播

很多APP中都实现了类似引导页的自动轮播,不由得想到昨天的引导页上修改一下代码实现轮播. 其实大体上只需要添加一个线程循环执行就可以了. 项目已同步至:https://github.com/nanchen2251/viewpagerDemo 同样的先上图 直接上代码,注释都全的,我想这样更有利于理解. 先改了Adapter  package com.example.nanchen.taketurnplaydemo; import android.support.v4.view.PagerAdap

Android ViewPager实现图片轮播效果

在app中图片的轮播显示可以说是非常常见的实现效果了,其实现原理不过是利用ViewPager,然后利用handler每隔一定的时间将ViewPager的currentItem设置为当前item的position+1即可.先来看看效果图吧: 就是实现这样的一个轮播广告的效果. 因为这个是自己为了练习仿照某旅游类App做的,所以这里的数据是使用抓包工具抓取的,准备数据等工作就不在这里赘述了,反正数据的添加大体都是相同的.我的思路是这样的,从网络上实时的获取数据(当然你也可以将数据写死),然后通过网络

Android实现基于ViewPager的无限循环自动播放带指示器的轮播图CarouselFigureView控件

最近用到需要无限轮播自动播放的轮播轮播图,网上感觉都有这样那样的问题,于是自己写了一个通用的控件CarouselFigureView. 特点: 1.可以轮播view可以自己定义,不一定是要是ImageView2.指示器默认显示,但是可以隐藏3.可以设置指示器的颜色.间距.大小 4.有基础的可以自己修改代码改变指示器位置,这个应该不难5.可以自己开启和关闭自动轮播,开启轮播的时候可以设置轮播时间间隔,默认3000毫秒 我们先来看看效果图: 然后来看看使用代码 xml代码 <?xml version

Android中用RxJava和ViewPager实现轮播图

前言 很多人要实现轮播图都会想到使用ViewPager + Handler来完成轮播图的效果.但是在RxJava快速发展的情况下,已经可以使用RxJava来代替Handler完成这样任务了. 下面我们就来介绍如何实现RxJava+ViewPager的轮播图. 效果图如下 ViewPager的操作 说到ViwePager应该大家都不陌生,它可以结合普通的View也可以结合Fragment一起使用.在此我也就不对它的使用方法进行过多的介绍了.直接开始介绍轮播的方法. 常见的轮播操作 private

Android viewpager自动轮播和小圆点联动效果

本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 首先来看一下我们要做成的而效果: 主页面要显示一个viewpager自动轮播+小圆点联动的效果 : 废话不多说,直接上代码: 布局文件: activity_main.xml: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.andro

Android ViewPager实现轮播图效果

先上一张效果图: 说到ViewPager实现轮播图效果,那么肯定会用到PagerAdapter,下面先介绍下这个类. PagerAdapter简介 PagerAdapter是Android.support.v4包中的类,是一个抽象类,直接继承于Object,导入包android.support.v4.view.PagerAdapter即可使用. PagerAdapter主要是viewpager的适配器,而viewPager则也是在android.support.v4扩展包中新添加的一个强大的控件

Android使用ViewPager加载图片和轮播视频

作为Android基础组件之一,大家对viewpager已经很熟悉了,网上也有很多使用viewpager来加载图片的案例.但是像微信那样点击图片,可以轮播显示图片和视频的例子却没找到.正巧项目中有需求,可以就花时间写了下,现在给一下核心代码,希望对有此需求的同学们起一个抛砖引玉的作用.话不多说了,上代码: 以下是initData的代码 public void initData() { //把聊天界面的图片和视频找出来,并加到数组中,并在 //并根据传进来的position来找到视频或图片在数组中

android ViewPager实现自动无限轮播和下方向导圆点

一.布局 小圆点形状的生成shape.xml文件 使用空心还是实心的把对应的注释去掉就可以了. <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" android:useLevel="false&quo

Android 使用ViewPager实现左右循环滑动及轮播效果

ViewPager是一个常用的Android组件,不过通常我们使用ViewPager的时候不能实现左右无限循环滑动,在滑到边界的时候会看到一个不能翻页的动画,可能影响用户体验.此外,某些区域性的ViewPager(例如展示广告或者公告之类的ViewPager),可能需要自动轮播的效果,即用户在不用滑动的情况下就能够看到其他页面的信息. 循环滑动效果的实现:PagerAdapter 我们知道ViewPager自带的滑动效果非常出色,因此我们基本不需要处理这个滑动,只处理内容的显示.而内容的显示是由

Android实现viewpager实现循环轮播效果

在网上看到很多利用viewpager实现轮播都是通过设置一个很大的值,让viewpager开始显示在这个数值区间的中间,但这种轮播个人感觉不是真正的轮播,因此自己实现了一个轮播的效果.大致思路是这样的,假如有5张图adcde是要轮播展示的,这时创建一个新的集合eadcdea,然后再让viewpager设置当前展示第一张图,也就是显示a.这样当往左滑时显示的是e,此时设置viewpager.setCurrentItem(5),当右滑到e的时候在往右滑,此时设置viewpager.setCurren

Android开发之滑动图片轮播标题焦点

先给大家这是下效果图: 谷歌提供的v4包,ViewPager 在布局文件中,先添加<android.support.v4.view.ViewPager/>控件,这个只是轮播的区域 在布局文件中,布置标题描述部分 线性布局,竖向排列,背景色黑色半透明,这个布局和上面的ViewPager底部对齐layout_alignBottom="@id/xxx" <TextView/>居中显示, 小点部分,先放过空的LinearLayout,id是ll_points在代码中对其

自定义RadioButton和ViewPager实现TabHost带滑动的页卡效果

在工作中又很多需求都不是android系统自带的控件可以达到效果的,内置的TabHost就是,只能达到简单的效果 ,所以这个时候就要自定义控件来达到效果:这个效果就是: 使用自定义RadioButton和ViewPager实现TabHost带滑动的页卡效果. 这篇文章技术含量一般,大家别见笑.源码我以测试,在底部可下载.好了先上效果图: 以下是实现步骤:        1.准备自定义RadioButton控件的样式图片等,就是准备配置文件: (1). 在项目的values文件夹里面创建 attr

Android实现图片轮播效果

本文实例讲述了JaAndroid实现图片轮播效果代码,分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: 首先看下一下布局文件: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_par

Android自定义Banner轮播效果

本文实例为大家分享了Android自定义Banner轮播效果展示的具体代码,供大家参考,具体内容如下 自定义View布局 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content"> <andro

Android实现图片轮播效果的两种方法

大家在使用APP的过程中,经常会看到上部banner图片轮播的效果,那么今天我们就一起来学习一下,android中图片轮询的几种实现方法: 第一种:使用动画的方法实现:(代码繁琐) 这种发放需要:两个动画效果,一个布局,一个主类来实现,不多说了,来看代码吧: public class IamgeTrActivity extends Activity { /** Called when the activity is first created. */ public ImageView image

Android UI实现广告Banner轮播效果

本篇博客要分享的一个效果是实现广告Banner轮播效果,这个效果也比较常见,一些视频类应用就经常有,就拿360影视大全来举例吧: 用红框框住的那个效果就是小巫今天要分享的,先来思考一下会用到什么控件?有什么用户体验? 控件我们可能一下子就可以想到的自然是ViewPager,没错!用到的就是ViewPager,那么它会有什么用户体验呢,它可能有以下几个体验: 1. 间隔不停的切换图片,指示器也跟着变 2. 点击图片可以跳转到指定的页面 如何实现? 布局开始着手 /BannerAutoScrollD

Android实现轮播效果的两种方法

实现轮播效果有2种方法: (1)使用ViewPager+ImageView,通过Handler进行间隔发送消息,实现自动轮播效果 xml代码: <android.support.v4.view.ViewPager android:id="@+id/fragment_viewPager" android:layout_width="match_parent" android:layout_height="200dp" /> privat