需求
產品上線了，項目差不多算是穩定下來了，接下來就是一個個的版本迭代了。這周又增加了幾個新功能，其中一個就是題目中講的，要仿新浪微博（如下圖）的輸入框里的文字效果。作為整體的字體兩邊是井號，并且包括井號要變色，刪除的時候，當光標到右側的井號，再次點擊刪除的時候，會將井號包裹的內容作為一個整體刪除掉，同時焦點不能在變色的字符之間，也就是說當點擊變色的字符時，光標會自動地落在井號兩側。
拆分問題
看上去是一個挺簡單合理的需求，隨便一想，這不就是字符串匹配嘛！可是實際行動起來，就會發現各種坑爹問題，遠不是想象中的那么簡單。我這做下來的感受是，必須要有一個明確清晰的思路，總結下來，其實可以分為下面幾個步驟。
- 首先，新浪微博這個功能的入口是，點擊井號，進入到新的界面里選擇字符串，然后自動添加到 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));
}
});
這樣我們增加字符串操作就做完了。
刪除符合條件的字符串
刪除操作是這個小程序的關鍵。做刪除操作時，我們需要搞清楚這樣幾個問題：什么時候刪除？從哪兒開始刪？刪到哪里算結束？刪除結束之后，光標位置應該在哪里？接下來一個一個解決。
- 刪除操作當然應該在按下軟鍵盤的刪除鍵時執行，這里有一個細節，在 Android 點擊鍵盤按鍵的事件，其實是分開處理的，按下鍵盤時會出發動作，彈起鍵盤時同樣會觸發動作；
- 如果是不符合篩選條件（”#”+bookEntity.getBookName()+”#”），點擊一次就刪除一個字符；如果符合條件，就一次性將整個帶左右井號的字符串都刪掉；
- 而光標則應該一直保持在最末尾處。
/** 監聽刪除按鍵，執行刪除動作 */
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");
}
});
最后，不要忘記取消注冊廣播。
設置光標位置
最后就是在手指觸摸到所匹配的字符時，設置光標的位置，其實跟上面的刪除處理邏輯一樣，只是不需要再去替換字符串，判斷的邏輯都是一樣的。
editText.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();
}
}
}
});
至此，一個類似新浪微博輸入框的小程序就完成了。當然比起新浪微博，這里少了一步點擊刪除第一次選中被匹配到字符串，這個功能，新浪微博的實現是，點擊刪除，先選中字符串，再點擊刪除，就刪掉字符串。具體情況，不再贅述。
