如何实现Android仿正点闹钟中的时间齿轮滑动效果？

Android仿正点闹钟时间齿轮滑动效果

一、背景

随着移动设备性能的不断提升，用户对应用程序界面的美观和交互体验的要求也越来越高，在众多精美的界面设计中，时间选择控件的视觉效果和用户体验尤为重要，Android平台上有许多优秀的时间选择实现方式，其中仿正点闹钟的时间齿轮滑动效果以其独特的视觉吸引力和流畅的用户体验脱颖而出，本文将详细介绍如何在Android应用中实现这一效果，包括项目结构、关键代码解析、自定义控件开发等方面。

二、、准备工作

创建项目

使用Android Studio创建一个新的Android项目，并选择合适的API级别和模板，为了实现时间齿轮滑动效果，我们需要自定义一些视图和控件，因此建议选择一个带有空白Activity的基本项目模板。

添加依赖

在项目的build.gradle文件中，确保添加了必要的依赖项，对于本文的示例，我们不需要额外的第三方库，但根据实际情况，您可能需要添加如ConstraintLayout或其他UI组件库。

三、布局文件

定义一个名为activity_main.xml的布局文件，该文件包含一个按钮用于触发时间选择对话框的显示。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/ll_timeset"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff"
    android:orientation="vertical">
    <Button
        android:id="@+id/btn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="时间设置"
        android:textSize="24sp"/>
</LinearLayout>

四、MainActivity代码

在MainActivity中，我们将处理按钮点击事件，并显示自定义的时间选择对话框。

package com.example.timepickerdemo;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;
public class MainActivity extends Activity {
    private int hour, minute;
    private CustomerDateDialog dialog;
    private Button btn;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        btn = findViewById(R.id.btn);
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                String datetime = DateFormat.format("kk:mm", System.currentTimeMillis()).toString();
                String[] strs = datetime.split(":");
                hour = Integer.parseInt(strs[0]);
                minute = Integer.parseInt(strs[1]);
                dialog = new CustomerDateDialog(MainActivity.this, hour, minute);
                dialog.show();
                dialog.setOnDateDialogListener(new CustomerDateDialog.DateDialogListener() {
                    @Override
                    public void getDate() {
                        Toast.makeText(MainActivity.this, "时间是:" + dialog.getSettingHour() + "点" + dialog.getSettingMinute() + "分", Toast.LENGTH_LONG).show();
                    }
                });
            }
        });
    }
}

五、自定义CustomerDateDialog

我们需要创建一个自定义的时间选择对话框CustomerDateDialog，这个对话框将包含两个滚动视图（ScrollView），分别代表小时和分钟的选择，并通过上下滑动来调整时间。

1.布局文件dialog_customer_date.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#ffffff"
    android:orientation="vertical"
    android:padding="16dp">
    <TextView
        android:id="@+id/tv_hour"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="小时"
        android:textSize="20sp"/>
    <ScrollView
        android:id="@+id/sv_hour"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:scrollbars="none">
        <!-小时列表将在代码中动态添加 -->
    </ScrollView>
    <TextView
        android:id="@+id/tv_minute"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="分钟"
        android:textSize="20sp"/>
    <ScrollView
        android:id="@+id/sv_minute"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:scrollbars="none">
        <!-分钟列表将在代码中动态添加 -->
    </ScrollView>
</LinearLayout>

2. CustomerDateDialog类

package com.example.timepickerdemo;
import android.annotation.SuppressLint;
import android.app.Dialog;
import android.content.Context;
import android.os.Bundle;
import android.os.Handler;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewTreeObserver;
import android.view.ViewTreeObserver.OnGlobalLayoutListener;
import android.widget.LinearLayout;
import android.widget.ScrollView;
import android.widget.TextView;
import java.util.ArrayList;
import java.util.List;
public class CustomerDateDialog extends Dialog {
    private View customView;
    private ScrollView svHour, svMinute;
    private LinearLayout llHour, llMinute;
    private List<TextView> hourTextViews, minuteTextViews;
    private int lastY;
    private int flag; // 标记时分
    private int itemHeight; // 每一行的高度
    private int settingHour, settingMinute; // 记录当前选中的时间
    private DateDialogListener listener; // 回调接口实例
    private int selectedItem = -1; // 当前选中的项目索引，-1表示未选中任何项目
    private float downY; // 触摸时记录的Y坐标值，用于判断滑动方向
    private int startSelectedIndex = -1; // 开始选择的索引位置，默认为-1表示未选中任何项目
    private int endSelectedIndex = -1; // 结束选择的索引位置，默认为-1表示未选中任何项目
    private boolean isScrolling = false; // 是否正在滚动的标志位，初始为false表示没有滚动发生
    private int scrollDirection = 1; // 滚动方向标志位，默认为1表示向下滚动，-1表示向上滚动，0表示不滚动或初始化状态未定义滚动方向
    private int totalItems; // 总项目数，用于计算滚动条的位置和范围等信息
    private int currentPage = 0; // 当前页面索引值，用于分页显示数据等内容时使用到的一个变量参数名称而已并没有特别含义在里面可以随意更改成其他名字也是可以的但是要注意同时修改相应地方引用到此变量时也一并做出相应改动才行否则会导致程序运行出错等问题发生。
    private int pages; // 总页数，用于分页显示数据等内容时使用到的一个变量参数名称而已并没有特别含义在里面可以随意更改成其他名字也是可以的但是要注意同时修改相应地方引用到此变量时也一并做出相应改动才行否则会导致程序运行出错等问题发生。
    private int visibleItemsPerPage = 5; // 每页可见的项目数量，用于分页显示数据等内容时使用到的一个变量参数名称而已并没有特别含义在里面可以随意更改成其他名字也是可以的但是要注意同时修改相应地方引用到此变量时也一并做出相应改动才行否则会导致程序运行出错等问题发生。
    private int firstVisibleItem = 0; // 第一项可见的项目索引值，用于分页显示数据等内容时使用到的一个变量参数名称而已并没有特别含义在里面可以随意更改成其他名字也是可以的但是要注意同时修改相应地方引用到此变量时也一并做出相应改动才行否则会导致程序运行出错等问题发生。