{"id":13644319,"url":"https://github.com/shellljx/TagViewGroup","last_synced_at":"2025-04-21T07:30:54.331Z","repository":{"id":92756230,"uuid":"77122346","full_name":"shellljx/TagViewGroup","owner":"shellljx","description":"Android 仿小红书图片标签Group","archived":false,"fork":false,"pushed_at":"2019-03-09T07:38:57.000Z","size":1982,"stargazers_count":896,"open_issues_count":4,"forks_count":116,"subscribers_count":16,"default_branch":"master","last_synced_at":"2024-11-09T16:44:19.377Z","etag":null,"topics":["android-library","animation","viewgroup"],"latest_commit_sha":null,"homepage":"","language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shellljx.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-12-22T07:23:46.000Z","updated_at":"2024-09-19T14:36:18.000Z","dependencies_parsed_at":"2023-05-05T00:46:58.694Z","dependency_job_id":null,"html_url":"https://github.com/shellljx/TagViewGroup","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shellljx%2FTagViewGroup","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shellljx%2FTagViewGroup/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shellljx%2FTagViewGroup/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shellljx%2FTagViewGroup/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shellljx","download_url":"https://codeload.github.com/shellljx/TagViewGroup/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250014590,"owners_count":21360980,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android-library","animation","viewgroup"],"created_at":"2024-08-02T01:02:01.236Z","updated_at":"2025-04-21T07:30:52.868Z","avatar_url":"https://github.com/shellljx.png","language":"Kotlin","readme":"# TagViewGroup\nAndroid 仿`小红书`图片标签，实现了图片标签的动画，布局，水波纹，编辑等功能，还可以自定义 Tag。[视频演示地址](http://qiniu.licrafter.com/shamuMMB29Klijx12252016215920.mp4)\n\nThis is a library of tags that are attached to the picture,you can add tags and ripple effects very easily.[Video demo](http://qiniu.licrafter.com/shamuMMB29Klijx12252016215920.mp4)\n\n[![](https://jitpack.io/v/shellljx/TagViewGroup.svg)](https://jitpack.io/#shellljx/TagViewGroup)\n\n![](http://qiniu.licrafter.com/ezgif.com-dc9f221590.gif)\n\n# Important Update\n1. added `TagAdapter` and make it easier to create TagViewGroup.\n\n2. moved `AnimatorUtils` out of the library to make it clean.\n\n# Gradle\n\n**Step 1.** Add it in your root build.gradle at the end of repositories:\n```groovy\nallprojects {\n\trepositories {\n\t\t...\n\t\tmaven { url 'https://jitpack.io' }\n\t}\n}\n```\n\n**Step 2.** Add the dependency\n```groovy\ndependencies {\n\t    compile 'com.github.shellljx:TagViewGroup:-SNAPSHOT'\n}\n```\n\n# How to use\n\n**1. Define in xml**\n```groovy\n\u003ccom.licrafter.tagview.TagViewGroup\n    android:id=\"@+id/tagViewGroup\"\n    android:layout_width=\"wrap_content\"\n    android:layout_height=\"wrap_content\"\n    app:inner_radius=\"4dp\"\n    app:line_width=\"1dp\"\n    app:radius=\"8dp\"\n    app:ripple_alpha=\"100\"\n    app:ripple_radius=\"20dp\"\n    app:tilt_distance=\"20dp\"/\u003e\n```\n\n**2. Or in code**\n```groovy\nTagViewGroup tagViewGroup = new TagViewGroup(getContext());\n```\n**3. Add animator**\n```groovy\n// set hide animator ,show animator and ripple\ntagViewGroup.setHideAnimator(hideAnimator).setShowAnimator(showAnimator).addRipple();\n```\n**4. Set tagAdapter**\n```groovy\ntagViewGroup.setTagAdapter(new TagAdapter() {\n    @Override\n    public int getCount() {\n        return model.getTags().size();\n    }\n\n    @Override\n    public ITagView getItem(int position) {\n        return makeTagTextView(model.getTags().get(position));\n    }\n});\n\n//set tagViewGroup location\ntagViewGroup.setPercent(model.getPercentX(), model.getPercentY());\n```\n\n**5. NotifyDataSetChanged**\n```groovy\ntagViewGroup.getTagAdapter().notifyDataSetChanged();\n```\n\n**6. Handle click events**\n```groovy\ntagViewGroup.setOnTagGroupClickListener(new TagViewGroup.OnTagGroupClickListener() {\n    @Override\n    public void onCircleClick(TagViewGroup container) {\n    //click the white circle of TagViewGroup         \n    }\n\n    @Override\n    public void onTagClick(TagViewGroup container, ITagView tag, int position) {\n    //clikc a tag of TagViewGroup\n    }\n\n    @Override\n    public void onLongPress(TagViewGroup container) {\n    \n    }\n});\n```\n**7. Drag TagViewGroup**\n```groovy\n//you can drag tagViewGroup only if you set OnTagGroupDragListener\ntagViewGroup.setOnTagGroupDragListener(new TagViewGroup.OnTagGroupDragListener() {\n    @Override\n    public void onDrag(TagViewGroup container, float percentX, float percentY) {\n                    \n    }\n});\n```\n\n**Attributes:**\n\n|attr属性|description 描述|\n|:---|:---|\n|inner_radius|中心内圆半径|\n|radius|中心外圆半径|\n|line_width|线条宽度|\n|v_distance|圆心到垂直折点的垂直距离|\n|tilt_distance|圆心到斜线折点的垂直距离|\n|ripple_alpha|水波纹起始透明度|\n|ripple_maxRadius|水波纹最大半径|\n\n# How to customize the animation\n\nYou can use the following properties in Property Animation:\n\n|property属性|description 描述|\n|:---|:---|\n|LinesRatio(TagViewGroup.LINES_RATIO)|线条显现的长度占总长度的百分比|\n|TagAlpha(TagViewGroup.TAG_ALPHA)|单个Tag的透明度|\n|CircleRadius(TagViewGroup.CIRCLE_RADIUS)|中心圆半径|\n|CircleInnerRadius(TagViewGroup.CIRCLE_INNER_RADIUS)|中心内圆半径|\n\n# How to implement your own Tag view\n\n**Step 1.** create a view implement `ITagView` interface.\n\n**Step 2.** Override the following methods:\n\n```groovy\n@Override\npublic void setDirection(DIRECTION direction) {\n    mDirection = direction;\n}\n\n@Override\npublic DIRECTION getDirection() {\n    return mDirection;\n}\n```\n","funding_links":[],"categories":["TagView"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshellljx%2FTagViewGroup","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshellljx%2FTagViewGroup","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshellljx%2FTagViewGroup/lists"}