思享工具箱

Android学习笔记（一）之仿正点闹钟时间齿轮滑动的效果

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

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

Android学习笔记（一）之仿正点闹钟时间齿轮滑动的效果第1张

首先是MainActivity的布局文件，这个布局文件非常简单，就是一个Button：activity_main.xml文件，代码如下：

  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
  3. android:id="@+id/ll_timeset"
  4. android:layout_width="fill_parent"
  5. android:layout_height="fill_parent"
  6. android:background="#ffffff"
  7. android:orientation="vertical">
  9. <Button
  10. android:id="@+id/btn"
  11. android:layout_width="fill_parent"
  12. android:layout_height="wrap_content"
  13. android:gravity="center"
  14. android:text="时间设置"
  15. android:textSize="24sp"/>
  17. </LinearLayout>

紧接着就是MainActivity的代码，代码如下：
  1. packagenet.loonggg.test;
  3. importnet.loonggg.view.CustomerDateDialog;
  4. importnet.loonggg.view.CustomerDateDialog.DateDialogListener;
  5. importandroid.app.Activity;
  6. importandroid.os.Bundle;
  7. importandroid.text.format.DateFormat;
  8. importandroid.view.View;
  9. importandroid.view.Window;
  10. importandroid.widget.Button;
  11. importandroid.widget.Toast;
  13. publicclassMainActivityextendsActivity{
  14. privateinth,m;
  15. privateCustomerDateDialogdialog;
  16. privateButtonbtn;
  18. @Override
  19. protectedvoidonCreate(BundlesavedInstanceState){
  20. super.onCreate(savedInstanceState);
  21. requestWindowFeature(Window.FEATURE_NO_TITLE);
  22. setContentView(R.layout.activity_main);
  23. btn=(Button)findViewById(R.id.btn);
  24. btn.setOnClickListener(newView.OnClickListener(){
  26. @Override
  27. publicvoidonClick(Viewv){
  28. Stringdatetime=DateFormat.format("kk:mm",
  29. System.currentTimeMillis()).toString();
  30. String[]strs=datetime.split(":");
  31. h=Integer.parseInt(strs[0]);
  32. m=Integer.parseInt(strs[1]);
  33. dialog=newCustomerDateDialog(MainActivity.this,h,m);
  34. dialog.show();
  35. dialog.setOnDateDialogListener(newDateDialogListener(){
  36. @Override
  37. publicvoidgetDate(){
  38. Toast.makeText(
  39. MainActivity.this,
  40. "时间是:"+dialog.getSettingHour()+"点"
  41. +dialog.getSettingMinute()+"分",
  42. Toast.LENGTH_LONG).show();
  43. }
  44. });
  46. }
  47. });
  49. }
  51. }

再就是我自定义了一个时钟的Dialog,自定义Dialog也非常简单，自己可以学一下，这方面网上的资料非常多。现在我把我自定义时钟的Dialog的代码分享一下，代码如下：
  1. packagenet.loonggg.view;
  3. importnet.loonggg.test.R;
  4. importandroid.annotation.SuppressLint;
  5. importandroid.app.Dialog;
  6. importandroid.content.Context;
  7. importandroid.os.Bundle;
  8. importandroid.os.Handler;
  9. importandroid.view.LayoutInflater;
  10. importandroid.view.MotionEvent;
  11. importandroid.view.View;
  12. importandroid.view.View.OnTouchListener;
  13. importandroid.view.ViewTreeObserver;
  14. importandroid.view.ViewTreeObserver.OnGlobalLayoutListener;
  15. importandroid.widget.Button;
  16. importandroid.widget.LinearLayout;
  17. importandroid.widget.ScrollView;
  18. importandroid.widget.TextView;
  20. @SuppressLint("HandlerLeak")
  21. publicclassCustomerDateDialogextendsDialog{
  22. privateViewcustomView;
  23. privateButtonsetBtn;
  24. privateButtoncancleBtn;
  25. privateTextViewarrow_up;
  26. privateTextViewtv01,tv02;
  27. privateScrollViewsv01,sv02;
  28. privateLinearLayoutllTimeWheel;
  29. privateDateDialogListenerlistener;
  30. privateintlastY;
  31. privateintflag;//标记时分
  32. privateintitemHeight;//每一行的高度
  33. privateintpHour,pMinute;//初始化时显示的时分时间
  34. privateintsetHour,setMinute;
  36. publicCustomerDateDialog(Contextcontext,inthour,intminute){
  37. super(context,R.style.CustomerDateDialog);
  38. customView=LayoutInflater.from(context).inflate(R.layout.time_wheel,
  39. null);
  40. init(context,hour,minute);
  41. }
  43. @Override
  44. protectedvoidonCreate(BundlesavedInstanceState){
  45. super.onCreate(savedInstanceState);
  46. this.setContentView(customView);
  47. }
  49. privatevoidinit(Contextcontext,finalinthour,finalintminute){
  50. tv01=(TextView)customView.findViewById(R.id.tv01);
  51. tv02=(TextView)customView.findViewById(R.id.tv02);
  52. sv01=(ScrollView)customView.findViewById(R.id.sv01);
  53. sv02=(ScrollView)customView.findViewById(R.id.sv02);
  54. setBtn=(Button)customView.findViewById(R.id.setBtn);
  55. cancleBtn=(Button)customView.findViewById(R.id.cancleBtn);
  56. arrow_up=(TextView)customView.findViewById(R.id.arrow_up);
  57. this.pHour=hour;
  58. this.pMinute=minute;
  59. setHour=pHour;
  60. setMinute=pMinute;
  62. llTimeWheel=(LinearLayout)customView
  63. .findViewById(R.id.ll_time_wheel);
  64. setHourDial(tv01);
  65. setMinuteDial(tv02);
  67. sv01.setOnTouchListener(tListener);
  68. sv02.setOnTouchListener(tListener);
  70. finalViewTreeObserverobserver=sv01.getViewTreeObserver();//observer
  71. //作用当视图完全加载进来的时候再取控件的高度，否则取得值是0
  72. observer.addOnGlobalLayoutListener(newOnGlobalLayoutListener(){
  74. @SuppressWarnings("deprecation")
  75. publicvoidonGlobalLayout(){
  76. inttvHeight=tv02.getHeight();
  77. itemHeight=tvHeight/180;
  78. if(sv01.getViewTreeObserver().isAlive()){
  79. sv01.getViewTreeObserver().removeGlobalOnLayoutListener(
  80. this);
  81. }
  82. LinearLayout.LayoutParamsparams=newLinearLayout.LayoutParams(
  83. LinearLayout.LayoutParams.FILL_PARENT,(itemHeight*3)
  84. +arrow_up.getHeight()*2);
  85. llTimeWheel.setLayoutParams(params);
  86. sv01.setLayoutParams(newLinearLayout.LayoutParams(tv02
  87. .getWidth(),(itemHeight*3)));
  88. sv02.setLayoutParams(newLinearLayout.LayoutParams(tv02
  89. .getWidth(),(itemHeight*3)));
  90. sv01.scrollTo(0,(pHour+23)*itemHeight);
  91. sv02.scrollTo(0,(pMinute+59)*itemHeight);
  93. }
  94. });
  96. setBtn.setOnClickListener(newView.OnClickListener(){
  98. @Override
  99. publicvoidonClick(Viewv){
  100. getSettingDate();
  101. CustomerDateDialog.this.cancel();
  102. }
  103. });
  105. cancleBtn.setOnClickListener(newView.OnClickListener(){
  107. @Override
  108. publicvoidonClick(Viewv){
  109. CustomerDateDialog.this.cancel();
  110. }
  111. });
  112. }
  114. privateOnTouchListenertListener=newOnTouchListener(){
  116. publicbooleanonTouch(Viewv,MotionEventevent){
  117. if(v==sv01){
  118. flag=1;
  119. }else{
  120. flag=2;
  121. }
  122. if(event.getAction()==MotionEvent.ACTION_UP){
  123. finalScrollViewsv=(ScrollView)v;
  124. lastY=sv.getScrollY();
  125. System.out.println("lastY"+lastY);
  126. handler.sendMessageDelayed(handler.obtainMessage(0,v),50);
  127. }
  128. returnfalse;
  129. }
  130. };
  132. privateHandlerhandler=newHandler(){
  133. @SuppressLint("HandlerLeak")
  134. publicvoidhandleMessage(android.os.Messagemsg){
  135. ScrollViewsv=(ScrollView)msg.obj;
  137. if(msg.what==0){
  138. if(lastY==sv.getScrollY()){
  140. intnum=lastY/itemHeight;
  141. intover=lastY%itemHeight;
  142. if(over>itemHeight/2){//超过一半滚到下一格
  143. locationTo((num+1)*itemHeight,sv,flag);
  144. }else{//不到一半滚回上一格
  145. locationTo(num*itemHeight,sv,flag);
  146. }
  147. }else{
  148. lastY=sv.getScrollY();
  149. handler.sendMessageDelayed(handler.obtainMessage(0,sv),50);//滚动还没停止隔50毫秒再判断
  150. }
  151. }
  153. };
  154. };
  156. privatevoidlocationTo(intposition,ScrollViewscrollview,intflag){
  157. switch(flag){
  158. case1:
  159. intmPosition=0;
  160. if(position<=23*itemHeight){
  161. mPosition=position+24*itemHeight;
  162. scrollview.scrollTo(0,mPosition);
  163. }elseif(position>=48*itemHeight){
  164. mPosition=position-24*itemHeight;
  165. scrollview.scrollTo(0,mPosition);
  166. }else{
  167. mPosition=position;
  168. scrollview.smoothScrollTo(0,position);
  169. }
  170. setHour=(mPosition/itemHeight-23)%24;
  171. break;
  173. case2:
  174. inthPosition=0;
  175. if(position<=57*itemHeight){
  176. hPosition=position+60*itemHeight;
  177. scrollview.scrollTo(0,hPosition);
  178. }elseif(position>=120*itemHeight){
  179. hPosition=position-60*itemHeight;
  180. scrollview.scrollTo(0,hPosition);
  181. }else{
  182. hPosition=position;
  183. scrollview.smoothScrollTo(0,position);
  184. }
  185. setMinute=(hPosition/itemHeight)%60+1;
  186. break;
  187. }
  189. }
  191. /**
  192. *设置分刻度盘
  193. *
  194. *@paramtv
  195. */
  197. privatevoidsetMinuteDial(TextViewtv){
  198. StringBufferbuff=newStringBuffer();
  199. for(inti=0;i<3;i++){
  200. for(intj=0;j<60;j++){
  201. if(j<=9){
  202. buff.append("0"+j);
  203. }else{
  204. buff.append(j+"");
  205. }
  206. }
  207. }
  209. tv.setText(buff);
  210. }
  212. /**
  213. *设置时刻度盘
  214. *
  215. *@paramtv
  216. */
  217. privatevoidsetHourDial(TextViewtv){
  218. StringBufferbuff=newStringBuffer();
  219. for(inti=0;i<3;i++){
  220. for(intj=0;j<24;j++){
  221. if(j<=9){
  222. buff.append("0"+j);
  223. }else{
  224. buff.append(j+"");
  225. }
  226. }
  228. }
  230. tv.setText(buff);
  231. }
  233. publicvoidsetpHour(intpHour){
  234. this.pHour=pHour;
  235. }
  237. publicvoidsetpMinute(intpMinute){
  238. this.pMinute=pMinute;
  239. }
  241. publicvoidsetOnDateDialogListener(DateDialogListenerlistener){
  242. this.listener=listener;
  243. }
  245. publicinterfaceDateDialogListener{
  246. voidgetDate();
  247. }
  249. publicvoidgetSettingDate(){
  250. if(listener!=null){
  251. listener.getDate();
  252. }
  253. }
  255. publicintgetSettingHour(){
  256. returnsetHour;
  257. }
  259. publicintgetSettingMinute(){
  260. returnsetMinute;
  261. }
  263. }

这里光有java代码还不够，还有自定义Dialog的布局文件，time_wheel.xml代码如下：
  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
  3. android:layout_width="fill_parent"
  4. android:layout_height="wrap_content"
  5. android:background="#efefef"
  6. android:orientation="vertical">
  8. <TextView
  9. android:layout_width="fill_parent"
  10. android:layout_height="wrap_content"
  11. android:background="@color/light_black"
  12. android:paddingLeft="10dp"
  13. android:text="设置时间"
  14. android:textColor="@color/black"
  15. android:textSize="24sp"/>
  17. <!--时间的相关设置-->
  19. <LinearLayout
  20. android:id="@+id/ll_time_wheel"
  21. android:layout_width="fill_parent"
  22. android:layout_height="wrap_content"
  23. android:layout_marginTop="15dp"
  24. android:background="#f0f0f0"
  25. android:gravity="center_horizontal"
  26. android:orientation="horizontal">
  28. <LinearLayout
  29. android:layout_width="wrap_content"
  30. android:layout_height="wrap_content"
  31. android:orientation="vertical">
  33. <TextView
  34. android:layout_width="30dp"
  35. android:layout_height="wrap_content"
  36. android:layout_gravity="center_horizontal"
  37. android:background="@drawable/wheel_arrow_up"/>
  39. <ScrollView
  40. android:id="@+id/sv01"
  41. android:layout_width="50dp"
  42. android:layout_height="wrap_content"
  43. android:layout_gravity="center_horizontal"
  44. android:background="@drawable/time_bg"
  45. android:scrollbars="none">
  47. <LinearLayout
  48. android:id="@+id/ll01"
  49. android:layout_width="50dp"
  50. android:layout_height="wrap_content"
  51. android:gravity="center"
  52. android:orientation="horizontal"
  53. android:paddingTop="5dp">
  55. <TextView
  56. android:id="@+id/tv01"
  57. android:layout_width="50dp"
  58. android:layout_height="wrap_content"
  59. android:gravity="center"
  60. android:lineSpacingExtra="20dp"
  61. android:paddingLeft="10dp"
  62. android:paddingRight="10dp"
  63. android:textSize="26sp"/>
  64. </LinearLayout>
  65. </ScrollView>
  67. <TextView
  68. android:layout_width="30dp"
  69. android:layout_height="wrap_content"
  70. android:layout_gravity="center_horizontal"
  71. android:background="@drawable/wheel_arrow_down"/>
  72. </LinearLayout>
  74. <TextView
  75. android:layout_width="wrap_content"
  76. android:layout_height="fill_parent"
  77. android:layout_gravity="center"
  78. android:background="#f0f0f0"
  79. android:gravity="center"
  80. android:text="时"
  81. android:textColor="#000000"
  82. android:textSize="25sp"/>
  84. <LinearLayout
  85. android:layout_width="wrap_content"
  86. android:layout_height="wrap_content"
  87. android:orientation="vertical">
  89. <TextView
  90. android:id="@+id/arrow_up"
  91. android:layout_width="30dp"
  92. android:layout_height="wrap_content"
  93. android:layout_gravity="center_horizontal"
  94. android:background="@drawable/wheel_arrow_up"/>
  96. <ScrollView
  97. android:id="@+id/sv02"
  98. android:layout_width="50dp"
  99. android:layout_height="wrap_content"
  100. android:layout_gravity="center_horizontal"
  101. android:background="@drawable/time_bg"
  102. android:scrollbars="none">
  104. <LinearLayout
  105. android:id="@+id/ll02"
  106. android:layout_width="50dp"
  107. android:layout_height="wrap_content"
  108. android:gravity="center"
  109. android:paddingTop="5dp">
  111. <TextView
  112. android:id="@+id/tv02"
  113. android:layout_width="50dp"
  114. android:layout_height="wrap_content"
  115. android:gravity="center"
  116. android:lineSpacingExtra="20dp"
  117. android:paddingLeft="10dp"
  118. android:paddingRight="10dp"
  119. android:textSize="26sp"/>
  120. </LinearLayout>
  121. </ScrollView>
  123. <TextView
  124. android:id="@+id/arrow_down"
  125. android:layout_width="30dp"
  126. android:layout_height="wrap_content"
  127. android:layout_gravity="center_horizontal"
  128. android:background="@drawable/wheel_arrow_down"/>
  129. </LinearLayout>
  131. <TextView
  132. android:layout_width="wrap_content"
  133. android:layout_height="fill_parent"
  134. android:layout_gravity="center"
  135. android:background="#f0f0f0"
  136. android:gravity="center"
  137. android:text="分"
  138. android:textColor="#000000"
  139. android:textSize="25sp"/>
  140. </LinearLayout>
  142. <!--设置时钟的按钮-->
  144. <RelativeLayout
  145. android:layout_width="fill_parent"
  146. android:layout_height="50dp">
  148. <Button
  149. android:id="@+id/setBtn"
  150. android:layout_width="wrap_content"
  151. android:layout_height="wrap_content"
  152. android:layout_alignParentLeft="true"
  153. android:layout_gravity="center_horizontal"
  154. android:layout_marginLeft="25dp"
  155. android:background="@drawable/btn_clock_normal"
  156. android:gravity="center"
  157. android:paddingLeft="10dp"
  158. android:paddingRight="10dp"
  159. android:text="确定"
  160. android:textColor="#000000"
  161. android:textSize="24sp"/>
  163. <Button
  164. android:id="@+id/cancleBtn"
  165. android:layout_width="wrap_content"
  166. android:layout_height="wrap_content"
  167. android:layout_alignParentRight="true"
  168. android:layout_gravity="center_horizontal"
  169. android:layout_marginRight="25dp"
  170. android:background="@drawable/btn_clock_normal"
  171. android:gravity="center"
  172. android:paddingLeft="10dp"
  173. android:paddingRight="10dp"
  174. android:text="取消"
  175. android:textColor="#000000"
  176. android:textSize="24sp"/>
  177. </RelativeLayout>
  179. </LinearLayout>

为了让自定义的Dialog的样式更好看，这里还需要自定义样式的Style，Style的代码如下；
  1. <stylename="CustomerDateDialog"parent="@android:Theme.Dialog">
  2. <itemname="android:windowFrame">@null</item>
  3. <itemname="android:windowNoTitle">true</item>
  4. <itemname="android:windowBackground">@color/light_grey</item>
  5. <itemname="android:windowIsFloating">true</item>
  6. <itemname="android:windowContentOverlay">@null</item>
  7. </style>

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

标签：#background#按钮 | 浏览：191 | 发布日期：

免责声明：文章转载自《Android学习笔记（一）之仿正点闹钟时间齿轮滑动的效果》仅用于学习参考。如对内容有疑问，请及时联系本站处理。

上篇SpringBoot实现文件上传下载团队介绍&amp;amp;学长采访下篇

宿迁高防，2C2G15M，22元/月；香港BGP，2C5G5M，25元/月 雨云优惠码：MjYwNzM=

相关文章

[HTML5]WAI-ARIA介绍

认识ARIA 目前互联网应用日益增强，其中大部分是通过混合技术（AJAX、DHTML、JavaScript 和 SVG）创建或自定义一些模拟桌面GUI程序的的 Web widget 小组件来增强 Web 应用程序的交互，但部分类似Dialog 的对话框、弹出层，模拟select 的下拉菜单等小组件并没能提供所需的语义作支持，残障人士有可能无法读懂当前信息。...

css基础-2 div布局

div布局   <html>         <head>                 <title>div布局 </title>                 <meta charset="utf-8">                 <style>       .toubu...

HTML5+CSS3

0、常用技巧　　1）使几个盒子在同一行不换行地靠左且上下居中 /* 弹性盒子 */display: flex;justify-content:flex-start;align-items:center;flex-wrap:nowrap; 1、css基本考点问题 1）、什么是样式表，样式表是由一条条规则组成的，而一条规则由选择器+声明块组成，声...

手机QQ后台清理不掉的秘密——anddroid悬浮窗

问题来自于一篇文章：手机QQ后台为何清不掉？MIUIproject师：全靠1像素的页面保命 出于好奇，想知道这一像素究竟是啥东西，用手机安全管家控制QQ的悬浮窗权限： 关闭QQ的悬浮窗权限，通过后台一键清理，又一次打开QQ，发现是从splash開始的； 打开QQ的悬浮窗权限，一键清理后，打开QQ。发现是直接进入主界面的。说明一键清理未清理QQ，或者清理之...

Bootstrap-菜单，导航，按钮

1、下拉菜单（基本用法） 在Bootstrap框架中的下拉菜单组件是一个独立的组件，根据不同的版本，它对应的文件：   ☑  LESS版本：对应的源码文件为 dropdowns.less   ☑  Sass版本：对应的源码文件为 _dropdowns.scss   ☑  编译后的Bootstrap版本：查看bootstrap.css文件第3004行～第31...

CSS3动画特效——transform详解

CSS3动画特效——transform详解  还可以和过渡属性（Transition）连用      transition&transform,CSS中过度和变形的设置 前置属性： transform-origin更改一个元素变形的原点transform-style：设置元素的子元素是位于 3D 空间中还是平面中 flat：平面，如果选择平面即此...

最新文章

随机推荐

思享工具箱导航