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

這裡有三種狀态的标簽,分别的未選擇,選中,編輯中,由于前兩種标簽不需要提供輸入,是以用TextView實作即可,編輯中的标簽用EditText來實作。而标簽的形狀就用Shape來實作。
在drawable下建立xml檔案,這裡先上Shape的xml檔案。
tag_normal.xml
android:shape="rectangle" >
android:bottomLeftRadius="10dp"
android:bottomRightRadius="10dp"
android:topLeftRadius="10dp"
android:topRightRadius="10dp" />
android:bottom="4dp"
android:left="8dp"
android:right="8dp"
android:top="4dp" />
tag_selected.xml
android:shape="rectangle" >
android:bottomLeftRadius="10dp"
android:bottomRightRadius="10dp"
android:topLeftRadius="10dp"
android:topRightRadius="10dp" />
android:bottom="4dp"
android:left="8dp"
android:right="8dp"
android:top="4dp" />
tag_edit.xml
android:shape="rectangle" >
android:bottomLeftRadius="10dp"
android:bottomRightRadius="10dp"
android:topLeftRadius="10dp"
android:topRightRadius="10dp" />
android:bottom="4dp"
android:left="8dp"
android:right="8dp"
android:top="4dp" />
接着在在布局檔案中建立一個LinearLayout用以存放标簽(如果要實作多行标簽自适應添加,用自定義的FlowLayout,代碼網上很多。)
activity_main.xml
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">
根據對微信标簽的分析,這裡可以這樣實作,建立一個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 tagView=new ArrayList<>();
final List 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) {
}
});
}
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;
}
}
效果挺好。
以上就是本文的全部内容,希望對大家的學習有所幫助,也希望大家多多支援腳本之家。