仿小红书的图片标签

TagViewGroup

项目地址：shellljx/TagViewGroup

简介：仿小红书的图片标签

更多：作者   提 Bug   示例 APK   

标签：

图片标签-小红书-自定义ViewGroup-

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

1. added TagAdapter and make it easier to create TagViewGroup.

2. 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

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

2. Or in code

TagViewGroup tagViewGroup = new TagViewGroup(getContext());

3. Add animator

// set hide animator ,show animator and rippletagViewGroup.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 locationtagViewGroup.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 OnTagGroupDragListenertagViewGroup.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:

@Overridepublic void setDirection(DIRECTION direction) {    mDirection = direction;}@Overridepublic DIRECTION getDirection() {    return mDirection;}