22. 美化组件

美化外形

组件外形(方形 -> 圆角，胶囊形，圆形)

组件边框(有无边框，颜色，粗细)

背景颜色(有色号就行)

背景渐变(线形或者辐射形)

美化状态

组件在不同状态时显示不同的样式。

暂时掌握三中状态:

默认状态 (所有组件都有默认状态)
按下状态 (组件按下不松时的状态)
选中状态 (开关组件，多选按钮，单选按钮的开启状态)

graphic包中的shape标签

说明：

在graphic包中新建xml，根标签为:shape就可以自定义组件的形状。

根标签:shape
根标签包含一个属性:shape

可以取以下5个值: r

ectangle:长方形

oval:椭圆

根标签包含五个子标签:

1. stroke:绘制边框

属性:

宽度，颜色

2. corners:圆角

属性:

radius半径

 left_top_x、left_top_y 左上

right_top_x、right_top_y 右上

left_bottom_x、left_bottom_y 左下

right_bottom_x、right_bottom_y 右下

3 solid:背景填充

属性:

color 只能指定一个颜色
colors 可以指定多个颜色，渐变。

4 bounds:边框

可以单独设置上下左右的边框。

5 gradient:渐变

属性:

shader_type:类型 --- radial(辐射) linear(线性)

代码：

ability_main.xml

<Button
        ohos:height="100vp"
        ohos:width="100vp"
        ohos:text="点我"
        ohos:text_size="35fp"
        ohos:background_element="$graphic:beautifybutton"
        />

beautifybutton.xml

<shape
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle"
    >
<!--    设置边框-->
    <stroke
        ohos:color="#21A8FD"
        ohos:width="3vp"/>

<!--    设置圆角-->
    <corners
        ohos:radius="15vp"/>

<!--    设置背景-->
<!--    colors: 颜色渐变-->
<!--    color: 单一颜色-->
    <solid
        ohos:colors="#FF1894,#00ff00,#0000FF"
        />

<!--    设置边框-->
<!--    <bounds/>-->

<!--    设置渐变-->
    <gradient
        ohos:shader_type="radial_gradient"
        />
</shape>

graphic包中的state-container标签

说明：

在graphic包中新建xml，根标签为:state-container就可以在不同状态下美化组件

默认状态:

component_state_empty

按下不松的状态:

component_state_pressed

打开状态:

component_state_checked

细节:

1. component_state_empty必须要写在最下面。否则其他状态的设置不起作用。

2. element中可以写指定的色号，也可以指定根标签为shape的xml文件。

3. element中可以指定固定的图片。

代码：

ability_main.xml

    <Button
        ohos:height="100vp"
        ohos:width="100vp"
        ohos:text="点我"
        ohos:text_size="35fp"
        ohos:background_element="$graphic:button_state"
        />

button_state.xml

<state-container
    xmlns:ohos="http://schemas.huawei.com/res/ohos">

    <item
        ohos:state="component_state_pressed"
        ohos:element="#FF0000"/>

    <item
        ohos:state="component_state_empty"
        ohos:element="#21A8FD"/>

</state-container>

实际开发中美化组件的方式

实例

代码： 

ability_main.xml

<Button
        ohos:height="32vp"
        ohos:width="86vp"
        ohos:background_element="$graphic:register_state"
        />

 register_empty.xml

<shape
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">

    <corners
        ohos:radius="15vp"/>

    <solid
        ohos:color="#21A8FD"/>
</shape>

 register_press.xml

<shape
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">

    <corners
        ohos:radius="15vp"/>

    <solid
        ohos:color="#0177BE"/>
</shape>

register_state.xml

<state-container
    xmlns:ohos="http://schemas.huawei.com/res/ohos">

    <item ohos:state="component_state_pressed" ohos:element="$graphic:register_press"/>
    <item ohos:state="component_state_empty" ohos:element="$graphic:register_empty"/>

</state-container>