一．关于3D标签云

TagCloudView是一个完全基于Android ViewGroup编写的控件，支持将一组View展示为一个3D标签云，并支持全方向滚动。
GitHub中的链接地址：https://github.com/misakuo/3dTagCloudAndroid

（一）效果：

页面上标签的数据可以自己定义，数据页面可以滑动选择。

（二）AndroidStudio中使用

1.在build.gradle中添加

compile ‘com.moxun:tagcloudlib:1.0.3’

2.在布局文件中引入

3.设置Adapter 继承TagsAdapter，实现以下方法

（1）public int getCount();

返回Tag数量

（2）public View getView(Context context, int position, ViewGroup parent);

返回每个Tag实例

（3）public Object getItem(int position);

返回Tag数据

（4）public int getPopularity(int position);

针对每个Tag返回一个值，但是什么作用

4.标签云对象的属性设置

属性	xml	代码	值类型
自动滚动	app:autoScrollMode	setAutoScrollMode(int mode)	enum [disable,uniform,decelerate]
半径百分比	app:radiusPercent	setRadiusPercent(float percent)	float [0,1]
滚动速度	app:scrollSpeed	setScrollSpeed(float scrollSpeed)	float [0,+]
起始颜色	app:lightColor	setLightColor(int color)	int
终止颜色	app:darkColor	setDarkColor(int color)	int

二．简单的使用示例

（一）布局文件activity_main.xml设计

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:id="@+id/activity_main"android:layout_width="match_parent"android:layout_height="match_parent"><com.moxun.tagcloudlib.view.TagCloudView
        android:id="@+id/tcv_tags"android:layout_width="match_parent"android:layout_height="match_parent"app:autoScrollMode="uniform"app:radiusPercent="0.8" /></RelativeLayout>

(二)设计标签云中的字体的布局

<?xml version="1.0" encoding="utf-8"?><!--单个标签云中的文本的视图-->
<TextView xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="标签云"android:textColor="@color/textcolor_tags"/>（三）设计字体的颜色选择器
（res文件夹下创建color文件夹，创建textcolor_tags.xml）
<?xml version="1.0" encoding="utf-8"?><!--标签云的文本的字体的颜色选择器-->
<selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:color="#f0f" android:state_selected="true" /><item android:color="#000" android:state_selected="false" />
</selector>

（四）创建适配器的类

package com.lwz.cloud;import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;import com.moxun.tagcloudlib.view.TagsAdapter;import java.util.List;/*** 标签云页面数据的适配器*/public class CursorTagsAdapter extends TagsAdapter {private List<String> mList;public CursorTagsAdapter( List<String> list) {this.mList = list;}@Overridepublic int getCount() {return mList.size();}@Overridepublic View getView(Context context, int position, ViewGroup parent) {TextView tv = (TextView) View.inflate(context, R.layout.item_tag, null);tv.setText(getItem(position));return tv;}@Overridepublic String getItem(int position) {return mList.get(position);}@Overridepublic int getPopularity(int position) {return 1;}@Overridepublic void onThemeColorChanged(View view, int themeColor) {}
}

（五）主方法调用类

package com.lwz.cloud;import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Toast;import com.moxun.tagcloudlib.view.TagCloudView;import java.util.ArrayList;
import java.util.List;/*** 标签云效果界面的设计*/
public class MainActivity extends AppCompatActivity implements TagCloudView.OnTagClickListener {TagCloudView tcvTags;//标签云对象List<String> list = new ArrayList<>();//标签云数据的集合List<String> listClick = new ArrayList<>();//点击过的标签云的数据的集合@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);//给集合添加数据for (int i = 0; i < 20; i++) {list.add("这是标签" + i);}tcvTags = (TagCloudView) findViewById(R.id.tcv_tags);//设置标签云的点击事件tcvTags.setOnTagClickListener(this);//给标签云设置适配器CursorTagsAdapter adapter = new CursorTagsAdapter(list);tcvTags.setAdapter(adapter);}/*** 点击标签是回调的方法*/@Overridepublic void onItemClick(ViewGroup parent, View view, int position) {view.setSelected(!view.isSelected());//设置标签的选择状态if (view.isSelected()) {//加入集合listClick.add(list.get(position));} else {//移除集合listClick.remove(list.get(position));}Toast.makeText(this, "点击过的标签：" + listClick.toString(), Toast.LENGTH_SHORT).show();}
}

程序运行后的界面：

点击几个标签后显示的界面：

这就是标签云的简单示例。这个标签云默认情况下是会匀速滚动的。

3D标签云效果的实现相关推荐

3D标签云的简单实现
3D标签云的实现最近在做一些小Demo,看到了3D标签云觉得很酷炫,就学着做了一下.虽然看起来有点难,但是分解了看其实还是很普通的js运动的实现. 效果预览https://chestnut647.g ...
vue实现标签云效果
闲扯两句最近想给自己的博客上加上一个3D标签云的效果,用来表示自己博客文章的分组,网上找到了canvas实现的,还有a元素实现的解析3D标签云,我想让标签可以选择和点击,又不想在标签数量较多时操作a ...
基于HTML5 SVG可互动的3D标签云jQuery插件
svg3dtagcloud.js是一款基于HTML5 SVG的3D标签云jQuery插件.该3D标签云插件不需要额外的CSS样式,可使用鼠标与标签进行互动,并提供很多参数来控制标签云的外观. 效果演示 ...
css标签3d,超酷的js+css3实现的3D标签云特效
此作品是一款超酷的3D标签云核心功能代码如下: function doPosition(){ var l = oDiv.offsetWidth / 2; var t = oDiv.offsetHei ...
基于纯 CSS3 技术实现美观的标签云效果
标签云是博客的标配功能,能够清晰的呈现博客的各个关键词和主题.在这个效果中,您将学习如何使用 CSS3 技术创建一个效果精美的标签云效果. 作为实验项目,使用了 CSS3 渐变,阴影和最重要的的 CS ...
[HTML5]3D标签云
index.html <html> <head> <meta http-equiv="Content-Type" content="text ...
仅使用HTML和CSS实现的标签云效果
标签云的效果在博客和网站上不难见到,它其实就是带有超链接的某些关键字,为了达到强调主题的作用.通常出现概率比较大或者受欢迎的标签文字显示比较大,相反的就显示的小. 来源于TagCrowd.com 我们 ...
超酷的javascript文字云/标签云效果 - D3 Cloud
日期:2012-10-11 来源:GBin1.com 在线演示如果你想创建漂亮的文字云或者标签云效果的话,你可以考虑使用D3-Cloud,这是一个超棒的开源字体云效果javascript类库,基于 ...
html页面文字随机效果,教你用javascript实现随机标签云效果_附代码
标签云是一套相关的标签以及与此相应的权重.典型的标签云有30至150个标签.权重影响使用的字体大小或其他视觉效果.同时,直方图或饼图表是最常用的代表约12种不同的权数.因此,标签云彩能代表更多的权,尽 ...

3D标签云效果的实现