开发台组件扩展——矩形和圆

LiePy

已于 2022-04-02 10:32:14 修改

阅读量123

点赞数

分类专栏： 53iq开发台文章标签： android

于 2022-03-22 16:58:50 首次发布

本文链接：https://blog.csdn.net/LiePy/article/details/123663560

版权

53iq开发台专栏收录该内容

7 篇文章 0 订阅

订阅专栏

开发台组件扩展——矩形和圆

准备工作
一、新增矩形组件
一、新增圆组件

基于现有文本组件的转换规则，增加以下内容

准备工作

无

一、新增矩形组件

操作示例

开发台新建矩形组件

此时开发台配置参数如下：

					{
                        "events": {},
                        "iconName": "wk-icon-widget-filled-r",
                        "uuid": "9q15bvfFE",
                        "isLock": false,
                        "areaState": false,
                        "ID": 0,
                        "component": "brick-rectangle",
                        "style": {
                            "borderRadius": 0,
                            "left": 0,
                            "fill": 1,
                            "width": 250,
                            "rotate": 0,
                            "top": 0,
                            "height": 60,
                            "backgroundColor": "#DEDEDE"
                        },
                        "control": {},
                        "title": "矩形",
                        "name": ""
                    }

转换规则

xml文件：

在drawable目录下创建shape_9q15bvffe.xml文件

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <!--    圆角 borderRadius-->
    <corners android:radius="20px" />

    <!--    填充色 borderColor， 若是空心（fill = 0），则#后加00，代表透明度为完全透明-->
    <solid android:color="#DEDEDE" />

    <!--    描边 borderStyle-->
    <stroke
        android:width="1dp"
        android:color="#DEDEDE"
        android:dashGap="0dp"
        android:dashWidth="0dp"/>

    <size android:width="50dp"
        android:height="50dp"/>
</shape>

在该页面的fragment xml布局文件中添加组件View

	<View
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="150dp"
        android:background="@drawable/shape_9q15bvffe"/>

kt文件：

无

一、新增圆组件

操作示例

开发台新建矩形组件

此时开发台配置参数如下：

					{
                        "events": {},
                        "iconName": "wk-icon-widget-round",
                        "uuid": "B0zUUr5ph",
                        "isLock": false,
                        "areaState": false,
                        "ID": 0,
                        "component": "brick-round",
                        "style": {
                            "fill": 1,
                            "width": 150,
                            "rotate": 0,
                            "top": 0,
                            "backgroundColor": "#DEDEDE",
                            "left": 0,
                            "height": 150
                        },
                        "control": {},
                        "title": "圆",
                        "name": ""
                    }

转换规则

xml文件：

在drawable目录下创建shape_b0zuur5ph.xml文件

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    android:useLevel="false">

    <!--    填充色 8位前两位代表透明度，00是完全透明，空心时(fill = 0)据此实现-->
    <solid android:color="#00DEDEDE" />

    <!--    描边-->
    <stroke
        android:width="1dp"
        android:color="@color/white" />

</shape>

在该页面的fragment xml布局文件中添加组件View，同上矩形

	<View
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="150dp"
        android:background="@drawable/shape_b0zuur5ph"/>