Android仿新浪微博加＃話題的EditText實現

easydone發表於2015-06-13
Android

需求

產品上線了，專案差不多算是穩定下來了，接下來就是一個個的版本迭代了。這周又增加了幾個新功能，其中一個就是題目中講的，要仿新浪微博（如下圖）的輸入框裡的文字效果。作為整體的字型兩邊是井號，並且包括井號要變色，刪除的時候，當游標到右側的井號，再次點選刪除的時候，會將井號包裹的內容作為一個整體刪除掉，同時焦點不能在變色的字元之間，也就是說當點選變色的字元時，游標會自動地落在井號兩側。

拆分問題

看上去是一個挺簡單合理的需求，隨便一想，這不就是字串匹配嘛！可是實際行動起來，就會發現各種坑爹問題，遠不是想象中的那麼簡單。我這做下來的感受是，必須要有一個明確清晰的思路，總結下來，其實可以分為下面幾個步驟。

  • 首先，新浪微博這個功能的入口是，點選井號，進入到新的介面裡選擇字串，然後自動新增到 EditText 框裡，我們要實現這樣一個 Demo ，也沒必要進入新的介面，直接做一個按鈕，點選新增即可；
  • 然後，需要明確的一點是，在 Android 提供的原生的 API 裡，刪除動作，一次只能刪掉一個字元，而無法刪除批量的字元，一次只能刪除一個 letter ，而不是一個 word ，刪除動作是我們這個課題的關鍵所在；
  • 處理完了增加和刪除字串功能，接著就是匹配符合規則的字串做變色處理了；
  • 再接著就是處理點選字串，游標的所處位置的問題；
  • 完善需要補充和修改的細節。

通過以上五個步驟將課題拆分為四個小問題，然後再去一一解決即可。

新增字串

這一步基本上算是最簡單的一步了。我們只需要做到點選一個 button ，將字串 append 到 EditText 裡就可以了。當然，為了讓我們的操作更加有廣泛的適用性，單純地增加字串就有點太不夠看了，而實際應用裡，這樣做基本上也沒有什麼意義。

我們要做的就是，建立一個實體類，而這個字串作為一個值，所對應的變數就是這個實體類的成員變數，我們通過不斷往實體類集合裡新增 new 出來的物件，來往 EditText 裡追加字串。同時，這樣做還有一個好處就是，實際應用裡，往往伴隨字串使用的可能還有其他的變數，要處理與字串一一對應的其他變數，最好的方法就是在增加和刪除字串的同時，將字串對應變數所在實體從實體集合中移除掉。

下面就是我的實體類：

/** 實體類 */
public class BookEntity implements Serializable {
	private static final long serialVersionUID = 1L;
	private String bookId;
	private String bookName;
    public BookEntity(String bookName, int bookId) {
		super();
		this.bookName = bookName;
		this.bookId = bookId;
	}
	public String getBookId() {
		return bookId;
	}
	public void setBookId(String bookId) {
		this.bookId = bookId;
	}
	public String getBookName() {
		return bookName;
	}
	public void setBookName(String bookName) {
		this.bookName = bookName;
	}
}

新增字元操作：

/** 執行增加字串的操作 */
private Button button;
private ArrayList<BookEntity> mList = new ArrayList<BookEntity>();
private EditText editText;
View view = inflater.inflate(R.layout.fragment_main, container, false);
editText = (EditText) view.findViewById(R.id.edit_text);
button = (Button) view.findViewById(R.id.bt);
buttont.setOnClickListener(new OnClickListener() {
	@Override
	public void onClick(View v) {
		int nextInt = new Random().nextInt(100);
		String str = "#測試測試" + nextInt + "# ";
		editText.setText(editText.getText());
		editText.append(str);
		editText.setSelection(editText.getText().toString().length());
		mList.add(new BookEntity(str, nextInt));
	}
});

這樣我們增加字串操作就做完了。

刪除符合條件的字串

刪除操作是這個小程式的關鍵。做刪除操作時，我們需要搞清楚這樣幾個問題：什麼時候刪除？從哪兒開始刪？刪到哪裡算結束？刪除結束之後，游標位置應該在哪裡？接下來一個一個解決。

  1. 刪除操作當然應該在按下軟鍵盤的刪除鍵時執行，這裡有一個細節，在 Android 點選鍵盤按鍵的事件，其實是分開處理的，按下鍵盤時會出發動作，彈起鍵盤時同樣會觸發動作；
  2. 如果是不符合篩選條件（”#”+bookEntity.getBookName()+”#”），點選一次就刪除一個字元；如果符合條件，就一次性將整個帶左右井號的字串都刪掉；
  3. 而游標則應該一直保持在最末尾處。
/** 監聽刪除按鍵，執行刪除動作 */
editText.setOnKeyListener(new OnKeyListener() {
	@Override
	public boolean onKey(View v, int keyCode, KeyEvent event) {
		if (keyCode == KeyEvent.KEYCODE_DEL && event.getAction() == KeyEvent.ACTION_DOWN) { //當為刪除鍵並且是按下動作時執行
			int selectionStart = editText.getSelectionStart();
			int lastPos = 0;
			for (int i = 0; i < mList.size(); i++) { //迴圈遍歷整個輸入框的所有字元
				if ((lastPos = editText.getText().toString().indexOf(mList.get(i).getBookName(), lastPos)) != -1) {
					if (selectionStart != 0 && selectionStart >= lastPos && selectionStart <= (lastPos + mList.get(i).getBookName().length())) {
						String sss = editText.getText().toString();
						editText.setText(sss.substring(0, lastPos) + sss.substring(lastPos + mList.get(i).getBookName().length())); //字串替換，刪掉符合條件的字串
						mList.remove(i); //刪除對應實體
						editText.setSelection(lastPos); //設定游標位置
						return true;
					}
				} else {
						lastPos += ("#" + mList.get(i).getBookName() + "#").length();
				}
			}
		}
		return false;
	}
});

處理變色問題

變色，使符合條件的字串顏色高亮，更多像是錦上添花的功能，給使用者更直觀的感知，卻是整個小程式裡實現起來最複雜的部分。由於 Android 自身的一些原因，無論是增加還是刪除，或者是鎖屏等事件，都會造成介面重繪的問題，因此其核心就在於要設定字元改變的監聽狀態，當字元改變時，剩餘的字元的顏色隨之發生變化。

具體的實現，我們需要一個 TextWatcher 的實現類，然後 new 出來一個物件，作為引數給控制元件 editText 設定的 addTextChangedListener 監聽。

class MyTextWatcher implements TextWatcher {
	@Override
	public synchronized void afterTextChanged(Editable s) {
		AddNewArticleUI.this.etWriteDynamic.removeTextChangedListener(watcher);
		TEXT_CHANGE_LISTENER_FLAG = 0;
		int findPos = 0;
		int copyPos = 0;
		String sText = s.toString();
		List<Integer> spanIndexes = new ArrayList<Integer>();
		s.clear();
		for (int i = 0; i < bookList.size(); i++) {
			String tempBookName = "#" + bookList.get(i).getBookName() + "#";
			if ((findPos = sText.indexOf(tempBookName, findPos)) != -1) {
				spanIndexes.add(findPos);//bookName 的開始索引，鍵值為偶數，從0開始
				spanIndexes.add(findPos + tempBookName.length()); //bookName 的結束索引，鍵值為奇數，從1開始
			}
		}
		if (spanIndexes != null && spanIndexes.size() != 0) {
			for (int i = 0; i < spanIndexes.size(); i++) {
				if (i % 2 == 0) {
					s.append(sText.substring(copyPos, spanIndexes.get(i)));
				} else {
					Spanned htmlText = Html.fromHtml("<font color='blue'>" + sText.substring(copyPos, spanIndexes.get(i)) + "</font>");
					s.append(htmlText);
				}
				copyPos = spanIndexes.get(i);
			}
			s.append(sText.substring(copyPos));
		} else {
			s.append(sText);
		}
	}

	@Override
	public void beforeTextChanged(CharSequence s, int start, int count, int after) {}

	@Override
	public void onTextChanged(CharSequence s, int start, int before, int count) {}
}

這裡需要注意的是在 addTextChangedListener 的 afterTextChange 方法裡，不能夠操作 Editable 去給控制元件設定值，而且也不能在全域性設定 TextChanged 監聽，否則必然會因為迴圈呼叫 StackOverFlow 。也就是說我們只能在文字改變之前去呼叫，還要發螢幕解鎖屏廣播，在螢幕解鎖時去呼叫。

private int TEXT_CHANGE_LISTENER_FLAG = 0;
/** 監聽文字變化，並重新設定顏色 */
if (TEXT_CHANGE_LISTENER_FLAG == 0) {
	editText.addTextChangedListener(watcher);
	TEXT_CHANGE_LISTENER_FLAG = 1;
}

下面是解鎖屏的廣播（此段程式碼來自網路）

public class ScreenListener {
	private Context mContext;
	private ScreenBroadcastReceiver mScreenReceiver;
	private ScreenStateListener mScreenStateListener;

	public ScreenListener(Context context) {
		mContext = context;
		mScreenReceiver = new ScreenBroadcastReceiver();
	}

	/**
	 * screen狀態廣播接收者
	 */
	private class ScreenBroadcastReceiver extends BroadcastReceiver {
		private String action = null;

		@Override
		public void onReceive(Context context, Intent intent) {
			action = intent.getAction();
			if (Intent.ACTION_SCREEN_ON.equals(action)) { // 開屏
				mScreenStateListener.onScreenOn();
			} else if (Intent.ACTION_SCREEN_OFF.equals(action)) { // 鎖屏
				mScreenStateListener.onScreenOff();
			} else if (Intent.ACTION_USER_PRESENT.equals(action)) { // 解鎖
				mScreenStateListener.onUserPresent();
			}
		}
	}

	/**
	 * 開始監聽screen狀態
	 * 
	 * @param listener
	 */
	public void begin(ScreenStateListener listener) {
		mScreenStateListener = listener;
		registerListener();
		getScreenState();
	}

	/**
	 * 獲取screen狀態
	 */
	private void getScreenState() {
		PowerManager manager = (PowerManager) mContext.getSystemService(Context.POWER_SERVICE);
		if (manager.isScreenOn()) {
			if (mScreenStateListener != null) {
				mScreenStateListener.onScreenOn();
			}
		} else {
			if (mScreenStateListener != null) {
				mScreenStateListener.onScreenOff();
			}
		}
	}

	/**
	 * 停止screen狀態監聽
	 */
	public void unregisterListener() {
		mContext.unregisterReceiver(mScreenReceiver);
	}

	/**
	 * 啟動screen狀態廣播接收器
	 */
	private void registerListener() {
		IntentFilter filter = new IntentFilter();
		filter.addAction(Intent.ACTION_SCREEN_ON);
		filter.addAction(Intent.ACTION_SCREEN_OFF);
		filter.addAction(Intent.ACTION_USER_PRESENT);
		mContext.registerReceiver(mScreenReceiver, filter);
	}

	public interface ScreenStateListener {// 返回給呼叫者螢幕狀態資訊
		public void onScreenOn();

		public void onScreenOff();

		public void onUserPresent();
	}
}

註冊廣播

ScreenListener screenListener = new ScreenListener(this);
screenListener.begin(new ScreenStateListener() {

    @Override
    public void onUserPresent() {
        Log.e("onUserPresent", "onUserPresent");
    }

    @Override
    public void onScreenOn() {
        Log.e("onScreenOn", "onScreenOn");
        if (TEXT_CHANGE_LISTENER_FLAG == 0) {
			editText.addTextChangedListener(watcher);
			TEXT_CHANGE_LISTENER_FLAG = 1;
		}
    }

    @Override
    public void onScreenOff() {
        Log.e("onScreenOff", "onScreenOff");
    }
});

最後，不要忘記取消註冊廣播。

設定游標位置

最後就是在手指觸控到所匹配的字元時，設定游標的位置，其實跟上面的刪除處理邏輯一樣，只是不需要再去替換字串，判斷的邏輯都是一樣的。

ditText.setOnClickListener(new OnClickListener() {
	@Override
	public void onClick(View v) {
		Log.i("TAG", ((EditText) v).getSelectionStart() + "");
		int selectionStart = ((EditText) v).getSelectionStart();
		int lastPos = 0;
		for (int i = 0; i < mList.size(); i++) {
			if ((lastPos = editText.getText().toString().indexOf(mList.get(i).getBookName(), lastPos)) != -1) {
				if (selectionStart >= lastPos && selectionStart <= (lastPos + mList.get(i).getBookName().length())) {
					editText.setSelection(lastPos + mList.get(i).getBookName().length());
				}
			} else {
					lastPos += ("#" + mList.get(i).getBookName() + "#").length();
			}
		}
	}
});

至此，一個類似新浪微博輸入框的小程式就完成了。當然比起新浪微博，這裡少了一步點選刪除第一次選中被匹配到字串，這個功能，新浪微博的實現是，點選刪除，先選中字串，再點選刪除，就刪掉字串。具體情況，不再贅述。

相關文章