Like Button是一个库,允许您创建具有类似于[Twitter的心脏]的动画效果的按钮Twitter's heart当你喜欢某样东西的时候。
Add this in your root build.gradle
file (not your module build.gradle
file):
allprojects {
repositories {
...
mavenCentral()
}
}
Add this to your module's build.gradle
file:
dependencies {
...
implementation 'com.gitee.baijuncheng-open-source:LikeButton:1.0.1'
}
}
要在布局中使用这个like按钮,只需复制并粘贴下面的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"
/>
还有其他几个属性可用于配置按钮的行为和外观。它们如下所示,并将在后面的小节中与java对应部分一起详细解释。
<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"/>
要设置按钮的初始状态,只需通过XML或Java使用setLiked功能。这将显示按钮在喜欢的状态与您选择的绘图。
app:liked="true"
likeButton.setLiked(true);
您还可以设置按钮是启用还是禁用。一旦禁用,按钮的动画、侦听器或任何其他功能都不会被触发。
app:is_enabled="false"
likeButton.setEnabled(false);
要侦听like按钮中的事件,只需实现一个侦听器,该侦听器在点击按钮时触发。
likeButton.setOnLikeListener(new OnLikeListener() {
@Override
public void liked(LikeButton likeButton) {
}
@Override
public void unLiked(LikeButton likeButton) {
}
});
库捆绑了三个图标,你可以使用。一颗心,一个拇指和一颗星星。
要通过xml设置相应的图标,只需使用icon type属性中的单词。
app:icon_type="heart"
如果您想通过Java设置图标,那么只需调用按钮上的set icon方法。
likeButton.setIcon(IconType.Star);
要通过xml设置图标大小,只需使用此属性
app:icon_size="20vp"
如果您是以编程方式进行设置,则可以使用像素方法或dp方法进行设置。
likeButton.setIconSizePx(40);
likeButton.setIconSizeDp(20);
请注意,设置按钮的大小是非常重要的,即使您计划使用如下所述的自定义绘图,因为库使用此值来确定点击按钮时出现的效果的宽度和高度。
为了使用自定义图标而不是与库捆绑在一起的图标,只需设置表示按钮的喜欢和不喜欢状态的可绘制图标。
app:like_drawable="$media:heart_on"
app:unlike_drawable="$media:heart_off"
//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);
如果你仔细观察动画,你会注意到有一个圆从图标的中心开始,然后在爆炸点开始之前远离中心。这些颜色可以改变,以适应您的图标的主题。
app:circle_end_color="$color:holo_blue_dark"
app:circle_start_color="$color:holo_blue_bright"
likeButton.setCircleStartColorRes(ResourceTable.Color_holo_blue_bright);
likeButton.setCircleEndColorRes(ResourceTable.Color_holo_blue_bright);
代表外部动画的点也可以着色。
app:dots_primary_color="$color:holo_blue_dark"
app:dots_secondary_color="$color:holo_blue_light"
likeButton.setExplodingDotColorsRes(ResourceTable.Color_holo_blue_bright,ResourceTable.Color_holo_blue_bright);
要更改点的大小(也会影响整体like button视图的大小),可以通过XML或Java等效工具使用animation scale factor属性
app:anim_scale_factor="2.5"
likeButton.setAnimationScaleFactor(2);
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.
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.
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。