Android实现3D标签云简单效果

本文实例为大家分享了Android实现3D标签云效果展示的具体代码,供大家参考,具体内容如下

一、关于3D标签云

TagCloudView是一个完全基于Android ViewGroup编写的控件,支持将一组View展示为一个3D标签云,并支持全方向滚动。
GitHub中的链接地址

(一)效果

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

(二)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.标签云对象的属性设置

二、简单的使用示例

(一)布局文件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;
 }

 @Override
 public int getCount() {
  return mList.size();
 }

 @Override
 public 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;
 }

 @Override
 public String getItem(int position) {
  return mList.get(position);
 }

 @Override
 public int getPopularity(int position) {
  return 1;
 }

 @Override
 public 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<>();//点击过的标签云的数据的集合

 @Override
 protected 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);
 }

 /**
  * 点击标签是回调的方法
  */
 @Override
 public 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();
 }
}

程序运行后的界面:

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android实现3D标签云效果

    最近业务需求,要求实现一个3D星球环绕效果,经过百般查找,终于找到了这个功能. 来先看看效果图: 首先还是添加第三方依赖库: compile 'com.moxun:tagcloudlib:1.1.0' 布局: <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.an

  • Android自定义控件ViewGroup实现标签云

    本文实例为大家分享了Android自定义控件ViewGroup实现标签云的具体代码,供大家参考,具体内容如下 实现的功能: 基本绘制流程: 构造函数获取自定义属性 onMeasure()方法,测量子控件的大小 onLayout()方法,对子控件进行布局 1.自定义属性 <resources> <declare-styleable name="TabsViewGroup"> <attr name="tabVerticalSpace" fo

  • android随机生成圆形云标签效果

    这个适合用于选择 用户的一些兴趣标签,个性名片等. package com.dyl.cloudtags; import java.util.ArrayList; import java.util.Arrays; import java.util.Random; import android.app.Activity; import android.content.SharedPreferences; import android.os.Bundle; import android.view.Vi

  • Android自定义控件ViewGroup实现标签云(四)

    前言: 前面几篇讲了自定义控件绘制原理Android自定义控件基本原理详解(一) ,Android自定义控件之自定义属性(二) ,Android自定义控件之自定义组合控件(三),常言道:"好记性不如烂笔头,光说不练假把式!!!",作为一名学渣就是因为没有遵循这句名言才沦落于此,所以要谨遵教诲,注重理论与实践相结合,今天通过自定义ViewGroup来实现一下项目中用到的标签云. 需求背景: 公司需要实现一个知识点的标签显示,每个标签的长度未知,如下图所示 基本绘制流程: 绘制原理这里不再

  • Android实现3D云标签效果

    本文实例为大家分享了Android实现3D云标签效果的具体代码,供大家参考,具体内容如下 一.自定义View public class TagCloudView extends RelativeLayout { RelativeLayout navigation_bar; TextView mTextView1; private final float TOUCH_SCALE_FACTOR = .8f; private float tspeed; private TagCloud mTagClo

  • Android TagCloudView云标签的使用方法

    这两天做了一个项目,发现标签不能更改任意一个标签的字体的颜色,需求如同置前标签,然后就对tagcloudeview稍做修改做了这么一个demo.不为别的,只为以后自己用的时候方便拷贝. 先看效果图: 这两天做了一个项目,需求如同置前标签,然后就对tagcloudeview稍做修改做了这么一个demo.不为别的,只为以后自己用的时候方便拷贝. 云标签开源地址 在源码里面加了两个方法 /**修改某些位置定点颜色**/ public void setTagsByPosition(HashMap<Int

  • Android实现随机圆形云标签效果

    本文实例为大家分享了Android实现圆形云标签效果展示的具体代码,供大家参考,具体内容如下 下面是实现的效果图: 这个适合用于选择 用户的一些兴趣标签,个性名片等. 代码: Activity package com.dyl.cloudtags; import java.util.ArrayList; import java.util.Arrays; import java.util.Random; import android.app.Activity; import android.cont

  • android LabelView实现标签云效果

    今天我们来做一个android上的标签云效果, 虽然还不是很完美,但是已经足够可以展现标签云的效果了,首先来看看效果吧. 额,录屏只能录到这个份上了,凑活着看吧.今天我们就来实现一下这个效果, 这次我选择直接继承view来, 什么? 这样的效果不是SurfaceView擅长的吗? 为什么要view,其实都可以了, 我选择view,是因为:额,我对SurfaceView还不是很熟悉. 废话少说, 下面开始上代码 public class LabelView extends View { priva

  • Android实现3D标签云简单效果

    本文实例为大家分享了Android实现3D标签云效果展示的具体代码,供大家参考,具体内容如下 一.关于3D标签云 TagCloudView是一个完全基于Android ViewGroup编写的控件,支持将一组View展示为一个3D标签云,并支持全方向滚动. GitHub中的链接地址 (一)效果 页面上标签的数据可以自己定义,数据页面可以滑动选择. (二)AndroidStudio中使用 1.在build.gradle中添加 compile 'com.moxun:tagcloudlib:1.0.3

  • 深入解析JS实现3D标签云的原理与方法

    本文实例讲述了深入解析JS实现3D标签云的原理与方法.分享给大家供大家参考,具体如下: 最近开始用canvas搞3D了,搞得也是简单的东西,就是球体转圈.做出来后,突然想起以前看过的3D标签云,在以前觉得真心狂拽酷炫叼啊,当时也确实不知道怎么在平面上模拟3D,所以也就没去搞了.现在刚好用了canvas搞3D,也发现,好像3D标签云也差不多,然后就写了一下. 具体怎么做呢,先说一下原理,3D标签云就是做一个球面,然后再球面上取均匀分布的点,把点坐标赋给标签,再根据抽象出来的Z轴大小来改变标签的字体

  • Vue中实现3D标签云的详细代码

    预览: 代码: 页面部分: <template> <div class="tagcloud-all" ref="tagcloudall"> <a v-for="item in tagList" :href="item.url" rel="external nofollow" :style="'color:' + item.color + ';top: 0;left:

  • Android TV 3D卡片无限循环效果

    TV 3D卡片无限循环效果,供大家参考,具体内容如下 ##前言 1.需求:实现3个卡片实现无限循环效果:1-2-3-1-2-3-1-,而且要实现3D效果:中间突出,两侧呈角度显示 2.Viewpager实现方式 (1) LoopViewpager,有兴趣的同学可以去github上看一下. (2) 通过定义一个item的个数Integer,MAX,然后设置初始位置为:Integer,MAX/2. 以上方式如果简单的加载图片这种方式还可取,由于需求3个界面内部控件比较多,在加上需要实现自定义的的3D

  • jquery 3D 标签云示例代码

    相关选项 zoom: 90 初始的缩放度 min_zoom: 25 max_zoom: 120 zoom_factor: 2 - 鼠标滚轮的缩放速度 rotate_factor: -0.45 - 鼠标移动时球体旋转的数量.正数将反向旋转 fps: 10 - 定义每秒动画更新的次数 centrex: 250 - 在container div中水平方向旋转中心 centrey: 250 在container div中垂直方向旋转中心 min_font_size: 12 max_font_size:

  • vue实现标签云效果的方法详解

    本文实例讲述了vue实现标签云效果的方法.分享给大家供大家参考,具体如下: 闲扯两句 最近想给自己的博客上加上一个3D标签云的效果,用来表示自己博客文章的分组,网上找到了canvas实现的,还有a元素实现的解析3D标签云,我想让标签可以选择和点击,又不想在标签数量较多时操作a标签导致性能问题,于是svg就成了一个不错的选择. 标签初始化 这里实现的核心主要是参考了前面的那篇解析3D标签云的文章,作者给出了源码,讲解也比较通俗易懂.大体来说,整个代码分三步: 根据标签的数量,算出每个标签在球面上分

  • vue实现标签云效果的示例

    闲扯两句 最近想给自己的博客上加上一个3D标签云的效果,用来表示自己博客文章的分组,网上找到了canvas实现的,还有a元素实现的解析3D标签云,我想让标签可以选择和点击,又不想在标签数量较多时操作a标签导致性能问题,于是svg就成了一个不错的选择. 标签初始化 这里实现的核心主要是参考了前面的那篇解析3D标签云的文章,作者给出了源码,讲解也比较通俗易懂.大体来说,整个代码分三步: 根据标签的数量,算出每个标签在球面上分布的x,y,z坐标 根据标签的坐标,将标签绘制出来,x,y坐标通过标签的位置

  • 基于python3生成标签云代码解析

    这篇文章主要介绍了基于python3生成标签云代码解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 标签云是现在大数据里面最喜欢使用的一种展现方式,其中在python3下也能实现标签云的效果,贴图如下: -------------------进入正文--------------------- 首先要安装以下几个库: #!/usr/bin/python3.4 # -*- coding: utf-8 -*- # http://www.lfd.uc

随机推荐