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实现屏幕页面切换和页面轮播效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
相关文章
Android Studio 3.6 layout文件text模式切换问题
这篇文章主要介绍了Android Studio 3.6 layout文件text模式切换问,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-03-03Android Studio导入Eclipse项目的两种方法
本文主要介绍了Android Studio导入Eclipse项目的两种方法。具有一定的参考价值,下面跟着小编一起来看下吧2017-01-01Android 数据存储之 FileInputStream 工具类及FileInputStream类的使用
这篇文章主要介绍了Android 数据存储之 FileInputStream 工具类及FileInputStream类的使用的相关资料,需要的朋友可以参考下2015-11-11Jetpack Compose实现点击事件click的多种方法
这篇文章主要介绍了Jetpack Compose实现点击事件的多种方法,Jetpack Compose是一款基于Kotlin的声明式UI工具包,可以方便地创建漂亮的用户界面,下面我们就来看看Jetpack Compose添加点击事件都可以怎么实现2024-02-02Android Studio实现音乐播放器的全过程(简单易上手)
这篇文章主要给大家介绍了关于Android Studio实现音乐播放器的相关资料,文中通过实例代码以及图文介绍的非常详细,对各位Android开发者们具有一定的参考学习价值,需要的朋友可以参考下2022-02-02Android实现底部弹出PopupWindow背景逐渐变暗效果
这篇文章主要为大家详细介绍了Android实现底部弹出PopupWindow背景逐渐变暗效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2016-10-10
最新评论