上次说到日历开发，但是并没有对接下来的实现做出完整的代码，而是给你们推荐的是15年写的代码，实属抱歉，现在分享一下最新的代码，结合的是上一篇中的kotlin语言编写的相关方法开发的，先看一下截图：
日历截图
进入正题
组件界面编写,我们先分析界面布局，从图像上看，最适用的当然是GridView控件，因此我们有如下布局：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#efefef"
android:orientation="vertical">
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#f0f0f0" />
<TextView
android:id="@+id/txtTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#fff"
android:gravity="center"
android:padding="10dp"
android:textSize="16sp"
android:textStyle="bold"
tools:text="2017-05 Today is 2017-05-16" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#f3f3f3"
android:divider="@drawable/shape_line_lightgray_solid"
android:dividerHeight="2dp"
android:showDividers="middle"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_weight="1.0"
android:gravity="center"
android:text="日" />
<TextView
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_weight="1.0"
android:gravity="center"
android:text="一" />
<TextView
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_weight="1.0"
android:gravity="center"
android:text="二" />
<TextView
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_weight="1.0"
android:gravity="center"
android:text="三" />
<TextView
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_weight="1.0"
android:gravity="center"
android:text="四" />
<TextView
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_weight="1.0"
android:gravity="center"
android:text="五" />
<TextView
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_weight="1.0"
android:gravity="center"
android:text="六" />
</LinearLayout>
<com.mrper.framework.component.widget.nowrapview.NoWrapGridView
android:id="@+id/gvCalendar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#f0f0f0"
android:horizontalSpacing="1dp"
android:numColumns="7"
android:verticalSpacing="1dp"
tools:layout_height="180dp"
tools:listitem="@layout/listitem_calendar_view" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#f0f0f0" />
</LinearLayout>
UI预览效果
PS: 上面涉及到一个NoWrapGridView的实现，它的作用是为了保证在ScrollView中不产生滑动排斥，实现如下：
/**
* Created by mrper on 17-3-17.
*/
class NoWrapGridView : GridView {
constructor(context: Context?) : super(context)
constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs)
constructor(context: Context?, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr)
constructor(context: Context?, attrs: AttributeSet?, defStyleAttr: Int, defStyleRes: Int) : super(context, attrs, defStyleAttr, defStyleRes)
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
super.onMeasure(widthMeasureSpec, MeasureSpec.makeMeasureSpec(Int.MAX_VALUE.shr(2), MeasureSpec.AT_MOST))
}
}
当然，少不了我们的ItemView：
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"
android:orientation="vertical">
<TextView
android:id="@+id/txtDate"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_gravity="center"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:background="@drawable/shape_circle_red_solid"
android:gravity="center"
android:textColor="#fff"
android:textSize="14sp"
tools:text="30" />
</FrameLayout>
基本界面已经搭建完成，接下来就是编写我们的Adapter组件，当然编写之前我们需要对上一篇中提到的获取日期在日历中的数据进行调整，如下：
/**
* 计算日历中的日期数据(结果总数据长度恒定为42)
* @param year 年份
* @param month 月份
* @return 结果返回日历日期的相关信息，MutableMap<Int, Int> --- First: 日期， Second: -1 - 上个月的，0 - 这个月的，1 - 下个月的
*/
@JvmStatic
fun computeDatesInCalendar(year: Int, month: Int): MutableList<MutableMap<String, Any>> {
val dates: MutableList<MutableMap<String, Any>> = mutableListOf()
val monthDayCount = computeMonthDayCount(year, month) //计算出当前这个月有多少天
val preMonthDayNum = computeWeekNum(year, month, 1) //先获得该日期下是周几？然后计算出上个月有几天要在日期中显示
val preMonthDayCount = computeMonthDayCount(if (month == 1) year - 1 else year, if (month == 1) 12 else month - 1)
val nextMonthDayNum = 42 - preMonthDayNum - monthDayCount
IntRange(0, preMonthDayNum - 1).forEach {
val item: MutableMap<String, Any> = mutableMapOf()
item.put("date", preMonthDayCount - (preMonthDayNum - 1 - it))
item.put("month", month)
item.put("year", year)
item.put("property", -1)
dates.add(item)
}
IntRange(0, monthDayCount - 1).forEach {
val item: MutableMap<String, Any> = mutableMapOf()
item.put("date", it + 1)
item.put("month", month)
item.put("year", year)
item.put("property", 0)
dates.add(item)
}
IntRange(0, nextMonthDayNum - 1).forEach {
val item: MutableMap<String, Any> = mutableMapOf()
item.put("date", it + 1)
item.put("month", month)
item.put("year", year)
item.put("property", 1)
dates.add(item)
}
return dates
}
接下来再看如何实现Adapter, BaseLIstAdapter的实现可以参考 Kotlin - 贡献两个Android的Adapter类，结合DataBinding和常规的Adapter：
/**
* Created by Jbtm on 2017/5/16.
* 日历数据适配器
*/
public class CalendarAdapter extends BaseListAdapter<Map<String, Object>> {
public CalendarAdapter(@NotNull Context context, @Nullable List<Map<String, Object>> dataSource) {
super(context, R.layout.listitem_calendar_view, dataSource);
}
@Override
public void bindValues(@NotNull ViewHolder holder, int position, @NotNull Map<String, Object> itemData) {
String dateStr = itemData.get("date").toString();
holder.setText(R.id.txtDate, dateStr);
TextView txtDate = holder.getViewById(R.id.txtDate);
final boolean isToday = DateUtil.isToday(Integer.valueOf(itemData.get("year").toString()), Integer.valueOf(itemData.get("month").toString()), Integer.valueOf(dateStr));
final int row = position / 7, column = position - row * 7;
final boolean isWeekday = column == 0 || column == 6;
switch (Integer.valueOf(itemData.get("property").toString())) {
case 0: //当月的
if (isToday) {
txtDate.setTextColor(Color.WHITE);
txtDate.setBackgroundResource(R.drawable.shape_circle_red_solid);
} else if (isWeekday) {
txtDate.setTextColor(Color.RED);
txtDate.setBackgroundResource(0);
} else {
txtDate.setTextColor(Color.GRAY);
txtDate.setBackgroundResource(0);
}
break;
case -1: //上一个月的
case 1: //下一个月的
txtDate.setTextColor(isWeekday ? 0xffa00000 : Color.LTGRAY);
txtDate.setBackgroundResource(0);
break;
}
}
}
现在我们需要使用界面，开始组合控件，并实现，如下：
/**
* Created by Jbtm on 2017/5/16.
* 日历视图控件
*/
public class CalendarView extends FrameLayout {
private Context context;
private TextView txtTitle;
private NoWrapGridView gvCalendar;
public CalendarView(@NonNull Context context) {
super(context);
init(context, null);
}
public CalendarView(@NonNull Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
init(context, attrs);
}
public CalendarView(@NonNull Context context, @Nullable AttributeSet attrs, @AttrRes int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context, attrs);
}
private void init(Context context, AttributeSet attrs) {
this.context = context;
View contentView = View.inflate(context, R.layout.widget_calendar_view, null);
txtTitle = (TextView) contentView.findViewById(R.id.txtTitle);
gvCalendar = (NoWrapGridView) contentView.findViewById(R.id.gvCalendar);
setCalendarAdapter(DateTime.now().getYear(), DateTime.now().getMonthOfYear());
addView(contentView, new FrameLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT));
if (attrs != null) {
}
}
/**
* 设置日历数据适配器
*
* @param year 年份
* @param month 月份
*/
private void setCalendarAdapter(int year, int month) {
txtTitle.setText(String.format(Locale.CHINESE, "%d年%d月 今天是%d月%d日", year, month, DateTime.now().getMonthOfYear(), DateTime.now().getDayOfMonth()));
List<Map<String, Object>> daysOfCalendar = CalendarUtil.computeDatesInCalendar(year, month);
gvCalendar.setAdapter(new CalendarAdapter(context, daysOfCalendar));
}
}
到此位置，日历UI就开发完整了，当然你可以根据你的需要进行更个性化的修改和优化。希望有需要的朋友也能帮你解决一些开发中遇到的问题，谢谢观赏。
网友评论