天天看點

android實作标簽功能,Android仿微信标簽功能

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

android實作标簽功能,Android仿微信标簽功能

這裡有三種狀态的标簽,分别的未選擇,選中,編輯中,由于前兩種标簽不需要提供輸入,是以用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;

}

}

android實作标簽功能,Android仿微信标簽功能

效果挺好。

以上就是本文的全部内容,希望對大家的學習有所幫助,也希望大家多多支援腳本之家。