ios仿微信添加标签效果(shape实现)（ios仿微信添加标签效果(shape实现)）

一、 概述

可以说微信做的用户体验太棒了，可以做到老少皆宜，给个赞，我们也同时应该告诫自己，用户体验应该向微信看齐，微信就是我们的标杆，那我们今天也来仿一仿微信添加的标签功能。只能仿着做了，真是做不到微信的那种体验。甘拜下风。

我们上篇学习了shape属性的用法，那我们今天就用shape来做下微信的标签功能。先看一下效果。

我不仅用到了shape属性，还用到了翔哥的标签布局flowlayout跟tagflowlayout鸿洋的博客

二、效果图

三 、定义shape

添加标签

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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

删除标签

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <corners android:bottomleftradius="30dp" android:bottomrightradius="30dp" android:topleftradius="30dp" android:toprightradius="30dp" /> <solid android:color="#00ff00" /> <padding android:bottom="2dp" android:left="10dp" android:right="10dp" android:top="2dp" /> </shape>

正常标签

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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

标签选中

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

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

以上是部分shape定义，大家可以下载源码自己看。

四、 思路

我们可以标签大概有以下逻辑

点击上面标签删除 所有标签里面更新未选中

点击所有标签的某一个 上面标签添加或者删除

五、代码

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256

public class mainactivity extends appcompatactivity { private flowlayout flowlayout;//上面的flowlayout private tagflowlayout allflowlayout;//所有标签的tagflowlayout private list<string> label_list = new arraylist<>();//上面的标签列表 private list<string> all_label_list = new arraylist<>();//所有标签列表 final list<textview> labels = new arraylist<>();//存放标签 final list<boolean> labelstates = new arraylist<>();//存放标签状态 final set<integer> set = new hashset<>();//存放选中的 private tagadapter<string> tagadapter;//标签适配器 private linearlayout.layoutparams params; private edittext edittext; @override protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); initview(); initdata(); initedittext(); initalllebllayout(); } /** * 初始化view */ private void initview() { flowlayout = (flowlayout) findviewbyid(r.id.id_flowlayout); allflowlayout = (tagflowlayout) findviewbyid(r.id.id_flowlayout_two); params = new linearlayout.layoutparams(viewgroup.layoutparams.wrap_content, viewgroup.layoutparams.wrap_content); params.setmargins(20, 20, 20, 20); flowlayout.setonclicklistener(new view.onclicklistener() { @override public void onclick(view view) { string edittextcontent = edittext.gettext().tostring(); if (textutils.isempty(edittextcontent)) { tagnormal(); } else { addlabel(edittext); } } }); } /** * 初始化数据 */ private void initdata(){ //初始化上面标签 label_list.add("同事"); label_list.add("亲人"); label_list.add("同学"); label_list.add("朋友"); label_list.add("知己"); //初始化下面标签列表 all_label_list.addall(label_list); all_label_list.add("异性朋友"); all_label_list.add("高中同学"); all_label_list.add("大学同学"); all_label_list.add("社会朋友"); for (int i = 0; i < label_list.size() ; i++) { edittext = new edittext(getapplicationcontext());//new 一个edittext edittext.settext(label_list.get(i)); addlabel(edittext);//添加标签 } } /** * 初始化默认的添加标签 */ private void initedittext(){ edittext = new edittext(getapplicationcontext()); edittext.sethint("添加标签"); //设置固定宽度 edittext.setminems(4); edittext.settextsize(12); //设置shape edittext.setbackgroundresource(r.drawable.label_add); edittext.sethinttextcolor(color.parsecolor("#b4b4b4")); edittext.settextcolor(color.parsecolor("#000000")); edittext.setlayoutparams(params); //添加到layout中 flowlayout.addview(edittext); 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) { tagnormal(); } @override public void aftertextchanged(editable s) { } }); } /** * 初始化所有标签列表 */ private void initalllebllayout() { //初始化适配器 tagadapter = new tagadapter<string>(all_label_list) { @override public view getview(flowlayout parent, int position, string s) { textview tv = (textview) getlayoutinflater().inflate(r.layout.flag_adapter, allflowlayout, false); tv.settext(s); return tv; } }; allflowlayout.setadapter(tagadapter); //根据上面标签来判断下面的标签是否含有上面的标签 for (int i = 0; i < label_list.size(); i++) { for (int j = 0; j < all_label_list.size(); j++) { if (label_list.get(i).equals( all_label_list.get(j))) { tagadapter.setselectedlist(i);//设为选中 } } } tagadapter.notifydatachanged(); //给下面的标签添加监听 allflowlayout.setontagclicklistener(new tagflowlayout.ontagclicklistener() { @override public boolean ontagclick(view view, int position, flowlayout parent) { if (labels.size() == 0) { edittext.settext(all_label_list.get(position)); addlabel(edittext); return false; } list<string> list = new arraylist<>(); for (int i = 0; i < labels.size(); i++) { list.add(labels.get(i).gettext().tostring()); } //如果上面包含点击的标签就删除 if (list.contains(all_label_list.get(position))) { for (int i = 0; i < list.size(); i++) { if (all_label_list.get(position).equals(list.get(i))) { flowlayout.removeview(labels.get(i)); labels.remove(i); } } } else { edittext.settext(all_label_list.get(position)); addlabel(edittext); } return false; } }); //已经选中的监听 allflowlayout.setonselectlistener(new tagflowlayout.onselectlistener() { @override public void onselected(set<integer> selectposset) { set.clear(); set.addall(selectposset); } }); } /** * 添加标签 * @param edittext * @return */ private boolean addlabel(edittext edittext) { string edittextcontent = edittext.gettext().tostring(); //判断输入是否为空 if (edittextcontent.equals("")) return true; //判断是否重复 for (textview tag : labels) { string tempstr = tag.gettext().tostring(); if (tempstr.equals(edittextcontent)) { edittext.settext(""); edittext.requestfocus(); return true; } } //添加标签 final textview temp = gettag(edittext.gettext().tostring()); labels.add(temp); labelstates.add(false); //添加点击事件，点击变成选中状态，选中状态下被点击则删除 temp.setonclicklistener(new view.onclicklistener() { @override public void onclick(view v) { int curindex = labels.indexof(temp); if (!labelstates.get(curindex)) { //显示 ×号删除 temp.settext(temp.gettext() + " ×"); temp.setbackgroundresource(r.drawable.label_del); temp.settextcolor(color.parsecolor("#ffffff")); //修改选中状态 labelstates.set(curindex, true); } else { delbytest(temp.gettext().tostring()); flowlayout.removeview(temp); labels.remove(curindex); labelstates.remove(curindex); for (int i = 0; i < label_list.size(); i++) { for (int j = 0; j < labels.size(); j++) { if (label_list.get(i).equals( labels.get(j).gettext())) { tagadapter.setselectedlist(i); } } } tagadapter.notifydatachanged(); } } }); flowlayout.addview(temp); //让输入框在最后一个位置上 edittext.bringtofront(); //清空编辑框 edittext.settext(""); edittext.requestfocus(); return true; } /** * 根据字符删除标签 * @param text */ private void delbytest(string text) { for (int i = 0; i < all_label_list.size(); i++) { string a = all_label_list.get(i) + " ×"; if (a.equals(text)) { set.remove(i); } } tagadapter.setselectedlist(set);//重置选中的标签 } /** * 标签恢复到正常状态 */ private void tagnormal() { //输入文字时取消已经选中的标签 for (int i = 0; i < labelstates.size(); i++) { if (labelstates.get(i)) { textview tmp = labels.get(i); tmp.settext(tmp.gettext().tostring().replace(" ×", "")); labelstates.set(i, false); tmp.setbackgroundresource(r.drawable.label_normal); tmp.settextcolor(color.parsecolor("#00ff00")); } } } /** * 创建一个正常状态的标签 * @param label * @return */ private textview gettag(string label) { textview textview = new textview(getapplicationcontext()); textview.settextsize(12); textview.setbackgroundresource(r.drawable.label_normal); textview.settextcolor(color.parsecolor("#00ff00")); textview.settext(label); textview.setlayoutparams(params); return textview; } }

注释的很详细了。其实正常一步步来就按照逻辑来就可以实现，别慌，别乱，别急躁。什么功能都能实现的。

六、源码

点击下载

以上所述是小编给大家介绍的ios仿微信添加标签效果(shape实现)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对服务器之家网站的支持！

也许是最全java资料！（文档+项目+资料）【点击下载】 和努力的人一起学习Java！

原文链接：http://blog.csdn.net/xiaoyuan511/article/details/53144626