鸿蒙开源组件——快速滑动和分区显示功能列表

jacksky

发布于 2022-2-28 19:22

浏览

0收藏

recycler-fast-scroll

项目介绍

项目名称：recycler-fast-scroll
所属系列：openharmony 第三方组件适配移植
功能：ListContainer 的快速滑动和分区显示
项目移植状态：部分功能完成(功能：ListContainer的Item高度或宽度不固定时存在问题)
调用差异：样式设置与方法名称与原版有不同，具体请参考使用说明
开发版本：sdk6，DevEco Studio 2.2 Beta1
基线版本：基于Maven 0.2.5 版本

效果演示

鸿蒙开源组件——快速滑动和分区显示功能列表-鸿蒙开发者社区

安装教程

在moudle级别下的build.gradle文件中添加依赖，在dependencies标签中增加对libs目录下jar包的引用

// 添加maven仓库
repositories {
   maven {
       url 'https://s01.oss.sonatype.org/content/repositories/release/'
   }
}

// 添加依赖库
dependencies {
   implementation 'com.gitee.chinasoft_ohos:fastscroll:1.0.0'   
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

在sdk6，DevEco Studio 2.2 Beta1下项目可直接运行如无法运行，删除项目.gradle,.idea,build,gradle,build.gradle文件，并依据自己的版本创建新项目，将新项目的对应文件复制到根目录下

使用说明

在 layout 文件:

<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    xmlns:app="http://schemas.huawei.com/apk/res-auto"
    ohos:height="match_parent"
    ohos:width="match_parent"

  >
    <ListContainer
        ohos:id="$+id:list_con"
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:orientation="vertical"
        ></ListContainer>

    <com.futuremind.recyclerviewfastscroll.FastScroller
        ohos:id="$+id:fast"
        ohos:height="match_parent"
        ohos:width="match_content"
        ohos:align_parent_right="true"
        ohos:orientation="vertical"
        >

    </com.futuremind.recyclerviewfastscroll.FastScroller>
</DependentLayout>1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.

<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    xmlns:app="http://schemas.huawei.com/apk/res-auto"
    ohos:height="match_parent"
    ohos:width="match_parent"

  >
    <ListContainer
        ohos:id="$+id:list_con"
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:orientation="vertical"
        ></ListContainer>

    <com.futuremind.recyclerviewfastscroll.FastScroller
        ohos:id="$+id:fast"
        ohos:height="match_parent"
        ohos:width="match_content"
        ohos:align_parent_right="true"
        ohos:orientation="vertical"
        >

    </com.futuremind.recyclerviewfastscroll.FastScroller>
</DependentLayout>1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.

在 Ability/AbilitySlice:

        listContainer = (ListContainer) mainComponent.findComponentById(ResourceTable.Id_list_con);
        fastScroller = (FastScroller) mainComponent.findComponentById(ResourceTable.Id_fast);
        listContainer.setItemProvider(BaseItemProvider);
     
        //必须在 listContainer.setItemProvider之后调用
        fastScroller.setListContainer(listContainer);1.
2.
3.
4.
5.
6.

在 ListContainer.BaseItemProvider

        public class BaseItemProvider ... implements SectionTitleProvider{
            
            ...
            
            @Override
            public String getSectionTitle(int position) {
                //此字符串将显示在指定位置的冒泡中
                return getItem(position).substring(0, 1);
            }
            
        }1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

注意: 您必须在适配器中填充足够的项目，以便“FastScroll”显示。我有一个自动隐藏机制，以防没有东西可以滚动。

水平方向

您可以将此库与水平LayoutManager一起使用。使用ohos:orientation="horizontal"属性:

    <com.futuremind.recyclerviewfastscroll.FastScroller
        ohos:id="$+id:fast"
        ohos:height="match_parent"
        ohos:width="match_content"
        ohos:orientation="vertical"
        >
    </com.futuremind.recyclerviewfastscroll.FastScroller>1.
2.
3.
4.
5.
6.
7.

样式

在0.1.5版中引入了样式化，并提供了一组有限的可样式化属性。更多的项目正在进行中。更多的项目正在进行中。

你可以在xml布局中样式属性:

相关属性:

handleColor 滚动条颜色
bubbleColor 气泡背景颜色
bubbleTextColor 气泡文字显示颜色
bubbleTextSize 气泡文字字体大小
textStyle 气泡文字样式支持 bold，italic

    <com.futuremind.recyclerviewfastscroll.FastScroller
           ...
           app:handleColor="#8f93d1"
           app:bubbleColor="#5e64ce"
           app:bubbleTextColor="#e0e0e0"
           app:bubbleTextSize="24fp"
           app:textStyle="bold"
           />1.
2.
3.
4.
5.
6.
7.
8.

或直接在代码中:

         fastScroller.setBubbleColor(0xffff0000);
         fastScroller.setHandleColor(0xffff0000);
         fastScroller.setBubbleTextColor(0xffff0000);
         fastScroller.setBubbleTextSize(24);
         fastScroller.setTextStyle("bold");1.
2.
3.
4.
5.

更多信息请参见示例代码。

自定义控件

你可以为你的滚动条和气泡设置自定义布局和动画，使用:

        myViewProvider = new CustomScrollerViewProvider();
        fastScroller.setViewProvider(myViewProvider);1.
2.

要了解更多信息，请查看 CustomScrollerViewProvider 示例代码.

测试信息

CodeCheck代码测试无异常
CloudTest代码测试无异常
病毒安全检测通过
当前版本demo功能与原组件基本无差异

版本迭代

1.0.0

版权和许可信息

Copyright 2015 Future Mind

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.