OpenHarmony三方库组件：CircleIndicator

于 2024-06-25 20:42:06 发布
阅读量924 收藏 9
点赞数 17
分类专栏： 鸿蒙 鸿蒙三方库 文章标签： harmonyos 华为 媒体 鸿蒙系统 鸿蒙 android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/situnanQAQ/article/details/139968890
版权

简介

CircleIndicator是一款UI组件库，为Tabs/Swiper容器提供了多种自定义风格的指示器

效果展示：

圆形指示器:

长条指示器:

横幅指示器:

三角指示器:

图标指示器:

携带中央视图的Tabs指示器:

固定位置Tabs指示器:

固定位置Tabs指示器（胶囊风格）:

固定位置Tabs指示器（携带角标）:

可滑动Tabs指示器:

可滑动Tabs指示器(水滴滑块):

可滑动Tabs指示器(首列固定):

titles指示器:

下载安装

ohpm install @ohos/circleindicator

OpenHarmony ohpm环境配置等更多内容，请参考如何安装OpenHarmony ohpm包

使用说明

提供多种Indicator，使用方法类似，以TriangularIndicator为例

  1. 初始化：实例化TabsController和对应的Model 对象, 并添加number类型成员以记录当前页下标
private controller: TabsController = new TabsController()
@State model: TriangularModel = new TriangularModel(this.controller)
@State itemIndex: number = 0
  1. 属性设置：通过Model类对象设置UI属性来自定义所需风格，也可以添加所需的回调
aboutToAppear() {
 this.model
   .setReverse(true)
   .setLineHeight(4)
   .setTriangleHeight(10)
   .setLineColor("#e94220")
   .setBackgroundColor("#eeeeee")
   .setChangeListener((itemIndex: number) => {
     console.info("change page to " + this.data[itemIndex])
   })
}
  1. 界面绘制：在Tabs组件旁放置Indicator组件，注意需要关闭原生的bar。并监听Tabs组件的touch事件，通知给Model类，以统一处理滑动逻辑
build() {
 Column() {
   TriangularIndicator({ itemIndex: $itemIndex, count: this.data.length, model: this.model })
   Tabs({ index: this.itemIndex, controller: this.controller }) {
     ……
   }
   .barWidth(0)
   .onTouch((event: TouchEvent) => {
     this.model.notifyTouch(event, this.itemIndex)
   })
 }.padding({ top: 40 })
 .backgroundColor("#eeeeee")
}

更多详细用法请参考开源库sample页面的实现

接口说明

model: TriangularModel = new TriangularModel(this.controller) // (TriangularModel可替换为所需的Model类)

  1. 设置指示器宽度

    model.setWidth(width: Length,context?:common.UIAbilityContext) 注意: 1.长宽等Length型属性暂不支持百分比写法 2.当前OpenHarmony 的UI计算对无单位的float.json资源和无单位的ets变量值处理逻辑不同,前者会当做px处理,后者则为vp,未避免歧义,当传入$r('app.float.[id]')形式的参数时建议在定义资源处加上单位(px/vp/fp)

  2. 设置指示器高度

    model.setHeight(height: Length,context?:common.UIAbilityContext)

  3. 设置指示器背景色

    setBackgroundColor(backgroundColor: ResourceColor)

  4. 触摸事件拦截

    model.notifyTouch(event: TouchEvent, index: number)

  5. 设置页面切换监听

    model.setChangeListener(callback: (index: number) => void)

约束与限制

在下述版本验证通过：

  • DevEco Studio 版本： 4.1 Canary(4.1.3.317)

  • OpenHarmony SDK:API11 (4.1.0.36)

HSP场景适配:

所有指示器的配置类中,使用到Length入参的接口, 后面新增了可选参数context, 在HSP场景下需要传入正确的context, 才能保证三方库后续正确获取Resource资源。

非HSP场景不影响原功能, context可以不传。

目录结构

|---- CircleIndicator
|     |---- entry  # 示例代码文件夹
|     |---- library  # CircleIndicator三方库核心文件夹
|           |----src
|                 |----main
|                       |----ets
|                             |----components
|                                   |----CircleIndicator.ets #指示器的核心实现
|                                   |----utils #工具类，辅助UI的绘制
|           |---- index.ets  # 对外接口
|     |---- README.md  # 安装使用方法

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。 

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

鸿蒙（HarmonyOS NEXT）最新学习路线

  •  HarmonOS基础技能

  • HarmonOS就业必备技能 
  •  HarmonOS多媒体技术

  • 鸿蒙NaPi组件进阶

  • HarmonOS高级技能

  • 初识HarmonOS内核 
  • 实战就业级设备开发

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

《鸿蒙 (OpenHarmony)开发入门教学视频》

《鸿蒙生态应用开发V2.0白皮书》

图片

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

图片

 《鸿蒙开发基础》

  • ArkTS语言
  • 安装DevEco Studio
  • 运用你的第一个ArkTS应用
  • ArkUI声明式UI开发
  • .……

图片

 《鸿蒙开发进阶》

  • Stage模型入门
  • 网络管理
  • 数据管理
  • 电话服务
  • 分布式应用开发
  • 通知与窗口管理
  • 多媒体技术
  • 安全技能
  • 任务管理
  • WebGL
  • 国际化开发
  • 应用测试
  • DFX面向未来设计
  • 鸿蒙系统移植和裁剪定制
  • ……

图片

《鸿蒙进阶实战》

  • ArkTS实践
  • UIAbility应用
  • 网络案例
  • ……

图片

 获取以上完整鸿蒙HarmonyOS学习资料，请点击→纯血版全套鸿蒙HarmonyOS学习资料

总结

总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，他们才能在这个变革的时代中立于不败之地。 

司徒南QAQ
关注
  • 17
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CircleIndicator
08-22
/** * Created by kaiyi.cky on 2015/8/17. */ public class CircleIndicator extends LinearLayout implements ViewPager.OnPageChangeListener{ private ViewPager mViewPager; ViewPager.OnPageChangeListener mListener; private final static int SCROLL_WHAT = 99; MyHandler myHandler; /** * 滚动间隔时间 */ private int spentTime = 3000; /** * 当前显示的序号 */ private int curIndex = 1; /** * 圆点半径 */ private int circleRadiu = 10; /** * 圆点内边距 */ private int circlePadding = 3; /** * 圆点数目 */ private int circleCount = 0; /** * 滑动方向 * 1为向右，-1为向左 */ private int direction = 1; public CircleIndicator(Context context) { super(context); init(); } public CircleIndicator(Context context, AttributeSet attrs) { super(context, attrs); init();
Android滚动页面位置指示器：CircleIndicator
weixin_34040079的博客
08-03 260
Android滚动页面位置指示器：CircleIndicatorCircleIndicator是github上的一个开源的用于页面滚动时候的位置指示器，指示当前页面在总的页面中的位置和前后位置关系，github上的项目主页是：https://github.com/ongakuer/CircleIndicator其效果如图所示：可以看到，选中和未被选中时候的球的大小并不相同，且颜色在Circ...
OpenHarmony 实战开发——CircleIndicator组件，使指示器风格更加多样化
最新发布
maniuT的博客
05-18 1080
CircleIndicator组件UI效果展示圆形指示器：长条指示器：横幅指示器：三角指示器：图标指示器：携带中央视图的Tabs指示器：固定位置Tabs指示器：固定位置Tabs指示器（胶囊风格）:固定位置Tabs指示器（携带角标）:可滑动Tabs指示器：可滑动Tabs指示器(水滴滑块)：可滑动Tabs指示器(首列固定)：什么是CircleIndicator？CircleIndicator顾名思义，它指的是圆形指示器。
CircleIndicator-一个轻量级的viewpager指示器 ，类似于nexus5 启动器的效果.zip
09-24
一个轻量级的viewpager指示器 ，类似于nexus5 启动器的效果。它可以自定义指示器上小圆点的样式和动画效果。可以用于引导页。项目地址：https://github.com/ongakuer/CircleIndicator 效果图：如何使用1. xml布局中创建CircleIndicator是配合ViewPager使用的，一般如下布局：<RelativeLayout         android:layout_width="match_parent"         android:layout_height="match_parent">         <android.support.v4.view.ViewPager             android:id="@ id/viewpager_default"             android:layout_width="match_parent"             android:layout_height="match_parent"/>         <me.relex.circleindicator.CircleIndicator             android:id="@ id/indicator_default"             android:layout_centerInParent="true"             android:layout_width="fill_parent"             android:layout_height="40dp"/>     </RelativeLayout>2. java代码中// DEFAULT ViewPager defaultViewpager = (ViewPager) findViewById(R.id.viewpager_default); CircleIndicator defaultIndicator = (CircleIndicator) findViewById(R.id.indicator_default); DemoPagerAdapter defaultPagerAdapter = new DemoPagerAdapter(getSupportFragmentManager()); defaultViewpager.setAdapter(defaultPagerAdapter);//为ViewPager设置适配器 defaultIndicator.setViewPager(defaultViewpager);//将ViewPager添加到CircleIndicator中，以便监听ViewPager的滚动等事件DemoPagerAdapter是ViewPager的适配器，这个需要你去实现。属性说明属性名称类型说明ci_widthdimension小圆点的宽度ci_heightdimension小圆点的高度ci_margindimension小圆点间的间距ci_animatorreferenceViewPager页面切换时，给小圆点设置动画。设置当前的小圆点恢复到未选中时的状态的动画。例如：当前正从a切换到b，那么该属性设置的是a的动画。ci_animator_reversereference和"ci_animator"属性一样，只不过该属性设置的是b的动画。ci_drawablereference设置当前或选中的小圆点的样式，如颜色、圆角等。ci_drawable_unselectedreference和"ci_drawable"一样，只是该属性设置的是未选中的小圆点的样式。点击上面的"下载源码"下载完整的demo工程。demo简要说明xml布局：<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:app="http://schemas.android.com/apk/res-auto"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:orientation="vertical">     <RelativeLayout         android:layout_width="match_parent"         android:layout_height="0dp"         android:layout_weight="1">         <android.support.v4.view.ViewPager             android:id="@ id/viewpager_default"             android:layout_width="match_parent"             android:layout_height="match_parent"/>         <me.relex.circleindicator.CircleIndicator             android:id="@ id/indicator_default"             android:layout_centerInParent="true"             android:layout_width="fill_parent"             android:layout_height="40dp"/>     </RelativeLayout>     <RelativeLayout         android:layout_width="match_parent"         android:layout_height="0dp"         android:layout_weight="1">         <android.support.v4.view.ViewPager             android:id="@ id/viewpager_custom"             android:layout_width="match_parent"             android:layout_height="match_parent"/>         <me.relex.circleindicator.CircleIndicator             android:id="@ id/indicator_custom"             app:ci_width="10dp"             app:ci_height="4dp"             app:ci_margin="6dp"             app:ci_animator="@animator/indicator_animator"             app:ci_animator_reverse="@animator/indicator_animator_reverse"             app:ci_drawable="@drawable/black_radius_square"             android:layout_centerInParent="true"             android:layout_width="fill_parent"             android:layout_height="40dp"/>     </RelativeLayout>     <RelativeLayout         android:layout_width="match_parent"         android:layout_height="0dp"         android:layout_weight="1">         <android.support.v4.view.ViewPager             android:id="@ id/viewpager_unselected_background"             android:layout_width="match_parent"             android:layout_height="match_parent"/>         <me.relex.circleindicator.CircleIndicator             android:id="@ id/indicator_unselected_background"             android:layout_centerInParent="true"             android:layout_width="fill_parent"             app:ci_width="6dp"             app:ci_height="6dp"             app:ci_animator="@animator/indicator_no_animator"             app:ci_drawable="@drawable/white_radius"             app:ci_drawable_unselected="@drawable/black_radius"             android:layout_height="40dp"             />     </RelativeLayout> </LinearLayout>定义了3组ViewPager和指示器。第一组是采用默认样式的，被选中的小圆点带有放大的动画。第2组比较全，既定义了动画又修改了样式。第3组是取消动画的同时使用了ci_drawable_unselected属性。适配器Adapter：public class DemoPagerAdapter extends FragmentPagerAdapter {         private int pagerCount = 5;         private Random random = new Random();         public DemoPagerAdapter(FragmentManager fm) {             super(fm);         }         @Override public Fragment getItem(int i) {             return ColorFragment.newInstance(0xff000000 | random.nextInt(0x00ffffff));         }         @Override public int getCount() {             return pagerCount;         }     }定义了5个页面或Fragment，通过ColorFragment生成Fragment。Fragment：public class ColorFragment extends Fragment {     private static final String ARG_COLOR = "color";     private int mColor;     public static ColorFragment newInstance(int param1) {         ColorFragment fragment = new ColorFragment();         Bundle args = new Bundle();         args.putInt(ARG_COLOR, param1);         fragment.setArguments(args);         return fragment;     }     public ColorFragment() {     }     @Override     public void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         if (getArguments() != null) {             mColor = getArguments().getInt(ARG_COLOR);         }     }     @Override     public View onCreateView(LayoutInflater inflater, ViewGroup container,             Bundle savedInstanceState) {         View v = inflater.inflate(R.layout.color_fragment, container, false);         v.setBackgroundColor(mColor);         return v;     } }生成空的页面，没有任何控件，只是设置了页面的背景色。
Android-Circle-Indicator:这是一个简单的 Android 进度圈指示器
06-02
Android-Circle-Indicator 这是一个简单的 Android 进度圈指示器。 特征 设置进度级别。 圆直径 指示器宽度 指示灯颜色 指示器填充颜色 如何使用 将CircleIndicator.java复制到项目中。 在布局xml中， < com .scriptedpapers.circleindicator.CircleIndicator android : id = " @+id/secondsTimer " android : layout_centerInParent = " true " android : layout_width = " 300dp " android : layout_height
android indicator,Android滚动页面位置指示器：CircleIndicator
weixin_31681589的博客
05-27 348
Android滚动页面位置指示器：CircleIndicatorCircleIndicator是github上的一个开源的用于页面滚动时候的位置指示器，指示当前页面在总的页面中的位置和前后位置关系，github上的项目主页是：https://github.com/ongakuer/CircleIndicator其效果如图所示： 可以看到，选中和未被选中时候的球的大小并不相同，且颜色在Circl...
KeyPointsAnd3DSC算法三方库
10-15
“A Fast Point Clouds Registration Algorithm for Laser Scanners”论文复现的KeyPointsAnd3DSC算法，可用来实现点云配准。参考博客链接：https://blog.csdn.net/weixin_43896283/article/details/133840198
C++三方库 PCL1.8.1
12-11
vs2015对应的PCL1.8.1，包括两个文件：PCL-1.8.1-AllInOne-msvc2015-win64.exe、pcl-1.8.1-pdb-msvc2015-win64.zip。
pyautoit-master三方库包
05-12
此包为pyautoit-master三方库的包，可以用来作为python操作Windows窗口的支持库。 使用方法： 1、下载此包，解压，到pyautoit-master目录下打开cmd窗口，离线安装，指令：python setup.py install 2、python调用，...
yaml-cpp三方库源码，版本为0.8.0
04-13
yaml-cpp 是一个功能强大的 C++ 库，用于处理 YAML 数据格式。其源码结构清晰，模块划分合理，易于理解和扩展。库内提供了丰富的 API，包括节点的创建、查询、修改以及文件的读写等，使得开发者能够方便地在 C++ 中...
01 EML_三方组件各级扁平化_
09-30
三方组件的使用可以快速实现这些功能，比如，可能会有专门的库用于实时数据采集、数据分析、报警系统等。扁平化的组件设计可以使各个部分更好地协同工作，降低集成难度，提高系统的整体性能。 文件名"01 EML"可能指...
Android代码-CircleIndicator
08-06
CircleIndicator a lightweight viewpager indicator! Usage xml: java: circleIndicator.setViewPager(viewPager); Notice:the method should be called after ViewPager.setAdapter(). Properties: app: ci_radius :indicator's radius app: ci_margin :margin between two indicators app: ci_background:indicator's background app: ci_selected_background:selected indicator's background app: ci_gravity:indicator's layout gravity,support left,center and right. app: ci_mode:indicator's c
Android代码-一个简单但可以自定义切换动画的管理多状态的自定义layout
08-06
StateLayout A custom layout that can easily switch different states(like empty,error,progress,content) with animations. An example usage can be found here lufficc/iShuiHui Usage Add the dependencies to your project: gradle dependencies { compile 'com.lufficc:stateLayout:0.1.1' } maven com.lufficc stateLayout 0.1.1 pom Add StateLayout to your layout file Remember ,StateLayout can only hold one direct child operation in java stateLayout.sh
android 圆点指示器,Android通用圆点指示器——android-Universal-CircleIndicator
weixin_33565515的博客
05-27 763
前言最近项目中需要加一个圆点指示器，在切换页面的时候使用，网上有开源的项目viewflow和viewpageIndicator,这两者都有很好的效果，但遗憾的是都有局限性，一个是只能用于viewflow，另一个只能用在viewpage上面，而我项目中的页面切换用的是自定义View，上面两个项目中的圆点指示器都不能拿来直接用，于是就借鉴viewflow做了一个简单易用的通用圆点指示器。效果图 用法介...
CircleIndicator组件，使指示器风格更加多样化
OpenHarmony_dev的博客
07-25 289
其中，Swiper组件和Tabs组件在应用程序开发中对于指示器的使用引入较多，但是直接使用原生的Swiper组件和Tabs组件不适用于表现复杂的UI指示器交互变化。因此，我们针对Swiper组件和Tabs组件在指示器应用方向做了一个简单的封装，以CiecleIndicator三方组件的形式提供应用程序依赖使用，从而提升了ArkUI开发框架的UI界面之指示器风格多样化的能力。3.界面绘制在Tabs组件旁放置Indicator组件，注意需要关闭原生的bar。UI界面是应用程序可视化必不可少的部分。...
CircleIndicators实现启动预览翻页效果，原点动画切换。
龙哥IT
05-27 157
CircleIndicators实现原点指示器，原点动画切换。   介绍： 一个轻量级的viewpager indicator ，类似于nexus5 启动器的效果。  运行效果：
Android 关于CircleIndicator
weixin_48562691的博客
06-26 427
总体来说，CircleIndicator 是一个简单易用的开源库，适用于大多数基本的 ViewPager 页面指示器需求。它具有一定的定制性，能满足一般的指示器样式需求。它可以在 ViewPager 中显示圆形指示器，用于指示当前页面和总页面数量，提供了一种简洁美观的方式来显示当前页面的位置。有限的样式选项：尽管 CircleIndicator 允许定制指示器的样式，但它的样式选项相对有限。这里设置了指示器的布局宽高为 wrap_content，并将其放置在水平居中的位置，设置了内边距和指示器的样式。
Android 具有动画的 Viewpager滑动CircleIndicator指示器
商城app+新闻app+备忘录记事本app视频教程在某站【浩宇软件开发】
08-12 2832
1.自定义属性：attrs.xml<?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="CircleIndicator"> <attr name="ci_radius" format="dimension" /> <attr name="ci_margin" for
使用python内置库或三方库实现：输出列表内所有指定元素的索引值
03-25
可以使用列表的一个内置函数 index() 来获取某个元素的索引值。例如，下面的代码可以输出列表 lst 中所有元素为 'a' 的索引值： lst = ['a', 'b', 'c', 'a', 'd', 'e', 'a'] target = 'a' indices = [i for i, x in...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值