实践--课程表（仿超级课程表展示课表）

总览

• 在上一篇博客实践–课程表（ViewPager实现）中已经实现了课表内容的获取和展示，但是由于ViewPager的显示的效果的局限性，对于课表的一览性较差，并且没有单双周的区分，不能实时显示，故将其改成超级课程表样式来显示。

效果图

布局的实现

• 布局示意图如下：
  

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorTableBg">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorWeekTitle"
        android:orientation="vertical">

        <Button
            android:id="@+id/title_button"
            android:layout_width="120dp"
            android:layout_height="wrap_content"
            android:background="@color/colorWeekTitle"
            android:layout_gravity="center_horizontal"
            android:textColor="@color/colorPrimary"
            android:textSize="20sp"
            android:drawableRight="@mipmap/title_week_blue"
            android:text="第1周"/>

    </LinearLayout>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="40dp">

        <TextView
            android:layout_height="match_parent"
            android:layout_width="30dp"
            android:background="@drawable/shape_table_bar" />

        <TextView
            android:layout_height="match_parent"
            android:layout_width="0dip"
            android:layout_weight="1"
            android:text="周一"
            android:background="@drawable/shape_table_bar"
            android:gravity="center"
            android:id="@+id/textView_Monday" />
        <TextView
            android:layout_height="match_parent"
            android:layout_width="0dip"
            android:layout_weight="1"
            android:text="周二"
            android:background="@drawable/shape_table_bar"
            android:gravity="center"
            android:id="@+id/textView_Tuesday" />
        <TextView
            android:layout_width="0dip"
            android:layout_weight="1"
            android:layout_height="match_parent"
            android:text="周三"
            android:background="@drawable/shape_table_bar"
            android:gravity="center"
            android:id="@+id/textView_Wednesday" />
        <TextView
            android:layout_width="0dip"
            android:layout_weight="1"
            android:layout_height="match_parent"
            android:text="周四"
            android:background="@drawable/shape_table_bar"
            android:gravity="center"
            android:id="@+id/textView_Thursday" />
        <TextView
            android:layout_width="0dip"
            android:layout_weight="1"
            android:layout_height="match_parent"
            android:text="周五"
            android:background="@drawable/shape_table_bar"
            android:gravity="center"
            android:id="@+id/textView_Friday" />
        <TextView
            android:layout_width="0dip"
            android:layout_weight="1"
            android:layout_height="match_parent"
            android:text="周六"
            android:background="@drawable/shape_table_bar"
            android:gravity="center"
            android:id="@+id/textView_Saturday" />
        <TextView
            android:layout_width="0dip"
            android:layout_weight="1"
            android:layout_height="match_parent"
            android:text="周日"
            android:background="@drawable/shape_table_bar"
            android:gravity="center"
            android:id="@+id/textView_Sunday" />
    </LinearLayout>

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@mipmap/table_bg">


            <LinearLayout
                android:orientation="vertical"
                android:layout_width="30dp"
                android:layout_height="match_parent">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="@dimen/table_rowwide"
                    android:text="1"
                    android:background="@drawable/shape_table_bar"
                    android:gravity="center"
                    android:id="@+id/textView_getWidth" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="@dimen/table_rowwide"
                    android:text="2"
                    android:background="@drawable/shape_table_bar"
                    android:gravity="center"/>

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="@dimen/table_rowwide"
                    android:text="3"
                    android:background="@drawable/shape_table_bar"
                    android:gravity="center" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="@dimen/table_rowwide"
                    android:text="4"
                    android:background="@drawable/shape_table_bar"
                    android:gravity="center" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="@dimen/table_rowwide"
                    android:text="5"
                    android:background="@drawable/shape_table_bar"
                    android:gravity="center" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="@dimen/table_rowwide"
                    android:text="6"
                    android:background="@drawable/shape_table_bar"
                    android:gravity="center" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="@dimen/table_rowwide"
                    android:text="7"
                    android:background="@drawable/shape_table_bar"
                    android:gravity="center" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="@dimen/table_rowwide"
                    android:text="8"
                    android:background="@drawable/shape_table_bar"
                    android:gravity="center" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="@dimen/table_rowwide"
                    android:text="9"
                    android:background="@drawable/shape_table_bar"
                    android:gravity="center" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="@dimen/table_rowwide"
                    android:text="10"
                    android:background="@drawable/shape_table_bar"
                    android:gravity="center" />
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="@dimen/table_rowwide"
                    android:text="11"
                    android:background="@drawable/shape_table_bar"
                    android:gravity="center" />
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="@dimen/table_rowwide"
                    android:text="12"
                    android:background="@drawable/shape_table_bar"
                    android:gravity="center" />
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="@dimen/table_rowwide"
                    android:text="13"
                    android:background="@drawable/shape_table_bar"
                    android:gravity="center" />
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="@dimen/table_rowwide"
                    android:text="14"
                    android:background="@drawable/shape_table_bar"
                    android:gravity="center" />

            </LinearLayout>

            <LinearLayout
                android:id="@+id/linearLayout1"
                android:orientation="vertical"
                android:layout_width="0dip"
                android:layout_weight="1"
                android:layout_height="match_parent"></LinearLayout>

            <LinearLayout
                android:id="@+id/linearLayout2"
                android:orientation="vertical"
                android:layout_width="0dip"
                android:layout_weight="1"
                android:layout_height="match_parent"></LinearLayout>

            <LinearLayout
                android:id="@+id/linearLayout3"
                android:orientation="vertical"
                android:layout_width="0dip"
                android:layout_weight="1"
                android:layout_height="match_parent"></LinearLayout>

            <LinearLayout
                android:id="@+id/linearLayout4"
                android:orientation="vertical"
                android:layout_width="0dip"
                android:layout_weight="1"
                android:layout_height="match_parent"></LinearLayout>

            <LinearLayout
                android:id="@+id/linearLayout5"
                android:orientation="vertical"
                android:layout_width="0dip"
                android:layout_weight="1"
                android:layout_height="match_parent"></LinearLayout>

            <LinearLayout
                android:id="@+id/linearLayout6"
                android:orientation="vertical"
                android:layout_width="0dip"
                android:layout_weight="1"
                android:layout_height="match_parent"></LinearLayout>

            <LinearLayout
                android:id="@+id/linearLayout7"
                android:orientation="vertical"
                android:layout_width="0dip"
                android:layout_weight="1"
                android:layout_height="match_parent"></LinearLayout>
        </LinearLayout>
    </ScrollView>
</LinearLayout>

顶部选择当前周数的功能，应用了popWindow控件

• popWindow布局代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ListView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:divider="@null"
        android:id="@+id/listView_weeks" />
</LinearLayout>

• popWindow中条目的布局代码
• 注意此处没有使用布局控件

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:background="#ffffff"
    android:maxLines="1"
    android:layout_gravity="center_horizontal"
    android:paddingBottom="2dp"
    android:paddingLeft="25dp"
    android:paddingRight="25dp"
    android:paddingTop="2dp"
    android:text="helloword"
    android:textColor="#000000"
    android:textSize="19sp" >
</TextView>

• 逻辑代码实现

                if (!popupWindow.isShowing()) {
                    String[] weeks = new String[18];
                    for (int i = 1; i <= 18; i++) {
                        weeks[i - 1] = "第" + i + "周";
                    }
                    View view = LayoutInflater.from(MainActivity.this).inflate(R.layout.layout_weeklist, null);
                    ListView weekList = (ListView) view.findViewById(R.id.listView_weeks);
                    ArrayAdapter<String> adapter = new ArrayAdapter<String>(getApplicationContext(), R.layout.layout_list_item, weeks);
                    weekList.setAdapter(adapter);
                    popupWindow.setContentView(view);
                    int xOffSet = -(popupWindow.getWidth() - v.getWidth()) / 2;
                    popupWindow.showAsDropDown(v, xOffSet, 0);
                    weekList.setOnItemClickListener(new AdapterView.OnItemClickListener() {
                        @Override
                        public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                            TextView textView= (TextView) view;
                            button_title.setText(textView.getText());
                            popupWindow.dismiss();
                            writeTimeTable(courseList);
                        }
                    });
                }else if (popupWindow.isShowing()){
                    popupWindow.dismiss();
                }

动态的添加课程并显示

• 添加课程的时候，先分辨是周几的课程，然后每判断一个课程是周几的哪一节课之后，就添加在当天的位置上，至于课程的对齐方式，就是应用了margin这个属性，每添加一节课，就记录下当前课程位于当天的第几节，在添加课程的时候，据可以知道要距离上一节课的距离了，比如我已经添加了周一的第一节课了，现在我周一第三节课才再有课，那我就需要margin出一节课的位置来就可以了。
• 然后是单双周，周数的判断加载课表，只需要对课表的时间进行判断，符合时间段就添加带显示页面中，不符合的话，就不添加就可以了
• 代码如下：

        for (int i=0;i<linearLayouts.length;i++){
            linearLayouts[i].removeAllViews();
        }

        //当前的周数
        int nowWeekNum=Integer.parseInt(button_title.getText().toString().substring(1,button_title.getText().toString().indexOf("周")));
        int[] counts = new int[7];
        for (int i = 0; i < courseList.size(); i++) {
            final CourseBean courseBean = courseList.get(i);
            int startNum=Integer.parseInt(courseBean.getCourse_week().toString().substring(courseBean.getCourse_week().lastIndexOf("第")+1,courseBean.getCourse_week().lastIndexOf("第")+2));
            String utilNum=courseBean.getCourse_week().substring(courseBean.getCourse_week().indexOf("-"),courseBean.getCourse_week().indexOf("-")+4);
            int endNum=Integer.parseInt(utilNum.substring(1,utilNum.indexOf("周")));
            System.out.println("开始周数"+startNum+"结束周数"+endNum);

            for (int j = 0; j < 7; j++) {
                if (courseBean.getCourse_week().contains(week[j])) {
                    for (int k = 0; k < day_time.length; k++) {
                        if (courseBean.getCourse_week().contains(day_time[k])) {
                            TextView textView = new TextView(getApplicationContext());
                            textView.setTextColor(Color.BLACK);
                            textView.setGravity(Gravity.CENTER);
                            if (nowWeekNum <= endNum && nowWeekNum >= startNum) {
                                if ((courseBean.getCourse_week().contains("双周") && nowWeekNum % 2 == 0) || (courseBean.getCourse_week().contains("单周") && nowWeekNum % 2 != 0) || (!courseBean.getCourse_week().contains("单周") && !courseBean.getCourse_week().contains("双周"))) {
                                    linearLayouts[j].addView(textView);
                                    textView.setText(courseBean.toString());
                                    LinearLayout.LayoutParams para = new LinearLayout.LayoutParams(
                                            LinearLayout.LayoutParams.MATCH_PARENT, table_Width);
                                    para.setMargins(0, (k - counts[j]) * table_Width, 0, 0); //left,top,right, bottom
                                    textView.setLayoutParams(para);
                                    textView.setBackgroundResource(R.drawable.shape_lesson);
                                    counts[j] = k + 1;
                                }
                            }
                        }
                    }
                }
            }
        }

课程明细弹出框的实现

• 这个弹出框就是一个自定义的Dialog，
• 布局代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="30dp">
        <ImageView
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@mipmap/lesson_name"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center_vertical"
            android:paddingLeft="20dp"
            android:textSize="15sp"
            android:textColor="#000000"
            android:id="@+id/lesson_name" />
    </LinearLayout>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="30dp"
        android:layout_marginTop="8dp">
        <ImageView
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@mipmap/lesson_teacher"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center_vertical"
            android:paddingLeft="20dp"
            android:textSize="15sp"
            android:textColor="#000000"
            android:id="@+id/lesson_teacher" />
    </LinearLayout>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="30dp"
        android:layout_marginTop="8dp">
        <ImageView
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@mipmap/lesson_major"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center_vertical"
            android:paddingLeft="20dp"
            android:textSize="15sp"
            android:textColor="#000000"
            android:id="@+id/lesson_major" />
    </LinearLayout>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="30dp"
        android:layout_marginTop="8dp">
        <ImageView
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@mipmap/lesson_address"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center_vertical"
            android:paddingLeft="20dp"
            android:textSize="15sp"
            android:textColor="#000000"
            android:id="@+id/lesson_address" />
    </LinearLayout>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="30dp"
        android:layout_marginTop="8dp">
        <ImageView
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@mipmap/lesson_time"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center_vertical"
            android:paddingLeft="20dp"
            android:textSize="15sp"
            android:textColor="#000000"
            android:id="@+id/lesson_time" />
    </LinearLayout>

</LinearLayout>

• 逻辑代码如下

                        textView.setOnClickListener(new View.OnClickListener() {
                                @Override
                                public void onClick(View v) {
                                    Dialog dialog = new Dialog(MainActivity.this);
                                    dialog.setTitle("课程细节：");
                                    View view = LayoutInflater.from(getApplicationContext()).inflate(R.layout.layout_lesson_detial, null);
                                    TextView lesson_name = (TextView) view.findViewById(R.id.lesson_name);
                                    TextView lesson_teacher = (TextView) view.findViewById(R.id.lesson_teacher);
                                    TextView lesson_major = (TextView) view.findViewById(R.id.lesson_major);
                                    TextView lesson_address = (TextView) view.findViewById(R.id.lesson_address);
                                    TextView lesson_time = (TextView) view.findViewById(R.id.lesson_time);
                                    lesson_name.setText(courseBean.getCourse_name());
                                    lesson_address.setText(courseBean.getCourse_address());
                                    lesson_major.setText("专业");
                                    lesson_teacher.setText(courseBean.getCourse_teacher());
                                    lesson_time.setText(courseBean.getCourse_week());
                                    dialog.setContentView(view);
                                    dialog.show();
                                }
                            });

源代码

• 由于本人水平有限，代码中存在的诸多漏洞还请见谅，如果对上面的描述感到疑惑，欢迎下载源码仿超级课程表程序源码。