android 仿小红书标签,Android 仿小红书图片标签

TagViewGroup

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

This is a library of tags that are attached to the picture,you can add tags and ripple effects very easily.Video demo

Important Update

added TagAdapter and make it easier to create TagViewGroup.

moved AnimatorUtils out of the library to make it clean.

Gradle

Step 1. Add it in your root build.gradle at the end of repositories:

allprojects {

repositories {

...

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

}

}

Step 2. Add the dependency

dependencies {

compile 'com.github.shellljx:TagViewGroup:-SNAPSHOT'

}

How to use

1. Define in xml

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"/>

2. Or in code

TagViewGroup tagViewGroup = new TagViewGroup(getContext());

3. Add animator

// set hide animator ,show animator and ripple

tagViewGroup.setHideAnimator(hideAnimator).setShowAnimator(showAnimator).addRipple();

4. Set tagAdapter

tagViewGroup.setTagAdapter(new TagAdapter() {

@Override

public int getCount() {

return model.getTags().size();

}

@Override

public ITagView getItem(int position) {

return makeTagTextView(model.getTags().get(position));

}

});

//set tagViewGroup location

tagViewGroup.setPercent(model.getPercentX(), model.getPercentY());

5. NotifyDataSetChanged

tagViewGroup.getTagAdapter().notifyDataSetChanged();

6. Handle click events

tagViewGroup.setOnTagGroupClickListener(new TagViewGroup.OnTagGroupClickListener() {

@Override

public void onCircleClick(TagViewGroup container) {

//click the white circle of TagViewGroup

}

@Override

public void onTagClick(TagViewGroup container, ITagView tag, int position) {

//clikc a tag of TagViewGroup

}

@Override

public void onLongPress(TagViewGroup container) {

}

});

7. Drag TagViewGroup

//you can drag tagViewGroup only if you set OnTagGroupDragListener

tagViewGroup.setOnTagGroupDragListener(new TagViewGroup.OnTagGroupDragListener() {

@Override

public void onDrag(TagViewGroup container, float percentX, float percentY) {

}

});

Attributes:

attr属性

description 描述

inner_radius

中心内圆半径

radius

中心外圆半径

line_width

线条宽度

v_distance

圆心到垂直折点的垂直距离

tilt_distance

圆心到斜线折点的垂直距离

ripple_alpha

水波纹起始透明度

ripple_maxRadius

水波纹最大半径

How to customize the animation

You can use the following properties in Property Animation:

property属性

description 描述

LinesRatio(TagViewGroup.LINES_RATIO)

线条显现的长度占总长度的百分比

TagAlpha(TagViewGroup.TAG_ALPHA)

单个Tag的透明度

CircleRadius(TagViewGroup.CIRCLE_RADIUS)

中心圆半径

CircleInnerRadius(TagViewGroup.CIRCLE_INNER_RADIUS)

中心内圆半径

How to implement your own Tag view

Step 1. create a view implement ITagView interface.

Step 2. Override the following methods:

@Override

public void setDirection(DIRECTION direction) {

mDirection = direction;

}

@Override

public DIRECTION getDirection() {

return mDirection;

}