HarmonyOS shape 的使用

超、凢脫俗 2022-10-04 14:55 227阅读 0赞

### HarmonyOS shape 吐槽 ###

在说这个shape使用之前先吐槽一下,好像目前版本对shape 总感觉很别扭,因为shape画好之后无法直接看到效果,只能回到布局中才能看到效果,所以大家在使用shape的时候完成之后,先保存然后

直接点击布局上面的刷新这样会比较好一些 具体的位置如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70][]

还有一个特别不好的就是源码里面没注释,如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70 1][]

总体感觉很不好,希望HarmonyOS 后面越来越好,

下面开始说下shape 的使用,由于官方文档上面没后找到shape的使用说明,下面是自己使用的感觉,如果有不对的地方请多多指教,

### shape的存放位置 ###

在resources 里面的graphic里面 具体的如下

![2021071423195034.png][]

### shape的创建 ###

由于目前不能直接在布局中使用ctrl + enter 来创建一个shape 所以我们就点击graphic来创建

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70 2][]

点击之后就是这样的界面

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70 3][]

File name 自己取名字 ,

Root element 里面修改为shape

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70 4][]

点击ok 就创建好了

### shape 的类型 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70 5][]

从上图可以看到有5中类型

1 path 是路径

2 arc 是弧

3 oval 是椭圆

4 line 是线

5 rectangle 是矩形

一般shape 常用的就是椭圆和矩形 ,所以下面就说下这两个的使用

### shape 的里面的属性 ###

1 corners 设置角度

2 stroke 设置边框(这个需要注意width没有提示需要自己手写)

3 solid 设置背景

4 gradient 应该是设置渐变色的,但是attrs里面只有type属性,没有设置渐变色的方法 目前不知道怎么使用(android 的里面我们可以使用起始,中间位置来设置,这里没有属性)

5 注意里面没有size 这个设置,感觉就是要你结合布局使用的.

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70 6][]

5 bounds 这个作用未知,本来以为是设置padding 的,但是设置了没有效果 ,

下面就使用三个属性的属性来画几个效果

### 1 画一个四个圆角的背景 ###

layout 的代码如下

<?xml version="1.0" encoding="utf-8"?>
    <DependentLayout
        xmlns:ohos="http://schemas.huawei.com/res/ohos"
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:alignment="horizontal_center">
    
        <Text
            ohos:id="$+id:text"
            ohos:height="50vp"
            ohos:width="150vp"
            ohos:background_element="$graphic:test_shape"
            ohos:text="喜欢"
            ohos:text_alignment="center"
            ohos:text_size="22fp"
            ohos:top_margin="50vp"/>
    
    </DependentLayout>

shape 代码

<?xml version="1.0" encoding="utf-8"?>
    <shape
        xmlns:ohos="http://schemas.huawei.com/res/ohos"
        ohos:shape="rectangle">
    
        <corners ohos:radius="10vp"/>
    
        <solid ohos:color="#00d8a0"/>
    </shape>

或者

<?xml version="1.0" encoding="utf-8"?>
    <shape
        xmlns:ohos="http://schemas.huawei.com/res/ohos"
        ohos:shape="rectangle">
    
        <corners
            ohos:left_bottom_x="10vp"
            ohos:left_bottom_y="10vp"
            ohos:left_top_x="10vp"
            ohos:left_top_y="10vp"
            ohos:right_bottom_x="10vp"
            ohos:right_bottom_y="10vp"
            ohos:right_top_x="10vp"
            ohos:right_top_y="10vp"/>
    
        <solid ohos:color="#00d8a0"/>
    
    </shape>

效果如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70 7][]

###  2 四个圆角的边框 ###

shape的代码

<?xml version="1.0" encoding="utf-8"?>
    <shape
        xmlns:ohos="http://schemas.huawei.com/res/ohos"
        ohos:shape="rectangle">
    
        <corners ohos:radius="10vp"/>
    
        <stroke
            ohos:color="#00d8a0"
            ohos:width="1vp"/>
    
    </shape>

实现效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70 8][]

当然我们可以通过调节角度话出圆弧的效果如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70 9][]

###  3 绘制一个圆 ###

由于shape里面没有size 这个属性,所以绘制圆的使用需要布局的里面宽和高要一样

布局的代码

<?xml version="1.0" encoding="utf-8"?>
    <DependentLayout
        xmlns:ohos="http://schemas.huawei.com/res/ohos"
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:alignment="horizontal_center">
    
        <Text
            ohos:id="$+id:text"
            ohos:height="150vp"
            ohos:width="150vp"
            ohos:background_element="$graphic:test_shape"
            ohos:text="喜欢"
            ohos:text_alignment="center"
            ohos:text_size="22fp"
            ohos:top_margin="50vp"/>
    
    </DependentLayout>

shape 代码

<?xml version="1.0" encoding="utf-8"?>
    <shape
        xmlns:ohos="http://schemas.huawei.com/res/ohos"
        ohos:shape="rectangle">
    
        <corners ohos:radius="100vp"/>
    
        <solid
            ohos:color="#00d8a0"/>
    
    </shape>

效果如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70 10][]

### 4 绘制一个圆环 ###

shape 代码

<?xml version="1.0" encoding="utf-8"?>
    <shape
        xmlns:ohos="http://schemas.huawei.com/res/ohos"
        ohos:shape="rectangle">
    
        <corners ohos:radius="100vp"/>
    
        <stroke
            ohos:color="#00d8a0"
            ohos:width="15vp"/>
    
    </shape>

效果如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70 11][]

暂时就这么多吧,感觉HarmonyOS 限制了,shape 的绘制,其他的例如渐变色之类的估计

都是代码里面去了,有空在学习代码里面绘制与Android的区别,

总结:1 大家使用的时候由于不能看到效果,还是刷新布局来看效果吧 ,2 stroke使用的时候width 没有提示,需要手写,

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70]: /images/20221004/537e9819c6b441e6a47c3bfcad4de24b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70 1]: /images/20221004/8db772928b204013b25e0888eddc037f.png
[2021071423195034.png]: /images/20221004/23ef02c75e5e4f60b6e62e8ac9f9a6da.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70 2]: /images/20221004/e371d935b8694e61b1be59dc20f212b4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70 3]: /images/20221004/fc0d342344ec4626be08f4ec784cf710.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70 4]: /images/20221004/ef5de931df10423e97993fdfaf22043a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70 5]: /images/20221004/ffcb6282948c477ca02aac7bc86256e2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70 6]: /images/20221004/6b11256ce1d64201ab598c8626c10964.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70 7]: /images/20221004/56357788a3174f97be49be5e9d12444d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70 8]: /images/20221004/21742a55cd564efb8be11ed40b9f3a2c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70 9]: /images/20221004/20cf10fd92ff46d6a7da928f1388bcf8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70 10]: /images/20221004/a276c16e904e472489d08b6714a39b42.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70 11]: /images/20221004/353f936102e9451284c5e6df59cfd804.png