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>
到这里基本上就完了。你看懂了吗?好好研究吧!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
您可能感兴趣的文章:
- Android手机闹钟服务AlarmManagerk开发案例
- 简单实现Android闹钟程序 附源码
- Android闹钟设置的解决方案
- Android编程闹钟设置方法详解
- Android自定义View 实现闹钟唤起播放闹钟铃声功能
- 简单实现Android闹钟功能
- Android闹钟机制实现定时任务功能
- Android如何在App中启动系统闹钟
- Android使用CountDownTimer类实现倒计时闹钟
- android用闹钟定时做http请求推送的解决方案
赞 (0)