autojs之轮播图-阿里云开发者社区

autojs之轮播图

2022-06-25 235

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 使用场景轮播图

使用场景

轮播图

效果展示

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 实战

声明

部分内容来自网络