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

autojs之彩色按钮

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

作者: 牙叔


使用场景:


展示彩虹色的按钮


效果展示:


仅为演示功能, 未做美化

微信图片_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);
}
小凡晓宇
目录
相关文章
gswnlrt2j7wj6
|
2月前
03-pycharm自定义背景图，写代码能看美女，就是这么优雅
03-pycharm自定义背景图，写代码能看美女，就是这么优雅
gswnlrt2j7wj6
15 0
Y2000104
|
3月前
|
API
uniapp点击图片放大预览
uniapp点击图片放大预览
Y2000104
234 0
Meteor.792
Photoshop制作白色可爱音乐播放图标面板（一）
Photoshop制作白色可爱音乐播放图标面板
Meteor.792
73 0
Meteor.792
Photoshop制作白色可爱音乐播放图标面板（二）
Photoshop制作白色可爱音乐播放图标面板
Meteor.792
54 0
游客fcvboot535try
|
自然语言处理 C++
制作有道词典——标题栏
制作有道词典——标题栏
游客fcvboot535try
163 0
制作有道词典——标题栏
一颗优雅草科技
|
JSON Android开发 数据格式
原生app开发技巧——底部导航栏动画效果按钮制作方法之采用photoshop制作gif动画-过渡动画关键帧
原生app开发技巧——底部导航栏动画效果按钮制作方法之采用photoshop制作gif动画-过渡动画关键帧
一颗优雅草科技
162 0
原生app开发技巧——底部导航栏动画效果按钮制作方法之采用photoshop制作gif动画-过渡动画关键帧
3oixkwas4wki6
|
图形学
PPT制作三大技巧：图标 、图片背景透明和自动函数
PPT制作三大技巧：图标 、图片背景透明和自动函数
3oixkwas4wki6
267 0
PPT制作三大技巧：图标 、图片背景透明和自动函数
小凡晓宇
|
Java Android开发
autojs之彩色下拉框
作者: 牙叔 使用情景: 做个彩色下拉框
小凡晓宇
417 0
autojs之彩色下拉框
小凡晓宇
|
缓存 Android开发
autojs放大镜
autojs放大镜
小凡晓宇
266 0
小凡晓宇
|
Android开发
autojs状态栏歌词
牙叔教程 简单易懂
小凡晓宇
257 0