TagViewGroup

  • 视图布局 (View Layout)
  • ★★★★★
  • 2017-01-07 18:49
  • 1924 kb
  • Android Studio

介绍:

Android 仿小红书图片标签,实现了图片标签的动画,布局,水波纹,编辑等功能,还可以自定义 Tag。

运行效果:

使用说明:

视频演示地址

在项目的build.gradle中加入如下代码:

allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}

在相应的模块的build.gradle中加入如下代码:

dependencies {
        compile 'com.github.shellljx:TagViewGroup:v1.2'
}

1. Define in xml

<com.licrafter.tagview.TagViewGroup
    android:id="@+id/tagViewGroup"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:inner_radius="4dp"
    app:line_width="1dp"
    app:radius="8dp"
    app:ripple_alpha="100"
    app:ripple_radius="20dp"
    app:tilt_distance="20dp"/>

或者在code中定义

TagViewGroup tagViewGroup = new TagViewGroup(getContext());
tagViewGroup.setShowAnimator(AnimatorUtils.getTagShowAnimator(tagViewGroup))
        .setHideAnimator(AnimatorUtils.getTagHideAnimator(tagViewGroup))
        .addTagList(tagViewList)
        .setPercent(percentX,percentY)
        .addRipple();

属性:

attr属性description 描述
inner_radius中心内圆半径
radius中心外圆半径
line_width线条宽度
v_distance圆心到垂直折点的垂直距离
tilt_distance圆心到斜线折点的垂直距离
ripple_alpha水波纹起始透明度
ripple_maxRadius水波纹最大半径

如何自定义动画

你可以在属性动画中使用如下属性:

property属性description 描述
LinesRatio线条显现的长度占总长度的百分比
TagAlpha单个Tag的透明度
CircleRadius中心圆半径
CircleInnerRadius中心内圆半径

如何实现你自己的Tag view

Step 1.创建一个实现ITagView接口的view

Step 2.重写如下方法:

@Override
public void setDirection(DIRECTION direction) {
    mDirection = direction;
}

@Override
public DIRECTION getDirection() {
    return mDirection;
}