轉載請注明出處：http://blog.csdn.net/liulongling/article/details/50127819

demo和超級課程表界面和功能有些不一樣?如：

?1.效果圖左側時間軸,超級課程表是每節課，我做的是每節課對應的時間

?2.每周課程切換,超級課程表是點擊頂部的第幾周顯示每周課程，我做的是監聽手指手勢切換上下周

實現思路:

? 1.UI上使用ScrollView來實現一天課程的滾動,因為需要實現通過手勢來切換每周的課程,所以這里重寫了ScrollViewExtend.否則手勢監聽事件會與ScrollView發生沖突

? 2.布局上的劃分,左邊第一列是時間軸，一共24小時。除第一列,后面幾列是顯示課程內容.知道了每周是7天,每天24小時，屏幕寬高,求得每小時課程寬高,再深入計算每分鐘的高度high。最后通過課程的時間 日期和high計算出課程顯示的坐標.知道了坐標 剩下就是堆代碼了...

代碼運行需要配置:

?1.注解配置地址:http://jingyan.baidu.com/article/5552ef47c25fea518ffbc9e9.html

?2.注解包下載和使用地址:http://jakewharton.github.io/butterknife/

思路一代碼:

1>重寫ScrollView

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:background="@drawable/bg_main"android:orientation="vertical" ><includeandroid:id="@+id/weekday"layout="@layout/course_week_date" /><com.app.lll.view.ScrollViewExtendandroid:id="@+id/scroll_body"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_below="@+id/weekday"android:scrollbars="none" ><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content" ><LinearLayoutandroid:id="@+id/ll_weekView"android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal" ><LinearLayoutandroid:id="@+id/ll_time"android:layout_width="50dp"android:layout_height="wrap_content"android:orientation="vertical" ></LinearLayout><TextViewandroid:layout_width="1.5dp"android:layout_height="match_parent"android:background="#d8d8d8" /><RelativeLayoutandroid:id="@+id/rl_courses"android:layout_width="match_parent"android:layout_height="wrap_content" ></RelativeLayout></LinearLayout><RelativeLayoutandroid:id="@+id/rl_user_courses"android:layout_width="match_parent"android:layout_height="wrap_content" ></RelativeLayout></RelativeLayout></com.app.lll.view.ScrollViewExtend> </RelativeLayout>

package com.app.lll.view;import android.content.Context; import android.util.AttributeSet; import android.view.GestureDetector; import android.view.MotionEvent; import android.widget.ScrollView;/*** 重寫ScrollView 可以與手勢事件共同使用* @author liulongling**/ public class ScrollViewExtend extends ScrollView {GestureDetector gestureDetector;public ScrollViewExtend(Context context) {super(context);}public ScrollViewExtend(Context context, AttributeSet attrs) {super(context, attrs);}public ScrollViewExtend(Context context, AttributeSet attrs, int defStyle) {super(context, attrs, defStyle);}public void setGestureDetector(GestureDetector gestureDetector) {this.gestureDetector = gestureDetector;}public boolean onTouchEvent(MotionEvent ev) {super.onTouchEvent(ev);return gestureDetector.onTouchEvent(ev);}public boolean dispatchTouchEvent(MotionEvent ev){gestureDetector.onTouchEvent(ev);super.dispatchTouchEvent(ev);return true;} }

2>計算課程格子高度寬度

//第一個格子寬度firstGridWidth =DensityUtils.dp2px(mContext, 50+2);//格子平均寬度aveWidth = (ScreenUtils.getScreenWidth(mContext)-firstGridWidth) / 7;//格子平均高度gridHeight =ScreenUtils.getScreenHeight(mContext) / 12;

3>左側時間軸

<pre name="code" class="java">public void initViewParams(){if(mHourParams == null){mHourParams = new RelativeLayout.LayoutParams(firstGridWidth,gridHeight);}if(mHourTextParams == null){mHourTextParams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT,RelativeLayout.LayoutParams.WRAP_CONTENT);mHourTextParams.addRule(RelativeLayout.CENTER_HORIZONTAL);mHourTextParams.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);}if(mHourLineParams == null){mHourLineParams = new RelativeLayout.LayoutParams(DensityUtils.dp2px(mContext, 10),DensityUtils.dp2px(mContext, (float)1.5));mHourLineParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);mHourLineParams.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);}}

/*** 初始化24小時*8view*/public void initTwentyFourHourViews(){initViewParams();for(int i=1;i<HOURS.length;i++){for(int j=1;j<=8;j++){if(j==1){addTimeView(i-1);//時間軸}else{addDotView(i,j-1);//小黑點//可以點擊的TextView 用來添加課程TextView tx = new TextView(mContext);tx.setId((i - 1) * 7 + j);//相對布局參數RelativeLayout.LayoutParams rp = new RelativeLayout.LayoutParams(aveWidth,gridHeight);//設置他們的相對位置if(j == 2){if(i > 1){rp.addRule(RelativeLayout.BELOW, (i - 2) * 7+j);}}else{//字體樣式tx.setTextAppearance(mContext, R.style.courseTableText);rp.addRule(RelativeLayout.RIGHT_OF, (i - 1) * 7 + j - 1);rp.addRule(RelativeLayout.ALIGN_TOP, (i - 1) * 7 + j - 1);tx.setText("");}tx.setLayoutParams(rp);tx.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {int hour = (v.getId()-2)/7;int weekofday=(v.getId() -1)%7;if(weekofday == 0){weekofday = 7;}if(hour < 0){hour = 0;}//莫忘了計算點擊的時間時 加上開始時間hour += HOURS[0];if(curClickView!=null){curClickView.setBackground(null);if(curClickView.getId() == v.getId()){curClickView = null;//跳轉到添加課程界面return;}}curClickView = v;curClickView.setBackground(getResources().getDrawable(R.drawable.bg_course_add));curClickView.setAlpha((float)0.5);}});courseLayout.addView(tx);}}}}

4>左側時間軸格子

<pre name="code" class="java"> /*** 時間軸* @param hour 幾點*/public void addTimeView(int hour){RelativeLayout layout = new RelativeLayout(mContext);layout.setLayoutParams(mHourParams);//第一個格子里顯示2個時間 24點 1點if(hour == 0){RelativeLayout.LayoutParams layoutParams= new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT,RelativeLayout.LayoutParams.WRAP_CONTENT);layoutParams.addRule(RelativeLayout.CENTER_HORIZONTAL);layoutParams.addRule(RelativeLayout.ALIGN_PARENT_TOP);TextView textView = new TextView(mContext);textView.setText("0"+HOURS[0]+":00");textView.setLayoutParams(layoutParams);textView.setTextAppearance(mContext, R.style.weekViewTimeText);layout.addView(textView);}//第一個時間顯示在格子頂部 其它時間顯示在底部hour = HOURS[hour+1];TextView textView = new TextView(mContext);textView.setLayoutParams(mHourTextParams);textView.setTextAppearance(mContext, R.style.weekViewTimeText);StringBuilder builder = new StringBuilder();builder.append(hour < 10?("0"+hour):hour);builder.append(":00");//22點不顯示textView.setText(builder.toString());if(hour == 22){textView.setVisibility(View.INVISIBLE);}layout.addView(textView);//22點橫線不顯示if(hour != 22){TextView lineView = new TextView(mContext);lineView.setLayoutParams(mHourLineParams);lineView.setBackgroundColor(getResources().getColor(R.color.week_view_black));layout.addView(lineView);}timeLayout.addView(layout);}

思路二代碼

自定義view顯示課程位置

<pre name="code" class="java">/*** 根據課程時間繪制課程顯示的位置* @param name 課程名稱* @param sHour 課程開始時間* @param sHour 課程開始分鐘* @param min 這節課有多少分鐘* @param weekday 周幾*/public void addCourseView(Lesson bean){int[] sParams = DateUtil.getTime(bean.getsTime());int[] eParams = DateUtil.getTime(bean.geteTime());if(sParams == null || eParams == null){return;}//開始時間 分鐘 總時間int sHour,sMin,eHour,eMin,min;sHour = sParams[0];sMin = sParams[1];eHour= eParams[0];eMin = eParams[1];if(eHour > sHour || eMin > sMin){min = (eHour - sHour)*60+(eMin - sMin);if(min < 40){min = 40;}//課程高度float minHeight = (float)gridHeight/(float)60;int cHeight = (int)(((float)gridHeight/(float)60)*min);int weekday = DateUtil.getWeekOfDate(bean.getLessonDate());if(weekday == 0){weekday = 7;}//1.添一個相對布局 來存儲圖片和文字RelativeLayout layout = new RelativeLayout(mContext);layout.setTag(String.valueOf(bean.getId()));RelativeLayout.LayoutParams rlp = new RelativeLayout.LayoutParams(aveWidth,cHeight);//Calculate the location of the course Since the beginning of the course is from 7 points rlp.topMargin = (sHour-7)*gridHeight+(int)(minHeight*sMin);rlp.leftMargin = firstGridWidth+(weekday-1)*aveWidth;layout.setLayoutParams(rlp);//設置背景框layout.setBackgroundResource(R.drawable.course_bg);//設置背景顏色GradientDrawable drawable =(GradientDrawable) layout.getBackground();drawable.setColor(ColorUtils.getFillColor(1));//設置描邊顏色drawable.setStroke(DensityUtils.dp2px(mContext, 2),ColorUtils.getStrokeColor(2));//bean.status == ClientCode.YS?mContext.getResources().getColor(background[0]):mContext.getResources().getColor(background[DateUtil.getWeekDay()])//設置不透明度layout.getBackground().setAlpha(222);//2.添加課程TextView courseInfo = new TextView(mContext);StringBuilder builder = new StringBuilder();builder.append(bean.getsTime());builder.append("\n");builder.append(" ");builder.append(bean.getName());courseInfo.setText(builder.toString());// 偏移由這節課是星期幾決定//rlp.addRule(RelativeLayout.RIGHT_OF, 1);// 字體居中//courseInfo.setGravity(Gravity.CENTER);RelativeLayout.LayoutParams layoutParams= new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT,RelativeLayout.LayoutParams.WRAP_CONTENT);courseInfo.setTextSize(12);courseInfo.setLayoutParams(layoutParams);courseInfo.setTextColor(Color.WHITE);layout.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {//課程信息界面}});layout.addView(courseInfo);//課程以上顯示已經圖標if(bean.getStatus() == 1){layout.addView(addClassOkIcon());}mUserCourseLayout.addView(layout);}}

源碼下載地址(需CSDN積分)：http://download.csdn.net/detail/liulongling/9422256?

源碼github地址：https://github.com/liulongling/CourseTable.git

總結

以上是生活随笔為你收集整理的【android】项目案例(一)之超级课程表的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。