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

2019-10-22 18:16:19

字体：大中小

来源：转载

供稿：网友

看到正点闹钟上的设置时间的滑动效果非常好看，自己就想做一个那样的，在网上就开始搜资料了，看到网上有的齿轮效果的代码非常多，也非常难懂，我就决定自己研究一下，现在我就把我的研究成果分享给大家。我研究的这个效果出来了，而且代码也非常简单，通俗易懂。效果图如下：

Android,正点闹钟,时间齿轮,滑动,Android闹钟时间齿轮滑动,Android齿轮滑动

首先是MainActivity的布局文件，这个布局文件非常简单，就是一个Button：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="fill_parent"   android:layout_height="fill_parent"   android:background="#ffffff"   android:orientation="vertical" >    <Button     android:id="@+id/btn"     android:layout_width="fill_parent"     android:layout_height="wrap_content"     android:gravity="center"     android:text="时间设置"     android:textSize="24sp" />  </LinearLayout>

紧接着就是MainActivity的代码，代码如下：

package net.loonggg.test;  import net.loonggg.view.CustomerDateDialog; import net.loonggg.view.CustomerDateDialog.DateDialogListener; import android.app.Activity; import android.os.Bundle; import android.text.format.DateFormat; import android.view.View; import android.view.Window; import android.widget.Button; import android.widget.Toast;  public class MainActivity extends Activity {   private int h, m;   private CustomerDateDialog dialog;   private Button btn;    @Override   protected void onCreate(Bundle savedInstanceState) {     super.onCreate(savedInstanceState);     requestWindowFeature(Window.FEATURE_NO_TITLE);     setContentView(R.layout.activity_main);     btn = (Button) 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(":");         h = Integer.parseInt(strs[0]);         m = Integer.parseInt(strs[1]);         dialog = new CustomerDateDialog(MainActivity.this, h, m);         dialog.show();         dialog.setOnDateDialogListener(new DateDialogListener() {           @Override           public void getDate() {             Toast.makeText(                 MainActivity.this,                 "时间是:" + dialog.getSettingHour() + "点"                     + dialog.getSettingMinute() + "分",                 Toast.LENGTH_LONG).show();           }         });        }     });    }  }

再就是我自定义了一个时钟的Dialog,自定义Dialog也非常简单，自己可以学一下，这方面网上的资料非常多。现在我把我自定义时钟的Dialog的代码分享一下，代码如下：

package net.loonggg.view;  import net.loonggg.test.R; 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.View.OnTouchListener; import android.view.ViewTreeObserver; import android.view.ViewTreeObserver.OnGlobalLayoutListener; import android.widget.Button; import android.widget.LinearLayout; import android.widget.ScrollView; import android.widget.TextView;  @SuppressLint("HandlerLeak") public class CustomerDateDialog extends Dialog {   private View customView;   private Button setBtn;   private Button cancleBtn;   private TextView arrow_up;   private TextView tv01, tv02;   private ScrollView sv01, sv02;   private LinearLayout llTimeWheel;   private DateDialogListener listener;   private int lastY;   private int flag;// 标记时分   private int itemHeight;// 每一行的高度   private int pHour, pMinute;// 初始化时显示的时分时间   private int setHour, setMinute;    public CustomerDateDialog(Context context, int hour, int minute) {     super(context, R.style.CustomerDateDialog);     customView = LayoutInflater.from(context).inflate(R.layout.time_wheel,         null);     init(context, hour, minute);   }    @Override   protected void onCreate(Bundle savedInstanceState) {     super.onCreate(savedInstanceState);     this.setContentView(customView);   }    private void init(Context context, final int hour, final int minute) {     tv01 = (TextView) customView.findViewById(R.id.tv01);     tv02 = (TextView) customView.findViewById(R.id.tv02);     sv01 = (ScrollView) customView.findViewById(R.id.sv01);     sv02 = (ScrollView) customView.findViewById(R.id.sv02);     setBtn = (Button) customView.findViewById(R.id.setBtn);     cancleBtn = (Button) customView.findViewById(R.id.cancleBtn);     arrow_up = (TextView) customView.findViewById(R.id.arrow_up);     this.pHour = hour;     this.pMinute = minute;     setHour = pHour;     setMinute = pMinute;      llTimeWheel = (LinearLayout) customView         .findViewById(R.id.ll_time_wheel);     setHourDial(tv01);     setMinuteDial(tv02);      sv01.setOnTouchListener(tListener);     sv02.setOnTouchListener(tListener);      final ViewTreeObserver observer = sv01.getViewTreeObserver();// observer                                     // 作用当视图完全加载进来的时候再取控件的高度，否则取得值是0     observer.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {        @SuppressWarnings("deprecation")       public void onGlobalLayout() {         int tvHeight = tv02.getHeight();         itemHeight = tvHeight / 180;         if (sv01.getViewTreeObserver().isAlive()) {           sv01.getViewTreeObserver().removeGlobalOnLayoutListener(               this);         }         LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(             LinearLayout.LayoutParams.FILL_PARENT, (itemHeight * 3)                 + arrow_up.getHeight() * 2);         llTimeWheel.setLayoutParams(params);         sv01.setLayoutParams(new LinearLayout.LayoutParams(tv02             .getWidth(), (itemHeight * 3)));         sv02.setLayoutParams(new LinearLayout.LayoutParams(tv02             .getWidth(), (itemHeight * 3)));         sv01.scrollTo(0, (pHour + 23) * itemHeight);         sv02.scrollTo(0, (pMinute + 59) * itemHeight);        }     });      setBtn.setOnClickListener(new View.OnClickListener() {        @Override       public void onClick(View v) {         getSettingDate();         CustomerDateDialog.this.cancel();       }     });      cancleBtn.setOnClickListener(new View.OnClickListener() {        @Override       public void onClick(View v) {         CustomerDateDialog.this.cancel();       }     });   }    private OnTouchListener tListener = new OnTouchListener() {      public boolean onTouch(View v, MotionEvent event) {       if (v == sv01) {         flag = 1;       } else {         flag = 2;       }       if (event.getAction() == MotionEvent.ACTION_UP) {         final ScrollView sv = (ScrollView) v;         lastY = sv.getScrollY();         System.out.println("lastY" + lastY);         handler.sendMessageDelayed(handler.obtainMessage(0, v), 50);       }       return false;     }   };    private Handler handler = new Handler() {     @SuppressLint("HandlerLeak")     public void handleMessage(android.os.Message msg) {       ScrollView sv = (ScrollView) msg.obj;        if (msg.what == 0) {         if (lastY == sv.getScrollY()) {            int num = lastY / itemHeight;           int over = lastY % itemHeight;           if (over > itemHeight / 2) {// 超过一半滚到下一格             locationTo((num + 1) * itemHeight, sv, flag);           } else {// 不到一半滚回上一格             locationTo(num * itemHeight, sv, flag);           }         } else {           lastY = sv.getScrollY();           handler.sendMessageDelayed(handler.obtainMessage(0, sv), 50);// 滚动还没停止隔50毫秒再判断         }       }      };   };    private void locationTo(int position, ScrollView scrollview, int flag) {     switch (flag) {     case 1:       int mPosition = 0;       if (position <= 23 * itemHeight) {         mPosition = position + 24 * itemHeight;         scrollview.scrollTo(0, mPosition);       } else if (position >= 48 * itemHeight) {         mPosition = position - 24 * itemHeight;         scrollview.scrollTo(0, mPosition);       } else {         mPosition = position;         scrollview.smoothScrollTo(0, position);       }       setHour = (mPosition / itemHeight - 23) % 24;       break;      case 2:       int hPosition = 0;       if (position <= 57 * itemHeight) {         hPosition = position + 60 * itemHeight;         scrollview.scrollTo(0, hPosition);       } else if (position >= 120 * itemHeight) {         hPosition = position - 60 * itemHeight;         scrollview.scrollTo(0, hPosition);       } else {         hPosition = position;         scrollview.smoothScrollTo(0, position);       }       setMinute = (hPosition / itemHeight) % 60 + 1;       break;     }    }    /**    * 设置分刻度盘    *    * @param tv    */    private void setMinuteDial(TextView tv) {     StringBuffer buff = new StringBuffer();     for (int i = 0; i < 3; i++) {       for (int j = 0; j < 60; j++) {         if (j <= 9) {           buff.append("0" + j);         } else {           buff.append(j + "");         }       }     }      tv.setText(buff);   }    /**    * 设置时刻度盘    *    * @param tv    */   private void setHourDial(TextView tv) {     StringBuffer buff = new StringBuffer();     for (int i = 0; i < 3; i++) {       for (int j = 0; j < 24; j++) {         if (j <= 9) {           buff.append("0" + j);         } else {           buff.append(j + "");         }       }      }      tv.setText(buff);   }    public void setpHour(int pHour) {     this.pHour = pHour;   }    public void setpMinute(int pMinute) {     this.pMinute = pMinute;   }    public void setOnDateDialogListener(DateDialogListener listener) {     this.listener = listener;   }    public interface DateDialogListener {     void getDate();   }    public void getSettingDate() {     if (listener != null) {       listener.getDate();     }   }    public int getSettingHour() {     return setHour;   }    public int getSettingMinute() {     return setMinute;   }  }

这里光有java代码还不够，还有自定义Dialog的布局文件，time_wheel.xml代码如下：

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"   android:layout_width="fill_parent"   android:layout_height="wrap_content"   android:background="#efefef"   android:orientation="vertical" >    <TextView     android:layout_width="fill_parent"     android:layout_height="wrap_content"     android:background="@color/light_black"     android:paddingLeft="10dp"     android:text="设置时间"     android:textColor="@color/black"     android:textSize="24sp" />    <!-- 时间的相关设置 -->    <LinearLayout     android:id="@+id/ll_time_wheel"     android:layout_width="fill_parent"     android:layout_height="wrap_content"     android:layout_marginTop="15dp"     android:background="#f0f0f0"     android:gravity="center_horizontal"     android:orientation="horizontal" >      <LinearLayout       android:layout_width="wrap_content"       android:layout_height="wrap_content"       android:orientation="vertical" >        <TextView         android:layout_width="30dp"         android:layout_height="wrap_content"         android:layout_gravity="center_horizontal"         android:background="@drawable/wheel_arrow_up" />        <ScrollView         android:id="@+id/sv01"         android:layout_width="50dp"         android:layout_height="wrap_content"         android:layout_gravity="center_horizontal"         android:background="@drawable/time_bg"         android:scrollbars="none" >          <LinearLayout           android:id="@+id/ll01"           android:layout_width="50dp"           android:layout_height="wrap_content"           android:gravity="center"           android:orientation="horizontal"           android:paddingTop="5dp" >            <TextView             android:id="@+id/tv01"             android:layout_width="50dp"             android:layout_height="wrap_content"             android:gravity="center"             android:lineSpacingExtra="20dp"             android:paddingLeft="10dp"             android:paddingRight="10dp"             android:textSize="26sp" />         </LinearLayout>       </ScrollView>        <TextView         android:layout_width="30dp"         android:layout_height="wrap_content"         android:layout_gravity="center_horizontal"         android:background="@drawable/wheel_arrow_down" />     </LinearLayout>      <TextView       android:layout_width="wrap_content"       android:layout_height="fill_parent"       android:layout_gravity="center"       android:background="#f0f0f0"       android:gravity="center"       android:text="时"       android:textColor="#000000"       android:textSize="25sp" />      <LinearLayout       android:layout_width="wrap_content"       android:layout_height="wrap_content"       android:orientation="vertical" >        <TextView         android:id="@+id/arrow_up"         android:layout_width="30dp"         android:layout_height="wrap_content"         android:layout_gravity="center_horizontal"         android:background="@drawable/wheel_arrow_up" />        <ScrollView         android:id="@+id/sv02"         android:layout_width="50dp"         android:layout_height="wrap_content"         android:layout_gravity="center_horizontal"         android:background="@drawable/time_bg"         android:scrollbars="none" >          <LinearLayout           android:id="@+id/ll02"           android:layout_width="50dp"           android:layout_height="wrap_content"           android:gravity="center"           android:paddingTop="5dp" >            <TextView             android:id="@+id/tv02"             android:layout_width="50dp"             android:layout_height="wrap_content"             android:gravity="center"             android:lineSpacingExtra="20dp"             android:paddingLeft="10dp"             android:paddingRight="10dp"             android:textSize="26sp" />         </LinearLayout>       </ScrollView>        <TextView         android:id="@+id/arrow_down"         android:layout_width="30dp"         android:layout_height="wrap_content"         android:layout_gravity="center_horizontal"         android:background="@drawable/wheel_arrow_down" />     </LinearLayout>      <TextView       android:layout_width="wrap_content"       android:layout_height="fill_parent"       android:layout_gravity="center"       android:background="#f0f0f0"       android:gravity="center"       android:text="分"       android:textColor="#000000"       android:textSize="25sp" />   </LinearLayout>    <!-- 设置时钟的按钮 -->    <RelativeLayout     android:layout_width="fill_parent"     android:layout_height="50dp" >      <Button       android:id="@+id/setBtn"       android:layout_width="wrap_content"       android:layout_height="wrap_content"       android:layout_alignParentLeft="true"       android:layout_gravity="center_horizontal"       android:layout_marginLeft="25dp"       android:background="@drawable/btn_clock_normal"       android:gravity="center"       android:paddingLeft="10dp"       android:paddingRight="10dp"       android:text="确定"       android:textColor="#000000"       android:textSize="24sp" />      <Button       android:id="@+id/cancleBtn"       android:layout_width="wrap_content"       android:layout_height="wrap_content"       android:layout_alignParentRight="true"       android:layout_gravity="center_horizontal"       android:layout_marginRight="25dp"       android:background="@drawable/btn_clock_normal"       android:gravity="center"       android:paddingLeft="10dp"       android:paddingRight="10dp"       android:text="取消"       android:textColor="#000000"       android:textSize="24sp" />   </RelativeLayout>  </LinearLayout>

为了让自定义的Dialog的样式更好看，这里还需要自定义样式的Style，Style的代码如下；

<style name="CustomerDateDialog" parent="@android:Theme.Dialog">     <item name="android:windowFrame">@null</item>     <item name="android:windowNoTitle">true</item>     <item name="android:windowBackground">@color/light_grey</item>     <item name="android:windowIsFloating">true</item>     <item name="android:windowContentOverlay">@null</item>   </style>

到这里基本上就完了。你看懂了吗？好好研究吧！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持VEVB武林网。

注：相关教程知识阅读请移步到Android开发频道。

上一篇：Android如何在App中启动系统闹钟

下一篇：Android闹钟机制实现定时任务功能