# MarqueeViewLibrary

**Repository Path**: hihopeorg/MarqueeViewLibrary

## Basic Information

- **Project Name**: MarqueeViewLibrary
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-03-11
- **Last Updated**: 2021-10-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# MarqueeViewLibrary
**本项目是基于开源项目MarqueeViewLibrary进行ohos化的移植和开发的，可以通过项目标签以及github地址（https://github.com/gongwen/MarqueeViewLibrary ) 追踪到原项目版本**

#### 项目介绍
 - 项目名称： MarqueeViewLibrary
 - 所属系列：ohos的第三方组件适配移植
 - 功能： 一个很方便使用和扩展的跑马灯Library，通过提供不同的MarqueeFactory来定制不同的跑马灯View，
       并且提供了常用类型的跑马灯效果：SimpleMarqueeView
 - 项目移植状态：完成
 - 调用差异：无
 - 项目作者和维护人： hihope
 - 联系方式：hihope@hoperun.com
 - 原项目Doc地址：https://github.com/gongwen/MarqueeViewLibrary#readme
 - 原项目基线版本：v_1.1.3   sha1:a5d8d69f25a2ef760578c067504dadb1348580f7
 - 编程语言：Java
 - 外部库依赖：

#### 效果展示
<img src="screenshot/MarqueeViewLibrary.gif" />

#### 安装教程
方法1.

1. 下载依赖库har包MarqueeViewLibrary.har。
2. 启动 DevEco Studio，将下载的har包，导入工程目录“entry->libs”下。
3. 在moudle级别下的build.gradle文件中添加依赖，在dependences标签中增加对libs目录下har包的引用。

```
dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar', '*.har'])
	……
}
```

4. 在导入的har包上点击右键，选择“Add as Library”对包进行引用，选择需要引用的模块，并点击“OK”即引用成功。

方法2.

1. 在工程的build.gradle的allprojects中，添加HAR所在的Maven仓地址

```
repositories {
    maven {
        url 'http://106.15.92.248:8081/repository/Releases/' 
    }
}
```

2. 在应用模块的build.gradle的dependencies闭包中，添加如下代码:

```
dependencies {
    implementation 'com.gongwen.ohos:marqueelibrary:1.0.1'
}
```


#### 使用说明
#####  基本使用
MarqueeView属性

| Attribute 属性          | Description 描述 |
|:---				     |:---|
| marqueeAnimDuration         | 动画执行时间            |

SimpleMarqueeView属性(支持MarqueeView所有属性及以下属性)

| Attribute 属性          | Description 描述 |
|:---				     |:---|
| smvTextSize         |    文字大小       |
| smvTextColor         | 文字颜色            |
| smvTextAlignment         |  文字位置          |
| smvTextSingleLine | 文字是否单行显示 |
| smvTextTruncationMode | 文字显示不下时，系统的处理方式(可选：none，ellipsis_at_start，ellipsis_at_middle，ellipsis_at_end) |

### 常见用法：使用SimpleMarqueeView和SimpleMF

#### XML
```
<com.gongwen.marquee.SimpleMarqueeView
                ohos:id="$+id:marqueeView2"
                ohos:height="match_parent"
                ohos:width="0vp"
                ohos:weight="1"
                app:smvTextAlignment="vertical_center"
                app:smvTextColor="#FFE13D"
                app:smvTextTruncationMode="ellipsis_at_end"
                app:smvTextSingleLine="true"
                app:smvTextSize="15fp"/>
```

#### 设置数据
```
final List<String> datas = Arrays.asList("《赋得古原草送别》", "离离原上草，一岁一枯荣。", "野火烧不尽，春风吹又生。", "远芳侵古道，晴翠接荒城。", "又送王孙去，萋萋满别情。");
//SimpleMarqueeView<T>，SimpleMF<T>：泛型T指定其填充的数据类型，比如String，Spanned等
SimpleMarqueeView<String> marqueeView = (SimpleMarqueeView) findViewById(R.id.marqueeView);
SimpleMF<String> marqueeFactory = new SimpleMF(this);
marqueeFactory.setData(datas);
marqueeView.setMarqueeFactory(marqueeFactory);
marqueeView.startFlipping();
```

#### 设置监听事件
```
marqueeView.setOnItemClickListener(new OnItemClickListener<Text, String>() {
    @Override
    public void onItemClickListener(Text mView, String mData, int mPosition) {
        /**
        * 注意：
        * 当MarqueeView有子View时，mView：当前显示的子View，mData：mView所填充的数据，mPosition：mView的索引
        * 当MarqueeView无子View时，mView：null，mData：null，mPosition：－1
        */
    }
});
```

### 扩展用法：自定义MarqueeFactory来定制任意类型ItemView

#### XML
```
<com.gongwen.marquee.MarqueeView
            ohos:id="$+id:marqueeView4"
            ohos:height="match_content"
            ohos:width="match_parent"
            ohos:left_margin="50vp"
            ohos:right_margin="50vp"
            ohos:top_margin="20vp"
            ohos:background_element="$graphic:bg_large_oval_radius"/>

```

#### 自定义MarqueeFactory
继承自MarqueeFactory，通过泛型指定ItemView类型以及ItemData类型，之后实现generateMarqueeItemView方法，提供ItemView，并为ItemView设置数据即可。
##### 例如：
```
//MarqueeFactory<T extends View, E>
//泛型T:指定ItemView的类型
//泛型E:指定ItemView填充的数据类型
public class ComplexViewMF extends MarqueeFactory<DependentLayout, ComplexItemEntity> {
    private LayoutScatter inflater;
    
        public ComplexViewMF(Context mContext) {
            super(mContext);
            inflater = LayoutScatter.getInstance(mContext);
        }
    
        @Override
        public DependentLayout generateMarqueeItemView(ComplexItemEntity data) {
            DependentLayout mView = (DependentLayout) inflater.parse(ResourceTable.Layout_complex_view3, null,false);
            ((Text) mView.findComponentById(ResourceTable.Id_title)).setText(data.getTitle());
            ((Text) mView.findComponentById(ResourceTable.Id_secondTitle)).setText(data.getSecondTitle());
            ((Text) mView.findComponentById(ResourceTable.Id_time)).setText(data.getTime());
            return mView;
        }
}
```



#### 版本迭代
 - v1.0.1



#### 版权和许可信息
 - Apache License