Android仿微信标签功能

微信中有对联系人添加标签的功能，如下图所示。

这里有三种状态的标签，分别的未选择，选中，编辑中，由于前两种标签不需要提供输入，所以用textview实现即可，编辑中的标签用edittext来实现。而标签的形状就用shape来实现。

在drawable下新建xml文件，这里先上shape的xml文件。

tag_normal.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle" >
 
  <corners
    android:bottomleftradius="10dp"
    android:bottomrightradius="10dp"
    android:topleftradius="10dp"
    android:toprightradius="10dp" />
 
 <stroke android:width="1dp" android:color="#66cdaa" />
 
  <padding
    android:bottom="4dp"
    android:left="8dp"
    android:right="8dp"
    android:top="4dp" />
 
</shape>

tag_selected.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle" >
 
  <corners
    android:bottomleftradius="10dp"
    android:bottomrightradius="10dp"
    android:topleftradius="10dp"
    android:toprightradius="10dp" />
 
 <stroke android:width="1dp" android:color="#66cdaa" />
 
  <padding
    android:bottom="4dp"
    android:left="8dp"
    android:right="8dp"
    android:top="4dp" />
 
</shape>

tag_edit.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle" >
 
  <corners
    android:bottomleftradius="10dp"
    android:bottomrightradius="10dp"
    android:topleftradius="10dp"
    android:toprightradius="10dp" />
  <!-- 这里实现虚线边框-->
 <stroke android:dashwidth="5dp" android:dashgap="2dp" android:width="1dp" android:color="#e0e0e0" />
 
  <padding
    android:bottom="4dp"
    android:left="8dp"
    android:right="8dp"
    android:top="4dp" />
</shape>

接着在在布局文件中新建一个linearlayout用以存放标签(如果要实现多行标签自适应添加，用自定义的flowlayout，代码网上很多。)

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:id="@+id/tag_container"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="horizontal"
  tools:context="com.qtree.tagdemo.mainactivity">
 
</linearlayout>

      根据对微信标签的分析，这里可以这样实现，创建一个edittext，对其软键盘的enter和delete按键进行监听，当输入完成后按下enter则生成一个标签，添加到linearlayout中。然后如果当标签内文字为空时，按下删除键，就将它前一个标签的状态修改为选中状态。同样地，当点击未选择的标签也可以选中该标签进行删除。

详细实现如下

package com.qtree.tagdemo;
 
import android.graphics.color;
import android.support.v7.app.appcompatactivity;
import android.os.bundle;
import android.text.editable;
import android.text.textwatcher;
import android.util.log;
import android.view.keyevent;
import android.view.view;
import android.view.viewgroup;
import android.widget.edittext;
import android.widget.linearlayout;
import android.widget.textview;
import java.util.arraylist;
import java.util.list;
 
public class mainactivity extends appcompatactivity {
 
  private linearlayout layout;
  private linearlayout.layoutparams params;
 
  @override
  protected void oncreate(bundle savedinstancestate) {
    super.oncreate(savedinstancestate);
    setcontentview(r.layout.activity_main);
 
    layout=(linearlayout)findviewbyid(r.id.tag_container);
 
    params=new linearlayout.layoutparams(viewgroup.layoutparams.wrap_content, viewgroup.layoutparams.wrap_content);
    params.setmargins(30,30,0,0);
 
    //存放标签和标签选择状态
    final list<textview> tagview=new arraylist<>();
    final list<boolean> tagviewstate=new arraylist<>();
 
    //创建编辑中的标签
    final edittext edittext=new edittext(getapplicationcontext());
    edittext.sethint("添加标签");
    //设置固定宽度
    edittext.setminems(4);
    edittext.settextsize(12);
    //设置shape
    edittext.setbackgroundresource(r.drawable.tag_edit);
    edittext.sethinttextcolor(color.parsecolor("#b4b4b4"));
    edittext.settextcolor(color.parsecolor("#000000"));
    edittext.setlayoutparams(params);
    
    //添加到layout中
    layout.addview(edittext);
 
    //对软键盘的enter和del键监听
    edittext.setonkeylistener(new view.onkeylistener() {
      @override
      public boolean onkey(view v, int keycode, keyevent event) {
 
        if (keyevent.action_down == event.getaction()) {
          switch (keycode) {
            case keyevent.keycode_enter:
              string edittextcontent = edittext.gettext().tostring();
              //判断输入是否为空
              if (edittextcontent.equals(""))
                return true;
              //判断标签是否重复添加
              for(textview tag:tagview){
                string tempstr=tag.gettext().tostring();
                if(tempstr.equals(edittextcontent)) {
                  log.e("tag","重复添加");
                  edittext.settext("");
                  edittext.requestfocus();
                  return true;
                }
              }
              //添加标签
              final textview temp = gettag(edittext.gettext().tostring());
              tagview.add(temp);
              tagviewstate.add(false);
              //添加点击事件，点击变成选中状态，选中状态下被点击则删除
              temp.setonclicklistener(new view.onclicklistener() {
                @override
                public void onclick(view v) {
                  int curindex = tagview.indexof(temp);
                  if (!tagviewstate.get(curindex)) {
                    //显示 ×号删除
                    temp.settext(temp.gettext() + " ×");
                    temp.setbackgroundresource(r.drawable.tag_selected);
                    temp.settextcolor(color.parsecolor("#ffffff"));
                    //修改选中状态
                    tagviewstate.set(curindex, true);
                  } else {
                    layout.removeview(temp);
                    tagview.remove(curindex);
                    tagviewstate.remove(curindex);
                  }
                }
              });
              layout.addview(temp);
              //让编辑框在最后一个位置上
              edittext.bringtofront();
              //清空编辑框
              edittext.settext("");
              edittext.requestfocus();
              return true;
            case keyevent.keycode_del:
              int lastindex = tagview.size() - 1;
              //没有添加标签则不继续执行
              if (lastindex < 0)
                return false;
              //获取前一个标签
              textview prevtag = tagview.get(lastindex);
              //第一次按下del键则变成选中状态，选中状态下按del键则删除
              if (tagviewstate.get(lastindex)) {
                tagview.remove(prevtag);
                tagviewstate.remove(lastindex);
                layout.removeview(prevtag);
              } else {
                string te = edittext.gettext().tostring();
                if (te.equals("")) {
                  prevtag.settext(prevtag.gettext() + " ×");
                  prevtag.setbackgroundresource(r.drawable.tag_selected);
                  prevtag.settextcolor(color.parsecolor("#ffffff"));
                  tagviewstate.set(lastindex, true);
                }
              }
              break;
          }
 
        }
        return false;
      }
 
    });
 
    //监听编辑标签的输入事件
    edittext.addtextchangedlistener(new textwatcher() {
      @override
      public void beforetextchanged(charsequence s, int start, int count, int after) {
 
      }
 
      @override
      public void ontextchanged(charsequence s, int start, int before, int count) {
        //输入文字时取消已经选中的标签
        for (int i = 0; i < tagviewstate.size(); i++) {
          if (tagviewstate.get(i)) {
            textview tmp = tagview.get(i);
            tmp.settext(tmp.gettext().tostring().replace(" ×", ""));
            tagviewstate.set(i, false);
            tmp.setbackgroundresource(r.drawable.tag_normal);
            tmp.settextcolor(color.parsecolor("#66cdaa"));
          }
        }
      }
 
      @override
      public void aftertextchanged(editable s) {
 
      }
    });
 
  }
 
  /**
   * 创建一个正常状态的标签
   * @param tag
   * @return
   */
  private textview gettag(string tag){
    textview textview=new textview(getapplicationcontext());
    textview.settextsize(12);
    textview.setbackgroundresource(r.drawable.tag_normal);
    textview.settextcolor(color.parsecolor("#66cdaa"));
    textview.settext(tag);
    textview.setlayoutparams(params);
    return textview;
  }
 
}

效果挺好。

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