首先,在graphic包中创建四个美化xml
text_empty.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:shape="rectangle">
<stroke
ohos:width="3vp"
ohos:color="#000000"/>
<corners
ohos:radius="15vp"/>
</shape>
button_state.xml:
<?xml version="1.0" encoding="utf-8"?>
<state-container
xmlns:ohos="http://schemas.huawei.com/res/ohos">
<item
ohos:element="$graphic:button_press"
ohos:state="component_state_pressed"/>
<item
ohos:element="$graphic:button_empty"
ohos:state="component_state_empty"/>
</state-container>
button_press.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:shape="oval">
<stroke
ohos:width="3vp"
ohos:color="#000000"/>
<solid ohos:color="#00FF00"/>
</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:width="3vp"
ohos:color="#000000"/>
</shape>
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="70vp"/>
<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:left_margin="5vp"
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:left_margin="5vp"
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:left_margin="5vp"
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:left_margin="5vp"
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:left_margin="5vp"
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:left_margin="5vp"
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:left_margin="5vp"
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:left_margin="5vp"
ohos:text="#"
ohos:text_alignment="center"
ohos:text_color="#000000"
ohos:text_size="35fp"/>
</DirectionalLayout>
<Button
ohos:height="50vp"
ohos:width="200vp"
ohos:background_element="$graphic:text_empty"
ohos:layout_alignment="horizontal_center"
ohos:text="CALL"
ohos:text_alignment="center"
ohos:text_color="#000000"
ohos:text_size="35fp"
ohos:top_margin="50vp"/>
</DirectionalLayout>
运行效果:
本篇文章仅仅是对拨号盘做了一个界面的搭建,之后还会对业务逻辑进行完善,比如按键之后的数字获取到最上面的文本框,摁CALL之后可以调用系统的拨号功能等等。