1.寫在前面
最近項目比較忙，有一個多月沒有更新博客了，利用閒暇之餘總結一下項目中遇到的問題，分享給大家！
剛看到要做填空題這個需求的時候，第一個反應是到百度，啊…不對，谷歌上搜一下有沒有類似的Demo，無奈搜出來的全是Android面試題，唉，算了，還是老老實實自己實現吧，先看下效果：
2.學習一些基礎知識
首先來學習一下如何對TextView的局部設置顏色和點擊事件，這裏要用到一個很重要的類SpannableString。
Talk is cheap. Show me the code.
public class SpannableStringActivity extends BaseActivity {
@Bind(R.id.tv_content)
TextView tvContent;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_spannable_string);
ButterKnife.bind(this);
initData();
}
private void initData() {
String originContent = "你看我不僅能變顏色，還能點擊。";
SpannableString content = new SpannableString(originContent);
// 設置顏色
ForegroundColorSpan colorSpan = new ForegroundColorSpan(Color.parseColor("#4DB6AC"));
content.setSpan(colorSpan, 7, 9, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
// 設置點擊事件
MyClickableSpan myClickableSpan = new MyClickableSpan();
content.setSpan(myClickableSpan, 12, 14, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
// 設置此方法後，點擊事件才能生效
tvContent.setMovementMethod(LinkMovementMethod.getInstance());
tvContent.setText(content);
}
class MyClickableSpan extends ClickableSpan {
@Override
public void onClick(View widget) {
Toast.makeText(SpannableStringActivity.this, "我被點擊了", Toast.LENGTH_SHORT).show();
}
}
}看下效果：
簡單說下，首先把要顯示的內容轉成SpannableString對象，然後通過ForegroundColorSpan設置顏色，ClickableSpan設置點擊事件，SpannableString通過調用setSpan方法將顏色和點擊事件應用到顯示的內容中，setSpan方法需要傳入設置格式生效的起始座標（比如顏色的起始座標分別是7、8，那麼就傳入7,8+1），最後注意一下Spanned.SPAN_EXCLUSIVE_EXCLUSIVE這個標誌，一共有四種flag可以選擇，分別是：
Spanned.SPAN_INCLUSIVE_INCLUSIVE：前後都包括
Spanned.SPAN_EXCLUSIVE_EXCLUSIVE：前後都不包括
Spanned.SPAN_INCLUSIVE_EXCLUSIVE：前面包括，後面不包括
Spanned.SPAN_EXCLUSIVE_INCLUSIVE：前面不包括，後面包括
這個flag是用來標識在Span範圍內的文本，前後輸入新的字符時是否也使用這個效果用的。一臉蒙圈，啥，你說的是啥？還是看圖吧：
我們把flag設置爲Spanned.SPAN_INCLUSIVE_EXCLUSIVE（前面包括，後面不包括）。
是不是清晰了很多，如果圖還看不懂，慢走不送！
3.實現
首先初始化一些數據
public class FillBlankView extends RelativeLayout {
private TextView tvContent;
private Context context;
// 答案集合
private List<String> answerList;
// 答案範圍集合
private List<AnswerRange> rangeList;
// 填空題內容
private SpannableStringBuilder content;
public FillBlankView(Context context) {
this(context, null);
}
public FillBlankView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public FillBlankView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
this.context = context;
initView();
}
private void initView() {
LayoutInflater inflater = LayoutInflater.from(context);
inflater.inflate(R.layout.layout_fill_blank, this);
tvContent = (TextView) findViewById(R.id.tv_content);
}
...
}定義一個設置數據的方法，供外部調用
/**
* 設置數據
*
* @param originContent 源數據
* @param answerRangeList 答案範圍集合
*/
public void setData(String originContent, List<AnswerRange> answerRangeList) {
if (TextUtils.isEmpty(originContent) || answerRangeList == null
|| answerRangeList.isEmpty()) {
return;
}
// 獲取課文內容
content = new SpannableStringBuilder(originContent);
// 答案範圍集合
rangeList = answerRangeList;
// 設置下劃線顏色
for (AnswerRange range : rangeList) {
ForegroundColorSpan colorSpan = new ForegroundColorSpan(Color.parseColor("#4DB6AC"));
content.setSpan(colorSpan, range.start, range.end, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
}
// 答案集合
answerList = new ArrayList<>();
for (int i = 0; i < rangeList.size(); i++) {
answerList.add("");
}
// 設置填空處點擊事件
for (int i = 0; i < rangeList.size(); i++) {
AnswerRange range = rangeList.get(i);
BlankClickableSpan blankClickableSpan = new BlankClickableSpan(i);
content.setSpan(blankClickableSpan, range.start, range.end, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
}
// 設置此方法後，點擊事件才能生效
tvContent.setMovementMethod(LinkMovementMethod.getInstance());
tvContent.setText(content);
}代碼中已經寫了很全的註釋，主要是設置填空處的顏色和點擊事件。
點擊事件
/**
* 點擊事件
*/
class BlankClickableSpan extends ClickableSpan {
private int position;
public BlankClickableSpan(int position) {
this.position = position;
}
@Override
public void onClick(final View widget) {
View view = LayoutInflater.from(context).inflate(R.layout.layout_input, null);
final EditText etInput = (EditText) view.findViewById(R.id.et_answer);
Button btnFillBlank = (Button) view.findViewById(R.id.btn_fill_blank);
// 顯示原有答案
String oldAnswer = answerList.get(position);
if (!TextUtils.isEmpty(oldAnswer)) {
etInput.setText(oldAnswer);
etInput.setSelection(oldAnswer.length());
}
final PopupWindow popupWindow = new PopupWindow(view, LayoutParams.MATCH_PARENT, dp2px(40));
// 獲取焦點
popupWindow.setFocusable(true);
// 爲了防止彈出菜單獲取焦點之後，點擊Activity的其他組件沒有響應
popupWindow.setBackgroundDrawable(new PaintDrawable());
// 設置PopupWindow在軟鍵盤的上方
popupWindow.setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE);
// 彈出PopupWindow
popupWindow.showAtLocation(tvContent, Gravity.BOTTOM, 0, 0);
btnFillBlank.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// 填寫答案
String answer = etInput.getText().toString();
fillAnswer(answer, position);
popupWindow.dismiss();
}
});
// 顯示軟鍵盤
InputMethodManager inputMethodManager =
(InputMethodManager) context.getSystemService(Context.INPUT_METHOD_SERVICE);
inputMethodManager.toggleSoftInput(0, InputMethodManager.HIDE_NOT_ALWAYS);
}
@Override
public void updateDrawState(TextPaint ds) {
// 不顯示下劃線
ds.setUnderlineText(false);
}
}點擊填空處彈出一個PopupWindow輸入框，輸入答案後點擊確定，調用fillAnswer方法將答案設置到填空處。
填寫答案
前方高能，請減速慢行！
/**
* 填寫答案
*
* @param answer 當前填空處答案
* @param position 填空位置
*/
private void fillAnswer(String answer, int position) {
answer = " " + answer + " ";
// 替換答案
AnswerRange range = rangeList.get(position);
content.replace(range.start, range.end, answer);
// 更新當前的答案範圍
AnswerRange currentRange = new AnswerRange(range.start, range.start + answer.length());
rangeList.set(position, currentRange);
// 答案設置下劃線
content.setSpan(new UnderlineSpan(),
currentRange.start, currentRange.end, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
// 將答案添加到集合中
answerList.set(position, answer.replace(" ", ""));
// 更新內容
tvContent.setText(content);
for (int i = 0; i < rangeList.size(); i++) {
if (i > position) {
// 獲取下一個答案原來的範圍
AnswerRange oldNextRange = rangeList.get(i);
int oldNextAmount = oldNextRange.end - oldNextRange.start;
// 計算新舊答案字數的差值
int difference = currentRange.end - range.end;
// 更新下一個答案的範圍
AnswerRange nextRange = new AnswerRange(oldNextRange.start + difference,
oldNextRange.start + difference + oldNextAmount);
rangeList.set(i, nextRange);
}
}
}首先把填空處的下劃線或舊答案替換成新答案，然後更新一下當前的答案範圍，由於下劃線已經被答案替換了，所以需要爲答案設置一條下劃線，最後把答案更新到集合中，這樣一個填空就完成了。
But，當一個填空處的答案範圍改變後，後面所有的填空處答案範圍都要跟着改變，所以還需要再更新一下後面填空處的答案範圍。首先獲取下一個答案原來的範圍，計算一下需要向前或向後移動的距離，然後更新一下答案範圍就大功告成了。
最後看下如何設置數據
public class MainActivity extends AppCompatActivity {
@BindView(R.id.fbv_content)
FillBlankView fbvContent;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ButterKnife.bind(this);
initData();
}
private void initData() {
String content = "紛紛揚揚的________下了半尺多厚。天地間________的一片。我順着________工地走了四十多公里，" +
"只聽見各種機器的吼聲，可是看不見人影，也看不見工點。一進靈官峽，我就心裏發慌。";
// 答案範圍集合
List<AnswerRange> rangeList = new ArrayList<>();
rangeList.add(new AnswerRange(5, 13));
rangeList.add(new AnswerRange(23, 31));
rangeList.add(new AnswerRange(38, 46));
fbvContent.setData(content, rangeList);
}
}4.寫在最後
源碼已託管到GitHub上，歡迎Fork，覺得還不錯就Start一下吧！
歡迎同學們吐槽評論，如果你覺得本篇博客對你有用，那麼就留個言或者頂一下吧(＾－＾)
明天就是國慶節了，祝大家國慶快樂哈！
在下一篇文章中，我們將會學習一下如何實現一個拖拽填空題（選詞填空），敬請期待！