前言
在Android
开发过程中,我们经常会遇到需要选择日期的问题。今天基于NCalendar
库封装了一个DatePopHelper
帮助类,以达到快速实现日期选择的目的。下面就来讲讲DatePopHelper
的使用吧。
今天涉及知识:
-
NCalendar
库依赖 -
NCalendar
基本使用的简单介绍 -
DatePopHelper
使用前的一些准备 -
DatePopHelper
使用介绍 -
DatePopHelper
在Activity
中使用 - 效果图及项目结构图
-
DatePopHelper
布局及源码
先来波效果图
1.gif
一. NCalendar 库依赖
DatePopHelper
的封装基于NCalendar
库,所以我们要添加NCalendar
库依赖, 在app_module
的build.gradle
中添加如下依赖:
dependencies {
//NCalendar库依赖
implementation 'com.necer.ncalendar:ncalendar:5.0.1'
}
二. NCalendar 基本使用的简单介绍
NCalendar
库是一个基于日历选择的库,其使用方法很多。详细的大家可以去官网中自己看,这里我只做简单的介绍。
NCalendar
库中的日期控件封装在DatePopHelper
类中,DatePopHelper
类会加载一个自定义布局date_pop.xml
,在date_pop.xml
中我们这样加入日历控件:
<com.necer.calendar.MonthCalendar
android:id="@+id/mCalendar"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="@+id/mViewLine"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
app:solarTextBold="true"
app:todayCheckedSolarTextColor="@color/white"
app:todayUnCheckedSolarTextColor="@color/blue"
app:todayCheckedBackground="@drawable/tc_bg"
app:defaultCheckedBackground="@drawable/tuc_bg"
app:todayCheckedLunarTextColor="@color/white"
app:todayUnCheckedLunarTextColor="@color/red"
app:defaultCheckedLunarTextColor="@color/blue"
app:defaultUnCheckedLunarTextColor="@color/black"/>
其中主要的几个属性如下:
app:solarTextBold //公历字体是否加粗
app:todayCheckedSolarTextColor //今天选中的公历字体颜色
app:todayUnCheckedSolarTextColor //今天不选中的公历字体颜色
app:todayCheckedBackground //今天选中的背景 drawable(xml中需写明size属性)
app:defaultCheckedBackground //其他日期选中的背景 drawable(xml中需写明size属性)
app:todayCheckedLunarTextColor //今天选中时农历颜色
app:todayUnCheckedLunarTextColor //今天不选中时农历颜色
app:defaultCheckedLunarTextColor // 默认选中时农历颜色
app:defaultUnCheckedLunarTextColor //默认不选中时农历颜色
MonthCalendar
控件还有两个比较重要的方法:
//日历选择模式
setCheckMode(CheckModel checkModel)
//设置初始化日期和可用区间 必须为 yyyy-MM-dd 的字符串
//startFormatDate:日期区间之开始日期
//endFormatDate:日期区间之结束日期
//formatInitializeDate:当前日期
setDateInterval(String startFormatDate, String endFormatDate, String formatInitializeDate)
ok, 日历控件MonthCalendar
的基本介绍就到这里了。
三. DatePopHelper使用前的一些准备
3.1 布局中的背景文件
上文已经介绍到DatePopHelper
中加载了一个布局date_pop.xml
,然后此布局中的MonthCalendar
控件会涉及到两个drawable
文件:tc_bg.xml
和tuc_bg.xml
。
下面贴出tc_bg.xml
文件代码:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<stroke
android:width="1dp"
android:color="@color/blue"/>
<solid android:color="@color/blue"/>
<size
android:width="46dp"
android:height="46dp"/>
</shape>
接着贴出tuc_bg.xml
文件代码:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<stroke
android:width="2dp"
android:color="@color/blue"/>
<size
android:width="46dp"
android:height="46dp"/>
</shape>
色值的话大家自己按需要处理下就行,我使用的是纯蓝色。
3.2 PopupWindow显示和隐藏的动画效果
从效果图中可以看到,弹窗显示隐藏的时候有一个动画效果。这是利用PopupWindow
的
setAnimationStyle(int animationStyle)
方法实现的。首先我们需要在 /res/values/styles.xml
文件中建一个动画的Style
,命名为:PopupAnimation
,具体代码如下:
<style name="PopupAnimation" parent="android:Animation">
<item name="android:windowEnterAnimation">@anim/pop_enter_anim</item>
<item name="android:windowExitAnimation">@anim/pop_exit_anim</item>
</style>
然后在项目的 res/anim/
文件夹下新建pop_enter_anim.xml
和pop_exit_anim.xml
。若/res/
文件夹下无anim
文件夹的话,需要自行创建,且文件夹名一定要是anim
。
下面贴出pop_enter_anim.xml
代码:
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:duration="200"
android:fromYDelta="100%p"
android:toYDelta="0" />
<alpha
android:duration="200"
android:fromAlpha="0.0"
android:toAlpha="1.0" />
</set>
pop_exit_anim.xml
文件代码如下:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:duration="200"
android:fromYDelta="0"
android:toYDelta="50%p" />
<alpha
android:duration="200"
android:fromAlpha="1.0"
android:toAlpha="0.0" />
</set>
至此, DatePopHelper
帮助类使用前的准备基本完成。接下来,让我们了解下DatePopHelper
的简单使用。
四. DatePopHelper 使用介绍
DatePopHelper
的使用非常简单。先要在Activity
中来初始化它:
//声明
private DatePopHelper mPopHelper;
//初始化
mPopHelper=new DatePopHelper(MainActivity.this);
你可以通过DatePopHelper
来获取今天的日期:
//获取今天的日期
mPopHelper.getDate()
获得日历中选择的日期:
mPopHelper.showDatePop(mRootLayout, dateString, new DatePopHelper.OnConfirmListener() {
@Override
public void show(boolean show) {
//弹出和消失的处理
if(show){
LogUtil.i("=====弹出时的处理====");
}else{
LogUtil.i("=====消失时的处理====");
}
}
@Override
public void confirm(String chooseDate) {
ToastUtil.shortShow("选中日期: "+chooseDate);
//设置显示
mTv.setText(chooseDate);
}
});
其中mRootLayout
为当前界面的根布局,dateString
为弹出pop时显示的日期(日期格式为yyyy-MM-dd
)。在OnConfirmListener
监听中有两个方法。其中show(boolean show)
可以监听弹窗显示和消失时的处理。show==true
时处理弹窗显示瞬间的逻辑,show==false
时处理弹窗消失瞬间的逻辑。
confirm(String chooseDate)
则是获取选中的日期。
五. DatePopHelper 在 Activity中使用
下面给出DatePopHelper
在Activity
中使用代码:
public class MainActivity extends AppCompatActivity{
private ConstraintLayout mRootLayout;
private TextView mTv;
private Button mBtn;
private DatePopHelper mPopHelper;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
LogUtil.setDebug(true);
initView();
initData();
setListener();
}
private void initView() {
mRootLayout = findViewById(R.id.root_layout);
mTv = findViewById(R.id.tv);
mBtn = findViewById(R.id.btn);
}
private void initData() {
mPopHelper=new DatePopHelper(MainActivity.this);
//设置界面日期显示
mTv.setText(mPopHelper.getDate());
}
private void setListener() {
mBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
String dateString=mTv.getText().toString();
mPopHelper.showDatePop(mRootLayout, dateString, new DatePopHelper.OnConfirmListener() {
@Override
public void show(boolean show) {
//弹出和消失的处理
if(show){
LogUtil.i("=====弹出时的处理====");
}else{
LogUtil.i("=====消失时的处理====");
}
}
@Override
public void confirm(String chooseDate) {
ToastUtil.shortShow("选中日期: "+chooseDate);
//设置显示
mTv.setText(chooseDate);
}
});
}
});
}
@Override
protected void onDestroy() {
super.onDestroy();
}
}
六. 效果图及项目结构图
效果图.gif项目结构图.png
网友评论