在中英文字典中关于页面布局也很重要常用布局很多,但是这里采用的是LinearLayout实现:
运行成功的主界面如下布局main.xml:
<?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"> <TableLayout android:id="@+id/TableLayout01" android:layout_width="wrap_content" android:layout_height="wrap_content" android:stretchColumns="1"> <TableRow android:baselineAligned="true"> <!-- 单词文本描述 --> <TextView android:text="@string/word_textview_text" android:id="@+id/word_textview" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="16sp" android:textStyle="bold" android:gravity="left"></TextView> <!-- 输入单词编辑区 --> <EditText android:id="@+id/word_edittext" android:layout_width="wrap_content" android:layout_height="wrap_content" android:maxLines="1" android:singleLine="true" android:width="10px"></EditText> <!--查询单词相关的按钮--> <Button android:text="@string/query_button_text" android:id="@+id/query_button" android:layout_width="wrap_content" android:layout_height="wrap_content"></Button> </TableRow> </TableLayout> <!-- 使用ListView展示单词的所有的相关的信息 --> <ListView android:id="@+id/search_listview" android:layout_width="wrap_content" android:layout_height="wrap_content"></ListView> <!-- 没有查询结果使用的组件 --> <TextView android:text="@string/no_searchresult_text" android:id="@+id/nosearchresult_textview" android:layout_width="wrap_content" android:layout_height="wrap_content" android:visibility="invisible" android:padding="10sp" android:textStyle="bold" android:textSize="20sp" android:textColor="@color/red"></TextView> </LinearLayout>
查询数据到数据填充到ListView中的组件界面中每一条记录布局(row.xml)如下:
<?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="?android:attr/listPreferredItemHeight" android:padding="6dip"> <!-- 定义一条记录的信息 --> <ImageView android:id="@+id/icon" android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_marginRight="6dip" android:src="@drawable/icon" /> <LinearLayout android:orientation="vertical" android:layout_width="0dip" android:layout_weight="1" android:layout_height="fill_parent"> <TextView android:id="@+id/toptext" android:layout_width="fill_parent" android:layout_height="0dip" android:layout_weight="1" android:gravity="center_vertical" android:textStyle="bold" /> <TextView android:layout_width="fill_parent" android:layout_height="0dip" android:layout_weight="1" android:id="@+id/bottomtext" android:singleLine="true" android:ellipsize="marquee" /> </LinearLayout> </LinearLayout>
查看单个详情的界面的布局如下:
<?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">
<!-- 返回按钮 -->
<Button android:text="@string/back_button_text" android:id="@+id/back_button"
android:layout_width="fill_parent" android:layout_height="wrap_content"></Button>
<ScrollView android:id="@+id/ScrollView01"
android:layout_width="fill_parent" android:layout_height="wrap_content">
<LinearLayout android:orientation="vertical"
android:layout_width="fill_parent" android:layout_height="fill_parent">
<TextView android:id="@+id/word_textview"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:textColor="@color/green" android:textStyle="bold"
android:gravity="center_horizontal" android:textSize="20sp"></TextView>
<ImageButton android:id="@+id/speak_img_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/speaker"></ImageButton>
<TextView android:text="@string/yinbiao_text" android:id="@+id/yinbiao_label"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:textStyle="bold"></TextView>
<TextView android:id="@+id/yinbiao_textview"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:paddingLeft="30sp"></TextView>
<TextView android:text="@string/desc_text" android:id="@+id/desc_label"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:textStyle="bold"></TextView>
<TextView android:id="@+id/desc_textview"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:paddingLeft="30sp" ></TextView>
<TextView android:text="@string/sample_text" android:id="@+id/sample_label"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:textStyle="bold"></TextView>
<TextView android:id="@+id/sample_textview"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:paddingLeft="30sp"></TextView>
</LinearLayout>
</ScrollView>
</LinearLayout>