[android view]标签云原理、难点以及简单实现总结

标签云效果很酷，比如最出名的wordle，看看能否在andorid上实现，才发现并不容易，因为我是想做可视化而并不是为了分词，所以感觉难点在布局。这里有两篇博客http://book.51cto.com/art/201108/281730.htm,http://book.51cto.com/art/201108/281728.htm，写的不错第一篇博客提到了在wordle里采用的方法就是一个简单有效的算法——随机贪婪算法。你可以随意地把单词拖放到屏幕中某个期望位置附近，而如果该单词和其他单词存在交叠，就重新再试一次，直到它不再与其他单词交叠为止,第二篇与之不同的是说在调整相应位置时根据一定的路径, 在这里再推荐下http://stackoverflow.com/questions/342687/algorithm-to-implement-a-word-cloud-like-wordle 这个问题wordle原作者亲自回答~~而且还有其他人做的一些。

开始在andorid上下手， 搜了一下并且下载了一个做的还可以的源码 附上链接http://www.apkbus.com/android-232291-1-1.html 它比较好的地方是实现了动画效果，他大体是重写viewgroup 把textview放进去布局，他在找textview大体好像是要记录已经走过的xy。。如果相交，按一定的路径来找下一个可以放置的点，具体代码就我就不班门弄斧而且也没怎么看懂~写的很好,而且有些小地方我借鉴了，比如如何确定字矩形的宽度。我主要的想法是直接重写view 然后让文字直接drawtext。主要是在检测到矩形相交后随机在选择点进行计算（汗，还真是随机贪婪算法，一点路径也没考虑），直到放好所有的。。这就导致并不是所有的时候都能够完美的展现出来（BUG），而且即使摆放好也与想要的效果差好远~~（好累，不想改了真的很麻烦）除了这一点 在改进检测重复即检测碰撞算法上也可以改进，基本上上面那几个博客都有提到，我想用四叉树（http://bbs.9ria.com/thread-148625-1-1.html）改进下，结果效果反而越来越不好，（好心烦 最后我去掉了 我感觉是因为andorid屏幕太小造成的 也可能是我代码造成的），反正在安卓上放的标签也不可能太多，所以对效率影响不大。最后大体就做了这么一个东西，只能叫做东西了好丑，我也不知道200*200能放多少标签，反正自己慢慢试。。

详细代码：

package com.example.visualization;

import com.example.tools.CloudItemClickListener;
import com.example.tools.TagCloud;

import android.app.Activity;
import android.os.Bundle;
import android.view.Window;
import android.view.WindowManager;
import android.widget.Toast;

public class TagCloudActivity extends Activity {
    TagCloud cloud;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        this.requestWindowFeature(Window.FEATURE_NO_TITLE);
        this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
                WindowManager.LayoutParams.FLAG_FULLSCREEN);
        setContentView(R.layout.tagcloud);

        cloud = (TagCloud) findViewById(R.id.tag);
        cloud.addTag("ZZG");
        cloud.addTag("LXH");
        cloud.addTag("ZLJ");
        cloud.addTag("QQ");

        cloud.addTag("3D");
        cloud.addTag("ZLJ");
        cloud.addTag("QQ");
        cloud.addTag("3D");

        cloud.addTag("ZLJ");
        cloud.addTag("QQ");
        cloud.addTag("3D");
        cloud.addTag("雅诗兰黛");

        cloud.addTag("铅笔");
        cloud.addTag("QQ");
        cloud.addTag("SPYMouse");
        cloud.setShowRect(0, 0, 300, 300);// show size
        cloud.setOnCloudItemClickListener(new CloudItemClickListener() {

            @Override
            public void selected(int i) {
                // TODO Auto-generated method stub
                Toast.makeText(TagCloudActivity.this,
                        cloud.tags.get(i).getText(), Toast.LENGTH_SHORT).show();

            }
        });
        cloud.start();
    }

}

package com.example.tools;

import java.util.ArrayList;
import java.util.Random;

import com.example.model.Tag;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewTreeObserver.OnGlobalLayoutListener;

public class TagCloud extends View {
    public ArrayList<Tag> tags = new ArrayList<Tag>();
    CloudItemClickListener cloudItemClickListener;
    Paint paint = new Paint();
    int TOP = 0;
    int BOTTOM = 300;
    int LEFT = 0;
    int RIGHT = 300;
    boolean isDraw = false;
    boolean isNew = false;

    // Quadtree quad;
    public TagCloud(Context context) {
        super(context);
        // TODO Auto-generated constructor stub

    }

    public TagCloud(Context context, AttributeSet attrs) {
        super(context, attrs);
        // TODO Auto-generated constructor stub

    }

    public TagCloud(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        // TODO Auto-generated constructor stub

    }

    @Override
    protected void onDraw(Canvas canvas) {
        // TODO Auto-generated method stub
        for (int i = 0; i < tags.size(); i++) {
            Tag tag = tags.get(i);
            canvas.drawText(tag.getText(), tags.get(i).getRect().left, tags
                    .get(i).getRect().bottom, tags.get(i).getPaint());

        }
        super.onDraw(canvas);
    }

    public void setOnCloudItemClickListener(CloudItemClickListener clickListener) {
        cloudItemClickListener = clickListener;
    }

    public void init() {

        int positionX = (BOTTOM + TOP) / 2;
        int positionY = (RIGHT + LEFT) / 2;
        // quad = new Quadtree(0, new Rect(LEFT,TOP,RIGHT,BOTTOM));
        // ArrayList<Tag> returnObjects = new ArrayList<Tag>();
        Log.e("all", "TOP" + TOP + "BOTTOM" + BOTTOM + "LEFT" + LEFT + "RIGHT"
                + RIGHT + " ," + tags.size());
        for (int i = 0; i < tags.size(); i++) {
            Random random = new Random();

            if (i % 2 == 0) {
                tags.get(i).setX(
                        positionX + random.nextInt((RIGHT - LEFT) / 20));
                tags.get(i).setY(
                        positionY + random.nextInt((BOTTOM - TOP) / 20));
            } else {
                tags.get(i).setX(
                        positionX - random.nextInt((RIGHT - LEFT) / 20));
                tags.get(i).setY(
                        positionY - random.nextInt((BOTTOM - TOP) / 20));
            }

            /*
             * tags.get(i).setX(positionX); tags.get(i).setY(positionY);
             */
            // returnObjects.clear();

            // quad.retrieve(returnObjects, tags.get(i).getRect());
            int x = 0;

            Log.e("=======1", tags.get(i).getRect().left + ","
                    + tags.get(i).getRect().top + ","
                    + tags.get(i).getRect().right + ","
                    + tags.get(i).getRect().bottom);

            // while(x<returnObjects.size())
            while (x < i) {
                // Run collision detection algorithm between objects
                isNew = false;

                while (Rect.intersects(tags.get(i).getRect(), tags.get(x)
                        .getRect())) {

                    int ranx = random.nextInt(RIGHT + LEFT);
                    int rany = random.nextInt(BOTTOM + TOP);
                    while (ranx + tags.get(i).getRect().width() > RIGHT
                            || rany + tags.get(i).getRect().height() > BOTTOM
                            || ranx < LEFT || rany < TOP) {
                        ranx = random.nextInt(RIGHT + LEFT);
                        rany = random.nextInt(BOTTOM + TOP);
                    }
                    tags.get(i).setX(ranx);
                    tags.get(i).setY(rany);

                    isNew = true;
                }
                if (isNew) {
                    x = -1;
                }
                x++;

            }

            // quad.insert(tags.get(i));
            Log.e("=======2", tags.get(i).getRect().left + ","
                    + tags.get(i).getRect().top + ","
                    + tags.get(i).getRect().right + ","
                    + tags.get(i).getRect().bottom);

        }
        isDraw = true;

    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        // TODO Auto-generated method stub
        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN: {
            float x = event.getX();
            float y = event.getY();
            Log.e("Raw x y", "" + event.getX() + "," + event.getY());
            for (int i = 0; i < tags.size(); i++) {
                if (tags.get(i).getRect().contains((int) x, (int) y)) {
                    cloudItemClickListener.selected(i);
                }
            }
        }
            break;
        }
        return super.onTouchEvent(event);
    }

    public void addTag(String text) {
        Tag tag = new Tag();
        tag.setText(text);
        tag.setPaint();
        tags.add(tag);
    }

    public void setPositionSize() {

    }

    public void start() {
        new Thread(new mythread()).start();
        if (isDraw) {
            postInvalidate();
        }
    }

    class mythread implements Runnable {

        @Override
        public void run() {
            // TODO Auto-generated method stub
            init();

        }

    }

    public void setShowRect(int left, int top, int right, int bottom) {
        TOP = top;
        LEFT = left;
        RIGHT = right;
        BOTTOM = bottom;
    }

}

package com.example.model;

import java.util.Random;

import android.graphics.Paint;
import android.graphics.Rect;
import android.util.Log;

public class Tag {
    public static final int TEXT_SIZE_MAX = 25;
    public static final int TEXT_SIZE_MIN = 20;
    String text;
    int strWidth;
    Paint paint = new Paint();
    float x;
    float y;
    int alpha;
    Random random = new Random();
    float scale = 25 + random.nextInt(TEXT_SIZE_MAX - TEXT_SIZE_MIN + 1);

    public String getText() {
        return text;
    }

    public void setText(String text) {
        this.text = text;
    }

    int ranColor = 0xff000000 | random.nextInt(0x0077ffff);

    public float getX() {
        return x;
    }

    public void setX(float x) {
        this.x = x;
    }

    public float getY() {
        return y;
    }

    public void setY(float y) {
        this.y = y;
    }

    public int getAlpha() {
        return alpha;
    }

    public void setAlpha(int alpha) {
        this.alpha = alpha;
    }

    public float getScale() {
        return scale;
    }

    public void setScale(float scale) {
        this.scale = scale;
    }

    public Random getRandom() {
        return random;
    }

    public void setRandom(Random random) {
        this.random = random;
    }

    public int getRanColor() {
        return ranColor;
    }

    public void setRanColor(int ranColor) {
        this.ranColor = ranColor;
    }

    public Paint getPaint() {

        return paint;
    }

    public void setPaint() {
        paint.setColor(ranColor);
        paint.setTextSize(scale);
        strWidth = (int) Math.ceil(paint.measureText(text));

    }

    public Rect getRect() {

        Rect rect = new Rect((int) x, (int) (y), (int) (x + strWidth),
                (int) (y + scale));

        return rect;
    }
}

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
  <com.example.tools.TagCloud 
      android:id="@+id/tag"
      android:layout_width="300dp"
      android:layout_height="300dp"
      android:background="#BFBFBF">
      </com.example.tools.TagCloud>

</FrameLayout>