# LikeButton

**Repository Path**: baijuncheng-open-source/LikeButton

## Basic Information

- **Project Name**: LikeButton
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 1
- **Created**: 2021-05-19
- **Last Updated**: 2024-05-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Like Button 


Like Button是一个库，允许您创建具有类似于[Twitter的心脏]的动画效果的按钮Twitter's heart当你喜欢某样东西的时候。

## Preview
![](picture/likebutton.gif)

<img src="picture/pic1.png" style="zoom:80%;" />
---

<img src="picture/pic2.png" style="zoom:80%;" />




# Table of Contents

1. Gradle Dependency
   1. Repository
   2. Dependency
2. Basic Usage
   1. Like Button XML
   2. Attributes
3. Button State
4. Like Event Listener
5. Icon Types
6. Icon Size
7. Custom Icons
8. Circle Color Config
9. Dots Color Config
10. Animation Size
11. Inspiration
12. Contribution
13. Licens

---

# Gradle Dependency


#### Repository

Add this in your root `build.gradle` file (**not** your module `build.gradle` file):

```gradle
allprojects {
	repositories {
		...
		mavenCentral()
	}
}
```

#### Dependency

Add this to your module's `build.gradle` file:

```gradle
dependencies {
	...
	implementation 'com.gitee.baijuncheng-open-source:LikeButton:1.0.1'
	}
}
```

---

# Basic Usage

#### Like Button XML

要在布局中使用这个like按钮，只需复制并粘贴下面的xml。这提供了默认的心脏按钮 

```xml
 <com.like.LikeButton
            ohos:id="$+id:star_button"
            ohos:height="match_content"
            ohos:width="match_content"
            app:icon_size="20vp"
            app:icon_type="heart"
            app:liked="true"
            />
```

#### Attributes

还有其他几个属性可用于配置按钮的行为和外观。它们如下所示，并将在后面的小节中与java对应部分一起详细解释。

```xml
<com.like.LikeButton
            ohos:id="$+id:smile_button"
            ohos:height="match_content"
            ohos:width="match_content"
            app:circle_end_color="$color:holo_purple"
            app:circle_start_color="$color:holo_purple"
            app:dots_primary_color="$color:holo_blue_dark"
            app:dots_secondary_color="$color:holo_blue_light"
            app:icon_size="20vp"
            app:like_drawable="$media:heart_on"
            app:unlike_drawable="$media:heart_off"/>

```
---

# Button State

要设置按钮的初始状态，只需通过XML或Java使用setLiked功能。这将显示按钮在喜欢的状态与您选择的绘图。

#### XML

```
app:liked="true"
```

#### Java


```java
likeButton.setLiked(true);
```

您还可以设置按钮是启用还是禁用。一旦禁用，按钮的动画、侦听器或任何其他功能都不会被触发。

#### XML

```
app:is_enabled="false"
```

#### Java


```java

likeButton.setEnabled(false);
```



---

# Like Event Listener

要侦听like按钮中的事件，只需实现一个侦听器，该侦听器在点击按钮时触发。

```java
likeButton.setOnLikeListener(new OnLikeListener() {
            @Override
            public void liked(LikeButton likeButton) {

            }

            @Override
            public void unLiked(LikeButton likeButton) {

            }
        });

```

---

# Icon Types

库捆绑了三个图标，你可以使用。一颗心，一个拇指和一颗星星。

#### XML

要通过xml设置相应的图标，只需使用icon type属性中的单词。

```
app:icon_type="heart"
```

#### Java

如果您想通过Java设置图标，那么只需调用按钮上的set icon方法。

```java
likeButton.setIcon(IconType.Star);
```
---

# Icon Size

#### XML

要通过xml设置图标大小，只需使用此属性

```xml
app:icon_size="20vp"
```

#### Java

如果您是以编程方式进行设置，则可以使用像素方法或dp方法进行设置。

```java
likeButton.setIconSizePx(40);
likeButton.setIconSizeDp(20);
```
请注意，设置按钮的大小是非常重要的，即使您计划使用如下所述的自定义绘图，因为库使用此值来确定点击按钮时出现的效果的宽度和高度。

---

# Custom Icons

#### XML

为了使用自定义图标而不是与库捆绑在一起的图标，只需设置表示按钮的喜欢和不喜欢状态的可绘制图标。

```
app:like_drawable="$media:heart_on"
app:unlike_drawable="$media:heart_off"
```

#### Java

```java
//shown when the button is in its default state or when unLiked.
smileButton.setUnlikeDrawableRes(ResourceTable.Media_emoticonlike);

 //shown when the button is liked!
 smileButton.setLikeDrawableRes(ResourceTable.Media_emoticonunlike);
```
---

# Circle Color Config

如果你仔细观察动画，你会注意到有一个圆从图标的中心开始，然后在爆炸点开始之前远离中心。这些颜色可以改变，以适应您的图标的主题。

#### XML

```
app:circle_end_color="$color:holo_blue_dark"
app:circle_start_color="$color:holo_blue_bright"
```

#### Java

```java
likeButton.setCircleStartColorRes(ResourceTable.Color_holo_blue_bright);
likeButton.setCircleEndColorRes(ResourceTable.Color_holo_blue_bright);
```
---

# Dots Color Config

代表外部动画的点也可以着色。

#### XML

```
app:dots_primary_color="$color:holo_blue_dark"
app:dots_secondary_color="$color:holo_blue_light"
```

#### Java

```
likeButton.setExplodingDotColorsRes(ResourceTable.Color_holo_blue_bright,ResourceTable.Color_holo_blue_bright);
```
---


# Animation Size

要更改点的大小（也会影响整体like button视图的大小），可以通过XML或Java等效工具使用animation scale factor属性

#### XML

```
app:anim_scale_factor="2.5"
```

#### Java

```
likeButton.setAnimationScaleFactor(2);
```


# Contribution


Please fork repository and contribute using pull requests.

Any contributions, large or small, major features, bug fixes, additional language translations, unit/integration tests are welcomed and appreciated but will be thoroughly reviewed and discussed.

# License

    Copyright 2016 Joel Dean
    
    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.