【HarmonyOS 專題】04 簡單了解 Button 按鈕屬性

????小菜之前簡單學(xué)習(xí)了 HarmonyOS Text 文本的基本屬性，今天來學(xué)習(xí)一下 Button 按鈕的基本應(yīng)用；

Button

????Button 在日常開發(fā)中是必不可少的，在 Android 平臺中，Button 是繼承自 TextView，而在 HarmonyOS 平臺中，Button 同樣繼承自 Text；兩種語言的設(shè)計(jì)原理基本相同；

// Android
@RemoteView
public class Button extends TextView {
    public Button(Context context) {
        this(context, null);
    }

    public Button(Context context, AttributeSet attrs) {
        this(context, attrs, com.android.internal.R.attr.buttonStyle);
    }

    public Button(Context context, AttributeSet attrs, int defStyleAttr) {
        this(context, attrs, defStyleAttr, 0);
    }

    public Button(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }

    @Override
    public CharSequence getAccessibilityClassName() {
        return Button.class.getName();
    }

    @Override
    public PointerIcon onResolvePointerIcon(MotionEvent event, int pointerIndex) {
        if (getPointerIcon() == null && isClickable() && isEnabled()) {
            return PointerIcon.getSystemIcon(getContext(), PointerIcon.TYPE_HAND);
        }
        return super.onResolvePointerIcon(event, pointerIndex);
    }
}

// HarmonyOS
public class Button extends Text {
    public Button(Context context) {
        super((Context)null);
        throw new RuntimeException("Stub!");
    }

    public Button(Context context, AttrSet attrSet) {
        super((Context)null);
        throw new RuntimeException("Stub!");
    }

    public Button(Context context, AttrSet attrSet, String styleName) {
        super((Context)null);
        throw new RuntimeException("Stub!");
    }
}

????Button 通過點(diǎn)擊觸發(fā)，常見的有文本按鈕，圖標(biāo)按鈕，以及文本圖標(biāo)按鈕，樣式也是包括圓角，觸發(fā)變色等多種常見效果；小菜逐一進(jìn)行嘗試；

1. 文本按鈕

????文本按鈕僅需設(shè)置 text 屬性即可；

<Button
    ohos:height="match_content"
    ohos:width="match_parent"
    ohos:background_element="$graphic:background_ability_text"
    ohos:left_margin="10vp"
    ohos:padding="10vp"
    ohos:right_margin="10vp"
    ohos:text="Button01"
    ohos:text_size="16fp"/>

2. 圖標(biāo)按鈕

????圖標(biāo)按鈕可以通過設(shè)置 element 屬性實(shí)現(xiàn)，此時(shí)無需設(shè)置 text 屬性；

<Button
    ohos:height="match_content"
    ohos:width="match_content"
    ohos:background_element="$graphic:background_ability_text"
    ohos:element_start="$media:icon"
    ohos:layout_alignment="center"
    ohos:left_margin="10vp"
    ohos:padding="10vp"
    ohos:right_margin="10vp"
    ohos:text_size="16fp"
    ohos:top_margin="10vp"/>

3. 文本圖標(biāo)按鈕

????文本圖標(biāo)屬性是 text 與 element 屬性的結(jié)合，其中若需要設(shè)置文本與圖標(biāo)元素的間距可以通過 element_padding 屬性實(shí)現(xiàn)；

<Button
    ohos:height="match_content"
    ohos:width="match_content"
    ohos:background_element="$graphic:background_ability_text"
    ohos:element_left="$media:icon"
    ohos:element_padding="10vp"
    ohos:layout_alignment="center"
    ohos:left_margin="10vp"
    ohos:padding="10vp"
    ohos:right_margin="10vp"
    ohos:text="Button02"
    ohos:text_size="16fp"
    ohos:top_margin="10vp"/>

4. 圓角按鈕

????對于按鈕的形狀，背景色等一般都是通過 shape 文件進(jìn)行調(diào)整；shape 中有多種屬性與 Android 平臺類似；

  • solid 為背景填充色
  • corner 為四個(gè)角的的圓角半徑
  • bounds 為里面的文字與邊界的間隔，但是單獨(dú)設(shè)置不生效
  • stroke 為邊框?qū)傩?/li>
  • gradient 為漸變效果，但是單獨(dú)設(shè)置不生效
<?xml version="1.0" encoding="UTF-8" ?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <solid
        ohos:color="#FFCCAA"/>
    <corners
        ohos:radius="12vp"/>
</shape>

<Button
    ohos:height="match_content"
    ohos:width="match_content"
    ohos:background_element="$graphic:shape_corner"
    ohos:element_left="$media:icon"
    ohos:element_padding="15vp"
    ohos:layout_alignment="center"
    ohos:left_padding="30vp"
    ohos:padding="10vp"
    ohos:right_padding="30vp"
    ohos:text="Button03"
    ohos:text_size="16fp"
    ohos:top_margin="10vp"/>

5. 邊框按鈕

????可以通過 shape 中的 bounds 設(shè)置按鈕的邊框效果；

<?xml version="1.0" encoding="UTF-8" ?>
<shape
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">
    <solid
        ohos:color="#FFCCAA"/>
    <corners
        ohos:radius="12vp"/>
    <stroke
        ohos:color="#CCAA00"
        ohos:width="4vp"/>
</shape>

6. 漸變色按鈕

????小菜嘗試 gradient 漸變色屬性，但是無法直接實(shí)現(xiàn)，于是小菜查詢了一些資料，通過 xml 和 Java 代碼兩種方式實(shí)現(xiàn)；

6.1 xml 方式

????HarmonyOS 中 gradient 暫時(shí)只提供了一個(gè) shader_type 樣式屬性，但是 solid 可以添加多種顏色，可以將漸變色填充在 solid 中，在 gradient 中設(shè)置漸變效果(線性漸變、角度漸變等)；

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

    <solid ohos:colors="#FFCCAA,#FFFFFF,#CCAA00"/>

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

    <gradient
        ohos:shader_type="linear_gradient"/>
</shape>

6.2 Java 方式

????小菜嘗試了 Java 方式，通過 ShapeElement 對背景效果進(jìn)行設(shè)置，小菜會在后續(xù)文章中詳細(xì)學(xué)習(xí) ShapeElement；

Button button1 =(Button) findComponentById(ResourceTable.Id_test_btn1);
button1.setBackground(linearGradientShape());

private ShapeElement linearGradientShape(){
    ShapeElement shapeElement = new ShapeElement();
    shapeElement.setShape(ShapeElement.RECTANGLE);
    shapeElement.setCornerRadius(30.0f);
    RgbColor[] rgbColors = new RgbColor[]{
            RgbColor.fromArgbInt(getColor(ResourceTable.Color_color_btn_start)),
            RgbColor.fromArgbInt(getColor(ResourceTable.Color_color_btn_center)),
            RgbColor.fromArgbInt(getColor(ResourceTable.Color_color_btn_end))};
    shapeElement.setRgbColors(rgbColors);
    shapeElement.setShaderType(ShapeElement.LINEAR_GRADIENT_SHADER_TYPE);
    shapeElement.setGradientOrientation(ShapeElement.Orientation.LEFT_TO_RIGHT);
    return shapeElement;
}

7. 點(diǎn)擊變色按鈕

????對于觸發(fā)點(diǎn)擊變色按鈕，與 Android 方式類似，通過設(shè)置兩個(gè) shape 背景效果，在 state-container 中添加默認(rèn)和點(diǎn)擊效果即可；

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

    <item
        ohos:element="$graphic:shape_corner_selected"
        ohos:state="component_state_pressed"/>

    <item
        ohos:element="$graphic:shape_corner_normal"
        ohos:state="component_state_empty"/>
</state-container>

????小菜嘗試了對 Button 樣式的多種效果，與 Android 開發(fā)方式大同小異，很多具體的 API 還需要參考查詢文檔；若有問題，請多多指導(dǎo)！

來源：阿策小和尚

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容