Android仿微信標簽功能

2019-10-21 21:34:18

字體：大中小

來源：轉載

供稿：網友

微信中有對聯系人添加標簽的功能，如下圖所示。

Android,微信,標簽

這里有三種狀態的標簽，分別的未選擇，選中，編輯中，由于前兩種標簽不需要提供輸入，所以用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;  } }

Android,微信,標簽