课表效果图
在第一次看到这设计图的时候,如果你是一个自定义的高手或者说是之前自定义过View的程序员。应该觉得不是很难,主要考虑的是屏幕的适应和数据和item的灵活填充。在此课表控件自定义上面,主要是需要灵活修改item的背景颜色、文字、文字颜色、字体是否加粗、边框线颜色、边框圆角这些都可以灵活修改,在时间上需要默认显示现在的数据,在item的点击事件上需要考虑到多点触控的bug,在多点触控上需要记录Item两种颜色,在按下和弹起时候,这两次的颜色要需要各种存,需要的时候拿给它使用就可以了,其他的基本上没什么问题。
使用方法
ClassScheduleView项目下载
ClassScheduleView各类下载
下载之后把各个类导入自己的项目中就可以了,本人不提倡依赖,因为依赖一旦多了每次build项目很慢很麻烦,需要注意的是,在使用这个View的时候建议是横屏使用,竖屏因为太小了不能显示全。
这里只列举常用的几个通用方法,其他的在类里面用注释,请自己查看源码的注释使用,有什么问题可以留言。
1.设置Item背景颜色
/**
* @param rowIndex 横向item下标,0开始
* @param columnIndex 竖向item下标,0开始
* @param color item背景颜色
*/
public void setItemBackgroundColor(int rowIndex, int columnIndex, int color)
/**
* @param rowIndex 横向item下标,0开始
* @param columnIndex 竖向item下标,0开始
* @param top item上部分文字
* @param bottom item下部分文字
* @param isTopBold item上部分部分文字是否加粗
* @param isBottomBold item下部分部分文字是否加粗
*/
public void setItemText(int rowIndex, int columnIndex, String top, String bottom, boolean isTopBold, boolean isBottomBold)
2.设置Item文字
/**
*
* @param rowIndex 横向item下标,0开始
* @param columnIndex 竖向item下标,0开始
* @param top item上部分文字
* @param bottom item下部分文字
*/
public void setItemText(int rowIndex, int columnIndex, String top, String bottom)
3.设置Item文字颜色
/**
*
* @param rowIndex 横向item下标,0开始
* @param columnIndex 竖向item下标,0开始
* @param topTextColor item上部分文字颜色
* @param bottomTextColor item下部分文字颜色
*/
public void setItemTextColor(int rowIndex, int columnIndex, int topTextColor, int bottomTextColor)
4.Item点击事件
/**
*
* @param onItemClickListener
*/
public void setOnItemClickListener(OnItemClickListener onItemClickListener)
5.返回监听
/**
*
* @param onBackPressListener
*/
public void setOnBackPressListener(OnBackPressListener onBackPressListener)
6.设置星期几的item背景颜色
/**
*
* @param weekIndex 例如:星期一===》1,星期二===》2
* @param color item背景颜色
*/
public void setWeekItemBackgroundColor(int weekIndex, int color)
7.设置星期几的item文字颜色
/**
* @param weekIndex 例如:星期一===》1,星期二===》2
* @param topTextColor item上部分文字颜色
* @param bottomTextColor item下部分文字颜色
*/
public void setWeekItemTextColor(int weekIndex, int topTextColor, int bottomTextColor)
8.设置第星期几的多少节课字体颜色
/**
* @param weekIndex 例如:星期一===》1,星期二===》2
* @param sectionCount 几节课,例如:3,是星期对应下面的3节课
* @param topTextColor item上部分文字颜色
* @param bottomTextColor item下部分文字颜色
*/
public void setWeekColumnItemsTextColor(int weekIndex, int sectionCount, int topTextColor, int bottomTextColor)
9.设置第星期几的多少节课Item背景颜色
/**
* @param weekIndex 例如:星期一===》1,星期二===》2
* @param sectionCount 几节课,例如:3,是星期对应下面的3节课
* @param color item背景颜色
*/
public void setWeekColumnItemsBackgroundColor(int weekIndex, int sectionCount, int color)
10.设置“节次”列的item背景颜色
/**
* @param sectionNum “节次”列下标,例如:第一节 === 1,第二节 ==== 2
* @param color 背景颜色,例如:Color.WHITE
*/
public void setSectionItemBackgroundColor(int sectionNum, int color)
11.设置“节次”列的item文字颜色
/**
* @param sectionNum “节次”列下标,例如:第一节 === 1,第二节 ==== 2
* @param topTextColor item上部分文字颜色
* @param bottomTextColor item下部分文字颜色
*/
public void setSectionItemTextColor(int sectionNum, int topTextColor, int bottomTextColor)
12.设置被分割的Item(节次/课程)Item背景颜色
/**
* @param color Item背景颜色
*/
public void setSeparateItemBackgroundColor(int color)
13.设置被分割的Item(节次/课程)Item文字
/**
* @param left 左边文字
* @param right 右边文字
*/
public void setSeparateItemText(String left, String right)
14.设置被分割的Item(节次/课程)Item文字加粗
/**
* @param isBold 是否加粗
*/
public void setSeparateItemText(boolean isBold)
15.设置被分割的Item(节次/课程)Item文字颜色
/**
* @param leftTextColor item左边分文字颜色
* @param rightTextColor item右边分文字颜色
*/
public void setSeparateItemTextColor(int leftTextColor, int rightTextColor)
16.设置被分割的Item(节次/课程)Item文字大小
/**
* @param size 文字大小
*/
public void setSeparateItemTextSize(int size)
17.设置边框圆角
/**
* @param borderRadius
*/
public void setBorderRadius(float borderRadius)
18.设置星期列
/**
* @param rows 例如:{"星期一","星期二".....}
*/
public void setWeekRows(String[] rows)
19.设置星期列的日期
/**
* @param rowBottoms 例如:{"7-23","7-24".....}
*/
public void setWeekRowMarks(String[] rowBottoms)
20.设置节次列
/**
* @param columns 例如:{"第一节","第二节".....}
*/
public void setSectionColumns(String[] columns)
21.设置节次类的时间
/**
* @param columnBottoms 例如:{"08:00~08:40","08:50~09:30".....}
*/
public void setSectionColumnMarks(String[] columnBottoms)
知识要点:
考虑到View中许多参数使用这都可以自己定义和修改,那么就定义一个View的参数类ItemOptions将所有可以修改的参数放在这个类,方便对Item的操作。
(1)返回按钮
Paint circlePaint = new Paint();
circlePaint.setStrokeWidth(5F);
circlePaint.setAntiAlias(true);
circlePaint.setStyle(Paint.Style.STROKE);
circlePaint.setColor(backCircleColor);
canvas.drawCircle(getLeft() + backCircleWidth / 2 + backArrowPadding, getTop() + backCircleWidth / 2 + backArrowPadding, backCircleWidth / 2, circlePaint);
canvas.drawLine(getLeft() + backCircleWidth / 3 + backArrowPadding, getTop() + 2 * backCircleWidth / 4 + backArrowPadding, getLeft() + 2 * backCircleWidth / 3 + backArrowPadding, getTop() + backCircleWidth / 4 + backArrowPadding, circlePaint);
canvas.drawLine(getLeft() + backCircleWidth / 3 + backArrowPadding, getTop() + 2 * backCircleWidth / 4 + backArrowPadding, getLeft() + 2 * backCircleWidth / 3 + backArrowPadding, getTop() + 3 * backCircleWidth / 4 + backArrowPadding, circlePaint);
(2)标题栏
titlePaint = new Paint();
titlePaint.setColor(titleTextColor);
titlePaint.setTextSize(titleTextSize);
float titleSize = titlePaint.measureText(titleName);
canvas.drawText(titleName, getLeft() + screenWidth / 2 - titleSize / 2, getTop() + backCircleWidth / 1.5F + backArrowPadding, titlePaint);
Paint titleArrowPaint = new Paint();
titleArrowPaint.setColor(titleTextLeftRightColor);
titleArrowPaint.setStrokeWidth(5F);
titleArrowPaint.setAntiAlias(true);
titleArrowPaint.setTextSize(titleTextLeftRightArrowSize);
//左边箭头
canvas.drawText("<", getLeft() + screenWidth / 2 - titleSize / 2 - ScreenUtils.dpToPx(10F), getTop() + backCircleWidth / 2 + backArrowPadding + ScreenUtils.dpToPx(2F), titleArrowPaint);
//右边箭头
canvas.drawText(">", getLeft() + screenWidth / 2 + titleSize / 2, getTop() + backCircleWidth / 2 + backArrowPadding + ScreenUtils.dpToPx(2F), titleArrowPaint);
(3)日期时间
//日期
titleDatePaint = new Paint();
titleDatePaint.setTextSize(dateTimeTextSize);
titleDatePaint.setColor(dateTimeColor);
float titleDateSize = titlePaint.measureText(dateTime);
canvas.drawText(dateTime, getLeft() + screenWidth - titleDateSize + titleDateSize / 5 - ScreenUtils.dpToPx(5F) - titleRightTextRightPadding, getTop() + backCircleWidth / 2 + backArrowPadding + ScreenUtils.dpToPx(2F), titleDatePaint);
(4)分割的Item(节次/星期)、
//分割线
Paint separateCellPaint = new Paint();
separateCellPaint.setAntiAlias(true);
separateCellPaint.setColor(options.getSeparateItemLineColor());
canvas.drawLine(0 + options.getMoveX(), 0 + options.getMoveY(), options.getItemWidth() + options.getMoveX(), options.getItemHeight() + options.getMoveY(), separateCellPaint);
//文字
Paint separateCellTextPaint = new Paint();
separateCellTextPaint.setFakeBoldText(options.isSeparateItemBoldText());
separateCellTextPaint.setTextSize(ScreenUtils.dpToPx(options.getSeparateItemTextSize()));
float textSize = separateCellTextPaint.measureText(options.getSeparateItemLeftText());
//节次
separateCellTextPaint.setColor(options.getSeparateItemLeftTextColor());
canvas.drawText(options.getSeparateItemLeftText(), options.getItemWidth() / 2 - textSize - textSize / 4 + options.getMoveX(), options.getItemHeight() / 2 + textSize / 4 + options.getMoveY(), separateCellTextPaint);
//课程
separateCellTextPaint.setColor(options.getSeparateItemRightTextColor());
canvas.drawText(options.getSeparateItemRightText(), options.getItemWidth() / 2 + textSize / 4 + options.getMoveX(), options.getItemHeight() / 2 + options.getMoveY(), separateCellTextPaint);
(5)正常Item
//Item上面的字体
Paint normalTextPaint = new Paint();
normalTextPaint.setColor(options.getItemTopTextColor());
normalTextPaint.setTextSize(ScreenUtils.dpToPx(options.getItemTopTextSize()));
normalTextPaint.setFakeBoldText(options.isItemTopBoldText());
float textSize = normalTextPaint.measureText(options.getItemTopText());
canvas.drawText(options.getItemTopText(), options.getItemWidth() / 2 - textSize / 2 + options.getMoveX(), options.getItemHeight() / 2 + options.getMoveY(), normalTextPaint);
//Item下面的字体
Paint smallTextPaint = new Paint();
smallTextPaint.setColor(options.getItemBottomTextColor());
smallTextPaint.setFakeBoldText(options.isItemBottomBoldText());
smallTextPaint.setTextSize(ScreenUtils.dpToPx(options.getItemBottomTextSize()));
float smallTextSize = smallTextPaint.measureText(options.getItemBottomText());
canvas.drawText(options.getItemBottomText(), options.getItemWidth() / 2 - smallTextSize / 2 + options.getMoveX(), options.getItemHeight() / 2 + ScreenUtils.dpToPx(14F) + options.getMoveY(), smallTextPaint);