由于毕业设计有一个功能模块是课程表,就想模仿一下超级课程表的界面,可是开始做的时候却没有一点头绪,百度google均无果,在CSDN和知乎上提问了也没人回答(估计是太简单了 大神不愿回答),总之自己鼓捣了几天还是弄出来了,虽然实现的方法很挫。。。因为有好几个人都发私信问我怎么实现的,现在毕设做完了,所以我干脆就写到博客上吧,先上几张效果图:
当时看到超级课程表的界面时,第一个想法就是使用ListView来实现,好不容易把格子画出来了,课程信息不知道怎么放上去····,主要难点有:
1、第一排的8个格子是固定的,下面的课表信息部分是可以滑动的,单用ListView无法实现,即下图。
2、课程信息怎么附着在格子上,并且可以随着课表一起滚动。
放弃了ListView实现的想法,就只有另寻它路了,在CSDN上有一位朋友的回答给了我灵感,即每一个格子都用一个TextView实现。然后课程信息可以使用相对布局,根据课程的时间(节数和天数)算出他的偏移位置,比如星期二的第三、四节课就可以和周二下面的第一个格子保持左对齐和上对齐,并且向下偏移2个格子的距离。这个N个格子和课程信息都放到一个RelativeLayout中,然后再在外面嵌套一个ScrollViewLayout,就可以滚动了,总的布局还是RelayoutLayout,不多说了,直接上代码!
<?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:background="@drawable/c_bg" >
<!-- 最左边空白的格子 -->
<TextView android:id="@+id/test_empty"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="@style/courseTableText"
android:text="@string/empty"
android:background="@drawable/course_text_view_bg"
/>
<!-- 星期一的格子 -->
<TextView android:id="@+id/test_monday_course"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/mon"
style="@style/courseTableText"
android:layout_toRightOf="@id/test_empty"
android:background="@drawable/course_text_view_bg"
/>
<!-- 星期二的格子 -->
<TextView android:id="@+id/test_tuesday_course"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/tue"
style="@style/courseTableText"
android:layout_toRightOf="@id/test_monday_course"
android:background="@drawable/course_text_view_bg"
/>
<!-- 星期三的格子 -->
<TextView android:id="@+id/test_wednesday_course"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/wen"
style="@style/courseTableText"
android:layout_toRightOf="@id/test_tuesday_course"
android:background="@drawable/course_text_view_bg"
/>
<!-- 星期四的格子 -->
<TextView android:id="@+id/test_thursday_course"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/thu"
style="@style/courseTableText"
android:layout_toRightOf="@id/test_wednesday_course"
android:background="@drawable/course_text_view_bg"
/>
<!-- 星期五的格子 -->
<TextView android:id="@+id/test_friday_course"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/fri"
style="@style/courseTableText"
android:layout_toRightOf="@id/test_thursday_course"
android:background="@drawable/course_text_view_bg"
/>
<!-- 星期六的格子 -->
<TextView android:id="@+id/test_saturday_course"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/sta"
style="@style/courseTableText"
android:layout_toRightOf="@id/test_friday_course"
android:background="@drawable/course_text_view_bg"
/>
<!-- 星期天的格子 -->
<TextView android:id="@+id/test_sunday_course"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="@style/courseTableText"
android:text="@string/sun"
android:layout_toRightOf="@id/test_saturday_course"
android:background="@drawable/course_table_last_colum"
/>
<!-- 课程表body部分 -->
<ScrollView
android:id="@+id/scroll_body"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@id/test_empty"
android:scrollbars="none"
>
<!-- 课程信息 -->
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/test_course_rl"
>
</RelativeLayout>
</ScrollView>
</RelativeLayout>
当然这样做的坏处有:
1、有多少个格子就要生成多少个TextView,实在是有点浪费资源。2、用TextView表示一个格子,即有边框的TextView,整个课表是由N个TextView组成的,所以就没办法使用一张图当背景了。
当然现在我也想到了改进的方法,其实给课程信息做参照算出偏移位置的只需要一个格子就可以了,所以可以用一个透明的TextView放在星期一的第一个格子的位置作为参照,格子使用view画线实现,就可以使用背景了,也不用生成多个TextView了···这是我的想法,我还没用代码实现,有兴趣的朋友可以自己去试试。
超级课程表还有一个要点就是它的课程展示3D视图,不过那个可以用android自带的gallery实现,网上有现成的代码,拿过来改改就可以了,下面上主要代码
1、CourseTableActivity
package nd.leiyi.crims.activity;
import java.lang.ref.WeakReference;
import java.util.ArrayList;
import java.util.Collections;
import java.util.Comparator;
import java.util.HashMap;
import java.util.Iterator;
import java.util.List;
import java.util.Map;
import nd.leiyi.crims.R;
import nd.leiyi.crims.adapter.CourseInfoAdapter;
import nd.leiyi.crims.appException.AppException;
import nd.leiyi.crims.constant.UserInfo;
import nd.leiyi.crims.db.CourseInfoDBManager;
import nd.leiyi.crims.gallery3D.CourseInfoGallery;
import nd.leiyi.crims.http.CourseInfoFetcher;
import nd.leiyi.crims.model.CourseInfo;
import nd.leiyi.crims.util.CourseSettingUtil;
import android.app.Activity;
import android.app.AlertDialog;
import android.app.Dialog;
import android.app.ProgressDialog;
import android.content.Context;
import android.content.Intent;
import android.content.SharedPreferences;
import android.co