autojs之彩色下拉框

作者: 牙叔

使用情景: 做个彩色下拉框

autojs之彩色下拉框_第1张图片


原理:

重写下拉框的适配器, 在适配器的getView方法中, 添加随机颜色做背景

难点:

  • 理解适配器的作用
  • autojs实现抽象类的继承

抽象类的继承

  1. 我自己是这么干的
  2. 在android studio中新建类, 继承BaseAdapter, 重写必要的方法
  3. 打包成jar文件, 给autojs使用, 就实现了autojs使用抽象类的目的

代码详解

  1. 加载jar中的类

    let dexFilePath = files.join("./classes.dex");
    runtime.loadDex(dexFilePath);
    importClass(com.yashu.extendsbaseadapter.CustomizedAdapter);
    
  2. 简单的布局

    ui.layout(
      <vertical id="parent" bg="{
           {themeColor}}">
        <button id="btn">点击打开AutoJsPro简介</button>
        <horizontal>
          <text textSize="25sp" h="match_parent" gravity="center">
            下拉框
          </text>
          <spinner id="spinner" layout_weight="1" margin="10"></spinner>
        </horizontal>
      </vertical>
    );
    
  3. 下个循环周期获取下拉框宽度, 第一个循环周期下拉框宽度是0

    let spinner = ui.spinner;
    let width;
    setTimeout(() => {
           
      width = spinner.getWidth();
      setSpinnerAdapter(spinner);
    }, 50);
    
  4. 下拉框条目的布局

      let boxXml = (
        <card layout_width="{
           {width}}px" cardCornerRadius="10">
          <horizontal id="spinnerBgColor" layout_width="{
           {width}}px" layout_height="wrap_content">
            <img id="img"></img>
            <text id="name" textSize="20sp"></text>
          </horizontal>
        </card>
      );
    
  5. 生成数据

      let dataList = [
        "百兽凯多, 海陆空最强生物, 三界单挑王",
        "红发香克斯, 拥有最强霸王色",
        "黑胡子, 马歇尔·D·蒂奇, 最凶恶的自然系与最强的超人系双重拥有者,顶上战争最大赢家",
        "蒙奇·D·多拉格, 听别人说他很强,非常的强",
        "吉拉克尔·米霍克, 最强的剑客, 只要是剑客都以其为尊,万剑之宗,万剑之王,天下第一剑,米孤城,吉尔吹雪, 天不生我米霍克,万古剑道如长夜",
        "五老星, 五大流氓, 拥有至高无上的权力, 原磁鼓王国国王现黑暗磁鼓王国国王瓦尔波在世界会议上提出废止五老星一票否决权的提案被五老星一票否决",
        "索隆, 最强路痴, 罗杰:one piece在哪里,只有索隆知道。  索隆:恩,我现在是在哪里?",
        "巴基, 小丑, 战场上面不改色,厉声斥责号称世界最强的男人, 谈笑有四皇,往来皆大将, 年轻时就已见证大秘宝,成功环游世界,却甘于平淡",
        "乌索普, 吹牛大王, 极端消极, 勇敢的海上战士",
      ];
      var len = dataList.length;
      for (var i = 0; i < len; i++) {
           
        let data = dataList[i];
        let obj;
        if ((i & 1) === 0) {
           
          obj = {
            name: data, src: "@drawable/ic_brightness_4_black_48dp" };
        } else {
           
          obj = {
            name: data, src: "@drawable/ic_brightness_5_black_48dp" };
        }
        dataList[i] = obj;
      }
    
  6. 重写adapter

      function createAdapter(dataList) {
           
        let adapter = JavaAdapter(CustomizedAdapter, {
           
          getCount: function () {
           
            return dataList.length;
          },
          getItem: function (position) {
           
            return dataList[position];
          },
          getItemId: function (position) {
           
            return position;
          },
          getView: function (position, convertView, parent) {
           
            if (!convertView) {
           
              convertView = ui.inflate(boxXml, ui.parent, false);
            }
            let item = dataList[position];
            convertView.spinnerBgColor.setBackgroundColor(rndColor());
            convertView.name.setText(item.name);
            convertView.img.attr("src", item.src);
    
            return convertView;
          },
        });
        return adapter;
      }
    
  7. 生成随机颜色

    function rndNum(min, max) {
           
      return Math.floor(Math.random() * (max - min + 1) + min);
    }
    function rndColor() {
           
      return colors.argb(66, random(0, 255), random(0, 255), random(0, 255));
    }
    
  8. 设置adapter

    spinner.setAdapter(createAdapter(dataList));
    
  9. 效果展示

  10. 完整源码

  11. jar文件, 关注公众号【AutoJsPro教程】, 回复 下拉框jar , 即可领取


更多干货,关注 @autojs

我这个不一定最优秀、但一定最实诚的公众号博主。
autojs之彩色下拉框_第2张图片

码字不易,但求一赞,江湖再会。

你可能感兴趣的:(autojs,下拉框,adapter,安卓,ui设计,适配器模式,android,javascript)