# HoverTouchView

**Repository Path**: HarmonyOS-tpc/HoverTouchView

## Basic Information

- **Project Name**: HoverTouchView
- **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-09-17
- **Last Updated**: 2024-12-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# HoverTouchView

Stimulate Force Touch or 3D Touch on ohos App with Hover Gesture. Hover in this case is gesture that user hold a touch in the Component.
This Lib implemented by Component.TouchEventListener, TouchEvent.PRIMARY_POINT_DOWN and TouchEvent.PRIMARY_POINT_UP.

## HoverTouchView includes :
* Allow Custom Component as a Hover Component
* Built-in Translucent(alpha) Effect on Backgroud
* Config for Animation Duration
* Provide onStartHover() and onStopHover() for flexibility

# Usage Instructions

This library work as a util class that call setTouchEventListener(...) to the Component that you want user to hold a finger to see more information. Basically, I provided HoverTouchAble interface that you have to implement on your Custom Component Class that act as a hover area such as Thumbnail, List Item, Cover Image

public interface HoverTouchAble{
    public Component getHoverView(); // return view that appear when user hold touch on this view
    public int getHoverAnimateDuration(); // return duration(ms) for show/hide Hover View Animation
    public void onStartHover(); // Callback when user start hover this view
    public void onStopHover(); // Callback when user stop hover this view
}
Then use helper class to initial hover view
 StackLayout root = (StackLayout) findComponentById(ResourceTable.Id_root);

MyThumbnail pic1 = (MyThumbnail) findComponentById(ResourceTable.Id_pic1);
HoverTouchHelper.make(root, pic1);
Example
Custom Image Component as Thumbnail
public class MyThumbnail extends Image implements HoverTouchAble {
  ...

    @Override
    public Component getHoverView() {

        PixelMap pixelMap = getPixelMap();
        Element drawable = (Element) (new PixelMapElement(pixelMap));

        return new MyThumbnailExpand(getContext(), drawable, "Description Text For Photo\nNoted : This is just demo view you better to make your own view.");
    }

    @Override
    public int getHoverAnimateDuration() {
        return 300;
    }

    @Override
    public void onStartHover() {
        showToast("Start Hover");
    }

    @Override
    public void onStopHover() {
        showToast("Stop Hover");
    }
  ...

}
Create Your Custom Component that show when user hover
public class MyThumbnailExpand extends DirectionalLayout {
  ...
  public MyThumbnailExpand(Context context, Element drawable, String text) {
        super(context);
        this.drawable = drawable;
        this.text = text;
        this.context = context;
        init();
    }

  private void init(){
          Component rootView = LayoutScatter.getInstance(context)
                .parse(ResourceTable.Layout_view_my_thumbnail_expand, null, false);

        Image img = (Image) rootView.findComponentById(ResourceTable.Id_img);
        Text text = (Text) rootView.findComponentById(ResourceTable.Id_text);
        this.drawable.setBounds(ZERO_BOUNDS, ZERO_BOUNDS, BOUNDS, BOUNDS);
        img.setImageElement(this.drawable);
        text.setText(this.text);

        DirectionalLayout.LayoutConfig layoutConfig = new DirectionalLayout.LayoutConfig(
                LayoutConfig.MATCH_PARENT, LayoutConfig.MATCH_PARENT);
        layoutConfig.alignment = LayoutAlignment.CENTER;

        text.setWidth(ComponentContainer.LayoutConfig.MATCH_PARENT);
        text.setHeight(ComponentContainer.LayoutConfig.MATCH_CONTENT);
        text.setTextAlignment(TextAlignment.CENTER);

        DirectionalLayout.LayoutConfig layoutParams = new DirectionalLayout.LayoutConfig(BOUNDS, BOUNDS);
        img.setLayoutConfig(layoutParams);

        addComponent(rootView);
        setLayoutConfig(layoutConfig);

  }
}

Your Hover Able Component must place in StackLayout
<StackLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:id="$+id:root"
    ... >
    ...
    <com.nantaphop.hovertouchviewexample.widget.MyThumbnail
            ohos:id="$+id:pic1"
            ohos:height="128vp"
            ohos:width="128vp"
            ohos:image_src="$media:pic1"/>
    ...
</StackLayout>
Then, Use HoverTouchHelper to initial your hover component
 @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
    }

    @Override
    public void onActive() {
        super.onActive();

        StackLayout root = (StackLayout) findComponentById(ResourceTable.Id_root);
        MyThumbnail pic1 = (MyThumbnail) findComponentById(ResourceTable.Id_pic1);
        MyThumbnail pic2 = (MyThumbnail) findComponentById(ResourceTable.Id_pic2);
        MyThumbnail pic3 = (MyThumbnail) findComponentById(ResourceTable.Id_pic3);
        MyThumbnail pic4 = (MyThumbnail) findComponentById(ResourceTable.Id_pic4);

        HoverTouchHelper.make(root, pic1);
        HoverTouchHelper.make(root, pic2);
        HoverTouchHelper.make(root, pic3);
        HoverTouchHelper.make(root, pic4);

    }

## Installation tutorial

1.For using HoverTouchView module in sample app, Add the dependencies in entry/build.gradle as below :

dependencies {
    implementation project(path: ':hoverTouchView')
}

2.Using the hoverTouchView.har, make sure to add hoverTouchView.har file in the entry/libs folder.

Modify the dependencies in the entry/build.gradle file.
dependencies {
     implementation fileTree(dir: 'libs', include: [' *.jar', ' *.har'])
}

3.For using HoverTouchView from a remote repository in separate application, add the below dependency in entry/build.gradle file.

Modify entry build.gradle as below :
```gradle
dependencies {
       implementation 'io.openharmony.tpc.thirdlib:HoverTouchView:1.0.0'
}
```

# License

  Copyright 2016 Nantaphop Phuengphae

  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.