Android仿微信标签功能
程序员文章站
2022-05-16 12:21:33
微信中有对联系人添加标签的功能,如下图所示。
这里有三种状态的标签,分别的未选择,选中,编辑中,由于前两种标签不需要提供输入,所以用textview实现即可,编辑中的...
微信中有对联系人添加标签的功能,如下图所示。
这里有三种状态的标签,分别的未选择,选中,编辑中,由于前两种标签不需要提供输入,所以用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; } }
效果挺好。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 燕国的一代明君:姬平在位时有何成就?