Android之自定义时间选择弹框

news/2025/1/15 22:40:21/

文章目录

  • 前言
  • 一、效果图
  • 二、实现步骤
    • 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() {@Overridepublic void onValueChange(NumberPicker picker, int oldVal, int newVal) {number_day.setMinValue(1);number_day.setMaxValue(getDayTS(getYear(), getMonths()));}});// 设置滚动监听器 月number_month.setOnValueChangedListener(new NumberPicker.OnValueChangeListener() {@Overridepublic void onValueChange(NumberPicker picker, int oldVal, int newVal) {number_day.setMinValue(1);number_day.setMaxValue(getDayTS(getYear(), getMonths()));}});// 设置滚动监听器 日number_day.setOnValueChangedListener(new NumberPicker.OnValueChangeListener() {@Overridepublic void onValueChange(NumberPicker picker, int oldVal, int newVal) {}});confirm.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {mMenuListener.onSelect();}});cancle.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {cancel();}});this.setContentView(mRootView);initAnim(context);setOnCancelListener(new OnCancelListener() {@Overridepublic 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() {@Overridepublic void onAnimationStart(Animation animation) {}@Overridepublic void onAnimationEnd(Animation animation) {dismissMe();}@Overridepublic void onAnimationRepeat(Animation animation) {}});}@Overridepublic void show() {super.show();mRootView.startAnimation(mShowAnim);}@Overridepublic 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;}@Overridepublic 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"><LinearLayoutandroid: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"><TextViewandroid: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" /><LinearLayoutandroid:layout_width="match_parent"android:layout_height="240dp"android:layout_marginTop="10dp"android:layout_marginBottom="10dp"android:orientation="horizontal"><NumberPickerandroid:id="@+id/number_month"android:layout_width="match_parent"android:layout_height="match_parent"android:theme="@style/DefaultNumberPickerTheme"android:layout_weight="1" /><NumberPickerandroid:id="@+id/number_day"android:layout_width="match_parent"android:layout_height="match_parent"android:theme="@style/DefaultNumberPickerTheme"android:layout_weight="1" /><NumberPickerandroid:id="@+id/number_yer"android:layout_width="match_parent"android:layout_height="match_parent"android:theme="@style/DefaultNumberPickerTheme"android:layout_weight="1" /></LinearLayout><LinearLayoutandroid: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"><TextViewandroid: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" /><TextViewandroid: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" /><!-- 控制边界线颜色和大小 --><strokeandroid: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" /><!-- 控制边界线颜色和大小 --><strokeandroid: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_PARENTlp.height = WindowManager.LayoutParams.WRAP_CONTENTwindow.attributes = lptimedialog.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的使用,欢迎随时探讨。


http://www.ppmy.cn/news/1088522.html

相关文章

springboot实战(二)之将项目上传至远程仓库

目录 环境&#xff1a; 背景&#xff1a; 操作&#xff1a; 1.注册码云账号 2.创建仓库 步骤&#xff1a; 1.注册完码云账号后&#xff0c;点击加号&#xff0c;新建仓库 2.输入项目名称和介绍&#xff0c;点击创建 3.复制仓库地址&#xff0c;你可以选择https协议或者…

ubuntu22.04搭建verilator仿真环境

概述 操作系统为 Ubuntu(22.04.2 LTS)&#xff0c;本次安装verilator开源verilog仿真工具&#xff0c;进行RTL功能仿真。下面构建版本为5.008的verilator仿真环境。先看一下我系统的版本&#xff1a; 安装流程 安装依赖 sudo apt-get install git perl python3 make autoc…

【Unity3D】UI Toolkit元素

1 前言 UI Toolkit简介 中介绍了 UI Builder、样式属性、UQuery、Debugger&#xff0c;UI Toolkit容器 中介绍了 VisualElement、ScrollView、ListView、GroupBox 等容器&#xff0c;本文将介绍 UI Toolkit 中的元素&#xff0c;主要包含 Label、Button、TextField、Toggle、Ra…

javascript中先加加和后加加区别 ++a,a++

javascript中先加加和后加加区别 a&#xff0c;a start 请问下列代码会输出什么内容&#xff1f; var a 1 var b 1 var c 1console.log(a) console.log(b) console.log((c 1))思考 从学习 javascript 开始&#xff0c;就对先加加和后加加模糊不清&#xff0c;时至今日&…

鼠标键盘自动化工具pyautogui

安装 pip install pyautogui pip install keyboard获取鼠标实时位置 import pyautogui pyautogui.displayMousePosition()样例代码 # https://pyautogui.readthedocs.org/ # https://github.com/asweigart/pyautogui# 紧急停止&#xff0c;手动将鼠标移动到屏幕的4个角落imp…

【RPC 协议】序列化与反序列化 | lua-cjson | lua-protobuf

文章目录 RPC 协议gRPCJSON-RPC 数据序列化与反序列化lua-cjsonlua-protobuf RPC 协议 在分布式计算&#xff0c;远程过程调用&#xff08;英语&#xff1a;Remote Procedure Call&#xff0c;缩写为 RPC&#xff09;是一个计算机通信协议。该协议允许运行于一台计算机的程序调…

elementui的el-dialog组件与el-tabs同时用导致浏览器卡死的原因解决

文章目录 在el-dialog弹出框中&#xff0c;如果使用el-tabs&#xff0c;点击弹框的关闭按钮时&#xff0c;会导致弹出框无法关闭&#xff0c;且浏览器卡死。 环境是&#xff1a; vue :2.6.10 elementui:2.15.3解决方式&#xff1a; 在el-talbs的面板中不放任何内容&#xff…

Blazor前后端框架Known-V1.2.14

V1.2.14 Known是基于C#和Blazor开发的前后端分离快速开发框架&#xff0c;开箱即用&#xff0c;跨平台&#xff0c;一处代码&#xff0c;多处运行。 Gitee&#xff1a; https://gitee.com/known/KnownGithub&#xff1a;https://github.com/known/Known 概述 基于C#和Blazo…