AI 助理
备案控制台
开发者社区 云计算 文章 正文

autojs之彩色按钮

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

作者: 牙叔


使用场景:


展示彩虹色的按钮


效果展示:


仅为演示功能, 未做美化

微信图片_20220624130601.jpg


原理


  • 代码一共展示了十几种效果,全部都是文字控件
  • 十几种效果分为两类
  • 文字的颜色
  • 背景的颜色
  • 文字的颜色
  • 文字之所以显示在屏幕上, 是因为有一支笔在屏幕上写字
  • 这支笔我们可以改变他的颜色, 甚至用图片替换颜色, 这样笔, 可以涂色, 也可以涂图片
  • 是管理文字的笔哦, 不是背景色, 请区分
  • 背景的颜色
  • 背景和文字一样, 也是有画笔的
  • 背景也可以是文字, 也可以是图片, 这都可以通过画笔来修改
  • 如果是图片, 可以直接用imageView, 按钮一般不用图片
  • 颜色
  • 纯色 gradientDrawable.setColor(Color.BLUE);
  • 渐变色 gradientDrawable.setColors(colorArr);
  • 圆角
  • 统一设置圆角 gradientDrawable.setCornerRadius(30);
  • 圆角分别设置
"ui";
importClass(android.graphics.Color);
importClass(android.graphics.drawable.GradientDrawable);
importClass(android.text.Spannable);
importClass(android.text.SpannableStringBuilder);
importClass(android.text.style.ForegroundColorSpan);
importClass(android.graphics.LinearGradient);
importClass(android.graphics.Shader);
importClass(android.graphics.Bitmap);
importClass("android.graphics.BitmapFactory");
importClass(android.graphics.BitmapShader);
ui.layout(
  <vertical margin="16 16 16 16">
    <text textStyle="bold" textSize="30sp" layout_weight="1" gravity="center">
      彩色按钮
    </text>
    <horizontal marginBottom="10">
      <text textSize="32sp" h="*" gravity="center" marginRight="20">
        图片
      </text>
      <text id="textView1" w="wrap_content" textSize="8sp" bg="#ff83acad">
        牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔
        牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔
        牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔
        牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔
        牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔
        牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔
        牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔
      </text>
    </horizontal>
    <horizontal marginBottom="10">
      <text textSize="32sp" h="*" gravity="center" marginRight="20">
        渐变色
      </text>
      <text id="textView2" w="wrap_content" textSize="24sp">
        牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔牙叔
      </text>
    </horizontal>
    <horizontal marginBottom="10">
      <text textSize="32sp" h="*" gravity="center" marginRight="20">
        多色
      </text>
      <text id="textView3" w="wrap_content" textSize="32sp">
        牙叔牙叔牙叔
      </text>
    </horizontal>
    <horizontal marginBottom="10">
      <text textSize="32sp" h="*" gravity="center" marginRight="20">
        圆角矩形
      </text>
      <text id="textView4" w="wrap_content" textSize="32sp" padding="6 6 6 6">
        牙叔牙叔牙叔
      </text>
    </horizontal>
    <horizontal marginBottom="10">
      <text textSize="24sp" h="*" gravity="center" marginRight="20">
        圆角矩形带边框
      </text>
      <text id="textView5" w="wrap_content" textSize="24sp" padding="6 6 6 6">
        牙叔牙叔牙叔
      </text>
    </horizontal>
    <horizontal marginBottom="10">
      <text id="textView6" w="wrap_content" textSize="24sp" textColor="#ffffff" marginRight="10" padding="6 6 6 6">
        纯色背景
      </text>
      <text id="textView7" w="wrap_content" textSize="24sp" textColor="#ffffff" marginRight="10" padding="6 6 6 6">
        圆角
      </text>
    </horizontal>
    <horizontal marginBottom="10">
      <text
        id="textView8"
        w="0"
        layout_weight="1"
        textSize="24sp"
        textColor="#ffffff"
        marginRight="10"
        padding="6 6 6 6"
      >
        渐变1
      </text>
      <text
        id="textView9"
        w="0"
        layout_weight="1"
        textSize="24sp"
        textColor="#ffffff"
        marginRight="10"
        padding="6 6 6 6"
      >
        渐变2
      </text>
      <text
        id="textView10"
        w="0"
        layout_weight="1"
        textSize="24sp"
        textColor="#ffffff"
        marginRight="10"
        padding="6 6 6 6"
      >
        渐变3
      </text>
    </horizontal>
    <horizontal marginBottom="10">
      <text
        id="textView11"
        w="0"
        layout_weight="1"
        textSize="24sp"
        textColor="#ffffff"
        marginRight="10"
        padding="6 6 6 6"
      >
        半径渐变
      </text>
      <text
        id="textView12"
        w="0"
        layout_weight="1"
        textSize="24sp"
        textColor="#000000"
        marginRight="10"
        padding="6 6 6 6"
      >
        虚线
      </text>
      <text
        id="textView13"
        w="0"
        layout_weight="1"
        textSize="24sp"
        textColor="#000000"
        marginRight="10"
        padding="6 6 6 6"
      >
        虚线矩形
      </text>
    </horizontal>
    <horizontal marginBottom="10">
      <text
        id="textView14"
        w="0"
        layout_weight="1"
        textSize="24sp"
        textColor="#ffffff"
        marginRight="10"
        padding="6 6 6 6"
        gravity="center"
      >
        不同的圆角
      </text>
    </horizontal>
    <text textStyle="bold" textSize="60sp" layout_weight="1" gravity="center">
      作者: 牙叔
    </text>
  </vertical>
);
let view;
view = ui.textView1;
setTextPaintShaderImg(view);
view = ui.textView2;
setTextPaintShaderGradientColor(view);
view = ui.textView3;
setTextPaintShaderMultipleColors(view);
view = ui.textView4;
setBackgroundRoundedRectangle(view);
view = ui.textView5;
setBackgroundRoundedRectangleWithBorder(view);
view = ui.textView6;
setBackgroundPureColour(view);
view = ui.textView7;
setBackgroundRoundRounded(view);
view = ui.textView8;
setBackgroundRoundGradientColor(view, "leftRight");
view = ui.textView9;
setBackgroundRoundGradientColor(view, "upDown");
view = ui.textView10;
setBackgroundRoundGradientColor(view, "topLeftToBottomRight");
view = ui.textView11;
setBackgroundRoundGradientColor(view, "RADIAL_GRADIENT");
view = ui.textView12;
setBackgroundRoundGradientDottedLine(view);
view = ui.textView13;
setBackgroundRoundGradientDottedRectangle(view);
view = ui.textView14;
setBackgroundRoundGradientCornerRadii(view);
// ====================自定义函数===============================================================================================
function setBackgroundRoundGradientCornerRadii(view) {
  gradientDrawable = new GradientDrawable();
  gradientDrawable.setShape(GradientDrawable.RECTANGLE);
  gradientDrawable.setColor(colors.parseColor("#7c5352"));
  gradientDrawable.setStroke(10, Color.BLUE);
  // gradientDrawable.setCornerRadius(10);
  //1、2两个参数表示左上角，3、4表示右上角，5、6表示右下角，7、8表示左下角
  let radiusArr = util.java.array("float", 8);
  radiusArr[0] = 10;
  radiusArr[1] = 20;
  radiusArr[2] = 30;
  radiusArr[3] = 40;
  radiusArr[4] = 50;
  radiusArr[5] = 60;
  radiusArr[6] = 70;
  radiusArr[7] = 80;
  gradientDrawable.setCornerRadii(radiusArr);
  gradientDrawable.setSize(50, 50);
  view.setBackground(gradientDrawable);
}
function setBackgroundRoundGradientDottedRectangle(view) {
  gradientDrawable = new GradientDrawable();
  gradientDrawable.setShape(GradientDrawable.LINEAR_GRADIENT);
  gradientDrawable.setStroke(10, Color.GREEN, 30, 30);
  view.setBackground(gradientDrawable);
}
function setBackgroundRoundGradientDottedLine(view) {
  view.setLayerType(android.view.View.LAYER_TYPE_SOFTWARE, null); //要显示虚线一定要关闭硬件加速
  gradientDrawable = new GradientDrawable();
  gradientDrawable.setShape(GradientDrawable.LINE);
  gradientDrawable.setStroke(8, Color.BLACK, 20, 10); //第一个参数为线的宽度  第二个参数是线的颜色 第三个参数是虚线段的长度 第四个参数是虚线段之间的间距长度
  view.setBackground(gradientDrawable);
}
function setBackgroundRoundGradientColor(view, directionType) {
  let colorArr = util.java.array("int", 5);
  colorArr[0] = rndColor();
  colorArr[1] = rndColor();
  colorArr[2] = rndColor();
  colorArr[3] = rndColor();
  colorArr[4] = rndColor();
  gradientDrawable = new GradientDrawable();
  gradientDrawable.setShape(GradientDrawable.RECTANGLE);
  gradientDrawable.setColors(colorArr); //添加颜色组
  gradientDrawable.setGradientType(GradientDrawable.LINEAR_GRADIENT); //设置线性渐变
  switch (directionType) {
    case "leftRight":
      gradientDrawable.setOrientation(GradientDrawable.Orientation.LEFT_RIGHT); //设置渐变方向
      break;
    case "upDown":
      gradientDrawable.setOrientation(GradientDrawable.Orientation.TOP_BOTTOM); //设置渐变方向
      break;
    case "topLeftToBottomRight":
      gradientDrawable.setOrientation(GradientDrawable.Orientation.TL_BR); //设置渐变方向
      break;
    case "RADIAL_GRADIENT":
      gradientDrawable.setGradientType(GradientDrawable.RADIAL_GRADIENT); //设置半径渐变
      gradientDrawable.setGradientRadius(330); //渐变的半径值
      break;
  }
  gradientDrawable.setSize(100, 100);
  view.setBackground(gradientDrawable);
}
function setBackgroundRoundRounded(view) {
  gradientDrawable = new GradientDrawable();
  gradientDrawable.setShape(GradientDrawable.RECTANGLE);
  gradientDrawable.setColor(Color.BLUE);
  gradientDrawable.setCornerRadius(30);
  gradientDrawable.setSize(50, 50);
  view.setBackground(gradientDrawable);
}
function setBackgroundPureColour(view) {
  gradientDrawable = new GradientDrawable();
  gradientDrawable.setShape(GradientDrawable.RECTANGLE);
  gradientDrawable.setColor(Color.BLUE);
  gradientDrawable.setCornerRadius(10);
  gradientDrawable.setSize(50, 50);
  view.setBackground(gradientDrawable);
}
function setBackgroundRoundedRectangleWithBorder(view) {
  gradientDrawable = new GradientDrawable();
  gradientDrawable.setShape(GradientDrawable.RECTANGLE);
  gradientDrawable.setColor(Color.RED);
  gradientDrawable.setStroke(10, Color.BLUE);
  gradientDrawable.setCornerRadius(10);
  gradientDrawable.setSize(50, 50);
  view.setBackground(gradientDrawable);
}
function setBackgroundRoundedRectangle(view) {
  gradientDrawable = new GradientDrawable();
  gradientDrawable.setShape(GradientDrawable.RECTANGLE);
  gradientDrawable.setStroke(10, Color.BLUE);
  gradientDrawable.setCornerRadius(10);
  gradientDrawable.setSize(50, 50);
  view.setBackground(gradientDrawable);
}
function setTextPaintShaderMultipleColors(textView) {
  let style = new SpannableStringBuilder("牙叔牙叔牙叔");
  style.setSpan(new ForegroundColorSpan(rndColor()), 0, 2, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
  style.setSpan(new ForegroundColorSpan(rndColor()), 2, 4, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
  style.setSpan(new ForegroundColorSpan(rndColor()), 4, 6, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
  textView.setText(style);
}
function setTextPaintShaderGradientColor(textView) {
  let colorArr = util.java.array("int", 5);
  colorArr[0] = rndColor();
  colorArr[1] = rndColor();
  colorArr[2] = rndColor();
  colorArr[3] = rndColor();
  colorArr[4] = rndColor();
  mShader = new LinearGradient(0, 0, 100, 100, colorArr, null, Shader.TileMode.REPEAT);
  textView.getPaint().setShader(mShader);
  textView.invalidate();
}
function setTextPaintShaderImg(textView) {
  let mBmp = BitmapFactory.decodeFile(files.path("./res/autojs.png"));
  let mShader = new BitmapShader(mBmp, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
  textView.getPaint().setShader(mShader);
  textView.invalidate();
}
function rndColor() {
  return colors.rgb(random(0, 255), random(0, 255), random(0, 255));
}
function rndNum(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}
小凡晓宇
目录
相关文章
小凡晓宇
|
Android开发
autojs修改悬浮窗按钮点击事件
牙叔教程 简单易懂
小凡晓宇
1564 0
小凡晓宇
|
测试技术 Android开发
autojs横屏截图的正确姿势
牙叔教程 简单易懂
小凡晓宇
3294 0
小凡晓宇
|
Android开发
autojs无Root访问data目录实现
牙叔教程 简单易懂
小凡晓宇
2815 0
小凡晓宇
|
Android开发
autojs之保活
autojs打包的app经常在后台被杀,请做到以下几点来保活: autojs版本号
小凡晓宇
2452 0
autojs之保活
小凡晓宇
autojs普通版控制台美化
autojs普通版控制台美化
小凡晓宇
1136 0
小凡晓宇
|
人工智能 前端开发 Java
autojs非常见函数1
牙叔教程 简单易懂
小凡晓宇
2357 0
Java开发者
|
Java 数据安全/隐私保护
Java 封装详解
在 Java 中，封装是面向对象编程的关键特性，通过将对象的状态（数据）和行为（方法）结合并利用访问控制保护数据，防止外部随意访问和修改。主要特点包括访问控制（如 `private` 和 `protected`）、数据隐藏及方法暴露（如 getter 和 setter）。封装的优点在于保护数据、隐藏实现细节、易于维护以及提高代码可读性。下面是一个简单的 `Person` 类封装示例，展示了如何通过 getter 和 setter 控制对类内部状态的访问，并进行合法性检查。总结而言，封装有助于构建清晰、易用且可维护的代码结构，是编写高质量 Java 程序的重要原则。
Java开发者
376 7
游客h2vchmlwqitbk
|
Windows
【已解决】电脑更新系统之后，键盘失灵了怎么办？
【已解决】电脑更新系统之后，键盘失灵了怎么办？
游客h2vchmlwqitbk
629 1
亚丁号
|
数据安全/隐私保护
AutoJs源码---源码大分享
AutoJs源码---源码大分享
亚丁号
705 0
小凡晓宇
|
XML Java Android开发
autojs自定义控件-导航栏
目前自定义控件可以控制的属性: ● 颜色 ● 宽度 ● 图片宽高 ● 绑定viewpager recyclerview的高度是由 文字 + 图片 控制的, 所以就不用设置recyclerview的高度
小凡晓宇
859 0