一、 概述
可以说微信做的用户体验太棒了,可以做到老少皆宜,给个赞,我们也同时应该告诫自己,用户体验应该向微信看齐,微信就是我们的标杆,那我们今天也来仿一仿微信添加的标签功能。只能仿着做了,真是做不到微信的那种体验。甘拜下风。
我们上篇学习了shape属性的用法,那我们今天就用shape来做下微信的标签功能。先看一下效果。
我不仅用到了shape属性,还用到了翔哥的标签布局FlowLayout跟TagFlowLayout鸿洋的博客
二、效果图
三 、定义shape
添加标签
<&#63;xml version="1.0" encoding="utf-8"&#63;>
删除标签
<&#63;xml version="1.0" encoding="utf-8"&#63;>
正常标签
<&#63;xml version="1.0" encoding="utf-8"&#63;>
标签选中
<&#63;xml version="1.0" encoding="utf-8"&#63;>
以上是部分shape定义,大家可以下载源码自己看。
四、 思路
我们可以标签大概有以下逻辑
点击上面标签删除 所有标签里面更新未选中
点击所有标签的某一个 上面标签添加或者删除
五、代码
public class MainActivity extends AppCompatActivity { private FlowLayout flowLayout;//上面的flowLayout private TagFlowLayout allFlowLayout;//所有标签的TagFlowLayout private Listlabel_list = new ArrayList<>();//上面的标签列表 private List all_label_List = new ArrayList<>();//所有标签列表 final List labels = new ArrayList<>();//存放标签 final List labelStates = new ArrayList<>();//存放标签状态 final Set set = new HashSet<>();//存放选中的 private TagAdapter 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 (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 list = new ArrayList<>(); for (int i = 0; i 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
注释的很详细了。其实正常一步步来就按照逻辑来就可以实现,别慌,别乱,别急躁。什么功能都能实现的。
六、源码
点击下载
以上所述是小编给大家介绍的iOS仿微信添加标签效果(shape实现),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!