用這個，自定義日歷控件各種效果都不是問題

最近遇到要做一個日歷控件，給的效果圖是這樣的：


日歷

其實我在想，我下次如果又要寫一個，只是其中的圖標改掉了，那我不得又得寫一遍？？不存在的，tan90。


生無可戀

不知道大家有沒有發現，其實所有日歷都大同小異，不同的就是每個日期上的圖標，文字大小，顏色，反正就是每個日期的樣式不對，就好像我上面圖片上框出來的那些。

既然知道，那么我們為何不把一些通用的封裝起來，把不同的抽取出來，作為下次調用呢？？說干就干
呵呵

思路篇：

我這里是基于ListView寫的，既然是日歷控件，那么每個條數是需要通過計算得出來的，在我們開始寫之前，我先貼一些工具代碼出來，方便使用：

獲取某天的那個月，一共有幾天

/**
     * 獲取某天的那個月，一共有幾天
     *
     * @param date
     * @return
     */
    public static int getDayCountOfMonth(Date date)
    {
        Calendar cal = Calendar.getInstance();
        cal.set(Calendar.YEAR, date.getYear() + 1900);
        cal.set(Calendar.MONTH, date.getMonth());//Java月份才0開始算 
        return cal.getActualMaximum(Calendar.DATE);
    }

根據輸入的年月日，得到一個Date對象

/**
     * 根據輸入的年月日，得到一個Date對象
     *
     * @param year
     * @param month
     * @param day
     * @return
     */
    public static Date getDate(int year, int month, int day)
    {
        Date date = new Date();
        date.setYear(year - 1900);
        date.setMonth(month - 1);
        date.setDate(day);
        return date;
    }

根據日期取得星期幾

/**
     * 根據日期取得星期幾
     */
    public static String getWeek(Date date)
    {
        String[] weeks = {"星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"};
        Calendar cal = Calendar.getInstance();
        cal.setTime(date);
        int week_index = cal.get(Calendar.DAY_OF_WEEK) - 1;
        if (week_index < 0)
        {
            week_index = 0;
        }
        return weeks[week_index];
    }

有了這三個工具代碼，其實我們就解決了好多問題了。

因為是基于ListView改造，所以我們這個ListView肯定不可以滾動，所以我們需要加上這段代碼，讓ListView自適應我們的Item總和的高度：

public void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
{
    int expandSpec = MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE >> 2, MeasureSpec.AT_MOST);
    super.onMeasure(widthMeasureSpec, expandSpec);
}

還有，我們必須禁用外部setAdapter，然后設置我們自己定義的Adapter：

@Override
public void setAdapter(ListAdapter adapter)
{   //禁止外部設置adapter
     // super.setAdapter(adapter);
}
public void setAdapter(Adapter adapter)
{
     outAdapter = adapter;
 }

當我們在設置日期的時候，要動態計算出日期的總條數，每條7天，剛好一個禮拜。

/**
     * 根據傳入的Date顯示對應的時間日歷
     *
     * @param date
     */
    public void setDate(Date date)
    {
        month.clear();
        nowDate = new Date(date.getTime());//這里做一個備份，以備下次比較使用
        int dayCount = getItemDayCount(date);//獲取當月總共幾天
        int itemCount = (dayCount % 7 == 0) ? (dayCount / 7) : (dayCount / 7) + 1;
        date.setDate(1);//設置日歷時間，到當月1號。
        for (int a = 0; a < itemCount; a++)//動態添加總共有幾個橫條
        {
            month.add(new WeekBean(new Date(date.getTime())));
            date.setDate(date.getDate() + 7);//加七天
        }
        adapter.notifyDataSetChanged();
    }

我們需要自己自定義一個Adapter，因為每個View的實例化與數據的整合需要調用者自己去實現。所以我們這個Adapter這樣定義：

public static abstract class Adapter
{
        /**
         * 實例化UI，每個日期的UI碎片
         *
         * @param inflater
         * @param parent
         * @return
         */
        public abstract View getView(LayoutInflater inflater, ViewGroup parent);

        /**
         * 對每個UI碎片與數據整合，以及根據不同的業務需求做不同的處理方式
         *
         * @param holder       UI碎片的ViewHolder
         * @param date         當前這個UI碎片的日期
         * @param nowMonthDate 當前月份的日期
         */
        public abstract void onBindViewHolder(BaseAdapter.Holder holder, Date date, Date nowMonthDate);
}

當然，我們在這里也有一個自己的實現，在里面內置了一個DefaultAdapter：

public static class DefaultAdapter extends Adapter
{
        /**
         * 實例化UI，每個日期的UI碎片
         *
         * @param inflater
         * @param parent
         * @return
         */
        @Override
        public View getView(LayoutInflater inflater, ViewGroup parent)
        {
            View view = inflater.inflate(R.layout.item_date_tv, parent, false);
            return view;
        }

        /**
         * 對每個UI碎片進行初始化
         *
         * @param holder       UI碎片的ViewHolder
         * @param date         當前這個UI碎片的日期
         * @param nowMonthDate 當前月份的日期
         */
        @Override
        public void onBindViewHolder(BaseAdapter.Holder holder, Date date, Date nowMonthDate)
        {
            TextView textView = holder.get(R.id.tv);
            textView.setText(date.getDate() + "");

            if (date.getMonth() == nowMonthDate.getMonth())//如果是當前月
            {
                textView.setTextColor(Color.parseColor("#353535"));
            } else
            {
                textView.setTextColor(Color.parseColor("#999999"));
            }
        }
}

好了，廢話不多說，給你們上個圖，這只是默認的樣式，只需要修改外部的item的view，配合onBindViewHolder這個方法，可以達到很多變得顯示效果：


上圖

怎么使用：

有人說，這個太難看，我想在文字右上角加一個紅點點

OK,沒問題，我們首先自己定義一個日期的Item；

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#ffffff"
    android:gravity="center_horizontal"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:paddingBottom="15dp"
        android:paddingTop="15dp"
        android:text="5"
        android:textColor="#353535"
        android:textSize="15sp" />

    <View
        android:id="@+id/point"
        android:layout_width="15dp"
        android:layout_height="15dp"
        android:layout_marginTop="10dp"
        android:background="@drawable/red_point" />
</LinearLayout>
效果圖

然后，我們自己設置一個Adapter：

      date_picker.setAdapter(object : Adapter()
        {
            override fun getView(inflater: LayoutInflater , parent: ViewGroup): View
            {
                //這里使用到我們自定義的item
                val view = inflater.inflate(R.layout.item_layout_date1 , parent , false)
                return view
            }
            
            override fun onBindViewHolder(holder: BaseAdapter.Holder , date: Date , nowMonthDate: Date)
            {
                val textview = holder.get<TextView>(R.id.tv)
                val point = holder.get<View>(R.id.point)
                // 為item上的TextView設置文字為當月的幾號
                textview.text = "${date.date}"
            }
        })

我們來看一下效果
加紅點

有人又說，我想當月雙數天顯示紅點，不是當月的，或者是當月但是是單數天的不顯示，當月的文字是黑色，不是當月的文字是灰色、

OK，沒問題。我們這里來改造一下:

        date_picker.setAdapter(object : Adapter()
        {
            override fun getView(inflater: LayoutInflater , parent: ViewGroup): View
            {
                val view = inflater.inflate(R.layout.item_layout_date1 , parent , false)
                return view
            }
            
            override fun onBindViewHolder(holder: BaseAdapter.Holder , date: Date , nowMonthDate: Date)
            {
                val textview = holder.get<TextView>(R.id.tv)
                val point = holder.get<View>(R.id.point)
                textview.text = "${date.date}"
                
                if (date.month == nowMonthDate.month)
                {
                    textview.setTextColor(Color.parseColor("#353535"))
                    if ((date.date + 1) % 2 != 0)
                    {
                        point.visibility = View.VISIBLE
                    } else
                    {
                        point.visibility = View.GONE
                    }
                } else
                {
                    textview.setTextColor(Color.parseColor("#999999"))
                    point.visibility = View.GONE
                }
            }
        })

顯示效果：


效果圖

有人又說了，我想獲取每個Item的點擊事件，以便我后來處理

OK，沒問題

        date_picker.setonDateItemClickListener { view , date ->
            Toast.makeText(this , "${date.month + 1}.${date.date}" , Toast.LENGTH_SHORT).show()
        }
點擊事件

有人可能會問，你這個控件，怎么切換日期啊？？還有我怎么知道當前日期？

OK，我們首先在界面上加兩個按鈕，上一個月，下一個月：
然后如下代碼則可以完成你的需求：

pro_mon.setOnClickListener {
    date_picker.date = date_picker.date.apply {
        month -= 1
    }
}
next_mon.setOnClickListener {
    date_picker.date = date_picker.date.apply {
        month += 1
    }
}

效果圖：


效果圖

寫的好匆忙，寫的亂七八糟的，下次要整理一下，多放一些其他效果的示例圖。
GitHub地址：https://github.com/xiaolei123/SimpleDatePicker

QQ群：559259945

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,053評論 25贊 708
  • 在生命垂危的那一刻，我看到了它的頑強；在病痛病魔面前，又看到了它的脆弱。 最后的那兩聲呻吟和一口血漿帶走了外婆--...
    Hellym閱讀 359評論 0贊 0
  • 近言閱讀 270評論 1贊 0