一、 概述
可以说微信做的用户体验太棒了，可以做到老少皆宜，给个赞，我们也同时应该告诫自己，用户体验应该向微信看齐，微信就是我们的标杆，那我们今天也来仿一仿微信添加的标签功能。只能仿着做了，真是做不到微信的那种体验。甘拜下风。
我们上篇学习了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" ><cornersandroid:bottomleftradius="30dp"android:bottomrightradius="30dp"android:topleftradius="30dp"android:toprightradius="30dp" /><stroke android:dashwidth="5dp" android:dashgap="2dp" android:width="1dp" android:color="#e0e0e0" /><paddingandroid: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"><cornersandroid:bottomleftradius="30dp"android:bottomrightradius="30dp"android:topleftradius="30dp"android:toprightradius="30dp" /><solid android:color="#00ff00" /><paddingandroid: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" ><cornersandroid:bottomleftradius="30dp"android:bottomrightradius="30dp"android:topleftradius="30dp"android:toprightradius="30dp" /><stroke android:width="1dp" android:color="#00ff00" /><paddingandroid: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"><cornersandroid:bottomleftradius="30dp"android:bottomrightradius="30dp"android:topleftradius="30dp"android:toprightradius="30dp" /><strokeandroid:width="1dp"android:color="#00ff00" /><paddingandroid: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;//上面的flowlayoutprivate tagflowlayout allflowlayout;//所有标签的tagflowlayoutprivate 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;@overrideprotected 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() {@overridepublic 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 一个edittextedittext.settext(label_list.get(i));addlabel(edittext);//添加标签}}/*** 初始化默认的添加标签*/private void initedittext(){edittext = new edittext(getapplicationcontext());edittext.sethint("添加标签");//设置固定宽度edittext.setminems(4);edittext.settextsize(12);//设置shapeedittext.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() {@overridepublic void beforetextchanged(charsequence s, int start, int count, int after) {}@overridepublic void ontextchanged(charsequence s, int start, int before, int count) {tagnormal();}@overridepublic void aftertextchanged(editable s) {}});}/*** 初始化所有标签列表*/private void initalllebllayout() {//初始化适配器tagadapter = new tagadapter<string>(all_label_list) {@overridepublic 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() {@overridepublic 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() {@overridepublic 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() {@overridepublic 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
