Android TagView 云标签

谢晓枫 YY娱乐

http://code.yy.com/xiexiaofeng/android-cloud-tagview

https://github.com/kaedea

网页上常见的云标签

https://github.com/kaedea

Feature

支持设置标签内容的样式，如字体大小、颜色
支持设置标签的颜色（或者自定义布局）、点击效果、圆角效果、是否可删除
自动排列标签，能自定义标签的间距和行距
能监听标签的点击和删除事件
支持从代码或者XML创建TagView

https://github.com/kaedea

Sample Screenshots

https://github.com/kaedea

Design

方案一

使用“SpannableString”将TextView的内容风格成小段
每个小段能自定义样式和监听自己的点击事件

方案二

是用ViewGroup包含多个TextView
给每个TextView设置样式和监听事件

https://github.com/kaedea

方案一在实际项目中的使用

Bilibili v3.0 视频详情页

方案二在实际项目中的使用

YY 3.7 搜索页

Android SpannableString

Android View

通过XML布局文件使用

   <me.kaede.tagview.TagView
            android:id="@+id/tagview"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            app:lineMargin="5dp" //行距
            app:tagMargin="3dp"  //间距
            app:textPaddingBottom="3dp"
            app:textPaddingLeft="10dp"
            app:textPaddingRight="10dp"
            app:textPaddingTop="3dp">
   </me.kaede.tagview.TagView>

https://github.com/kaedea

通过JAVA代码使用

   TagView tagview2 = new TagView(this);
   tagview2.setLineMargin(20f);//dp
   tagview2.setTagMargin(20f);
   tagview2.setTextPaddingLeft(20f);
   tagview2.setTextPaddingTop(20f);
   tagview2.setTextPaddingRight(20f);
   tagview2.setTexPaddingBottom(20f);

https://github.com/kaedea

添加标签

String[] tags = getResources().getStringArray(R.array.continents);
tagView.addTags(tags);

Tag tag = new Tag("Tag Text");
tag.tagTextColor = Color.parseColor("#FFFFFF");
tag.layoutColor =  Color.parseColor("#DDDDDD");
tag.layoutColorPress = Color.parseColor("#555555");
//tag.background = this.getResources().getDrawable(R.drawable.custom_bg);
tag.radius = 20f;
tag.tagTextSize = 14f;
tag.layoutBorderSize = 1f;
tag.layoutBorderColor = Color.parseColor("#FFFFFF");
tag.isDeletable = true;
tagView.addTag(tag);

https://github.com/kaedea

Exceptions

https://github.com/kaedea

THANK YOU

YY娱乐谢晓枫