阅读(4166)
赞(8)
鸿蒙OS Button
2020-09-16 17:31:01 更新
鸿蒙OS Button
按钮（Button）是一种常见的组件，点击可以触发对应的操作，通常由文本或图标组成，也可以由图标和文本共同组成。
图1 文本按钮 
图2 图标按钮 
图3 图标和文本共同组成的按钮 
创建Button
使用 Button 组件，可以生成形状、颜色丰富的按钮。
<Button
ohos:id="$+id:button_sample"
ohos:width="match_content"
ohos:height="match_content"
ohos:text_size="27fp"
ohos:text="button"
ohos:background_element="$graphic:button_element"
ohos:left_margin="15vp"
ohos:bottom_margin="15vp"
ohos:right_padding="8vp"
ohos:left_padding="8vp"
ohos:element_left="$graphic:ic_btn_reload"button_element.xml：
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:shape="rectangle">
<corners
ohos:radius="10"/>
<solid
ohos:color="#FF007DFF"/>
</shape>
响应点击事件
按钮的重要作用是当用户单击按钮时，会执行相应的操作或者界面出现相应的变化。实际上用户点击按钮时，Button 对象将收到一个点击事件。 开发者可以自定义响应点击事件的方法。例如，通过创建一个 Component.ClickedListener 对象，然后通过调用 setClickedListener 将其分配给按钮。
//从定义的xml中获取Button对象
Button button = (Button) rootLayout.findComponentById(ResourceTable.Id_button_sample);
// 为按钮设置点击事件回调
button.setClickedListener(new Component.ClickedListener() {
public void onClick(Component v) {
// 此处添加点击按钮后的事件处理逻辑
}
}); 不同类型的按钮
按照按钮的形状，按钮可以分为：普通按钮，椭圆按钮，胶囊按钮，圆形按钮等。
- 普通按钮
普通按钮和其他按钮的区别在于不需要设置任何形状，只设置文本和背景颜色即可，例如：
<Button
ohos:width="150vp"
ohos:height="50vp"
ohos:text_size="27fp"
ohos:text="button"
ohos:background_element="$graphic:color_blue_element"
ohos:left_margin="15vp"
ohos:bottom_margin="15vp"
ohos:right_padding="8vp"
ohos:left_padding="8vp"
/>color_blue_element.xml：
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:shape="rectangle">
<solid
ohos:color="#FF007DFF"/>
</shape>- 椭圆按钮
椭圆按钮是通过设置 background_element 的来实现的，background_element 的shape 设置为椭圆（oval），例如：
<Button
ohos:width="150vp"
ohos:height="50vp"
ohos:text_size="27fp"
ohos:text="button"
ohos:background_element="$graphic:oval_button_element"
ohos:left_margin="15vp"
ohos:bottom_margin="15vp"
ohos:right_padding="8vp"
ohos:left_padding="8vp"
ohos:element_left="$graphic:ic_btn_reload"
/>oval_button_element.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:shape="oval">
<solid
ohos:color="#FF007DFF"/>
</shape>- 胶囊按钮
胶囊按钮是一种常见的按钮，设置按钮背景时将背景设置为矩形形状，并且设置 ShapeElement 的 radius 的半径，例如：
<Button
ohos:id="$+id:button"
ohos:width="match_content"
ohos:height="match_content"
ohos:text_size="27fp"
ohos:text="button"
ohos:background_element="$graphic:capsule_button_element"
ohos:left_margin="15vp"
ohos:bottom_margin="15vp"
ohos:right_padding="15vp"
ohos:left_padding="15vp"
/>capsule_button_element.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:shape="rectangle">
<corners
ohos:radius="100"/>
<solid
ohos:color="#FF007DFF"/>
</shape>- 圆形按钮
圆形按钮和椭圆按钮的区别在于组件本身的宽度和高度需要相同，例如：
<Button
ohos:id="$+id:button4"
ohos:width="50vp"
ohos:height="50vp"
ohos:text_size="27fp"
ohos:background_element="$graphic:circle_button_element"
ohos:text="+"
ohos:left_margin="15vp"
ohos:bottom_margin="15vp"
ohos:right_padding="15vp"
ohos:left_padding="15vp"
/>circle_button_element.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:shape="oval">
<solid
ohos:color="#FF007DFF"/>
</shape>场景示例
利用圆形按钮，胶囊按钮，文本组件可以绘制出如下拨号盘的UI界面。
图4 界面效果
源码示例：
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:width="match_parent"
ohos:height="match_parent"
ohos:background_element="$graphic:color_light_gray_element"
ohos:orientation="vertical">
<Text
ohos:width="match_content"
ohos:height="match_content"
ohos:text_size="20fp"
ohos:text="0123456789"
ohos:background_element="$graphic:green_text_element"
ohos:text_alignment="center"
ohos:layout_alignment="horizontal_center"
/>
<DirectionalLayout
ohos:width="match_parent"
ohos:height="match_content"
ohos:alignment="horizontal_center"
ohos:orientation="horizontal"
ohos:top_margin="5vp"
ohos:bottom_margin="5vp">
<Button
ohos:width="40vp"
ohos:height="40vp"
ohos:text_size="15fp"
ohos:background_element="$graphic:green_circle_button_element"
ohos:text="1"
ohos:text_alignment="center"
/>
<Button
ohos:width="40vp"
ohos:height="40vp"
ohos:text_size="15fp"
ohos:background_element="$graphic:green_circle_button_element"
ohos:text="2"
ohos:left_margin="5vp"
ohos:right_margin="5vp"
ohos:text_alignment="center"
/>
<Button
ohos:width="40vp"
ohos:height="40vp"
ohos:text_size="15fp"
ohos:background_element="$graphic:green_circle_button_element"
ohos:text="3"
ohos:text_alignment="center"
/>
</DirectionalLayout>
<DirectionalLayout
ohos:width="match_parent"
ohos:height="match_content"
ohos:alignment="horizontal_center"
ohos:orientation="horizontal"
ohos:bottom_margin="5vp">
<Button
ohos:width="40vp"
ohos:height="40vp"
ohos:text_size="15fp"
ohos:background_element="$graphic:green_circle_button_element"
ohos:text="4"
ohos:text_alignment="center"
/>
<Button
ohos:width="40vp"
ohos:height="40vp"
ohos:text_size="15fp"
ohos:left_margin="5vp"
ohos:right_margin="5vp"
ohos:background_element="$graphic:green_circle_button_element"
ohos:text="5"
ohos:text_alignment="center"
/>
<Button
ohos:width="40vp"
ohos:height="40vp"
ohos:text_size="15fp"
ohos:background_element="$graphic:green_circle_button_element"
ohos:text="6"
ohos:text_alignment="center"
/>
</DirectionalLayout>
<DirectionalLayout
ohos:width="match_parent"
ohos:height="match_content"
ohos:alignment="horizontal_center"
ohos:orientation="horizontal"
ohos:bottom_margin="5vp">
<Button
ohos:width="40vp"
ohos:height="40vp"
ohos:text_size="15fp"
ohos:background_element="$graphic:green_circle_button_element"
ohos:text="7"
ohos:text_alignment="center"
/>
<Button
ohos:width="40vp"
ohos:height="40vp"
ohos:text_size="15fp"
ohos:left_margin="5vp"
ohos:right_margin="5vp"
ohos:background_element="$graphic:green_circle_button_element"
ohos:text="8"
ohos:text_alignment="center"
/>
<Button
ohos:width="40vp"
ohos:height="40vp"
ohos:text_size="15fp"
ohos:background_element="$graphic:green_circle_button_element"
ohos:text="9"
ohos:text_alignment="center"
/>
</DirectionalLayout>
<DirectionalLayout
ohos:width="match_parent"
ohos:height="match_content"
ohos:alignment="horizontal_center"
ohos:orientation="horizontal"
ohos:bottom_margin="5vp">
<Button
ohos:width="40vp"
ohos:height="40vp"
ohos:text_size="15fp"
ohos:background_element="$graphic:green_circle_button_element"
ohos:text="*"
ohos:text_alignment="center"
/>
<Button
ohos:width="40vp"
ohos:height="40vp"
ohos:text_size="15fp"
ohos:left_margin="5vp"
ohos:right_margin="5vp"
ohos:background_element="$graphic:green_circle_button_element"
ohos:text="0"
ohos:text_alignment="center"
/>
<Button
ohos:width="40vp"
ohos:height="40vp"
ohos:text_size="15fp"
ohos:background_element="$graphic:green_circle_button_element"
ohos:text="#"
ohos:text_alignment="center"
/>
</DirectionalLayout>
<Button
ohos:width="match_content"
ohos:height="match_content"
ohos:text_size="15fp"
ohos:text="CALL"
ohos:background_element="$graphic:green_capsule_button_element"
ohos:bottom_margin="5vp"
ohos:text_alignment="center"
ohos:layout_alignment="horizontal_center"
ohos:left_padding="10vp"
ohos:right_padding="10vp"
ohos:top_padding="2vp"
ohos:bottom_padding="2vp"
/>
</DirectionalLayout>color_light_gray_element.xml：
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:shape="rectangle">
<solid
ohos:color="#ffeeeeee"/>
</shape>green_text_element.xml：
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:shape="rectangle">
<corners
ohos:radius="20"/>
<stroke
ohos:width="2"
ohos:color="#ff008B00"/>
<solid
ohos:color="#ffeeeeee"/>
</shape>green_circle_button_element.xml：
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:shape="oval">
<stroke
ohos:width="5"
ohos:color="#ff008B00"/>
<solid
ohos:color="#ffeeeeee"/>
</shape>green_capsule_button_element.xml：
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:shape="rectangle">
<corners
ohos:radius="100"/>
<solid
ohos:color="#ff008B00"/>
</shape>