Android学习-ViewPager与PagerAdapter合用实现滑动翻页

项目中需要实现滑动翻阅App引导页,特此记录实现过程。

Android开发中使用到的UI控件有很多,比如TextView、ImageView、Button等等,这些都是比较基础的控件,可以单独使用,而今天介绍的是ViewPager控件,ViewPager 是一种可以让用户通过左右滑动来切换页面的控件,通过它我们可以展示超过屏幕尺寸大小的内容,在某种程度上它可以说是实现多页面的最佳方式,同时 ViewPager 还支持任意动态的添加/删除页面。但是ViewPager不能单独使用,需要配合PagerAdapter一起合用才能实现期望的效果。

准备布局文件

1. 首先创建一个与GuideActivity.java相对应的布局文件用于放置ViewPager。也可以放一些每个引导页都包含的控件,例如我这里放置了“跳过”按钮:

代码如下(activity_guide.xml):

<?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:gravity="top"> <androidx.viewpager.widget.ViewPager android:id="@+id/mViewPager" android:layout_width="match_parent" android:layout_height="match_parent"/> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_margin="30dp" android:gravity="center" android:orientation="horizontal"> <ImageView android:id="@+id/iv_music_switch" android:layout_width="30dp" android:layout_height="30dp" android:src="@drawable/img_guide_music" /> <TextView android:id="@+id/tv_guide_skip" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="20dp" android:text="跳过" android:background="@drawable/corner_view" android:textColor="@color/white" android:textSize="20sp" /> </LinearLayout> </RelativeLayout>

 

效果如图所示:

 

2. 另外分别准备三个布局文件(layout_pager_guide_1.xml、layout_pager_guide_2.xml、layout_pager_guide_3.xml),放置三个引导页具体要显示的内容,我这里只放了一个ImageView,效果如下:

 

重写适配器

新建一个类继承PagerAdapter,需要重写四个方法,具体代码如下:

package com.tangyibo.framework.base; import android.view.View; import android.view.ViewGroup; import androidx.annotation.NonNull; import androidx.viewpager.widget.PagerAdapter; import androidx.viewpager.widget.ViewPager; import java.util.List; public class BasePagerAdapter extends PagerAdapter { private List<View> mList; public BasePagerAdapter(List<View> mList){ this.mList = mList; } @Override public int getCount() { return mList.size(); } @Override public boolean isViewFromObject(@NonNull View view, @NonNull Object object) { return view == object; } @NonNull @Override public Object instantiateItem(@NonNull ViewGroup container, int position) { ((ViewPager)container).addView(mList.get(position)); return mList.get(position); } @Override public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) { ((ViewPager)container).addView(mList.get(position)); } }

 

GuideActivity.java内逻辑编写

这里有一点小难度,首先把主布局文件的控件都声明出来,包括ImageView、TextView和ViewPager,同时声明三个view用于保存三个布局文件,再声明一个list用于保存这三个view;具体代码如下:

package com.tangyibo.planet.ui; import android.os.Bundle; import android.view.View; import android.widget.ImageView; import android.widget.TextView; import androidx.annotation.Nullable; import androidx.appcompat.app.AppCompatActivity; import androidx.viewpager.widget.ViewPager; import com.tangyibo.framework.base.BaseActivity; import com.tangyibo.framework.base.BasePagerAdapter; import com.tangyibo.framework.base.BaseUIActivity; import com.tangyibo.planet.R; import java.util.ArrayList; import java.util.List; /** * 引导页 * 1.ViewPager : 适配器|帧动画播放 * 2.歌曲的播放 * 3.属性动画旋转 * 4.跳转 */ public class GuideActivity extends BaseActivity { private ImageView iv_music_switch; //音乐图标 private TextView tv_guide_skip; //跳过 private ViewPager mViewPager; private View view1; //guide_1 private View view2; //guide_2 private View view3; //guide_3 private List<View> mPageList = new ArrayList<>(); //用list保存三个页面view private void initView() { iv_music_switch = (ImageView) findViewById(R.id.iv_music_switch); tv_guide_skip = (TextView) findViewById(R.id.tv_guide_skip); mViewPager = (ViewPager) findViewById(R.id.mViewPager); //三个页面布局文件传给view view1 = View.inflate(this, R.layout.layout_pager_guide_1, null); view2 = View.inflate(this, R.layout.layout_pager_guide_2, null); view3 = View.inflate(this, R.layout.layout_pager_guide_3, null); //用一个list管理三个引导页面 mPageList.add(view1); mPageList.add(view2); mPageList.add(view3); mViewPager.setAdapter(new BasePagerAdapter(mPageList)); } @Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_guide); initView(); } }

显示效果:

      

 


__EOF__

本文作者一笼灌汤包
本文链接https://www.cnblogs.com/tangyibo/p/16045703.html
关于博主:一笼灌汤包
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角推荐一下。您的鼓励是博主的最大动力!
posted @   一笼灌汤包  阅读(675)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
点击右上角即可分享
微信分享提示