android 自定义LabelView实现各类小标签，重要功能已标注

转载请注明出处：王亟亟的大牛之路

一个自定义TextView可实现各种控件右上，左上等位置附带便签实现。

项目结构：

运行效果：

只需要一个类就可以完成以上实现
LabelView

public class LabelView extends TextView {

    private float _offsetx;
    private float _offsety;
    private float _anchorx;
    private float _anchory;
    private float _angel;
    private int _labelViewContainerID;
    private Animation _animation = new Animation() {
        protected void applyTransformation(float interpolatedTime, Transformation t) {
            Matrix tran = t.getMatrix();
            tran.postTranslate(_offsetx, _offsety);
            tran.postRotate(_angel, _anchorx, _anchory);
        }
    };

    public enum Gravity {
        LEFT_TOP, RIGHT_TOP
    }

    public LabelView(Context context) {
        this(context, null);
    }

    public LabelView(Context context, AttributeSet attrs) {
        this(context, attrs, android.R.attr.textViewStyle);
    }

    @SuppressLint("NewApi")
    public LabelView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);

        init();

        _animation.setFillBefore(true);
        _animation.setFillAfter(true);
        _animation.setFillEnabled(true);

    }


    private void init() {

        if (!(getLayoutParams() instanceof ViewGroup.LayoutParams)) {
            LayoutParams layoutParams =
                    new LayoutParams(
                            ViewGroup.LayoutParams.MATCH_PARENT,
                            ViewGroup.LayoutParams.WRAP_CONTENT);
            setLayoutParams(layoutParams);
        }

        // the default value
        //setPadding(dip2Px(40), dip2Px(2), dip2Px(40), dip2Px(2));
        _labelViewContainerID = -1;

        setGravity(android.view.Gravity.CENTER);
        setTextColor(Color.WHITE);
        setTypeface(Typeface.DEFAULT_BOLD);
        setTextSize(TypedValue.COMPLEX_UNIT_SP, 12);
        setBackgroundColor(Color.BLUE);
    }

    public void setTargetView(View target, int distance, Gravity gravity) {

        if (!replaceLayout(target)) {
            return;
        }

        final int d = dip2Px(distance);
        final Gravity g = gravity;
        final View v = target;

        ViewTreeObserver vto = getViewTreeObserver();
        vto.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            public void onGlobalLayout() {
                getViewTreeObserver().removeGlobalOnLayoutListener(this);
                calcOffset(getMeasuredWidth(), d, g, v.getMeasuredWidth(), false);
            }
        });

    }


    public void setTargetViewInBaseAdapter(View target, int targetWidth, int distance, Gravity gravity) {
        if (!replaceLayout(target)) {
            return;
        }
        //measure(0, 0);
        //calcOffset(getMeasuredWidth(), distance, gravity, targetWidth, true);
        calcOffset(dip2Px(targetWidth), distance, gravity, targetWidth, true);
    }

    public void remove() {
        if (getParent() == null || _labelViewContainerID == -1) {
            return;
        }

        ViewGroup frameContainer = (ViewGroup) getParent();
        assert (frameContainer.getChildCount() == 2);
        View target = frameContainer.getChildAt(0);

        ViewGroup parentContainer = (ViewGroup) frameContainer.getParent();
        int groupIndex = parentContainer.indexOfChild(frameContainer);
        if (frameContainer.getParent() instanceof RelativeLayout) {
            for (int i = 0; i < parentContainer.getChildCount(); i++) {
                if (i == groupIndex) {
                    continue;
                }
                View view = parentContainer.getChildAt(i);
                RelativeLayout.LayoutParams para = (RelativeLayout.LayoutParams) view.getLayoutParams();
                for (int j = 0; j < para.getRules().length; j++) {
                    if (para.getRules()[j] == _labelViewContainerID) {
                        para.getRules()[j] = target.getId();
                    }
                }
                view.setLayoutParams(para);
            }
        }

        ViewGroup.LayoutParams frameLayoutParam = frameContainer.getLayoutParams();
        target.setLayoutParams(frameLayoutParam);
        parentContainer.removeViewAt(groupIndex);
        frameContainer.removeView(target);
        frameContainer.removeView(this);
        parentContainer.addView(target,groupIndex);
        _labelViewContainerID = -1;
    }

    @SuppressLint("NewApi")
    private boolean replaceLayout(View target) {
        if (getParent() != null || target == null || target.getParent() == null || _labelViewContainerID != -1) {
            return false;
        }

        ViewGroup parentContainer = (ViewGroup) target.getParent();

        if (target.getParent() instanceof FrameLayout) {
            ((FrameLayout) target.getParent()).addView(this);
        } else if (target.getParent() instanceof ViewGroup) {

            int groupIndex = parentContainer.indexOfChild(target);
            _labelViewContainerID = generateViewId();

            // relativeLayout need copy rule
            if (target.getParent() instanceof RelativeLayout) {
                for (int i = 0; i < parentContainer.getChildCount(); i++) {
                    if (i == groupIndex) {
                        continue;
                    }
                    View view = parentContainer.getChildAt(i);
                    RelativeLayout.LayoutParams para = (RelativeLayout.LayoutParams) view.getLayoutParams();
                    for (int j = 0; j < para.getRules().length; j++) {
                        if (para.getRules()[j] == target.getId()) {
                            para.getRules()[j] = _labelViewContainerID;
                        }
                    }
                    view.setLayoutParams(para);
                }
            }
            parentContainer.removeView(target);

            // new dummy layout
            FrameLayout labelViewContainer = new FrameLayout(getContext());
            ViewGroup.LayoutParams targetLayoutParam = target.getLayoutParams();
            labelViewContainer.setLayoutParams(targetLayoutParam);
            target.setLayoutParams(new ViewGroup.LayoutParams(
                    ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));

            // add target and label in dummy layout
            labelViewContainer.addView(target);
            labelViewContainer.addView(this);
            labelViewContainer.setId(_labelViewContainerID);

            // add dummy layout in parent container
            parentContainer.addView(labelViewContainer, groupIndex, targetLayoutParam);
        }
        return true;
    }

    private void calcOffset(int labelWidth, int distance, Gravity gravity, int targetWidth, boolean isDP) {

        int d = dip2Px(distance);
        int tw = isDP ? dip2Px(targetWidth) : targetWidth;

        float edge = (float) ((labelWidth - 2 * d) / (2 * 1.414));
        if (gravity == Gravity.LEFT_TOP) {
            _anchorx = -edge;
            _offsetx = _anchorx;
            _angel = -45;
        } else if (gravity == Gravity.RIGHT_TOP) {
            _offsetx = tw + edge - labelWidth;
            _anchorx = tw + edge;
            _angel = 45;
        }

        _anchory = (float) (1.414 * d + edge);
        _offsety = _anchory;

        clearAnimation();
        startAnimation(_animation);
    }

    private int dip2Px(float dip) {
        return (int) (dip * getContext().getResources().getDisplayMetrics().density + 0.5f);
    }

    private static final AtomicInteger sNextGeneratedId = new AtomicInteger(1);

    public static int generateViewId() {
        for (; ; ) {
            final int result = sNextGeneratedId.get();
            // aapt-generated IDs have the high byte nonzero; clamp to the range under that.
            int newValue = result + 1;
            if (newValue > 0x00FFFFFF) newValue = 1; // Roll over to 1, not 0.
            if (sNextGeneratedId.compareAndSet(result, newValue)) {
                return result;
            }
        }
    }
}

列出一些比较重要的内容，便于使用，修改：

整体布局的位置，左上以及右上，如果需要其他位置可自行添加

 public enum Gravity {
        LEFT_TOP, RIGHT_TOP
    }

初始化参数：
字体大小：setTextSize(TypedValue.COMPLEX_UNIT_SP, 12);
背景颜色：setBackgroundColor(Color.BLUE);
字体颜色：setTextColor(Color.WHITE);
位置：setGravity(android.view.Gravity.CENTER);
字体风格：setTypeface(Typeface.DEFAULT_BOLD);

一般控件设置用

public void setTargetView(View target, int distance, Gravity gravity)

适配器控件设置用

  public void setTargetViewInBaseAdapter(View target, int targetWidth, int distance, Gravity gravity)

让标签消失

 public void remove()

MainActivity

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        {
            final LabelView label = new LabelView(this);
            //涂鸦部分文字的内容
            label.setText("大长腿");
            //涂鸦部分的颜色
            label.setBackgroundColor(0x0EfE32E20);
            // public void setTargetView(View target, int distance, Gravity gravity) 
            //3个参数，一个是控件的ID，填充带的长度或者说便宜的距离（反正越大那一条东西越长），填充带的位置
            label.setTargetView(findViewById(R.id.image1), 30,
                    LabelView.Gravity.LEFT_TOP);
            //监听事件
            findViewById(R.id.image1).setOnClickListener(
                    new View.OnClickListener() {
                        @Override
                        public void onClick(View v) {
                            //填充带消失
                            label.remove();
                            //吐司内容
                            Toast.makeText(MainActivity.this,
                                    "大长腿消失了", Toast.LENGTH_SHORT)
                                    .show();
                        }
                    });
        }

        {
            //效果同上，只是涂鸦层位置的变化
            final LabelView label = new LabelView(this);
            label.setText("绝对领域");
            label.setBackgroundColor(0xff491E23);
            label.setTargetView(findViewById(R.id.image2), 22,
                    LabelView.Gravity.RIGHT_TOP);
            findViewById(R.id.image2).setOnClickListener(
                    new View.OnClickListener() {
                        @Override
                        public void onClick(View v) {
                            label.remove();
                            Toast.makeText(MainActivity.this,
                                    "绝对领域消失了", Toast.LENGTH_SHORT)
                                    .show();
                        }
                    });
        }

        {
            //Button也适用
            LabelView label = new LabelView(this);
            label.setText("按钮");
            label.setBackgroundColor(0xffE91E63);
            //位于右上角
            label.setTargetView(findViewById(R.id.button), 14,
                    LabelView.Gravity.RIGHT_TOP);
            findViewById(R.id.button).setOnClickListener(
                    new View.OnClickListener() {
                        @Override
                        public void onClick(View v) {
                            Toast.makeText(MainActivity.this, "button click",
                                    Toast.LENGTH_SHORT).show();
                        }
                    });
        }

        {
            //TextView适用
            LabelView label = new LabelView(this);
            label.setText("Text");
            label.setBackgroundColor(0xff03a9f4);
            label.setTargetView(findViewById(R.id.text), 11,
                    LabelView.Gravity.LEFT_TOP);
            findViewById(R.id.text).setOnClickListener(
                    new View.OnClickListener() {
                        @Override
                        public void onClick(View v) {
                            Toast.makeText(MainActivity.this,
                                    "please click ListView Demo",
                                    Toast.LENGTH_SHORT).show();
                        }
                    });
        }

        {
            LabelView label = new LabelView(this);
            label.setText("List");
            label.setBackgroundColor(0xff03a9f4);
            label.setTargetView(findViewById(R.id.click), 8,
                    LabelView.Gravity.RIGHT_TOP);
            findViewById(R.id.click).setOnClickListener(
                    new View.OnClickListener() {
                        @Override
                        public void onClick(View v) {
                            Intent i = new Intent(MainActivity.this,
                                    ListViewActivity.class);
                            startActivity(i);
                        }
                    });
        }
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

}

布局文件：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context=".MainActivity">


    <Button  android:id="@+id/button" android:layout_width="200dp" android:layout_height="48dp" android:background="#03a9f4" android:text="按钮" android:textColor="#ffffff" />


    <LinearLayout  android:layout_marginTop="24dp" android:layout_width="match_parent" android:layout_height="wrap_content">

        <ImageView  android:id="@+id/image1" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:scaleType="centerCrop" android:src="@mipmap/image1" />



        <ImageView  android:id="@+id/image2" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:scaleType="centerCrop" android:src="@mipmap/image2" />
    </LinearLayout>


    <TextView  android:id="@+id/text" android:layout_marginTop="24dp" android:layout_width="wrap_content" android:padding="16dp" android:background="#212121" android:layout_gravity="center" android:gravity="center" android:text="TextView" android:textColor="#ffffff" android:layout_height="48dp" />


    <Button  android:id="@+id/click" android:layout_marginTop="20dp" android:layout_width="200dp" android:layout_gravity="center_horizontal" android:layout_height="48dp" android:background="#E91E63" android:text="点击进入ListView" android:textColor="#ffffff" />


</LinearLayout>

ListViewActivity

public class ListViewActivity extends Activity {

    public class CategoryData {
        public String image;
        public String text;
        public String label;
    }

    public class CategoryAdapter extends SimpleBaseAdapter<CategoryData> {
        public CategoryAdapter(Context context, List<CategoryData> data) {
            super(context, data);
        }

        @Override
        public int getItemResource() {
            return R.layout.list_view_item;
        }

        @Override
        public View getItemView(int position, View convertView, ViewHolder holder) {

            CategoryData item = (CategoryData) _categoryAdapter.getItem(position);
            TextView textView = holder.getView(R.id.text);
            textView.setText(item.text);

            ImageView imageView = holder.getView(R.id.image);
            imageView.setImageResource(Integer.parseInt(item.image));

            // you have to generate label ID manual
            LabelView label = holder.getView(12345);
            if (label == null) {
                label = new LabelView(ListViewActivity.this);
                label.setId(12345);
                label.setBackgroundColor(0xffE91E63);
                // public void setTargetViewInBaseAdapter(View target, int targetWidth, int distance, Gravity gravity)
                //传入4个参数，被画的控件，label中text的位置（数字越小越靠右），整个标签便宜的位置，总体所在的区域
                label.setTargetViewInBaseAdapter(imageView, 108, 25, LabelView.Gravity.LEFT_TOP);
            }
            label.setText(item.label);
            return convertView;
        }
    }

    private CategoryAdapter _categoryAdapter;
    private ListView _listView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_list_view);

        _listView = (ListView) findViewById(R.id.list_view);
        _categoryAdapter = new CategoryAdapter(this, null);
        _listView.setAdapter(_categoryAdapter);
        //重复三轮妹子
        getCategoryData();
        getCategoryData();
        getCategoryData();

    }

    private void getCategoryData() {

        List<CategoryData> data = new ArrayList<CategoryData>();

        {
            CategoryData item = new CategoryData();
            item.text = "妹子好看";
            item.image = R.mipmap.k1 + "";
            item.label = "妹子1";
            data.add(item);
        }

        {
            CategoryData item = new CategoryData();
            item.text = "绝对领域";
            item.image = R.mipmap.k2 + "";
            item.label = "妹子2";
            data.add(item);
        }

        {
            CategoryData item = new CategoryData();
            item.text = "妹子好看1";
            item.image = R.mipmap.k3 + "";
            item.label = "妹子3";
            data.add(item);
        }

        {
            CategoryData item = new CategoryData();
            item.text = "绝对领域1";
            item.image = R.mipmap.k4 + "";
            item.label = "妹子4";
            data.add(item);
        }

        {
            CategoryData item = new CategoryData();
            item.text = "啪啪啪";
            item.image = R.mipmap.k5 + "";
            item.label = "妹子5";
            data.add(item);
        }

        {
            CategoryData item = new CategoryData();
            item.text = "萌萌哒,呵呵哒";
            item.image = R.mipmap.k6 + "";
            item.label = "妹子6";
            data.add(item);
        }


        {
            CategoryData item = new CategoryData();
            item.text = "肉便器噼里啪啦";
            item.image = R.mipmap.k7 + "";
            item.label = "妹子7";
            data.add(item);
        }


        {
            CategoryData item = new CategoryData();
            item.text = "稀里哗啦";
            item.image = R.mipmap.k8 + "";
            item.label = "妹子8";
            data.add(item);
        }


        {
            CategoryData item = new CategoryData();
            item.text = "咖喱给给";
            item.image = R.mipmap.k9 + "";
            item.label = "妹子9";
            data.add(item);
        }

        {
            CategoryData item = new CategoryData();
            item.text = "呵呵哈hi";
            item.image = R.mipmap.k10 + "";
            item.label = "妹子10";
            data.add(item);
        }
        _categoryAdapter.addAll(data);
        _categoryAdapter.notifyDataSetChanged();
    }

}

其他一些只是为了实现而写了，可以直接看源码
源码地址：http://yunpan.cn/cmxxzBp8T8MSX 访问密码 7dcc

部分内容参考网上，如有雷同，经供参考