ShapeView

Shape 支持在布局中直接定义啦，支持设置阴影，文字渐变色，状态选择器

Generate Convert Improve

Install / Use

/learn @getActivity/ShapeView

About this skill

Quality Score

0/100

README

English Doc

ShapeView 框架

项目地址：Github
博客介绍：震惊，没想到 Shape 也可以这么写
可以扫码下载 Demo 进行演示或者测试，如果扫码下载不了的，点击此处可直接下载

集成步骤

如果你的项目 Gradle 配置是在 7.0 以下，需要在 build.gradle 文件中加入

allprojects {
    repositories {
        // JitPack 远程仓库：https://jitpack.io
        maven { url 'https://jitpack.io' }
    }
}

如果你的 Gradle 配置是 7.0 及以上，则需要在 settings.gradle 文件中加入

dependencyResolutionManagement {
    repositories {
        // JitPack 远程仓库：https://jitpack.io
        maven { url 'https://jitpack.io' }
    }
}

配置完远程仓库后，在项目 app 模块下的 build.gradle 文件中加入远程依赖

android {
    // 支持 JDK 1.8
    compileOptions {
        targetCompatibility JavaVersion.VERSION_1_8
        sourceCompatibility JavaVersion.VERSION_1_8
    }
}

dependencies {
    // ShapeView：https://github.com/getActivity/ShapeView
    implementation 'com.github.getActivity:ShapeView:10.0'
    // ShapeDrawable：https://github.com/getActivity/ShapeDrawable
    implementation 'com.github.getActivity:ShapeDrawable:3.3'
}

AndroidX 兼容

如果项目是基于 AndroidX 库，请在项目 gradle.properties 文件中加入以下配置，如果已经加入则可以忽略

# 表示使用 AndroidX
android.useAndroidX = true
# 表示将第三方库迁移到 AndroidX
android.enableJetifier = true

如果项目是基于 Support 库则不需要加入此配置

框架文档

Java 代码设置

ShapeButton shapeButton = findViewById(R.id.btn_main_test);
shapeButton.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
    
        shapeButton.getShapeDrawableBuilder()
                .setSolidColor(0xFF000000)
                .setStrokeColor(0xFF5A8DDF)
                // 注意：最后需要调用一下 intoBackground 方法才能生效
                .intoBackground();

        shapeButton.getTextColorBuilder()
                .setTextColor(0xFFFFFFFF)
                // 注意：最后需要调用一下 intoTextColor 方法才能生效
                .intoTextColor();

        shapeButton.setText("颜色已经改变啦");
    }
});

布局属性大全

不同版本的 xml 属性适配请点击这里查看

<resources>

    <!-- Shape 形状（默认是矩形） -->
    <attr name="shape_type">
        <!-- 矩形 -->
        <enum name="rectangle" value="0" />
        <!-- 椭圆形 -->
        <enum name="oval" value="1" />
        <!-- 线条 -->
        <enum name="line" value="2" />
        <!-- 圆环 -->
        <enum name="ring" value="3" />
    </attr>
    
    <!-- Shape 宽度 -->
    <attr name="shape_width" format="dimension" />
    <!-- Shape 高度 -->
    <attr name="shape_height" format="dimension" />

    <!-- 圆角大小 -->
    <attr name="shape_radius" format="dimension" />
    <!-- 左上角的圆角大小 -->
    <attr name="shape_radiusInTopLeft" format="dimension" />
    <attr name="shape_radiusInTopStart" format="dimension" />
    <!-- 右上角的圆角大小 -->
    <attr name="shape_radiusInTopRight" format="dimension" />
    <attr name="shape_radiusInTopEnd" format="dimension" />
    <!-- 左下角的圆角大小 -->
    <attr name="shape_radiusInBottomLeft" format="dimension" />
    <attr name="shape_radiusInBottomStart" format="dimension" />
    <!-- 右下角的圆角大小 -->
    <attr name="shape_radiusInBottomRight" format="dimension" />
    <attr name="shape_radiusInBottomEnd" format="dimension" />

    <!-- 填充色（默认状态） -->
    <attr name="shape_solidColor" format="color" />
    <!-- 填充色（按下状态） -->
    <attr name="shape_solidPressedColor" format="color" />
    <!-- 填充色（选中状态） -->
    <attr name="shape_solidCheckedColor" format="color" />
    <!-- 填充色（禁用状态） -->
    <attr name="shape_solidDisabledColor" format="color" />
    <!-- 填充色（焦点状态） -->
    <attr name="shape_solidFocusedColor" format="color" />
    <!-- 填充色（选择状态） -->
    <attr name="shape_solidSelectedColor" format="color" />

    <!-- 填充色渐变色起始颜色 -->
    <attr name="shape_solidGradientStartColor" format="color" />
    <!-- 填充色渐变色中间颜色（可不设置） -->
    <attr name="shape_solidGradientCenterColor" format="color" />
    <!-- 填充色渐变色结束颜色 -->
    <attr name="shape_solidGradientEndColor" format="color" />

    <!-- 填充色渐变方向（仅用于线性渐变） -->
    <attr name="shape_solidGradientOrientation" >
        <!-- 从左到右绘制渐变（0 度） -->
        <enum name="leftToRight" value="0" />
        <enum name="startToEnd" value="10" />

        <!-- 从右到左绘制渐变（180 度） -->
        <enum name="rightToLeft" value="180" />
        <enum name="endToStart" value="1800" />

        <!-- 从下到上绘制渐变（90 度） -->
        <enum name="bottomToTop" value="90" />
        <!-- 从上到下绘制渐变（270 度） -->
        <enum name="topToBottom" value="270" />

        <!-- 从左上角到右下角绘制渐变（315 度） -->
        <enum name="topLeftToBottomRight" value="315" />
        <enum name="topStartToBottomEnd" value="3150" />

        <!-- 从左下角到右上角绘制渐变（45 度） -->
        <enum name="bottomLeftToTopRight" value="45" />
        <enum name="bottomStartToTopEnd" value="450" />

        <!-- 从右上角到左下角绘制渐变（225 度） -->
        <enum name="topRightToBottomLeft" value="225" />
        <enum name="topEndToBottomStart" value="2250" />

        <!-- 从右下角到左上角绘制渐变（135 度） -->
        <enum name="bottomRightToTopLeft" value="135" />
        <enum name="bottomEndToTopStart" value="1350" />
    </attr>
    <!-- 填充色渐变类型（默认类型是线性渐变） -->
    <attr name="shape_solidGradientType">
        <!-- 线性渐变 -->
        <enum name="linear" value="0" />
        <!-- 径向渐变 -->
        <enum name="radial" value="1" />
        <!-- 扫描渐变 -->
        <enum name="sweep"  value="2" />
    </attr>
    <!-- 填充色渐变中心 X 点坐标的相对位置（默认值为 0.5）-->
    <attr name="shape_solidGradientCenterX" format="float|fraction" />
    <!-- 填充色渐变中心 Y 点坐标的相对位置（默认值为 0.5）-->
    <attr name="shape_solidGradientCenterY" format="float|fraction" />
    <!-- 填充色渐变色半径（仅用于径向渐变） -->
    <attr name="shape_solidGradientRadius" format="float|fraction|dimension" />

    <!-- 边框色（默认状态） -->
    <attr name="shape_strokeColor" format="color" />
    <!-- 边框色（按下状态） -->
    <attr name="shape_strokePressedColor" format="color" />
    <!-- 边框色（选中状态） -->
    <attr name="shape_strokeCheckedColor" format="color" />
    <!-- 边框色（禁用状态） -->
    <attr name="shape_strokeDisabledColor" format="color" />
    <!-- 边框色（焦点状态） -->
    <attr name="shape_strokeFocusedColor" format="color" />
    <!-- 边框色（选择状态） -->
    <attr name="shape_strokeSelectedColor" format="color" />

    <!-- 边框色渐变色起始颜色 -->
    <attr name="shape_strokeGradientStartColor" format="color" />
    <!-- 边框渐变色中间颜色（可不设置） -->
    <attr name="shape_strokeGradientCenterColor" format="color" />
    <!-- 边框渐变色结束颜色 -->
    <attr name="shape_strokeGradientEndColor" format="color" />

    <!-- 边框色渐变方向（仅用于线性渐变） -->
    <attr name="shape_strokeGradientOrientation" >
        <!-- 从左到右绘制渐变（0 度） -->
        <enum name="leftToRight" value="0" />
        <enum name="startToEnd" value="10" />

        <!-- 从右到左绘制渐变（180 度） -->
        <enum name="rightToLeft" value="180" />
        <enum name="endToStart" value="1800" />

        <!-- 从下到上绘制渐变（90 度） -->
        <enum name="bottomToTop" value="90" />
        <!-- 从上到下绘制渐变（270 度） -->
        <enum name="topToBottom" value="270" />

        <!-- 从左上角到右下角绘制渐变（315 度） -->
        <enum name="topLeftToBottomRight" value="315" />
        <enum name="topStartToBottomEnd" value="3150" />

        <!-- 从左下角到右上角绘制渐变（45 度） -->
        <enum name="bottomLeftToTopRight" value="45" />
        <enum name="bottomStartToTopEnd" value="450" />

        <!-- 从右上角到左下角绘制渐变（225 度） -->
        <enum name="topRightToBottomLeft" value="225" />
        <enum name="topEndToBottomStart" value="2250" />

        <!-- 从右下角到左上角绘制渐变（135 度） -->
        <enum name="bottomRightToTopLeft" value="135" />
        <enum name="bottomEndToTopStart" value="1350" />
    </attr>

    <!-- 边框大小 -->
    <attr name="shape_strokeSize" format="dimension" />
    <!-- 边框虚线大小（为 0 就是实线，大于 0 就是虚线） -->
    <attr name="shape_strokeDashSize" format="dimension" />
    <!-- 边框虚线间隔（虚线与虚线之间的间隔） -->
    <attr name="shape_strokeDashGap" format="dimension" />

    <!-- 阴影大小 -->
    <attr name="shape_shadowSize" format="dimension" />
    <!-- 阴影颜色 -->
    <attr name="shape_shadowColor" format="color" />
    <!-- 阴影水平偏移 -->
    <attr name="shape_shadowOffsetX" format="dimension" />
    <!-- 阴影垂直偏移 -->
    <attr name="shape_shadowOffsetY" format="dimension" />

    <!-- 内环的半径（仅在 shape="ring" 生效） -->
    <attr name="shape_ringInnerRadiusSize" format="dimension" />
    <!-- 内环的半径比率（仅在 shape="ring" 生效），计算公式：整个圆环 / innerRadiusRatio = innerRadius -->
    <attr name="shape_ringInnerRadiusRatio" format="float" />
    <!-- 外环的厚度（仅在 shape="ring" 生效） -->
    <attr name="shape_ringThicknessSize" format="dimension" />
    <!-- 外环的厚度比率（仅在 shape="ring" 生效），计算公式：整个圆环 / thicknessRatio = thickness -->
    <attr name="shape_ringThicknessRatio" format="float" />

    <!-- 线条重心（仅在 shape="line" 生效） -->
    <attr name="shape_lineGravity">
        <flag name="top" value="0x30" />
        <flag name="bottom" value="0x50" />
        <flag name="left" value="0x03" />
        <flag name="right" value="0x05" />
        <flag name="start" value="0x00800003" />
        <flag name="end" value="0x00800005" />
        <flag name="center" value="0x11" />
    </attr>

    <!-- 文本色（默认状态） -->
    <attr name="shape_textColor" format="color" />
    <!-- 文本色（按下状态） -->
    <attr name="shape_textPressedColor" format="color" />
    <!-- 文本色（选中状态） -->
    <attr name="shape_textCheckedColor" format="color" />
    <!-- 文本色（禁用状态） -->
    <attr name="shape_textDisabledColor" format="color" />
    <!-- 文本色（焦点状态） -->
    <attr name="shape_textFocusedColor" format="color" />
    <!-- 文本色（选择状态） -->
    <attr name="shape_textSelectedColor" format="color" />

    <!-- 文本渐变色起始颜色 -->
    <attr name="shape_textStartColor" format="color" />
    <!-- 文本渐变色中间颜色（可不设置） -->
    <attr name="shape_textCenterColor" format="color" />
    <!-- 文本渐变色结束颜色 -->
    <attr name="shape_textEndColor" format="color" />
    <!-- 文本渐变方向（默认类型是水平渐变） -->
    <attr name="shape_textGradientOrientation">

Related Skills

node-connect

336.9k

Diagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps

frontend-design

83.0k

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

openai-whisper-api

336.9k

Transcribe audio via OpenAI Audio Transcriptions API (Whisper).

commit-push-pr

83.0k

Commit, push, and open a PR