Android之自定义时间选择弹框
文章目录
- 前言
- 一、效果图
- 二、实现步骤
-
- 1.自定义Dialog
- 2.xml布局
- 3.背景白色转角drawable
- 4.取消按钮背景drawable
- 5.确定按钮背景drawable
- 6.NumberPicker样式和弹框样式
- 7.弹框动画
- 8.Activity使用
- 总结
前言
随着产品人员不断变态下，总是会要求我们的界面高大上，随意UI能画出来我们就得搞出来才行，这里有自定义弹框，以及时间选择控件的运用，根据年和月判断当月有多少天，需要什么就copy什么。
一、效果图
二、实现步骤
1.自定义Dialog
代码如下（示例）：
package com.example.merchant.utils;
import android.app.Dialog;
import android.content.Context;
import android.content.DialogInterface;
import android.view.Gravity;
import android.view.KeyEvent;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.NumberPicker;
import android.widget.TextView;
import com.example.merchant.R;
import java.util.Calendar;
/**
* Created by ：caoliulang
* ❤
* Creation time :2023/9/01
* ❤
* Function ：日期选择弹框
*/
public class TiemDialog extends Dialog {
Context context;
MenuListener mMenuListener;
View mRootView;
private Animation mShowAnim;
private Animation mDismissAnim;
private boolean isDismissing;
TextView cancle;//取消
TextView confirm;//确定
NumberPicker number_month;//月
NumberPicker number_day;//天
NumberPicker number_yer;//年
Calendar calendar = Calendar.getInstance();//取得当前时间的年月日 时分秒
public TiemDialog(Context context) {
super(context, R.style.ActionSheetDialog);
this.context = context;
getWindow().setGravity(Gravity.BOTTOM);
initView(context);
}
private void initView(final Context context) {
mRootView = View.inflate(context, R.layout.time_dialog, null);
cancle = mRootView.findViewById(R.id.cancle);
confirm = mRootView.findViewById(R.id.confirm);
number_month = mRootView.findViewById(R.id.number_month);
number_day = mRootView.findViewById(R.id.number_day);
number_yer = mRootView.findViewById(R.id.number_yer);
// 设置年份范围
int curYear = Calendar.getInstance().get(Calendar.YEAR);
number_yer.setMinValue(curYear - 10);
number_yer.setMaxValue(curYear + 10);
number_yer.setValue(calendar.get(Calendar.YEAR));
// 设置月份范围
// String[] months = new String[]{"1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"};
// monthPicker.setDisplayedValues(months);
number_month.setMinValue(1);
number_month.setMaxValue(12);
number_month.setValue(calendar.get(Calendar.MONTH) + 1);
// 设置天数范围
// String[] day = new String[]{"1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31"};
int day = Calendar.getInstance().get(Calendar.HOUR_OF_DAY);
number_day.setMinValue(1);
number_day.setMaxValue(getDayTS(getYear(), getMonths()));
number_day.setValue(calendar.get(Calendar.DAY_OF_MONTH));
// 设置滚动监听器 年
number_yer.setOnValueChangedListener(new NumberPicker.OnValueChangeListener() {
@Override
public void onValueChange(NumberPicker picker, int oldVal, int newVal) {
number_day.setMinValue(1);
number_day.setMaxValue(getDayTS(getYear(), getMonths()));
}
});
// 设置滚动监听器 月
number_month.setOnValueChangedListener(new NumberPicker.OnValueChangeListener() {
@Override
public void onValueChange(NumberPicker picker, int oldVal, int newVal) {
number_day.setMinValue(1);
number_day.setMaxValue(getDayTS(getYear(), getMonths()));
}
});
// 设置滚动监听器 日
number_day.setOnValueChangedListener(new NumberPicker.OnValueChangeListener() {
@Override
public void onValueChange(NumberPicker picker, int oldVal, int newVal) {
}
});
confirm.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
mMenuListener.onSelect();
}
});
cancle.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
cancel();
}
});
this.setContentView(mRootView);
initAnim(context);
setOnCancelListener(new OnCancelListener() {
@Override
public void onCancel(DialogInterface dialog) {
if (mMenuListener != null) {
mMenuListener.onCancel();
}
}
});
}
private void initAnim(Context context) {
mShowAnim = AnimationUtils.loadAnimation(context, R.anim.translate_up);
mDismissAnim = AnimationUtils.loadAnimation(context, R.anim.translate_down);
mDismissAnim.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
}
@Override
public void onAnimationEnd(Animation animation) {
dismissMe();
}
@Override
public void onAnimationRepeat(Animation animation) {
}
});
}
@Override
public void show() {
super.show();
mRootView.startAnimation(mShowAnim);
}
@Override
public void dismiss() {
if (isDismissing) {
return;
}
isDismissing = true;
mRootView.startAnimation(mDismissAnim);
}
private void dismissMe() {
super.dismiss();
isDismissing = false;
}
public int getYear() {
return number_yer.getValue();
}
public int getMonths() {
return number_month.getValue();
}
public int getDay() {
return number_day.getValue();
}
public MenuListener getMenuListener() {
return mMenuListener;
}
public void setMenuListener(MenuListener menuListener) {
mMenuListener = menuListener;
}
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_MENU) {
dismiss();
return true;
}
return super.onKeyDown(keyCode, event);
}
public interface MenuListener {
void onCancel();
void onSelect();
}
/**
* 根据是否闰年和月份判断本月的天数
*
* @param year
* @param month
* @return
*/
private int getDayTS(int year, int month) {
int day = 30;
boolean flag = false;
switch (year % 4) {
case 0:
flag = true;
break;
default:
flag = false;
break;
}
switch (month) {
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
day = 31;
break;
case 2:
day = flag ? 29 : 28;
break;
default:
day = 30;
break;
}
return day;
}
}
2.xml布局
代码如下（示例）：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="@+id/ll_share"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="@drawable/bzhs_bff_8"
android:gravity="center_horizontal"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="17dp"
android:text="Seleccionar fecha"
android:textColor="#232323"
android:textSize="16dp"
android:textStyle="bold" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="240dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:orientation="horizontal">
<NumberPicker
android:id="@+id/number_month"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:theme="@style/DefaultNumberPickerTheme"
android:layout_weight="1" />
<NumberPicker
android:id="@+id/number_day"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:theme="@style/DefaultNumberPickerTheme"
android:layout_weight="1" />
<NumberPicker
android:id="@+id/number_yer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:theme="@style/DefaultNumberPickerTheme"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="46dp"
android:gravity="center"
android:orientation="horizontal">
<TextView
android:id="@+id/cancle"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginRight="5dp"
android:layout_weight="1"
android:background="@drawable/bzhs_wls_4"
android:gravity="center"
android:text="Cancle"
android:textColor="#333333"
android:textSize="16dp" />
<TextView
android:id="@+id/confirm"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="5dp"
android:layout_weight="1"
android:background="@drawable/bzhs_qls_4"
android:gravity="center"
android:text="Confirm"
android:textColor="#ffffff"
android:textSize="16dp" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
3.背景白色转角drawable
代码如下（示例）：
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 背景颜色 -->
<solid android:color="#ffffff" />
<!-- 控制圆角大小 -->
<corners android:topRightRadius="8dp"
android:topLeftRadius="8dp"/>
</shape>
4.取消按钮背景drawable
代码如下（示例）：
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 背景颜色 -->
<solid android:color="#ffffff" />
<!-- 控制边界线颜色和大小 -->
<stroke
android:width="1dp"
android:color="#006FF0" />
<!-- 控制圆角大小 -->
<corners android:radius="4dp" />
</shape>
5.确定按钮背景drawable
代码如下（示例）：
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 背景颜色 -->
<solid android:color="#006FF0" />
<!-- 控制边界线颜色和大小 -->
<stroke
android:width="1dp"
android:color="#006FF0" />
<!-- 控制圆角大小 -->
<corners android:radius="4dp" />
</shape>
6.NumberPicker样式和弹框样式
代码如下（示例）：
<style name="DefaultNumberPickerTheme" parent="AppTheme">
<item name="colorControlNormal">@color/dividerColor</item>
</style>
<style name="ActionSheetDialog" parent="android:Theme.Dialog">
<item name="android:windowContentOverlay">@null</item>
<item name="android:windowFrame">@null</item>
<item name="android:windowBackground">#00000000</item>
<item name="android:windowNoTitle">true</item>
</style>
7.弹框动画
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromYDelta="100%"
android:toYDelta="0"
android:duration="250">
</translate>
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromYDelta="0%"
android:toYDelta="100%"
android:duration="250">
</translate>
8.Activity使用
//定义变量
private lateinit var timedialog: TiemDialog//日期选择弹框
//实例化
timedialog = TiemDialog(this)
//调用
showTimeDailog()
//方法
/**
* 日期弹框
*/
private fun showTimeDailog() {
val window: Window = timedialog.window!!
val lp = window.attributes
//这句就是设置dialog横向满屏了。
lp.width = WindowManager.LayoutParams.MATCH_PARENT
lp.height = WindowManager.LayoutParams.WRAP_CONTENT
window.attributes = lp
timedialog.show()
timedialog.setCanceledOnTouchOutside(false)
timedialog.menuListener = object : TiemDialog.MenuListener {
//取消
override fun onCancel() {
timedialog.dismiss()
}
//确定
override fun onSelect() {
if (timedialog != null) {
text_time.text = "${timedialog.year}-${timedialog.months}-${timedialog.day}"
timedialog.dismiss()
}
}
}
}
总结
东西看起来多，也就两个模块，一个是自定义Dialog，一个NumberPicker的使用，欢迎随时探讨。