【Java UI】HarmonyOs如何內建ButterKnife

參考資料

參考 ​​ButterKnife​​

項目配置

在項目級添加如下代碼（效果如下）

mavenCentral()      

​

在應用級添加如下代碼如下圖所示

'io.openharmony.tpc.thirdlib:butterKnife:1.0.2'
    annotationProcessor 'io.openharmony.tpc.thirdlib:butterknife-compiler:1.0.2'      

​

代碼實作

• 繪畫xml布局代碼和效果圖如下，id分别取值為text_click，text_Result

<?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:id="$+id:text_click"
        ohos:height="100vp"
        ohos:width="match_parent"
        ohos:text="點選事件一"
        ohos:background_element="#ed6262"
        ohos:text_size="40vp"
        ohos:text_alignment="center"/>
    <Text
        ohos:id="$+id:text_click_two"
        ohos:height="100vp"
        ohos:width="match_parent"
        ohos:text="點選事二"
        ohos:text_size="40vp"
        ohos:text_alignment="center"/>
    <Text
        ohos:id="$+id:text_Result"
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:background_element="#ed6262"
        ohos:layout_alignment="horizontal_center"
        ohos:text_size="20vp"
        ohos:text="點選效果"

</DirectionalLayout>      

​

• 在abilitySlice重寫OnStart的方法代碼如下

void onStart(Intent intent) {
        super.onStart(intent);
        ComponentContainer    mRootLayout = (ComponentContainer) LayoutScatter.getInstance(MainAbilitySlice.this).
                parse(ResourceTable.Layout_ability_main, null, false);
        ButterKnife.bind(this, mRootLayout);
        super.setUIContent(mRootLayout);
    }      

注解查找控件代碼如下

@BindComponent(ResourceTable.Id_text_Result)
    Text mTextResult;      

注解實作點選事件代碼如下

/**
     * 可以在OnClick的{}是一個數組結合可以實作好多元件事件的綁定
     * 例如  @OnClick({ResourceTable.Id_text_click，ResourceTable.xxx})
     * 如何判斷是哪一個點選事件
     * 可以根據Component的getId的方法擷取到元件id，然後實作點選事件
     * @param view
     */
    @OnClick({ResourceTable.Id_text_click,ResourceTable.Id_text_click_two})
    public  void  click(Component view){
        switch (view.getId()){//todo 擷取元件的id
            case ResourceTable.Id_text_click://todo case 判定是一個元件事件
                mTextResult.setText("觸發了點選事件一");
                break;
                case ResourceTable.Id_text_click_two:
                    mTextResult.setText("觸發了點選事件二");
                    break;
        }

    }      

運作效果

​