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
-
added
TagAdapterand make it easier to create TagViewGroup. -
moved
AnimatorUtilsout of the library to make it clean.
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'
}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 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 | 水波纹最大半径 |
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) | 中心内圆半径 |
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; }