# swipe-maker

**Repository Path**: chinasoft4_ohos/swipe-maker

## Basic Information

- **Project Name**: swipe-maker
- **Description**: 一款可以帮助你的控件快速实现各种滑动事件的View类库
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2021-06-16
- **Last Updated**: 2021-10-09

## Categories & Tags

**Categories**: harmonyos-layout

**Tags**: None

## README

# swipe-maker

## 项目介绍
- 项目名称：swipe-maker
- 所属系列：openharmony的第三方组件适配移植
- 功能：从library中创建您自己的swipeout项目视图。您可以自定义自己的刷卡效果“并且没有限制”，这些例子每个仅需5分钟即可完成。(分享功能由于API差异未实现)
- 项目移植状态：主功能完成
- 调用差异：无
- 开发版本：sdk6，DevEco Studio 2.2 Beta1
- 基线版本：Release v1.1.1

## 效果演示
**示例 Swipe of Swing**

<img src="images/swingswipe.gif"></img>

**示例 Swipe of Both Sides**

<img src="images/bothside.gif"></img>

**示例 Drag Right Side Swipe**

<img src="images/dragrightside.gif"></img>

**示例 Two-steps Right Swipe**

<img src="images/twosteps.gif"></img>

## 安装教程

1.在项目根目录下的build.gradle文件中，

 ```
 allprojects {
    repositories {
        maven {
            url 'https://s01.oss.sonatype.org/content/repositories/releases/'
        }
    }
 }
 ```
2.在entry模块的build.gradle文件中，

 ```
 dependencies {
    implementation('com.gitee.chinasoft_ohos:swipemaker:1.0.0')
    ......  
 }
 ```

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

## 使用说明
让我们一起实现一个 Right Side Swipe

1.继承AbsCoordinatorLayout并创建自己的Provider，在本例中，我称之为halfrightcordinatorlayout
```java
public class HalfRightCoordinatorLayout extends AbsCoordinatorLayout {
```
新增一个 init() 方法。并在自己创建的Provider中调用。为滑动小部件设置锚定。定位点是滑动卡片之间的边界。我们希望在按钮“mBackgroundView”边界内滑动
```java 
public void init() {
    mForegroundView = (SwipeLayout)findComponentById(ResourceTable.Id_foregroundView);
    mBackgroundView = findComponentById(ResourceTable.Id_backgroundView);
    mForegroundView.setOnTranslateChangeListener(this);
    sync(mForegroundView);
    this.addDrawTask(new DrawTask() {
        @Override
        public void onDraw(Component component, Canvas canvas) {
            mForegroundView.anchor(mBackgroundView.getRight(), mBackgroundView.getLeft());
        }
    });
}
```
2.需要注意的是,布局文件中：
SwipeLayout Id 必须是 $+id:foregroundView

backgroundView Id必须是 $+id:foregroundView
```java
<?xml version="1.0" encoding="utf-8"?>
<apps.xenione.com.swipelayout.example.swipe.HalfRightCoordinatorLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="250vp">

    <DirectionalLayout
        ohos:id="$+id:backgroundView"
        ohos:height="match_parent"
        ohos:width="match_content"
        ohos:background_element="#FF4081"
        ohos:alignment="center">
        <Image
            ohos:width="match_content"
            ohos:height="match_content"
            ohos:padding="13vp"
            ohos:image_src="$graphic:ic_delete" />
    </DirectionalLayout>

    <com.xenione.libs.swipemaker.SwipeLayout
        ohos:id="$+id:foregroundView"
        ohos:width="match_parent"
        ohos:height="250vp"
        ohos:orientation="vertical">
        <Image
            ohos:id="$+id:bg_disc"
            ohos:width="match_parent"
            ohos:height="250vp"
            ohos:scale_mode="clip_center"
            />
        <DependentLayout
            ohos:width="match_parent"
            ohos:height="match_parent">
            <Text
                ohos:id="$+id:bandName"
                ohos:width="match_content"
                ohos:height="match_content"
                ohos:text_color="#FFFFFF"
                ohos:background_element="#000000"
                ohos:alpha="0.80"
                ohos:padding="13vp"
                ohos:text_size="14fp"
                ohos:align_parent_right="true"
                ohos:align_parent_end="true"
                ohos:align_parent_top="true"
                ohos:top_margin="30vp"
                ohos:end_margin="30vp"
                ohos:right_margin="30vp"
             />
            <Text
                ohos:id="$+id:title"
                ohos:width="match_content"
                ohos:text_color="#FFFFFF"
                ohos:background_element="#FF4081"
                ohos:alpha="0.80"
                ohos:padding="13vp"
                ohos:text_size="15fp"
                ohos:height="match_content"
                ohos:align_end="$id:bandName"
                ohos:align_right="$id:bandName"
                ohos:below="$id:bandName"
                />
        </DependentLayout>
    </com.xenione.libs.swipemaker.SwipeLayout>
</apps.xenione.com.swipelayout.example.swipe.HalfRightCoordinatorLayout>
```
3.下面回到AbstracoordinatorLayout继承的类（就是我们的例子HalfRightCoordinatorLayout），您就有了一个名为onTranslateChange（…）的回调。
```java
@Override
public void onTranslateChange(float global, int index, float relative) {
}
```
您可以在其中监视刷卡进度。

参数说明如下：

global：给我们百分比（1%：0-1）：0表示左极限，1表示右极限。

index和relative：如果我们有一个以上的部分，如果我们给出了2个以上的锚点（例如两步滑动），就会发生这种情况

index：是截面的索引（如果我们有3个锚点，我们将有2个截面：一个从锚点1到2，另一个从锚点2到3）

relative：给出index部分中的precentage（1%：0-1）。

在我们的情况下，我们只有一个部分，所以我们不必照顾。所以让我们添加一个很好的过渡效果：

```java
@Override
public void onTranslateChange(float global, int index, float relative) {
     mBackgroundView.setAlpha(global);
}
```
## 测试信息

CodeCheck代码测试无异常

CloudTest代码测试无异常

病毒安全检测通过

当前版本demo功能与原组件基本无差异

## 版本迭代

- 1.0.0

## 版权和许可信息

    Copyright 2016 Eugeni Josep Senent i Gabriel
    
    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.