服务器之家

服务器之家 > 正文

iOS仿微信添加标签效果(shape实现)

时间:2021-02-18 15:35     来源/作者:小_源

一、 概述

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

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

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

二、效果图

iOS仿微信添加标签效果(shape实现)

三 、定义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
标签:

相关文章

热门资讯

2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
Intellij idea2020永久破解,亲测可用!!!
Intellij idea2020永久破解,亲测可用!!! 2020-07-29
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
返回顶部