当前位置：首页 > 资讯 > 技术文档

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

时间：2022-06-09 23:30 编辑：来源：阅读：
扫一扫，手机访问

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

之前关于如何实现屏幕页面切换，写过一篇博文《[url=http://www.1sucai.cn/article/98491.htm]Android中使用ViewFlipper实现屏幕切换[/url]》，相比ViewFlipper，ViewPager更适用复杂的视图切换，而且Viewpager有自己的adapter，这也让其适应复杂对象，实现数据的动态加载。 ViewPager是谷歌官方给我们提供的一个兼容低版本安卓设备的软件包，里面包囊了只有在安卓3.0以上可以使用的api。而viewpager就是其中之一，利用它，我们可以做很多事情，从最简单的导航，到页面菜单等等。 [b]下面我们就展示下ViewPager可以实现的两种简单效果：[/b] [b]第一种：屏幕的页面的切换（与ViewFlipper的实现效果类似）[/b] 实现效果如下（4张视图（layout））： [img]http://files.jb51.net/file_images/article/201612/2016120214513017.gif[/img] [b]第一步：在layout布局文件里加入主布局文件viewpager_layout.xml[/b]

<?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>

[b]注意事项: [/b] <1、这里ViewPager和PagerTabStrip都要把包名写全了，不然会ClassNotFound <2、API中说：在布局xml把PagerTabStrip当做ViewPager的一个子标签来用，不能拿出来，不然还是会报错 <3、在PagerTabStrip标签中可以用属性android:layout_gravity=TOP|BOTTOM来指定title的位置 <4、如果要显示出PagerTabStrip某一页的title，需要在ViewPager的adapter中实现getPageTitle(int) [b]第二步：在layout中建立要展示切换的视图文件（示例中共四个layout1/2/3/4.xml，这里写一个典型）：[/b]

<?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>

[b]第三步：Java中Activity的实现代码ViewPagerDemo.java（这里未设置pagerTabStrip的属性）：[/b] 在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];
}
}
}

[b]第二种：页面轮播效果视图（程序首次启动的引导页实现）[/b] 实现效果如下（3张视图滑动引导）： [img]http://files.jb51.net/file_images/article/201612/2016120214513018.gif[/img] 开始代码前注释： 1、本次未实现循环轮播效果；2、导航原点资源图片注解：default_holo为未选中状态，touched_holo为选中后实心状态。（也可自己用Shape绘制） [b]第一步：在layout布局文件里加入主布局文件viewpager_layout.xml[/b] 主布局为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>

[b]第二步：Layout中用于滑动切换的视图（示例中共三个layout1/2/3.xml，这里写一个典型）与第一种相同[/b]

<?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>

[b]第三步：Java中Activity的实现代码MainActivity.java[/b] 通过实现OnPageChangeListener接口实现在视图切换时导航原点状态的变化），其中关于OnPageChangeListener中方法的详细解释，请参考博文《[url=http://www.1sucai.cn/article/98912.htm]ViewPager的setOnPageChangeListener方法详解[/url]》这里不做赘述：

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实现屏幕页面切换和页面轮播效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对编程素材网网站的支持！

全部评论(0)

上一篇：Android中解决页签手指按下从左到右滑动的bug
下一篇：Android开发实现的几何图形工具类GeometryUtil完整实例

资讯排行榜
更多>>