# ohos-Views

**Repository Path**: HarmonyOS-tpc/ohos-Views

## Basic Information

- **Project Name**: ohos-Views
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2021-04-01
- **Last Updated**: 2023-04-17

## Categories & Tags

**Categories**: harmonyos-advanced

**Tags**: None

## README

# ohos-Views

ohos-Views

自定义组件

1)	自定义组件-particles（粒子效果）
2)	自定义组件- pulse（脉冲button效果）
3)	自定义组件-progress（progress效果）
4)	自定义组件- bottomnavigationbar（底部导航栏）

# 引用

方式一：
通过library生成har包，添加har包到libs文件夹内
在entry的gradle内添加如下代码

      implementation fileTree(dir: 'libs', include: ['*.jar', '*.har'])

方式二：

       allprojects{
               repositories{
                   mavenCentral()
               }
       }

       implementation 'io.openharmony.tpc.thirdlib:ohos-views-bottom-navigation:1.0.3' 
       implementation 'io.openharmony.tpc.thirdlib:ohos-views-particles:1.0.3' 
       implementation 'io.openharmony.tpc.thirdlib:ohos-views-progress-bar:1.0.3' 
       implementation 'io.openharmony.tpc.thirdlib:ohos-views-pulse-button:1.0.3' 


自定义组件-particles（粒子效果）

       <com.onexeor.particlesview.ParticlesView
               ohos:id="$+id:particlesView"
               ohos:width="match_content"
               ohos:height="match_content"
               ohos:pv_background_color="#000000"
               ohos:pv_linking_line_color="#ffffff"
               ohos:pv_linking_line_width="0.5fp"
               ohos:pv_linking_nodes_distance="100fp"
               ohos:pv_nodes_color="#ffffff"
               ohos:pv_nodes_count="100"
               ohos:pv_nodes_size="2fp"
               ohos:pv_nodes_speed_max="10"
               ohos:pv_nodes_speed_min="1"
               ohos:pv_touchable="true"
               ohos:visibility="visible"
       />


自定义组件- pulse（脉冲button效果）

      <io.singulart.pulse_button.PulseButton
                  ohos:margin="50fp"
                  ohos:id="$+id:pulseBtn"
                  ohos:width="100fp"
                  ohos:height="100fp"
                  ohos:pb_color_center_circle_stroke="#21D9CC"
                  ohos:pb_inner_circle_stroke_padding="7fp"
                  ohos:pb_pulse_speed="200"
                  ohos:pb_stroke_width_of_center_circle="1fp"
                  ohos:pb_stroke_width_of_outer_circle="2fp"
                  ohos:pb_wave_padding="20fp"
                  ohos:visibility="visible"
      />

自定义组件-progress（progress效果

      <io.singulart.particle_progress_bar.ParticleProgressBar
                  ohos:id="$+id:progress"
                  ohos:width="80fp"
                  ohos:height="80fp"
                  ohos:layout_alignment="center"
                  ohos:ppb_color="#ffffff"
                  ohos:ppb_count_balls="8"
                  ohos:ppb_enabled="true"
                  ohos:visibility="visible"
      />


自定义组件- bottomnavigationbar（底部导航栏）

      <io.singulart.bottomnavigationbar.CenterNavigationButton
                  ohos:id="$+id:centerBtn"
                  ohos:width="83fp"
                  ohos:height="83fp"
                  ohos:layout_alignment="bottom|horizontal_center"
                  ohos:bottom_margin="38fp"
                  ohos:cnb_background_color="#282B43"
                  ohos:cnb_foreground_color="#21D9CC"
                  ohos:cnb_foreground_color_normal="#666DA5"
                  ohos:visibility="visible"
      />

      <io.singulart.bottomnavigationbar.BottomNavigationBar
                  ohos:id="$+id:btn_ng"
                  ohos:width="match_parent"
                  ohos:height="70fp"
                  ohos:bnb_background_color="#282B43"
                  ohos:bnb_item_selected_color="#21D9CC"
                  ohos:bnb_text_item_color="#666DA5"
                  ohos:bnb_top_left_radius="$float:fp_50"
                  ohos:bnb_top_right_radius="$float:fp_50"
                  ohos:bnb_shadow_radius="0fp"
                  ohos:bnb_center_btn="true"
                  ohos:bnb_cutout_deep="$float:fp_46"
                  ohos:bnb_cutout_bottom_offset="$float:fp_42"
                  ohos:bnb_cutout_leftTop_radius="$float:fp_10"
                  ohos:bnb_cutout_rightTop_radius="$float:fp_10"
                  ohos:bnb_cutout_bottomLeft_radius="$float:fp_50"
                  ohos:bnb_cutout_bottomRight_radius="$float:fp_50"
                  ohos:bnb_text_item_size="$float:vp_14"
                  ohos:btn_title="$string:button_text"
                  ohos:layout_alignment="bottom"
                  ohos:visibility="visible"
      />


## 示例截图
![image](https://gitee.com/openharmony-tpc/ohos-Views/raw/master/screenshot/ohos.gif)
![image](https://gitee.com/openharmony-tpc/ohos-Views/raw/master/screenshot/screenshot_0.jpg)
![image](https://gitee.com/openharmony-tpc/ohos-Views/raw/master/screenshot/screenshot_1.jpg)
![image](https://gitee.com/openharmony-tpc/ohos-Views/raw/master/screenshot/screenshot_2.jpg)
![image](https://gitee.com/openharmony-tpc/ohos-Views/raw/master/screenshot/screenshot_3.jpg)
![image](https://gitee.com/openharmony-tpc/ohos-Views/raw/master/screenshot/screenshot_4.jpg)
![image](https://gitee.com/openharmony-tpc/ohos-Views/raw/master/screenshot/screenshot_5.jpg)


## entry运行要求
通过DevEco studio,并下载SDK
将项目中的build.gradle文件中dependencies→classpath版本改为对应的版本（即你的IDE新建项目中所用的版本）