首页 / 操作系统 / Linux / Android Smart Dict - 查询界面

上一次我们加载了词汇表，下面就可以提供单词查询功能了。首先需要设计一个单词查询的界面，最简单的就用一个list 加一个input box即可，经济又实惠。除此之外，我们还需要考虑list 的每一项究竟需要显示什么内容。仅仅是一个单词吗？这样未免太简单了吧。如果显示单词，音标，解释这些详细信息吗？这个看起来好像抢了单词详细界面的工作，没有必要，过多的信息显示在list项里边，看起来杂乱无章。显示在list项里面的信息必须有意义而且不能过多，所以我决定在list项里边依次显示单词，查询次数，学习次数，出错次数，单词等级。后面我们还可以根据这些信息排列单词的显示顺序。查询界面主要就是一个list view和一个edit text，代码如下： 

1. <？xml version="1.0" encoding="utf-8"？>  
2. <LinearLayout xmlns:Android="http://schemas.android.com/apk/res/android"  
3.     android:orientation="vertical"  
4.     android:layout_width="fill_parent"  
5.     android:layout_height="fill_parent">  
6.     <ListView  
7.         android:id="@+id/word_list"  
8.         android:layout_width="fill_parent"  
9.         android:layout_height="wrap_content"  
10.         android:layout_weight="1"/>  
11.     <LinearLayout  
12.         android:layout_width="fill_parent"  
13.         android:layout_height="wrap_content"  
14.         android:gravity="center_vertical"  
15.         android:orientation="horizontal">  
16.         <EditText  
17.             android:id="@+id/input_search"  
18.             android:layout_height="wrap_content"  
19.             android:layout_width="wrap_content"  
20.             android:singleLine="true"  
21.             android:inputType="text"  
22.             android:hint="@string/hint_input_search"  
23.             android:layout_weight="1"/>  
24.         <Button  
25.             android:id="@+id/button_ok"  
26.             android:layout_height="wrap_content"  
27.             android:layout_width="wrap_content"  
28.             android:visibility="gone"  
29.             android:text="@string/button_search"/>  
30.     </LinearLayout>  
31.     <View  
32.         android:layout_width="fill_parent"  
33.         android:layout_height="@dimen/list_divider_height"  
34.         android:background="@android:drawable/divider_horizontal_dim_dark"/>  
35. </LinearLayout>  

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

1. <？xml version="1.0" encoding="utf-8"？>  
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="fill_parent"  
4.     android:layout_height="fill_parent"  
5.     android:padding="@dimen/word_list_item_padding">  
6.     <TextView  
7.         android:id="@+id/word"  
8.         android:layout_width="fill_parent"  
9.         android:layout_height="wrap_content"  
10.         android:textSize="@dimen/text_size_medium"  
11.         android:includeFontPadding="false"  
12.         android:layout_toLeftOf="@+id/word_info"  
13.         android:layout_centerVertical="true"  
14.         android:singleLine="true"/>  
15.     <RelativeLayout  
16.         android:id="@id/word_info"  
17.         android:layout_width="wrap_content"  
18.         android:layout_height="wrap_content"  
19.         android:layout_centerVertical="true"  
20.         android:layout_alignParentRight="true">  
21.         <View  
22.             android:id="@+id/indicator_search"  
23.             android:layout_width="@dimen/word_list_ltem_indicator_size"  
24.             android:layout_height="@dimen/word_list_ltem_indicator_size"  
25.             android:layout_marginLeft="@dimen/word_list_item_indicator_margin_horizontal"  
26.             android:layout_centerVertical="true"  
27.             android:background="@drawable/ic_indicator_search"/>  
28.         <TextView  
29.             android:id="@+id/search_count"  
30.             android:layout_toRightOf="@id/indicator_search"  
31.             android:textSize="@dimen/text_size_small"  
32.             android:layout_centerVertical="true"  
33.             android:layout_width="wrap_content"  
34.             android:layout_height="wrap_content"/>  
35.         <View  
36.             android:id="@+id/indicator_study"  
37.             android:layout_width="@dimen/word_list_ltem_indicator_size"  
38.             android:layout_height="@dimen/word_list_ltem_indicator_size"  
39.             android:layout_marginLeft="@dimen/word_list_item_indicator_margin_horizontal"  
40.             android:layout_toRightOf="@id/search_count"  
41.             android:layout_centerVertical="true"  
42.             android:background="@drawable/ic_indicator_study"/>  
43.         <TextView  
44.             android:id="@+id/study_count"  
45.             android:layout_toRightOf="@id/indicator_study"  
46.             android:textSize="@dimen/text_size_small"  
47.             android:layout_centerVertical="true"  
48.             android:layout_width="wrap_content"  
49.             android:layout_height="wrap_content"/>  
50.         <View  
51.             android:id="@+id/indicator_mistake"  
52.             android:layout_width="@dimen/word_list_ltem_indicator_size"  
53.             android:layout_height="@dimen/word_list_ltem_indicator_size"  
54.             android:layout_marginLeft="@dimen/word_list_item_indicator_margin_horizontal"  
55.             android:layout_toRightOf="@id/study_count"  
56.             android:layout_centerVertical="true"  
57.             android:background="@drawable/ic_indicator_mistake"/>  
58.         <TextView  
59.             android:id="@+id/mistake_count"  
60.             android:layout_toRightOf="@id/indicator_mistake"  
61.             android:textSize="@dimen/text_size_small"  
62.             android:layout_centerVertical="true"  
63.             android:layout_width="wrap_content"  
64.             android:layout_height="wrap_content"/>  
65.         <View  
66.             android:id="@+id/indicator_level"  
67.             android:layout_width="@dimen/word_list_ltem_indicator_size"  
68.             android:layout_height="@dimen/word_list_ltem_indicator_size"  
69.             android:layout_marginLeft="@dimen/word_list_item_indicator_margin_horizontal"  
70.             android:layout_toRightOf="@id/mistake_count"  
71.             android:layout_centerVertical="true"  
72.             android:background="@drawable/ic_indicator_level"/>  
73.         <TextView  
74.             android:id="@+id/level"  
75.             android:layout_toRightOf="@id/indicator_level"  
76.             android:textSize="@dimen/text_size_small"  
77.             android:layout_centerVertical="true"  
78.             android:layout_width="wrap_content"  
79.             android:layout_height="wrap_content"/>  
80.     </RelativeLayout>  
81. </RelativeLayout>  

来看看效果吧：