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;
}
如果觉得《android 仿小红书标签 Android 仿小红书图片标签》对你有帮助，请点赞、收藏，并留下你的观点哦！
