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

一、 概述

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

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

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

二、效果图

三 、定义shape

添加标签

<?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>

删除标签

<?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>

正常标签

<?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>

标签选中

<?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定义，大家可以下载源码自己看。

四、 思路

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

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

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

五、代码

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实现)，希望对大家有所帮助