超级课程表课表的界面的实现

由于毕业设计有一个功能模块是课程表,就想模仿一下超级课程表的界面,可是开始做的时候却没有一点头绪,百度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
  • 8
    点赞
  • 60
    收藏
    觉得还不错? 一键收藏
  • 31
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 31
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值