Android开发实例-高校录取分数线应用(二)

本系列文章提供简单Android应用开发实例方法，文章步骤如下所示：

1 获取应用所需的数据源

数据源一般来源于互联网、个人搜集或者其他方式

2 应用UI设计

每个应用软件都需要有一个简单的UI设计草图，便于开发者更好的实现编码

3 应用实现

实现完整的Android应用

特此说明：本系列文章的数据源均采用互联网方式获取，仅作为示例演示

 应用介绍

提供各个高校历届的分数线录取查询功能，作为高考学子填写志愿的参考应用。最终效果图：

一、UI原型设计

根据Android开发实例-高校录取分数线应用(一)中的数据源获取，我们了解到查询共分为四个条件：学校所在省份、学校、用户所在地、文理科，查询结果为历届录取分数线的列表信息。

我们利用AxureRp进行基本的原型设计，设计原型图如下所示：

以上依次为：查询结果UI界面，选择省份下拉弹窗，选择学校下拉弹窗和选择科室下拉弹窗

二、Android UI布局实现

在实际实现中，我们不关心色调搭配，仅关心各个控件的布局信息。下面给出几个UI的简要描述：

• 四个选择条件，采用四分局方式布局
• 结果显示采用ListView自定义Item布局
  
• 每个条件选择弹窗采用PopupWindow实现
  

1 主布局控件(activity_main.xml)

先给出布局控件在Eclipse ADT中的预览效果：

我们把布局分为四个部分：标题栏，条件栏，查询按钮和结果栏

标题栏

采用填满父控件的TextView实现，并指定高度和背景等信息

<TextView        android:layout_width="match_parent"        android:layout_height="45dp"        android:background="@drawable/title_bg"        android:gravity="center"        android:text="@string/app_name"        android:textColor="@color/white"        android:textSize="16sp" />

条件栏

采用LinearLayout实现四分局布局，每个按钮的右下角提供一个下拉箭头作为提示

<LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:background="@color/white"        android:orientation="horizontal"        android:paddingRight="5dp" >        <LinearLayout            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:background="@drawable/selector_btn_text"            android:gravity="center_horizontal"            android:orientation="horizontal" >            <TextView                android:id="@+id/prov1_sel"                android:layout_width="match_parent"                android:layout_height="40dip"                android:drawableRight="@drawable/selector_arrow_dropdown"                android:gravity="center"                android:text="@string/sel1"                android:textColor="@color/green"                android:textSize="14.0sp" />        </LinearLayout>        <LinearLayout            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:background="@drawable/selector_btn_text"            android:gravity="center_horizontal"            android:orientation="horizontal" >            <TextView                android:id="@+id/school_sel"                android:layout_width="match_parent"                android:layout_height="40dip"                android:drawableRight="@drawable/selector_arrow_dropdown"                android:ellipsize="marquee"                android:focusable="true"                android:focusableInTouchMode="true"                android:gravity="center"                android:lines="1"                android:singleLine="true"                android:text="@string/sel2"                android:textColor="@color/green"                android:textSize="14.0sp" />        </LinearLayout>        <LinearLayout            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:background="@drawable/selector_btn_text"            android:gravity="center_horizontal"            android:orientation="horizontal" >            <TextView                android:id="@+id/type_sel"                android:layout_width="match_parent"                android:layout_height="40dip"                android:drawableRight="@drawable/selector_arrow_dropdown"                android:gravity="center"                android:text="@string/sel3"                android:textColor="@color/green"                android:textSize="14.0sp" />        </LinearLayout>        <LinearLayout            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:background="@drawable/selector_btn_text"            android:gravity="center_horizontal"            android:orientation="horizontal" >            <TextView                android:id="@+id/prov2_sel"                android:layout_width="match_parent"                android:layout_height="40dip"                android:drawableRight="@drawable/selector_arrow_dropdown"                android:gravity="center"                android:text="@string/sel4"                android:textColor="@color/green"                android:textSize="14.0sp" />        </LinearLayout>    </LinearLayout>

查询按钮

<Button        android:id="@+id/query_btn"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginTop="5dp"        android:background="@drawable/selector_btn"        android:gravity="center"        android:padding="10dp"        android:text="@string/button_query"        android:textColor="@color/white"        android:textSize="16sp" />

结果栏

在结果栏中，我们除了提供一个LinearLayout作为结果控件，还提供一个TextView作为整个逻辑的提示控件。TextView和LinearLayout同一时间仅显示一个

<TextView        android:id="@+id/text_tip"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:background="@color/white"        android:gravity="center"        android:text="@string/tip1"        android:textColor="@color/gray"        android:textSize="16sp" />    <LinearLayout        android:id="@+id/layout_result"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:orientation="vertical"        android:visibility="gone" >        <TextView            android:id="@+id/text_result"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:ellipsize="marquee"            android:focusable="true"            android:focusableInTouchMode="true"            android:gravity="left"            android:lines="1"            android:padding="10dp"            android:singleLine="true"            android:textSize="16sp" />        <View            android:layout_width="match_parent"            android:layout_height="0.5px"            android:background="@color/lightgray" />        <ListView            android:id="@+id/list_result"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:background="@color/white"            android:cacheColorHint="#00000000"            android:divider="@color/gray"            android:dividerHeight="0.5px"            android:orientation="vertical"            android:scrollbars="none" />    </LinearLayout>

完整布局xml如下所示：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="@color/white"    android:orientation="vertical"    tools:context=".MainActivity" >    <TextView        android:layout_width="match_parent"        android:layout_height="45dp"        android:background="@drawable/title_bg"        android:gravity="center"        android:text="@string/app_name"        android:textColor="@color/white"        android:textSize="16sp" />    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:background="@color/white"        android:orientation="horizontal"        android:paddingRight="5dp" >        <LinearLayout            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:background="@drawable/selector_btn_text"            android:gravity="center_horizontal"            android:orientation="horizontal" >            <TextView                android:id="@+id/prov1_sel"                android:layout_width="match_parent"                android:layout_height="40dip"                android:drawableRight="@drawable/selector_arrow_dropdown"                android:gravity="center"                android:text="@string/sel1"                android:textColor="@color/green"                android:textSize="14.0sp" />        </LinearLayout>        <LinearLayout            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:background="@drawable/selector_btn_text"            android:gravity="center_horizontal"            android:orientation="horizontal" >            <TextView                android:id="@+id/school_sel"                android:layout_width="match_parent"                android:layout_height="40dip"                android:drawableRight="@drawable/selector_arrow_dropdown"                android:ellipsize="marquee"                android:focusable="true"                android:focusableInTouchMode="true"                android:gravity="center"                android:lines="1"                android:singleLine="true"                android:text="@string/sel2"                android:textColor="@color/green"                android:textSize="14.0sp" />        </LinearLayout>        <LinearLayout            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:background="@drawable/selector_btn_text"            android:gravity="center_horizontal"            android:orientation="horizontal" >            <TextView                android:id="@+id/type_sel"                android:layout_width="match_parent"                android:layout_height="40dip"                android:drawableRight="@drawable/selector_arrow_dropdown"                android:gravity="center"                android:text="@string/sel3"                android:textColor="@color/green"                android:textSize="14.0sp" />        </LinearLayout>        <LinearLayout            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:background="@drawable/selector_btn_text"            android:gravity="center_horizontal"            android:orientation="horizontal" >            <TextView                android:id="@+id/prov2_sel"                android:layout_width="match_parent"                android:layout_height="40dip"                android:drawableRight="@drawable/selector_arrow_dropdown"                android:gravity="center"                android:text="@string/sel4"                android:textColor="@color/green"                android:textSize="14.0sp" />        </LinearLayout>    </LinearLayout>    <Button        android:id="@+id/query_btn"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginTop="5dp"        android:background="@drawable/selector_btn"        android:gravity="center"        android:padding="10dp"        android:text="@string/button_query"        android:textColor="@color/white"        android:textSize="16sp" />    <TextView        android:id="@+id/text_tip"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:background="@color/white"        android:gravity="center"        android:text="@string/tip1"        android:textColor="@color/gray"        android:textSize="16sp" />    <LinearLayout        android:id="@+id/layout_result"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:orientation="vertical"        android:visibility="gone" >        <TextView            android:id="@+id/text_result"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:ellipsize="marquee"            android:focusable="true"            android:focusableInTouchMode="true"            android:gravity="left"            android:lines="1"            android:padding="10dp"            android:singleLine="true"            android:textSize="16sp" />        <View            android:layout_width="match_parent"            android:layout_height="0.5px"            android:background="@color/lightgray" />        <ListView            android:id="@+id/list_result"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:background="@color/white"            android:cacheColorHint="#00000000"            android:divider="@color/gray"            android:dividerHeight="0.5px"            android:orientation="vertical"            android:scrollbars="none" />    </LinearLayout></LinearLayout>

2 弹窗列表控件(pop_list.xml和popl_list.item.xml)

每个条件选择框，采用PopupWindow弹出，列表布局如下所示：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="wrap_content"    android:layout_height="match_parent"    android:orientation="vertical"    android:baselineAligned="false" >    <ListView        android:id="@+id/pop_list"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginLeft="10dp"        android:layout_marginRight="10dp"        android:background="@color/white"        android:cacheColorHint="#00000000"        android:divider="@color/gray"        android:dividerHeight="0.5px"        android:orientation="vertical"        android:scrollbars="none" /></LinearLayout>

每个Item的布局如下所示：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:paddingLeft="20dp"    android:paddingRight="20dp" >    <TextView        android:id="@+id/pop_list_item_name"        android:layout_width="wrap_content"        android:layout_height="45.0dip"        android:layout_gravity="center_vertical"        android:gravity="center_vertical"        android:singleLine="true"        android:textColor="@color/black"        android:textSize="14sp" /></LinearLayout>

3 结果集列表Item控件(result_item.xml)

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:orientation="horizontal" >    <TextView        android:id="@+id/result_item_year"        android:layout_width="wrap_content"        android:layout_height="match_parent"        android:layout_margin="5dp"        android:gravity="center_vertical"        android:textColor="@color/author_text"        android:textSize="18sp" />    <LinearLayout        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_margin="5dp"        android:orientation="vertical" >        <LinearLayout            android:layout_width="match_parent"            android:orientation="horizontal"            android:layout_height="0dp"            android:layout_weight="1" >            <TextView                android:id="@+id/result_item_max"                style="@style/result_text_highlight"                android:layout_width="0dp"                android:layout_height="match_parent"                android:layout_weight="1" />            <TextView                android:id="@+id/result_item_avg"                style="@style/result_text_highlight"                android:layout_width="0dp"                android:layout_height="match_parent"                android:layout_weight="1" />            <TextView                android:id="@+id/result_item_real"                style="@style/result_text_highlight"                android:layout_width="0dp"                android:layout_height="match_parent"                android:layout_weight="1" />        </LinearLayout>        <LinearLayout            android:layout_width="match_parent"            android:orientation="horizontal"            android:layout_height="0dp"            android:layout_weight="1" >            <TextView                style="@style/result_text"                android:layout_width="0dp"                android:layout_height="match_parent"                android:text="@string/result_max"                android:layout_weight="1" />            <TextView                style="@style/result_text"                android:text="@string/result_avg"                android:layout_width="0dp"                android:layout_height="match_parent"                android:layout_weight="1" />            <TextView                android:text="@string/result_real"                style="@style/result_text"                android:layout_width="0dp"                android:layout_height="match_parent"                android:layout_weight="1" />        </LinearLayout>        <LinearLayout            android:layout_width="match_parent"            android:orientation="horizontal"            android:layout_height="0dp"            android:layout_weight="1" >            <TextView                android:id="@+id/result_item_persons"                style="@style/result_text_highlight"                android:layout_width="0dp"                android:layout_height="match_parent"                android:layout_weight="1" />            <TextView                android:id="@+id/result_item_pici"                style="@style/result_text_highlight"                android:layout_width="0dp"                android:layout_height="match_parent"                android:layout_weight="1" />            <TextView                android:id="@+id/result_item_xiancha"                style="@style/result_text_highlight"                android:layout_width="0dp"                android:layout_height="match_parent"                android:layout_weight="1" />        </LinearLayout>        <LinearLayout            android:layout_width="match_parent"            android:orientation="horizontal"            android:layout_height="0dp"            android:layout_weight="1" >            <TextView                style="@style/result_text"                android:layout_width="0dp"                android:layout_height="match_parent"                android:text="@string/result_persons"                android:layout_weight="1" />            <TextView                style="@style/result_text"                android:layout_width="0dp"                android:layout_height="match_parent"                android:text="@string/result_pici"                android:layout_weight="1" />            <TextView                style="@style/result_text"                android:text="@string/result_xiancha"                android:layout_width="0dp"                android:layout_height="match_parent"                android:layout_weight="1" />        </LinearLayout>    </LinearLayout></LinearLayout>