突然想玩的TextView前面加标签的方法

前言

可能很多朋友在做设计稿的时候经常会遇到这种问题：


image.png

好好的textView前面加了个标签...
这要是单行还好，直接一个drawable了事
但是多行...我可以自定义一个ShapeDrawable，实现drawableLeft,但是有个问题，如果是这样的话，drawable是会随字体居中的，那显示效果就很怪异了！

思路

通过html

最简单的方法肯定是通过html，不用计算什么start，end，而且现成就有的样式都可以 拿来用。
html样式代码如下：


image.png
<font color="white" style="background:red;border-radius: 6px;font-size: 18px">I love android </font>

然而...并不支持，貌似是textView不支持这个border-radius属性...而我贫乏的html知识也只能记得这个属性了。好吧，这条路gg。

通过span

这个是最靠谱的解决方法了吧，其实span可以帮我们解决几乎所有关于textview的问题，可是貌似很多人（包括我）都不了解她。

具体可以了解下

代码实现：

自定义TextView

自定义了TextView 在其内部进行处理，免得每次都是一套function方法复制来复制去：

package com.example.ly.testdrawable;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.text.Spannable;
import android.text.SpannableString;
import android.text.style.ImageSpan;
import android.util.AttributeSet;
import android.util.Log;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.TextView;

import java.util.List;

/**
 * Author: Ly
 * Data：2018/5/30-19:08
 * Description:
 */
public class TagTextView extends android.support.v7.widget.AppCompatTextView {

    private StringBuffer content_buffer;

    private TextView tv_tag;

    private View view;//标签布局的最外层布局

    private Context mContext;

//必须重写所有的构造器，否则可能会出现无法inflate布局的错误！

    public TagTextView(Context context) {

        super(context);

        mContext = context;

    }


    public TagTextView(Context context, AttributeSet attrs) {

        super(context, attrs);

        mContext = context;

    }


    public TagTextView(Context context, AttributeSet attrs, int defStyleAttr) {

        super(context, attrs, defStyleAttr);

        mContext = context;

    }


    public void setContentAndTag(String content, List<String> tags) {
        content_buffer = new StringBuffer();
        for (String item : tags) {//将每个tag的内容添加到content后边，之后将用drawable替代这些tag所占的位置
            content_buffer.append(item);
        }
        content_buffer.append(content);
        SpannableString spannableString = new SpannableString(content_buffer);
        for (int i = 0; i < tags.size(); i++) {
            String item = tags.get(i);
            View view = LayoutInflater.from(mContext).inflate(R.layout.tag, null);//R.layout.tag是每个标签的布局
            tv_tag = view.findViewById(R.id.tv_tag);
            tv_tag.setText(item);
            Bitmap bitmap = convertViewToBitmap(view);
            Drawable d = new BitmapDrawable(bitmap);
            d.setBounds(0, 0, tv_tag.getWidth(), tv_tag.getHeight());//缺少这句的话，不会报错，但是图片不回显示
            ImageSpan span = new ImageSpan(d, ImageSpan.ALIGN_BOTTOM);//图片将对齐底部边线
            int startIndex;
            int endIndex;
            startIndex = getLastLength(tags, i );
            endIndex = startIndex + item.length();
            Log.e("tag", "the start is" + startIndex + "the end is" + endIndex);
            spannableString.setSpan(span, startIndex, endIndex, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
        }
        setText(spannableString);
        setGravity(Gravity.CENTER_VERTICAL);
    }


    private static Bitmap convertViewToBitmap(View view) {

        view.measure(View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED), View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED));

        view.layout(0, 0, view.getMeasuredWidth(), view.getMeasuredHeight());

        view.buildDrawingCache();

        Bitmap bitmap = view.getDrawingCache();


        return bitmap;

    }


    private int getLastLength(List<String> list, int maxLength) {
        int length = 0;
        for (int i = 0; i < maxLength; i++) {
            length += list.get(i).length();
        }
        return length;
    }
}

自定义一个标准的tag布局：

面向xml编程，后期需要修改drawable样式等可以通过这个xml做文章。

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical">

    <TextView
        android:id="@+id/tv_tag"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_marginBottom="2dp"
        android:layout_marginRight="5dp"
        android:background="@drawable/bg_blue_20"
        android:gravity="center_vertical"
        android:paddingBottom="2dp"
        android:paddingLeft="3dp"
        android:paddingRight="3dp"
        android:text="标签"
        android:textColor="@android:color/white"
        android:textSize="12sp"/>
</LinearLayout>

具体使用（xml）

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.ly.testdrawable.MainActivity">

    <com.example.ly.testdrawable.TagTextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

</android.support.constraint.ConstraintLayout>

具体使用(java)

package com.example.ly.testdrawable;

import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.drawable.Drawable;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.text.Html;
import android.text.SpannableStringBuilder;
import android.text.Spanned;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        TagTextView textView = findViewById(R.id.text);
        List<String> tags = new ArrayList<>();
        tags.add("置顶");
        tags.add("置顶1");
        tags.add("置顶2");
        textView.setContentAndTag("凌宇是个大帅逼",
                tags);
    }
}

效果如下

image.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud
    Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具（例如配置管理，服务发现，断路器，智...
    卡卡罗2017阅读 134,868评论 18赞 139
  • 安卓自定义View----实现TextView可设置drawable宽高度
    前言 如上图所示，相信可爱的安卓程序猿们在开发中经常会遇到这种样式的UI开发。其实上面这种布局很简单，没有难度，只...
    笑哥哥阅读 3,887评论 0赞 4
  • 史上最完全TextView用法
    字符串资源里变量替换 Android开发中是拒绝硬编码的，我们可能会把一些字符串放在xml中当作资源使用，假设有如...
    醉馬当前闯阅读 13,745评论 2赞 44
  • 肯定法
    1.露频，这么晚你还坚持运动。真是一个美貌与智慧并存的女人 2.姐，你这么细心的把语音转成文字出来。真的太用心太有...
    肖馨肖馨阅读 227评论 1赞 2
  • 深夜有感
    夜深了，我却因想你而失眠。虽然现在的我们还在进行着爱情的长跑，但是我相信我们很快就可以结束异地恋，在同一个城市一起...
    Elvis一Yi阅读 155评论 0赞 0