使用场景
轮播图
效果展示
dY.0.0
xV:0.0
RS:0.14SI
dx.0.0
Size:0.0元
千国移司
androidx.viewpager2.widget.ViwPager
作者:牙叔
81-31
autojs版本
Pro9.0.2-0-common
Android ViewPager2的特性
ViewPager2是ViewPager的升级版本, 主要特性如下
●ViewPager2 API最大的变化是它现在使用RecyclerView
●允许垂直分页, 支持LayoutManager
●RecyclerView.Adapter取代PagerAdapter
●registerOnPageChangeCallback 取代 addPageChangeListener
代码讲解
1. 导入类
importClass(android.view.View); importClass(Packages.androidx.recyclerview.widget.RecyclerView); importClass(Packages.androidx.viewpager2.widget.ViewPager2); ...
2. 布局: 卡片 + 指示器
ui.layout( <vertical id="parent"> <text textSize="19sp" w="*" gravity="center" text="androidx.viewpager2.widget.ViewPager2" /> <text textSize="25sp" textStyle="bold" w="*" gravity="center"> 作者: 牙叔 </text> <frame layout_width="match_parent" layout_height="200dp"> <card cardCornerRadius="6" h="200dp"> <androidx.viewpager2.widget.ViewPager2 id="viewpager2" h="wrap_content" /> </card> </frame> <horizontal id="container_indicator" margin="10" layout_gravity="top" w="*" h="wrap_content" gravity="center" /> </vertical> );
3. 轮播图布局: 图片序号 + 图片
<RelativeLayout android:id="@+id/container" android:layout_width="match_parent" android:layout_height="match_parent"> <androidx.appcompat.widget.AppCompatTextView android:id="@+id/tvTitle" tools:text="item" android:layout_centerInParent="true" android:textColor="@android:color/white" android:textSize="32dp" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <img id="海贼王"></img> </RelativeLayout>
4. 图片资源
imgUrlArr = [ "https://gimg2.baidu.com/自己找图片资源1", "https://gimg2.baidu.com/自己找图片资源2", "https://gimg2.baidu.com/自己找图片资源3" ];
5, 定义变量, 供方法全局调用
let lastBabyView; let indicatorContainer = ui.container_indicator; let viewPager2 = ui.viewpager2;
6. 添加指示器
initIndicatorDots();
7. 设置adapter
let viewPagerAdapter = ViewPagerAdapter(); viewPager2.setAdapter(viewPagerAdapter);
8. 设置纵向滚动
// 竖直滚动 // viewPager2.setOrientation(ViewPager2.ORIENTATION_VERTICAL);
9. 定时切换图片
let mHandler = new Handler(); let currentPosition = 0; mHandler.postDelayed(runnable, 1000);
10. 退出时, 移除定时器
events.on("exit", function () { mHandler.removeCallbacks(runnable); log("移除runnable"); });
11. 注册轮播图的滚动事件监听器
viewPager2.registerOnPageChangeCallback( new ViewPager2.OnPageChangeCallback({ onPageSelected: function (position) { this.super$onPageSelected(position); log(position); // 轮播时，改变指示点 let current = position; indicatorContainer.getChildAt(current).setBackgroundColor(colors.parseColor("#ff0000")); if (lastBabyView) { lastBabyView.setBackgroundColor(colors.parseColor("#00ff00")); } lastBabyView = indicatorContainer.getChildAt(current); log(lastBabyView); }, }) );
12. 随机颜色
function getRndColor() { let color = new java.util.Random(); return (randomColor = colors.rgb(color.nextInt(256), color.nextInt(256), color.nextInt(256))); }
参考文章
1. 官方 Viewpager 升级版 - ViewPager2 实战
声明
部分内容来自网络
