欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android仿微信标签功能

程序员文章站 2022-05-16 12:21:33
微信中有对联系人添加标签的功能,如下图所示。 这里有三种状态的标签,分别的未选择,选中,编辑中,由于前两种标签不需要提供输入,所以用textview实现即可,编辑中的...

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

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;
  }
 
}

Android仿微信标签功能

效果挺好。

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