模仿超级课程表——抓取学校课表数据

本文参考自:打造超级课程表

一、显示课表页面的制作

①、介绍

用过的超标的同学都知道，超标的课表页面是可以滑动的，并且背景为透明色，可以任意修改背景。

效果展示：

②、制作流程

那么如何制作出这样的表格呢？

(1)、首先我们得知道，Android提供了哪些可以用来制作表格的控件。

详情参照:

如何制作表格(1)——TableLayout

如何制作表格(2)——GridLayout

如何作表格(3)——GridView+RecyclerView

(2)、我们可以从效果图上看出，整个布局分为两个部分头部和可滑动的部分。

头部的制作

首先：选择什么样控件来制作头部的格子：

大家一看发现只有一行的表格，但是第一列的大小和其他列的大小是不一样的。大家肯定马上加想到了用TableLayout和GridLayout来制作头部的表格，当然如果不嫌麻烦可以直接用TextView堆加成一行。由于GridView生成的格子大小一致，所以不可以使用。（Recycler是可以制作的，但是总感觉有点大材小用了）。

个人选择GridLayout来制作该头部。（当然小伙伴也可以使用其他的控件来进行头部的制作，看看哪个更方便）

其次：设置每个格子的高度，和宽度。由于第一行比较特殊还需要分离出来。

本人是获取屏幕大小，然后分成15分，第一行占1份，其他行占2分来确定。

最后：分割线的确定

本人选择了，使用<View>的方式来添加了竖直分割线，并利用drawable中的<shape>来设置边框。（当然这不是最简便，和最有效的方法）

最后的效果：

添加头部：

    <GridLayout
        android:id="@+id/main_grid_title"
        android:layout_width="match_parent"
        android:layout_height="@dimen/table_row_height"  //设置表格的高度为50
        android:background="@drawable/table_frame"       //背景
        android:rowCount="1"
        android:columnCount="15">
    </GridLayout>

columCount = "15" :其中有7列用来填充分割线的(这种做法，分割线和表格内容没有分开，容易混乱，不建议使用。本人懒癌发作了，请见谅。

背景：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/transparent"/>   //中间背景色为透明。
    <stroke
        android:color="@color/blue"
        android:width="1dp"/>
</shape>

利用代码填充表格内容：

//表格的内容
private static final String [] TITLE_DATA = {"9月","周一","周二","周三","周四","周五","周六","周日"};

private GridLayout mGlClsTitle;
//屏幕宽度的1/15
private int mTableDistance;
protected void onCreateView(Bundle savedInstanceState) {
    setContentView(R.layout.activity_main);
    mGlClsTitle = getViewById(R.id.main_grid_title);
    
		mTableDistance = getScreenPixelWidth()/15;
}

//设置表格的头部
private void setUpClsTitle(){
    for (int i=0; i<TITLE_DATA.length; ++i){
        String content = TITLE_DATA[i];
        //设置LayoutParams
        GridLayout.LayoutParams params = new GridLayout.LayoutParams();
        //第一列的时候
        if (i == 0){
            params.width = mTableDistance;//宽度为总宽度的1/15
        }
        else {
            //添加分割线
            View divider = getLayoutInflater().inflate(R.layout.grid_title_form,mGlClsTitle,false);
            mGlClsTitle.addView(divider);

            params.width = mTableDistance * 2;
        }
        params.height = G