24. DirectionalLayout - 拨号界面练习

样式：

代码： 

text_empty.xml

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

    <stroke
        ohos:color="#000000"
        ohos:width="3vp"/>

    <corners

        ohos:radius="15vp"/>

</shape>

 button_empty.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="oval">

    <stroke
        ohos:color="#000000"
        ohos:width="3vp"
        />

</shape>

button_press.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="oval">

    <stroke
        ohos:color="#000000"
        ohos:width="3vp"
        />

    <stroke ohos:color="#00FF00"/>

</shape>

 button_state.xml

<?xml version="1.0" encoding="utf-8"?>
<state-container
    xmlns:ohos="http://schemas.huawei.com/res/ohos">

    <item ohos:state="component_state_pressed" ohos:element="$graphic:button_press"/>
    <item ohos:state="component_state_empty" ohos:element="$graphic:button_empty"/>

</state-container>

ability_main.xml

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical">

    <Text
        ohos:height="50vp"
        ohos:width="200vp"
        ohos:background_element="$graphic:text_empty"
        ohos:layout_alignment="horizontal_center"
        ohos:text_size="20fp"
        ohos:top_margin="30vp"/>

    <DirectionalLayout
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:alignment="horizontal_center"
        ohos:orientation="horizontal"
        ohos:top_margin="30vp">

        <Button
            ohos:height="70vp"
            ohos:width="70vp"
            ohos:background_element="$graphic:button_state"
            ohos:text="1"
            ohos:text_alignment="center"
            ohos:text_color="#000000"
            ohos:text_size="35fp"/>

        <Button
            ohos:height="70vp"
            ohos:width="70vp"
            ohos:background_element="$graphic:button_state"
            ohos:text="2"
            ohos:text_alignment="center"
            ohos:text_color="#000000"
            ohos:text_size="35fp"/>

        <Button
            ohos:height="70vp"
            ohos:width="70vp"
            ohos:background_element="$graphic:button_state"
            ohos:text="3"
            ohos:text_alignment="center"
            ohos:text_color="#000000"
            ohos:text_size="35fp"/>
    </DirectionalLayout>

    <DirectionalLayout
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:alignment="horizontal_center"
        ohos:orientation="horizontal"
        ohos:top_margin="10vp">

        <Button
            ohos:height="70vp"
            ohos:width="70vp"
            ohos:background_element="$graphic:button_state"
            ohos:text="4"
            ohos:text_alignment="center"
            ohos:text_color="#000000"
            ohos:text_size="35fp"/>

        <Button
            ohos:height="70vp"
            ohos:width="70vp"
            ohos:background_element="$graphic:button_state"
            ohos:text="5"
            ohos:text_alignment="center"
            ohos:text_color="#000000"
            ohos:text_size="35fp"/>

        <Button
            ohos:height="70vp"
            ohos:width="70vp"
            ohos:background_element="$graphic:button_state"
            ohos:text="6"
            ohos:text_alignment="center"
            ohos:text_color="#000000"
            ohos:text_size="35fp"/>
    </DirectionalLayout>

    <DirectionalLayout
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:alignment="horizontal_center"
        ohos:orientation="horizontal"
        ohos:top_margin="10vp">

        <Button
            ohos:height="70vp"
            ohos:width="70vp"
            ohos:background_element="$graphic:button_state"
            ohos:text="7"
            ohos:text_alignment="center"
            ohos:text_color="#000000"
            ohos:text_size="35fp"/>

        <Button
            ohos:height="70vp"
            ohos:width="70vp"
            ohos:background_element="$graphic:button_state"
            ohos:text="8"
            ohos:text_alignment="center"
            ohos:text_color="#000000"
            ohos:text_size="35fp"/>

        <Button
            ohos:height="70vp"
            ohos:width="70vp"
            ohos:background_element="$graphic:button_state"
            ohos:text="9"
            ohos:text_alignment="center"
            ohos:text_color="#000000"
            ohos:text_size="35fp"/>
    </DirectionalLayout>

    <DirectionalLayout
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:alignment="horizontal_center"
        ohos:orientation="horizontal"
        ohos:top_margin="10vp">

        <Button
            ohos:height="70vp"
            ohos:width="70vp"
            ohos:background_element="$graphic:button_state"
            ohos:text="#"
            ohos:text_alignment="center"
            ohos:text_color="#000000"
            ohos:text_size="35fp"/>

        <Button
            ohos:height="70vp"
            ohos:width="70vp"
            ohos:background_element="$graphic:button_state"
            ohos:text="0"
            ohos:text_alignment="center"
            ohos:text_color="#000000"
            ohos:text_size="35fp"/>

        <Button
            ohos:height="70vp"
            ohos:width="70vp"
            ohos:background_element="$graphic:button_state"
            ohos:text="*"
            ohos:text_alignment="center"
            ohos:text_color="#000000"
            ohos:text_size="35fp"/>
    </DirectionalLayout>

    <Button
        ohos:height="50vp"
        ohos:width="200vp"
        ohos:text="CALL"
        ohos:text_size="35fp"
        ohos:text_color="#000000"
        ohos:text_alignment="center"
        ohos:top_margin="50vp"
        ohos:background_element="$graphic:text_empty"
        ohos:layout_alignment="horizontal_center"/>

</DirectionalLayout>