Android Smart Dict - 查询界面

上一次我们加载了词汇表，下面就可以提供单词查询功能了。

 

首先需要设计一个单词查询的界面，最简单的就用一个list 加一个input box即可，经济又实惠。

 

除此之外，我们还需要考虑list 的每一项究竟需要显示什么内容。仅仅是一个单词吗？这样未免太简单了吧。如果显示单词，音标，解释这些详细信息吗？这个看起来好像抢了单词详细界面的工作，没有必要，过多的信息显示在list项里边，看起来杂乱无章。显示在list项里面的信息必须有意义而且不能过多，所以我决定在list项里边依次显示单词，查询次数，学习次数，出错次数，单词等级。后面我们还可以根据这些信息排列单词的显示顺序。

 

查询界面主要就是一个list view和一个edit text，代码如下：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <ListView android:id="@+id/word_list" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1"/> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="center_vertical" android:orientation="horizontal"> <EditText android:id="@+id/input_search" android:layout_height="wrap_content" android:layout_width="wrap_content" android:singleLine="true" android:inputType="text" android:hint="@string/hint_input_search" android:layout_weight="1"/> <Button android:id="@+id/button_ok" android:layout_height="wrap_content" android:layout_width="wrap_content" android:visibility="gone" android:text="@string/button_search"/> </LinearLayout> <View android:layout_width="fill_parent" android:layout_height="@dimen/list_divider_height" android:background="@android:drawable/divider_horizontal_dim_dark"/></LinearLayout>

 

List item就是单词，查询次数，学习次数，出错次数，单词等级，代码如下：

 

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:padding="@dimen/word_list_item_padding"> <TextView android:id="@+id/word" android:layout_width="fill_parent" android:layout_height="wrap_content" android:textSize="@dimen/text_size_medium" android:includeFontPadding="false" android:layout_toLeftOf="@+id/word_info" android:layout_centerVertical="true" android:singleLine="true"/> <RelativeLayout android:id="@id/word_info" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_alignParentRight="true"> <View android:id="@+id/indicator_search" android:layout_width="@dimen/word_list_ltem_indicator_size" android:layout_height="@dimen/word_list_ltem_indicator_size" android:layout_marginLeft="@dimen/word_list_item_indicator_margin_horizontal" android:layout_centerVertical="true" android:background="@drawable/ic_indicator_search"/> <TextView android:id="@+id/search_count" android:layout_toRightOf="@id/indicator_search" android:textSize="@dimen/text_size_small" android:layout_centerVertical="true" android:layout_width="wrap_content" android:layout_height="wrap_content"/> <View android:id="@+id/indicator_study" android:layout_width="@dimen/word_list_ltem_indicator_size" android:layout_height="@dimen/word_list_ltem_indicator_size" android:layout_marginLeft="@dimen/word_list_item_indicator_margin_horizontal" android:layout_toRightOf="@id/search_count" android:layout_centerVertical="true" android:background="@drawable/ic_indicator_study"/> <TextView android:id="@+id/study_count" android:layout_toRightOf="@id/indicator_study" android:textSize="@dimen/text_size_small" android:layout_centerVertical="true" android:layout_width="wrap_content" android:layout_height="wrap_content"/> <View android:id="@+id/indicator_mistake" android:layout_width="@dimen/word_list_ltem_indicator_size" android:layout_height="@dimen/word_list_ltem_indicator_size" android:layout_marginLeft="@dimen/word_list_item_indicator_margin_horizontal" android:layout_toRightOf="@id/study_count" android:layout_centerVertical="true" android:background="@drawable/ic_indicator_mistake"/> <TextView android:id="@+id/mistake_count" android:layout_toRightOf="@id/indicator_mistake" android:textSize="@dimen/text_size_small" android:layout_centerVertical="true" android:layout_width="wrap_content" android:layout_height="wrap_content"/> <View android:id="@+id/indicator_level" android:layout_width="@dimen/word_list_ltem_indicator_size" android:layout_height="@dimen/word_list_ltem_indicator_size" android:layout_marginLeft="@dimen/word_list_item_indicator_margin_horizontal" android:layout_toRightOf="@id/mistake_count" android:layout_centerVertical="true" android:background="@drawable/ic_indicator_level"/> <TextView android:id="@+id/level" android:layout_toRightOf="@id/indicator_level" android:textSize="@dimen/text_size_small" android:layout_centerVertical="true" android:layout_width="wrap_content" android:layout_height="wrap_content"/> </RelativeLayout></RelativeLayout>

 

来看看效果吧：

 

 

我们是如何将单词显示出来的？

默认无用户输入的时候显示所有的单词，用户输入关键词查询时自动过滤出符合条件的单词。

 

构造list我们首先需要adapter，这里我们使用CursorAdapter来做。

我们定义一个叫WordListAdapter的类，继承CursorAdapter。

代码如下：

private static final class WordListAdapter extends CursorAdapter { private LayoutInflater inflater; private int columnWord; private int columnSearchCount; private int columnStudyCount; private int columnMistakeCount; private int columnLevel; private static class ViewHolder { private TextView word; private TextView search; private TextView study; private TextView mistake; private TextView level; public ViewHolder (View view) { word = (TextView) view.findViewById(R.id.word); search = (TextView) view.findViewById(R.id.search_count); study = (TextView) view.findViewById(R.id.study_count); mistake = (TextView) view.findViewById(R.id.mistake_count); level = (TextView) view.findViewById(R.id.level); } } public WordListAdapter(Context context, Cursor c) { super(context, c); inflater = LayoutInflater.from(context); storeColumnIndex(c); } @Override public void changeCursor(Cursor cursor) { super.changeCursor(cursor); storeColumnIndex(cursor); } private void storeColumnIndex (Cursor c) { columnWord = c.getColumnIndex(WordTable.COLUMN_NAME_WORD); columnSearchCount = c.getColumnIndex(WordTable.COLUMN_NAME_SEARCH_COUNT); columnStudyCount = c.getColumnIndex(WordTable.COLUMN_NAME_STUDY_COUNT); columnMistakeCount = c.getColumnIndex(WordTable.COLUMN_NAME_MISTAKE_COUNT); columnLevel = c.getColumnIndex(WordTable.COLUMN_NAME_LEVEL); } @Override public void bindView(View view, Context context, Cursor cursor) { ViewHolder holder = (ViewHolder) view.getTag(); if (holder == null) { holder = new ViewHolder(view); view.setTag(holder); } holder.word.setText(cursor.getString(columnWord)); holder.search.setText(cursor.getString(columnSearchCount)); holder.study.setText(cursor.getString(columnStudyCount)); holder.mistake.setText(cursor.getString(columnMistakeCount)); holder.level.setText(cursor.getString(columnLevel)); } @Override public View newView(Context context, Cursor cursor, ViewGroup group) { return inflater.inflate(R.layout.word_list_item, null, false); } }

 

这里需要注意一点，为什么我们需要定义一个叫做ViewHolder的类？主要就是为了避免每次bind view的时候都去find view by id，这样重复的工作没有意义而且耗费资源，因为系统会重用list item对应的view对象，真正new出来的item view对象只有屏幕显示出来可见的这么几个，并不是list有多少item就new多少个view。

 

下面我们来看如何做查询工作。

首先我们需要一个TextWatcher，在每次用户输入字母的时候，捕获输入框里面的string做查询。

代码如下：

private TextWatcher mSearchWordWatcher = new TextWatcher() { private String text = null; @Override public void onTextChanged(CharSequence s, int start, int before, int count) { // Do nothing; } @Override public void beforeTextChanged(CharSequence s, int start, int count, int after) { text = s.toString(); } @Override public void afterTextChanged(Editable s) { String key = s.toString(); if (!key.trim().equalsIgnoreCase(text.trim())) { mWordAdapter.changeCursor(mDatabaseHelper.queryWordByName(s.toString().trim())); } } };

 

当然我们可以通过保留前一次的输入结果来和现在的结果做比较从而屏蔽空格，在输入空格的时候不予理睬。

 

这样的实现还是有不足的地方，就是用户在每一次输入字母的时候，我们都会去做一次查询，想想用户如果查询sen开通的单词，当依次输入s，e，n这三个字母的时候，系统都会去分别去查询s，se，sen，前两次的查询可能是用户不需要的。当然除了这个问题，还有在做查询的时候，我们并没有新起单独的线程去做，有可能会阻塞掉我们的UI主线程进而导致系统弹出讨厌的ANR。那么我们如何取避免这些问题呢？

 

我想了一个办法，用looper和handler来自己构建一个消息处理机制，当用户下一次输入字母的间隔时间少于一个固定的值，好比500毫秒，我们就取消掉前一次的查询请求。这样，用户在连续输入sen这三个字母并且间隔时间不少于一个固定值的时候，s，se这两次查询就被取消了。这样就可以解决掉之前的问题。我想应该还有更好的方法，知道的请告诉我吧。

 

来看看代码：

 

首先是handler

private static final class SearchHandler extends Handler { private final WeakReference<SearchBoardActivity> activityRef; public SearchHandler(Looper looper, SearchBoardActivity activity) { super(looper); activityRef = new WeakReference<SearchBoardActivity>(activity); } @Override public void handleMessage(Message msg) { switch (msg.what) { case HANDLE_MESSAGE_SEARCH_WORD: final SearchBoardActivity activity = activityRef.get(); if (activity != null && !activity.isFinishing()) { final String key = msg.obj.toString().trim(); activity.runOnUiThread(new Runnable() { @Override public void run() { activity.mWordAdapter.changeCursor( activity.mDatabaseHelper.queryWordByName(key)); } }); } break; } } }

 

这里要注意我们的handler类是静态的，对外部类的引用我用了weakReference，我们需要这么做，因为如果在Activity退出以后我们还保留了对它的引用，gc将不能回收它。

 

然后我们需要改改text watcher的实现：

private final TextWatcher mSearchWordWatcher = new TextWatcher() { private String text; private Message message; @Override public void onTextChanged(CharSequence s, int start, int before, int count) { // Do nothing; } @Override public void beforeTextChanged(CharSequence s, int start, int count, int after) { text = s.toString().trim(); } @Override public void afterTextChanged(Editable s) { final String key = s.toString().trim(); if (!key.equalsIgnoreCase(text)) { // If the interval of user input is less than the default value, the prior query will be canceled. // Otherwise, do query. if (message != null && SystemClock.uptimeMillis() - message.getWhen() < HANDLE_MESSAGE_SEARCH_DELAY) { mSearchHandler.removeMessages(HANDLE_MESSAGE_SEARCH_WORD); } message = mSearchHandler.obtainMessage(HANDLE_MESSAGE_SEARCH_WORD, key); mSearchHandler.sendMessageDelayed(message, HANDLE_MESSAGE_SEARCH_DELAY); } } };

 

在小于500毫秒的时候，remove掉前面的那个message。然后发一个新的message。

 

最后就是我们的handler thread需要在onpause关闭，在onresume启动：

 

@Override protected void onResume() { super.onResume(); mSearchThread = new HandlerThread("search"); mSearchThread.start(); mSearchHandler = new SearchHandler(mSearchThread.getLooper(), this); } @Override protected void onPause() { super.onPause(); if (mSearchThread != null) { mSearchThread.quit(); mSearchThread = null; } }

 

来看看查询效果吧：

 

 

好不错，好吧，慢慢来，今天就到这里。