使用场景
轮播图
效果展示
autojs版本
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 实战
声明
部分内容来自网络
微信公众号 AutoJsPro教程
QQ群
747748653