Android仿微信标签功能_android教程

上一篇: Android仿QQ个人标签添加与删除功... 下一篇:FlowLayout流式布局实现搜索清空...

Android仿微信标签功能

发布时间：2019-08-08 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了Android仿微信标签功能，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

微信中有对联系人添加标签的功能，如下图所示。

Android仿微信标签功能

这里有三种状态的标签，分别的未选择，选中，编辑中，由于前两种标签不需要提供输入，所以用TextView实现即可，编辑中的标签用EdITText来实现。而标签的形状就用Shape来实现。

在drawable下新建XMl文件，这里先上ShaPE的xML文件。

tag_normal.xml

 <&#63;xml version="1.0" encoding="utf-8"?> <shape xmlns:andROId="http://schemas.android.COM/apk/res/android"   android:shape="rectangle" >     <corners     android:bottomLeftRadius="10dp"     android:bottomRightRadius="10dp"     android:topLeftRadius="10dp"     android:toPRightRadius="10dp" />    <stroke android:width="1dp" android:color="#66CDAA" />     <padding     android:bottom="4dp"     android:left="8dp"     android:right="8dp"     android:top="4dp" />   </shape>

tag_selected.xml

 <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"   android:shape="rectangle" >     <corners     android:bottomLeftRadius="10dp"     android:bottomRightRadius="10dp"     android:topLeftRadius="10dp"     android:topRightRadius="10dp" />    <stroke android:width="1dp" android:color="#66CDAA" />     <padding     android:bottom="4dp"     android:left="8dp"     android:right="8dp"     android:top="4dp" />   </shape>

tag_edit.xml

 <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"   android:shape="rectangle" >     <corners     android:bottomLeftRadius="10dp"     android:bottomRightRadius="10dp"     android:topLeftRadius="10dp"     android:topRightRadius="10dp" />   <!-- 这里实现虚线边框-->  <stroke android:dashWidth="5dp" android:dashGap="2dp" android:width="1dp" android:color="#e0e0e0" />     <padding     android:bottom="4dp"     android:left="8dp"     android:right="8dp"     android:top="4dp" /> </shape>

接着在在布局文件中新建一个LinearLayout用以存放标签(如果要实现多行标签自适应添加，用自定义的FlowLayout，代码网上很多。)

activity_main.xml

 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"   xmlns:tools="http://schemas.android.com/tools"   android:id="@+id/tag_container"   android:layout_width="match_parent"   android:layout_height="match_parent"   android:orientation="horizontal"   tools:context="com.qtree.tagdemo.MainActivity">   </LinearLayout>

  根据对微信标签的分析，这里可以这样实现，创建一个EditText，对其软键盘的Enter和Delete按键进行监听，当输入完成后按下Enter则生成一个标签，添加到LinearLayout中。然后如果当标签内文字为空时，按下删除键，就将它前一个标签的状态修改为选中状态。同样地，当点击未选择的标签也可以选中该标签进行删除。

详细实现如下

 package com.qtree.tagdemo;   import android.graphics.Color; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.text.Editable; import android.text.Textwatcher; import android.util.LOG; import android.view.KeyEvent; import android.view.View; import android.view.ViewGroup; import android.widget.EditText; import android.widget.LinearLayout; import android.widget.TextView; import java.util.ArrayList; import java.util.List;   public class MainActivity extends AppCompatActivity {     private LinearLayout layout;   private LinearLayout.LayoutParams params;     @override   protected void onCreate(Bundle savedInstancestate) {     super.onCreate(savedInstanceState);     setContentView(R.layout.activity_main);       layout=(LinearLayout)findViewById(R.id.tag_container);       params=new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);     params.setMargins(30,30,0,0);       //存放标签和标签选择状态     final List<TextView> tagView=new ArrayList<>();     final List<Boolean> tagViewState=new ArrayList<>();       //创建编辑中的标签     final EditText editText=new EditText(getApplicationContext());     editText.setHint("添加标签");     //设置固定宽度     editText.setMinEms(4);     editText.setTextSize(12);     //设置shape     editText.setBackgroundResource(R.drawable.tag_edit);     editText.setHintTextColor(Color.parseColor("#b4b4b4"));     editText.setTextColor(Color.parseColor("#000000"));     editText.setLayoutParams(params);          //添加到layout中     layout.addView(editText);       //对软键盘的Enter和Del键监听     editText.setOnKeyListener(new View.OnKeyListener() {       @Override       public boolean onKey(View v, int keyCode, KeyEvent event) {           if (KeyEvent.ACTION_DOWN == event.getAction()) {           switch (keyCode) {             case KeyEvent.KEYCODE_ENTER:               String editTextContent = editText.getText().toString();               //判断输入是否为空               if (editTextContent.equals(""))                 return true;               //判断标签是否重复添加               for(TextView tag:tagView){                 String tempStr=tag.getText().toString();                 if(tempStr.equals(editTextContent)) {                   Log.e("tag","重复添加");                   editText.setText("");                   editText.requestFocus();                   return true;                 }               }               //添加标签               final TextView temp = getTag(editText.getText().toString());               tagView.add(temp);               tagViewState.add(false);               //添加点击事件，点击变成选中状态，选中状态下被点击则删除               temp.setOnClickListener(new View.OnClickListener() {                 @Override                 public void onClick(View v) {                   int curIndex = tagView.indexOf(temp);                   if (!tagViewState.get(curIndex)) {                     //显示 ×号删除                     temp.setText(temp.getText() + " ×");                     temp.setBackgroundResource(R.drawable.tag_selected);                     temp.setTextColor(Color.parseColor("#ffffff"));                     //修改选中状态                     tagViewState.set(curIndex, true);                   } else {                     layout.removeView(temp);                     tagView.remove(curIndex);                     tagViewState.remove(curIndex);                   }                 }               });               layout.addView(temp);               //让编辑框在最后一个位置上               editText.bringToFront();               //清空编辑框               editText.setText("");               editText.requestFocus();               return true;             case KeyEvent.KEYCODE_DEL:               int lastIndex = tagView.size() - 1;               //没有添加标签则不继续执行               if (lastIndex < 0)                 return false;               //获取前一个标签               TextView prevTag = tagView.get(lastIndex);               //第一次按下Del键则变成选中状态，选中状态下按Del键则删除               if (tagViewState.get(lastIndex)) {                 tagView.remove(prevTag);                 tagViewState.remove(lastIndex);                 layout.removeView(prevTag);               } else {                 String te = editText.getText().toString();                 if (te.equals("")) {                   prevTag.setText(prevTag.getText() + " ×");                   prevTag.setBackgroundResource(R.drawable.tag_selected);                   prevTag.setTextColor(Color.parseColor("#ffffff"));                   tagViewState.set(lastIndex, true);                 }               }               break;           }           }         return false;       }       });       //监听编辑标签的输入事件     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) {         //输入文字时取消已经选中的标签         for (int i = 0; i < tagViewState.size(); i++) {           if (tagViewState.get(i)) {             TextView tmp = tagView.get(i);             tmp.setText(tmp.getText().toString().replace(" ×", ""));             tagViewState.set(i, false);             tmp.setBackgroundResource(R.drawable.tag_normal);             tmp.setTextColor(Color.parseColor("#66CDAA"));           }         }       }         @Override       public void afterTextChanged(Editable s) {         }     });     }     /**    * 创建一个正常状态的标签    * @param tag    * @return    */   private TextView getTag(String tag){     TextView textView=new TextView(getApplicationContext());     textView.setTextSize(12);     textView.setBackgroundResource(R.drawable.tag_normal);     textView.setTextColor(Color.parseColor("#66CDAA"));     textView.setText(tag);     textView.setLayoutParams(params);     return textView;   }   }