项目中急用能在日期下面显示小方块的日历控件,这一显示效果老总和我说是项目成功与否的关键,我之前下了俩个日历的源码发现都比较难用,所以心里没有底,就来先看看现在能在网上收刮到的日历都有哪些?
1:android原生的日历Calendar
CalendarView控件的实现效果图如下所示:
这是Android3.0及以上版本自带的日历控件,我们可通过流动鼠标滑轮来选择上一月或是下一月,然后选择自己想要的日期,感觉就是灵活度不够,如果需要CalendarView更多的信息,可以查看Android官方文档:http://developer.android.com/reference/android/widget/CalendarView.html
2. 各种自定义控件
如果对其感兴趣可以在这位大神的博客中找到
我都下来看了一下,发现代码写的都狠牛逼,但是扩展性和美观都达不到我的要求,所以走上Github
3:Github上大神的开源项目
ExtendedCalendarView![image](https://github.com/tyczj/ExtendedCalendarView/raw/master/ExtendedCalendarView.png)
看起来设计很符合我的胃口,日期里面还有小的标记,很像我要做的效果,后来不知道什么原因,我没有仔细研究这个项目。
还有Caldroid,TimesSquare for Android都不太容易扩展,所以就放弃了用人家的项目。
最后实在没办法了,自己用GridView开发试试看,依据就是,要显示一个日历,就是很多的日期项,上个月的日期和下个月的日期都用空白表示,本月的只要知道一共多少天按照顺序就可以用GridView显示,一旦能用GridView显示了,那么里面要显示很复杂的或者漂亮的效果就有可能了。
功夫不负有心人,最后我实现了下面的效果:
每一个item背景我用了渐变,所以还出现了一种意想不到的效果,可以看出每个蓝色的item 下面有有几个绿色的实心和空心的小方块。绿色的item是今天的日期,这样的一张图完美的实现的需求,不出意外,老板今天拿给客户看的时候,客户很满意,效果很是不错,最后老板夸了我,我很世故的说:“都是老板指导有方”。呵呵,完美的屌丝程序猿逆袭,太机智了我☺。
这逼装的略过哈,下面给出核心的代码(其实也不算核心,思路有了很简单的)
日期实体类:
public class CalendarCell {
private int id; // id
private int time;// 几号 24
private Date date;// 准确的时间
private int tag;// 标签 0:上个月 , 1:这个月 2:下个月
private boolean isSelect; // 是否选中 今天
private int count; // 这一天有几个任务
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public int getTime() {
return time;
}
public void setTime(int time) {
this.time = time;
}
public Date getDate() {
return date;
}
public void setDate(Date date) {
this.date = date;
}
public int getTag() {
return tag;
}
public void setTag(int tag) {
this.tag = tag;
}
public boolean isSelect() {
return isSelect;
}
public void setSelect(boolean isSelect) {
this.isSelect = isSelect;
}
public int getCount() {
return count;
}
public void setCount(int count) {
this.count = count;
}
}
显示的fragment布局:
<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="match_parent"
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="30dp"
android:gravity="center"
android:orientation="horizontal" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@drawable/c2_brown2"
android:gravity="center"
android:padding="2dp"
android:text="周一"
android:textSize="@dimen/week_text_size" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@drawable/c2_brown2"
android:gravity="center"
android:text="周二"
android:textSize="@dimen/week_text_size" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@drawable/c2_brown2"
android:gravity="center"
android:text="周三"
android:textSize="@dimen/week_text_size" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@drawable/c2_brown2"
android:gravity="center"
android:text="周四"
android:textSize="@dimen/week_text_size" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@drawable/c2_brown2"
android:gravity="center"
android:text="周五"
android:textSize="@dimen/week_text_size" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@drawable/c2_brown2"
android:gravity="center"
android:text="周六"
android:textSize="@dimen/week_text_size" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@drawable/c2_brown2"
android:gravity="center"
android:text="周日"
android:textSize="@dimen/week_text_size" />
</LinearLayout>
<GridView
android:id="@+id/gv_calendar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:cacheColorHint="@color/transparent"
android:dividerHeight="2dp"
android:fadingEdgeLength="2dp"
android:fastScrollEnabled="true"
android:footerDividersEnabled="false"
android:horizontalSpacing="2dp"
android:numColumns="7"
android:scrollbars="vertical"
android:scrollingCache="false"
android:verticalSpacing="2dp" >
</GridView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:orientation="horizontal" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="本月人工数:"
android:textColor="@color/grey_middle" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="19.5"
android:textColor="@color/android_green" />
</LinearLayout>
</LinearLayout>
显示的Fragment:
/**
* 日历-护工工作安排
*
* @author Jinyang
*
*/
public class CalendarFragment extends SherlockFragment {
public static String TAG = "CalendarFragment";
private GridView mGridView;
private CalendarAdapter mAdapter;
private List<CalendarCell> mCellList;
private static int GridCount = 42;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View viewRoot = inflater.inflate(R.layout.fragment_calendar, null);
init(viewRoot);
getDate();
setListener();
return viewRoot;
}
@SuppressWarnings("deprecation")
private void init(View viewRoot) {
setHasOptionsMenu(true);// 允许操作ActionBar;
Date date = new Date();
((MainActivity) getActivity()).setActionBarTitle(date.toLocaleString());
mGridView = (GridView) viewRoot.findViewById(R.id.gv_calendar);
mCellList = new ArrayList<CalendarCell>();
mAdapter = new CalendarAdapter(getActivity(), mCellList,
R.layout.item_calendar);
mGridView.setAdapter(mAdapter);
}
/**
* 模拟数据
*/
private void getDate() {
int totalCount = CalendarUtil.getDaysByMonth();
int preDayCount = CalendarUtil.getWeekOfFirstMonth() - 1;
int today = CalendarUtil.getToday();
AppContext.showLog("这个月一个多少天" + CalendarUtil.getDaysByMonth());
AppContext.showLog("第一天为星期几" + CalendarUtil.getWeekOfFirstMonth());
// 上个月的空白日期
for (int i = 0; i < preDayCount; i++) {
CalendarCell c = new CalendarCell();
c.setTag(0);
mCellList.add(c);
}
// 本月
for (int i = 1; i <= totalCount; i++) {
CalendarCell c = new CalendarCell();
c.setTag(1);
c.setTime(i);
if (i == 14 || i == 15) {
c.setCount(3);
}
if (i == 20) {
c.setCount(1);
}
if (i == 21) {
c.setCount(4);
}
if (i == 30) {
c.setCount(5);
}
if (i == today) {
c.setSelect(true);
}
mCellList.add(c);
}
// 下个月
int nextDayCount = GridCount - totalCount - preDayCount;
for (int i = 0; i < nextDayCount; i++) {
CalendarCell c = new CalendarCell();
c.setTag(2);
mCellList.add(c);
}
}
private void setListener() {
mGridView.setOnItemClickListener(new OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
long arg3) {
if (mCellList.get(arg2).getTag() == 1) {
((MainActivity) getActivity()).turnToFragment(
getFragmentManager(), CalendarDetailFragment.class,
CalendarDetailFragment.TAG, null, true);
}
}
});
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case android.R.id.home:
AppContext.showLog("点击了返回");
getFragmentManager().popBackStack();
break;
default:
break;
}
return super.onOptionsItemSelected(item);
}
}
Gridview的item的布局:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/ly_calendar_item"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="@drawable/shape_cell_bg"
android:orientation="vertical"
android:padding="5dp" >
<TextView
android:id="@+id/tv_item_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="2"
android:textColor="@color/grey_middle"
android:textSize="20sp" />
<TextView
android:id="@+id/tv_item_count"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/tv_item_time"
android:layout_centerHorizontal="true"
android:layout_margin="3dp"
android:text=""
android:textColor="@color/android_green"
android:textSize="10sp" />
</RelativeLayout>
GridView的adapter:
import java.util.List;
import android.annotation.SuppressLint;
import android.content.Context;
import android.view.View;
import android.widget.RelativeLayout;
import android.widget.TextView;
import com.james.hospitalmg.R;
import com.james.hospitalmg.model.CalendarCell;
@SuppressLint("ResourceAsColor")
public class CalendarAdapter extends AbsObjectAdapter<CalendarCell> {
public CalendarAdapter(Context context, List<CalendarCell> data,
int layoutRes) {
super(context, data, layoutRes);
}
@Override
protected void setData(int pos, View convertView, CalendarCell itemData) {
TextView time = getViewFromHolder(convertView, R.id.tv_item_time);
TextView count = getViewFromHolder(convertView, R.id.tv_item_count);
RelativeLayout bg = getViewFromHolder(convertView,
R.id.ly_calendar_item);
if (itemData.getTag() == 1) {
time.setText("" + itemData.getTime());
StringBuffer str = new StringBuffer();
int careCount = itemData.getCount();
for (int i = 0; i < careCount; i++) {
str.append("■");
}
if (careCount > 0) {
str.append("□");
bg.setBackgroundResource(R.drawable.c2_gray4);
}
count.setText(str);
// 今天
if (itemData.isSelect()) {
bg.setBackgroundResource(R.drawable.c2_brown2);
}
} else {
time.setText("");
count.setText("");
}
}
}