鴻蒙ArkUI【開發(fā)移植Carbon】

項(xiàng)目介紹

本項(xiàng)目是基于開源項(xiàng)目[Carbon] 進(jìn)行harmonyos化的移植和開發(fā)的。

移植版本：Branches/master

這不是單純只是API和基本功能展示demo，它是最有用的自定義控件的實(shí)現(xiàn)，如設(shè)計(jì)規(guī)范中所示。
Carbon試圖：

• 讓事情變得更簡單（指定cornerRadius='dp' 而不是創(chuàng)建一個(gè)xml 和/或一個(gè)ViewOutlineProvider）
• 使其全部工作并在所有 API 上看起來都相同（例如 CheckBox 的左填充）
• 真正向后移植功能（不要對(duì)陰影使用漸變?。?/li>

項(xiàng)目名稱：Carbon

所屬系列：harmonyos的第三方組件適配移植

功能：一個(gè)適用于鴻蒙的自定義組件框架，幫助快速實(shí)現(xiàn)各種需要的效果

項(xiàng)目移植狀態(tài)：大部分移植

調(diào)用差異：基本沒有使用差異，可以參照單元測(cè)試或原項(xiàng)目api進(jìn)行使用

支持功能

• 支持自定義progressBar功能
• 支持自定義RoundProgressBar功能
• 支持Button不同點(diǎn)擊效果功能
• 支持自定義SeekBar滑動(dòng)功能
• 支持各種動(dòng)畫效果展示
• 支持添加收藏組件，快速查找
• 支持各種列表展示(包含頭像，文字等)功能
• 支持展示控件代碼功能
• 支持不同Dialog效果展示
• 以及其它自定義效果/控件

安裝教程

方案一

可以先下載項(xiàng)目，將項(xiàng)目中的carbon庫提取出來放在所需項(xiàng)目中通過build配置

dependencies {
     implementation project(":carbon")
}

方案二

• 1.項(xiàng)目根目錄的build.gradle中的repositories添加：

buildscript {
       repositories {
           ...
           mavenCentral()
       }
       ...
   }
   
   allprojects {
       repositories {
           ...
           mavenCentral()
       }
   }

• 2.開發(fā)者在自己的項(xiàng)目中添加依賴

dependencies {
    implementation 'com.gitee.ts_ohos:carbon:1.0.0'
}

使用說明

1.權(quán)限

需要網(wǎng)絡(luò)權(quán)限:
"name": "ohos.permission.INTERNET"

2.代碼使用

打開不同的設(shè)置頁面：  
            often_text.setClickedListener(component - > {
                Intent intent = new Intent();
                if (often_text.getText().equals("Widget animations")) {
                    present(new WidgetAnimationsSlice(), intent);
                } else if (often_text.getText().equals("Image fade")) {
                    present(new ImageFadeSlice(), intent);
                } else if (often_text.getText().equals("Touch ripple")) {
                    present(new TouchRippleSlice(), intent);
                } else if (often_text.getText().equals("Path animation")) {
                    present(new PathAnimationSlice(), intent);
                }
...

        // BORDERLESS 觸摸事件監(jiān)聽器(按下/抬起)（three）
        btnBorderless.setTouchEventListener(new Component.TouchEventListener() {
            @Override
            public boolean onTouchEvent(Component component, TouchEvent touchEvent) {
                int action = touchEvent.getAction();
                switch (action) {
                    case TouchEvent.PRIMARY_POINT_DOWN:
                        imageView.setVisibility(Component.VISIBLE);
                        break;
                    case TouchEvent.CANCEL:
                    case TouchEvent.PRIMARY_POINT_UP:
                        imageView.setVisibility(Component.HIDE);
                        break;
                }
                return true;
            }
        });

        //對(duì)每個(gè)條目判斷是否收藏：
        mList.add(new DataBean(null, "The most popular problem solutions and other fun ideas implemented with Carbon's widgets and features", null, null));
        mList.add(new DataBean(power, "Power Menu", null, preferences.getBoolean("Power Menu", false) ? starFavour : favour));
        mList.add(new DataBean(null, "Auto Complete", element, preferences.getBoolean("Auto Complete", false) ? starFavour : favour));
        mList.add(new DataBean(null, "Quick Return", null, preferences.getBoolean("Quick Return", false) ? starFavour : favour));
        mList.add(new DataBean(search, "Search Toolbar", null, preferences.getBoolean("Search Toolbar", false) ? starFavour : favour));
        mList.add(new DataBean(parse1, "Share toolbar", element, preferences.getBoolean("Share toolbar", false) ? starFavour : favour));
        mList.add(new DataBean(person, "Profile", null, preferences.getBoolean("Profile", false) ? starFavour : favour));
        mList.add(new DataBean(player, "Music player", element, preferences.getBoolean("Music player", false) ? starFavour : favour));
        mList.add(new DataBean(null, "Collapsing toolbar", null, preferences.getBoolean("Collapsing toolbar", false) ? starFavour : favour));

更多鴻蒙開發(fā)學(xué)習(xí)內(nèi)容[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]前往參考學(xué)習(xí)。

效果演示

demo部分組件運(yùn)行效果如下：

• 主頁展示效果
• What's new界面展示效果
• 收藏頁面展示
• Line chart頁面運(yùn)行效果
• Theme頁面運(yùn)行效果
• Backdrop及展開頁面運(yùn)行效果
• Profiles頁面運(yùn)行效果
• Circular_progress頁面運(yùn)行效果
• Meuns頁面運(yùn)行效果
• Music_player頁面運(yùn)行效果
• Settings頁面運(yùn)行效果

審核編輯 黃宇