Android学习笔记之仿正点闹钟时间齿轮滑动的效果
Posted 非著名程序员
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>到这里基本上就完了。你看懂了吗？好好研究吧！
求源码，请关注微信订阅号：smart_android，微信名：非著名程序员，关注成功后，给微信号发送您的邮箱，源码就会发到您的邮箱里。发送格式：发送内容+您的邮箱（内容即为你要的源码内容）
以上是关于Android学习笔记之仿正点闹钟时间齿轮滑动的效果的主要内容，如果未能解决你的问题，请参考以下文章
android自定义View之仿通讯录侧边栏滑动，实现A-Z字母检索
Android初学二之仿微信APP实现RecyclerView控件的设计开发，实现点击事件及图片瀑布流