Android仿微信标签功能

砸漏

发布于 2020-11-04 15:32:00

7740

发布于 2020-11-04 15:32:00

文章被收录于专栏：恩蓝脚本

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

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

在drawable下新建xml文件，这里先上Shape的xml文件。

tag_normal.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_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;
}
}