Android Smart Dict - 显示单词详细内容

这几天想来想去，感觉查询界面的list item中间空白的地方不显示一些东西好像浪费了，决定还是要加点什么内容。想想用户在查询一个单词的时候，有时候往往并不是不知道这个单词的意思，只是一时想不起来了，那么他查单词的时候只要一看见意思，可能就会恍然大悟，那么这个时候也许就不需要展示单词的全部解释，只需要一个提示信息。那我就可以在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="5dip">
<TextView
android:id="@+id/word"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="@dimen/text_size_medium"
android:includeFontPadding="false"
android:layout_centerVertical="true"
android:singleLine="true"/>
<TextView
android:id="@+id/translation"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dip"
android:textColor="@color/grey"
android:textStyle="italic"
android:ellipsize="end"
android:singleLine="true"
android:layout_centerVertical="true"
android:layout_toRightOf="@id/word"
android:layout_toLeftOf="@+id/word_statistics"/>
<include
android:id="@id/word_statistics"
layout="@layout/word_statistics"/>
</RelativeLayout>

你一定会看到里面include了一个word_statistics的东西，这个就是之前的那个什么查询了多少次，学习了多少次。。。因为后面我还需要用到这个东西，所以我单独建立了一个文件，这里只需要include就可以了，以免后面用到还要拷贝一份相同的代码。

 

新加入的解释部分的内容相对于其他的东西不那么重要，所以字体用斜体，颜色用灰色就可以了，和其他的内容就比较好区分。

 

来看看效果如何：



 

嘿嘿，加了背景效果还不错，总的结构看起来也紧凑了很多，哈哈哈哈。

 

好吧，进入今天的正题，显示单词的详细内容。

 

这个看起来很不好办，因为我们现在的单词库里边只有拼写，音标和解释这三个东西，用一整屏幕的地方来放置这么一点点内容，实在不好弄。这个界面究竟如何设计呢？伤脑筋！

 

经过多次演示，我打算垂直居中依次显示单词，音标，list item里面那个单词统计，然后是单词解释。

 

代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center">
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="@+id/name"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="5dip"
android:textSize="@dimen/text_size_large"
android:gravity="center"
android:textStyle="bold"/>
<TextView
android:id="@+id/symbol"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="20dip"
android:gravity="center"
android:textSize="@dimen/text_size_medium"/>
<include
layout="@layout/divider"/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal">
<include
layout="@layout/word_statistics"/>
/</LinearLayout>
<include
layout="@layout/divider"/>
<TextView
android:id="@+id/translation"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dip"
android:gravity="center"
android:textSize="@dimen/text_size_medium"/>
</LinearLayout>
</LinearLayout>

 

那个单词统计的bar上下各加一个分割线，当然这个divider也是include的单独的文件，都是为了避免重复的拷贝代码提高维护效率。

 

然后我再创建一个WordDetailActivity的类，用来显示单词的详细内容。大概就是用户在之前的list里面任意点击了一项之后，在onItemClickListener里面创建一个WordDetailActivity的intent，然后把用户选中的单词的id作为extra信息传进去，WordDetailActivity在onCreate的时候取得id查找出相应的单词予以显示。

 

代码如下：

public class WordDetailActivity extends Activity {
private TextView mTextWord;
private TextView mTextSymbol;
private TextView mTextTranslation;
private TextView mTextSearchCount;
private TextView mTextStudyCount;
private TextView mTextMistakeCount;
private TextView mTextLevel;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
initUi();
Intent intent = getIntent();
long id = intent.getLongExtra(SearchBoardActivity.INTENT_EXTRA_WORD_ID, -1);
if (id >= 0) {
new LoadWordTask(this).execute(id);
}
}
private void initUi () {
setContentView(R.layout.screen_word_detail);
mTextWord = (TextView) findViewById(R.id.name);
mTextSymbol = (TextView) findViewById(R.id.symbol);
mTextTranslation = (TextView) findViewById(R.id.translation);
mTextSearchCount = (TextView) findViewById(R.id.search_count);
mTextStudyCount = (TextView) findViewById(R.id.study_count);
mTextMistakeCount = (TextView) findViewById(R.id.mistake_count);
mTextLevel = (TextView) findViewById(R.id.level);
}
private void setData (Word word) {
mTextWord.setText(word.getWord());
mTextSymbol.setText(word.getSymbol());
mTextTranslation.setText(word.getTranslation());
mTextSearchCount.setText(String.valueOf(word.getSearchCount()));
mTextStudyCount.setText(String.valueOf(word.getStudyCount()));
mTextMistakeCount.setText(String.valueOf(word.getMistakeCount()));
mTextLevel.setText(String.valueOf(word.getLevel()));
}
private static final class LoadWordTask extends AsyncTask<Long, Void, Word> {
private final WeakReference<WordDetailActivity> activityRef;
public LoadWordTask (WordDetailActivity activity) {
activityRef = new WeakReference<WordDetailActivity>(activity);
}
@Override
protected Word doInBackground(Long... id) {
final WordDetailActivity activity = activityRef.get();
if (activity != null) {
DatabaseHelper helper = DatabaseHelper.getInstance(activity);
Cursor cursor = helper.queryWordDetailById(id[0]);
if (cursor.moveToFirst()) {
Word word = new Word();
word.setWord(cursor.getString(
cursor.getColumnIndexOrThrow(WordTable.COLUMN_NAME_WORD)));
word.setSymbol(cursor.getString(
cursor.getColumnIndexOrThrow(WordTable.COLUMN_NAME_SYMBOL)));
word.setTranslation(cursor.getString(
cursor.getColumnIndexOrThrow(WordTable.COLUMN_NAME_TRANSLATION)));
word.setExample(cursor.getString(
cursor.getColumnIndexOrThrow(WordTable.COLUMN_NAME_EXAMPLES)));
word.setBookRef(cursor.getString(
cursor.getColumnIndexOrThrow(WordTable.COLUMN_NAME_BOOKS)));
word.setLevel(cursor.getInt(
cursor.getColumnIndexOrThrow(WordTable.COLUMN_NAME_LEVEL)));
word.setMistakeCoumt(cursor.getInt(
cursor.getColumnIndexOrThrow(WordTable.COLUMN_NAME_MISTAKE_COUNT)));
word.setPronunciation(cursor.getString(
cursor.getColumnIndexOrThrow(WordTable.COLUMN_NAME_PRONUNCIATION)));
// Every time search one word should increase its search count;
word.setSearchCount(helper.increaseWordSeachCountById(id[0]));
word.setStudyCount(cursor.getInt(
cursor.getColumnIndexOrThrow(WordTable.COLUMN_NAME_STUDY_COUNT)));
return word;
}
}
return null;
}
@Override
protected void onPostExecute(Word word) {
final WordDetailActivity activity = activityRef.get();
if (activity != null && word != null) {
activity.setData(word);
}
}
}
}

 

在这里同样要注意的一点就是，查询数据库一定要用单独的线程来做，以免block掉UI主线程，所以我这里还是采用AsyncTask来完成。

 

除此以外这里还有一个问题，我们在单词统计信息里面有关于查询次数的显示，那么何时修改这个数据呢？就是在用户每次进入单词详细内容的时候增加一次，所以这里在查询单词信息成功以后修改查询次数字段，加一。当然就别忘了在回到查询界面的时候更新list的显示数据。

 

来看看效果如何：

 



 

嗯，看起来还行吧，这里显示这个单词已经被我无情地查询了3次。

 

今天就这样了。