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

時間  2020-05-26
標籤 android 新浪 微博 話題 edittext 實現 欄目 Android 简体版
原文   原文鏈接

需求

產品上線了，項目差很少算是穩定下來了，接下來就是一個個的版本迭代了。這周又增長了幾個新功能，其中一個就是題目中講的，要仿新浪微博（以下圖）的輸入框裏的文字效果。做爲總體的字體兩邊是井號，而且包括井號要變色，刪除的時候，當光標到右側的井號，再次點擊刪除的時候，會將井號包裹的內容做爲一個總體刪除掉，同時焦點不能在變色的字符之間，也就是說當點擊變色的字符時，光標會自動地落在井號兩側。php

拆分問題

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

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

經過以上五個步驟將課題拆分爲四個小問題，而後再去一一解決便可。java

添加字符串

這一步基本上算是最簡單的一步了。咱們只須要作到點擊一個 button ，將字符串 append 到 EditText 裏就能夠了。固然，爲了讓咱們的操做更加有普遍的適用性，單純地增長字符串就有點太不夠看了，而實際應用裏，這樣作基本上也沒有什麼意義。小程序

咱們要作的就是，建立一個實體類，而這個字符串做爲一個值，所對應的變量就是這個實體類的成員變量，咱們經過不斷往實體類集合裏添加 new 出來的對象，來往 EditText 裏追加字符串。同時，這樣作還有一個好處就是，實際應用裏，每每伴隨字符串使用的可能還有其餘的變量，要處理與字符串一一對應的其餘變量，最好的方法就是在增長和刪除字符串的同時，將字符串對應變量所在實體從實體集合中移除掉。網絡

下面就是個人實體類：app

/** 實體類 */
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;
	}
}

添加字符操做：dom

/** 執行增長字符串的操做 */
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));
	}
});

這樣咱們增長字符串操做就作完了。ide

刪除符合條件的字符串

刪除操做是這個小程序的關鍵。作刪除操做時，咱們須要搞清楚這樣幾個問題：何時刪除？從哪兒開始刪？刪到哪裏算結束？刪除結束以後，光標位置應該在哪裏？接下來一個一個解決。測試

  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();
			}
		}
	}
});

至此，一個相似新浪微博輸入框的小程序就完成了。固然比起新浪微博，這裏少了一步點擊刪除第一次選中被匹配到字符串，這個功能，新浪微博的實現是，點擊刪除，先選中字符串，再點擊刪除，就刪掉字符串。具體狀況，再也不贅述。更多的技術文章請時時關注愛開發APP源碼論壇

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程