Android自定义控件实战——滚动选择器PickerView

标签: androidTimerPickerPickerView 10014人阅读 评论(39) 收藏 举报 本文章已收录于: 分类: Android(10) 作者同类文章 X

转载请声明出处http://blog.csdn.net/zhongkejingwang/article/details/38513301

手机里设置闹钟需要选择时间,那个选择时间的控件就是滚动选择器,前几天用手机刷了MIUI,发现自带的那个时间选择器效果挺好看的,于是就自己仿写了一个,权当练手。先来看效果:

效果还行吧?实现思路就是自定义一个PickerView,单独滚动的是一个PickerView,显然上图中有分和秒的选择所以在布局里用了两个PickerView。由于这里不涉及到text的点击事件,所以只需要继承View就行了,直接把text用canvas画上去。PickerView的实现的主要难点:

难点1:

字体随距离的渐变。可以看到,text随离中心位置的距离变化而变化,这里变化的是透明度alpha和字体大小TexSize,这两个值我都设置了Max和Min值,通过其与中心点的距离计算scale。我用的是变化曲线是抛物线scale=1-ax^2(x<=Height/4),scale = 0(x>Height/4),a=(4/Height)^2。x就是距离View中心的偏移量。用图片表示如下:


难点2:

text的居中。绘制text的时候不仅要使其在x方向上居中,还要在y方向上居中,在x方向上比较简单,设置Paint的Align为Align.CENTER就行了,但是y方向上很蛋疼,需要计算text的baseline。

难点3:

循环滚动。为了解决循环滚动的问题我把存放text的List从中间往上下摊开,通过不断地moveHeadToTail和moveTailToHead使选中的text始终是list的中间position的值。

以上就是几个难点,了解了之后可以来看PickerView的代码了:

[java] view plain copy print ?
  1. packagecom.jingchen.timerpicker;
  2. importjava.util.ArrayList;
  3. importjava.util.List;
  4. importjava.util.Timer;
  5. importjava.util.TimerTask;
  6. importandroid.content.Context;
  7. importandroid.graphics.Canvas;
  8. importandroid.graphics.Paint;
  9. importandroid.graphics.Paint.Align;
  10. importandroid.graphics.Paint.FontMetricsInt;
  11. importandroid.graphics.Paint.Style;
  12. importandroid.os.Handler;
  13. importandroid.os.Message;
  14. importandroid.util.AttributeSet;
  15. importandroid.view.MotionEvent;
  16. importandroid.view.View;
  17. /**
  18. *滚动选择器
  19. *
  20. *@authorchenjing
  21. *
  22. */
  23. publicclassPickerViewextendsView
  24. {
  25. publicstaticfinalStringTAG="PickerView";
  26. /**
  27. *text之间间距和minTextSize之比
  28. */
  29. publicstaticfinalfloatMARGIN_ALPHA=2.8f;
  30. /**
  31. *自动回滚到中间的速度
  32. */
  33. publicstaticfinalfloatSPEED=2;
  34. privateList<String>mDataList;
  35. /**
  36. *选中的位置,这个位置是mDataList的中心位置,一直不变
  37. */
  38. privateintmCurrentSelected;
  39. privatePaintmPaint;
  40. privatefloatmMaxTextSize=80;
  41. privatefloatmMinTextSize=40;
  42. privatefloatmMaxTextAlpha=255;
  43. privatefloatmMinTextAlpha=120;
  44. privateintmColorText=0x333333;
  45. privateintmViewHeight;
  46. privateintmViewWidth;
  47. privatefloatmLastDownY;
  48. /**
  49. *滑动的距离
  50. */
  51. privatefloatmMoveLen=0;
  52. privatebooleanisInit=false;
  53. privateonSelectListenermSelectListener;
  54. privateTimertimer;
  55. privateMyTimerTaskmTask;
  56. HandlerupdateHandler=newHandler()
  57. {
  58. @Override
  59. publicvoidhandleMessage(Messagemsg)
  60. {
  61. if(Math.abs(mMoveLen)<SPEED)
  62. {
  63. mMoveLen=0;
  64. if(mTask!=null)
  65. {
  66. mTask.cancel();
  67. mTask=null;
  68. performSelect();
  69. }
  70. }else
  71. //这里mMoveLen/Math.abs(mMoveLen)是为了保有mMoveLen的正负号,以实现上滚或下滚
  72. mMoveLen=mMoveLen-mMoveLen/Math.abs(mMoveLen)*SPEED;
  73. invalidate();
  74. }
  75. };
  76. publicPickerView(Contextcontext)
  77. {
  78. super(context);
  79. init();
  80. }
  81. publicPickerView(Contextcontext,AttributeSetattrs)
  82. {
  83. super(context,attrs);
  84. init();
  85. }
  86. publicvoidsetOnSelectListener(onSelectListenerlistener)
  87. {
  88. mSelectListener=listener;
  89. }
  90. privatevoidperformSelect()
  91. {
  92. if(mSelectListener!=null)
  93. mSelectListener.onSelect(mDataList.get(mCurrentSelected));
  94. }
  95. publicvoidsetData(List<String>datas)
  96. {
  97. mDataList=datas;
  98. mCurrentSelected=datas.size()/2;
  99. invalidate();
  100. }
  101. publicvoidsetSelected(intselected)
  102. {
  103. mCurrentSelected=selected;
  104. }
  105. privatevoidmoveHeadToTail()
  106. {
  107. Stringhead=mDataList.get(0);
  108. mDataList.remove(0);
  109. mDataList.add(head);
  110. }
  111. privatevoidmoveTailToHead()
  112. {
  113. Stringtail=mDataList.get(mDataList.size()-1);
  114. mDataList.remove(mDataList.size()-1);
  115. mDataList.add(0,tail);
  116. }
  117. @Override
  118. protectedvoidonMeasure(intwidthMeasureSpec,intheightMeasureSpec)
  119. {
  120. super.onMeasure(widthMeasureSpec,heightMeasureSpec);
  121. mViewHeight=getMeasuredHeight();
  122. mViewWidth=getMeasuredWidth();
  123. //按照View的高度计算字体大小
  124. mMaxTextSize=mViewHeight/4.0f;
  125. mMinTextSize=mMaxTextSize/2f;
  126. isInit=true;
  127. invalidate();
  128. }
  129. privatevoidinit()
  130. {
  131. timer=newTimer();
  132. mDataList=newArrayList<String>();
  133. mPaint=newPaint(Paint.ANTI_ALIAS_FLAG);
  134. mPaint.setStyle(Style.FILL);
  135. mPaint.setTextAlign(Align.CENTER);
  136. mPaint.setColor(mColorText);
  137. }
  138. @Override
  139. protectedvoidonDraw(Canvascanvas)
  140. {
  141. super.onDraw(canvas);
  142. //根据index绘制view
  143. if(isInit)
  144. drawData(canvas);
  145. }
  146. privatevoiddrawData(Canvascanvas)
  147. {
  148. //先绘制选中的text再往上往下绘制其余的text
  149. floatscale=parabola(mViewHeight/4.0f,mMoveLen);
  150. floatsize=(mMaxTextSize-mMinTextSize)*scale+mMinTextSize;
  151. mPaint.setTextSize(size);
  152. mPaint.setAlpha((int)((mMaxTextAlpha-mMinTextAlpha)*scale+mMinTextAlpha));
  153. //text居中绘制,注意baseline的计算才能达到居中,y值是text中心坐标
  154. floatx=(float)(mViewWidth/2.0);
  155. floaty=(float)(mViewHeight/2.0+mMoveLen);
  156. FontMetricsIntfmi=mPaint.getFontMetricsInt();
  157. floatbaseline=(float)(y-(fmi.bottom/2.0+fmi.top/2.0));
  158. canvas.drawText(mDataList.get(mCurrentSelected),x,baseline,mPaint);
  159. //绘制上方data
  160. for(inti=1;(mCurrentSelected-i)>=0;i++)
  161. {
  162. drawOtherText(canvas,i,-1);
  163. }
  164. //绘制下方data
  165. for(inti=1;(mCurrentSelected+i)<mDataList.size();i++)
  166. {
  167. drawOtherText(canvas,i,1);
  168. }
  169. }
  170. /**
  171. *@paramcanvas
  172. *@paramposition
  173. *距离mCurrentSelected的差值
  174. *@paramtype
  175. *1表示向下绘制,-1表示向上绘制
  176. */
  177. privatevoiddrawOtherText(Canvascanvas,intposition,inttype)
  178. {
  179. floatd=(float)(MARGIN_ALPHA*mMinTextSize*position+type
  180. *mMoveLen);
  181. floatscale=parabola(mViewHeight/4.0f,d);
  182. floatsize=(mMaxTextSize-mMinTextSize)*scale+mMinTextSize;
  183. mPaint.setTextSize(size);
  184. mPaint.setAlpha((int)((mMaxTextAlpha-mMinTextAlpha)*scale+mMinTextAlpha));
  185. floaty=(float)(mViewHeight/2.0+type*d);
  186. FontMetricsIntfmi=mPaint.getFontMetricsInt();
  187. floatbaseline=(float)(y-(fmi.bottom/2.0+fmi.top/2.0));
  188. canvas.drawText(mDataList.get(mCurrentSelected+type*position),
  189. (float)(mViewWidth/2.0),baseline,mPaint);
  190. }
  191. /**
  192. *抛物线
  193. *
  194. *@paramzero
  195. *零点坐标
  196. *@paramx
  197. *偏移量
  198. *@returnscale
  199. */
  200. privatefloatparabola(floatzero,floatx)
  201. {
  202. floatf=(float)(1-Math.pow(x/zero,2));
  203. returnf<0?0:f;
  204. }
  205. @Override
  206. publicbooleanonTouchEvent(MotionEventevent)
  207. {
  208. switch(event.getActionMasked())
  209. {
  210. caseMotionEvent.ACTION_DOWN:
  211. doDown(event);
  212. break;
  213. caseMotionEvent.ACTION_MOVE:
  214. doMove(event);
  215. break;
  216. caseMotionEvent.ACTION_UP:
  217. doUp(event);
  218. break;
  219. }
  220. returntrue;
  221. }
  222. privatevoiddoDown(MotionEventevent)
  223. {
  224. if(mTask!=null)
  225. {
  226. mTask.cancel();
  227. mTask=null;
  228. }
  229. mLastDownY=event.getY();
  230. }
  231. privatevoiddoMove(MotionEventevent)
  232. {
  233. mMoveLen+=(event.getY()-mLastDownY);
  234. if(mMoveLen>MARGIN_ALPHA*mMinTextSize/2)
  235. {
  236. //往下滑超过离开距离
  237. moveTailToHead();
  238. mMoveLen=mMoveLen-MARGIN_ALPHA*mMinTextSize;
  239. }elseif(mMoveLen<-MARGIN_ALPHA*mMinTextSize/2)
  240. {
  241. //往上滑超过离开距离
  242. moveHeadToTail();
  243. mMoveLen=mMoveLen+MARGIN_ALPHA*mMinTextSize;
  244. }
  245. mLastDownY=event.getY();
  246. invalidate();
  247. }
  248. privatevoiddoUp(MotionEventevent)
  249. {
  250. //抬起手后mCurrentSelected的位置由当前位置move到中间选中位置
  251. if(Math.abs(mMoveLen)<0.0001)
  252. {
  253. mMoveLen=0;
  254. return;
  255. }
  256. if(mTask!=null)
  257. {
  258. mTask.cancel();
  259. mTask=null;
  260. }
  261. mTask=newMyTimerTask(updateHandler);
  262. timer.schedule(mTask,0,10);
  263. }
  264. classMyTimerTaskextendsTimerTask
  265. {
  266. Handlerhandler;
  267. publicMyTimerTask(Handlerhandler)
  268. {
  269. this.handler=handler;
  270. }
  271. @Override
  272. publicvoidrun()
  273. {
  274. handler.sendMessage(handler.obtainMessage());
  275. }
  276. }
  277. publicinterfaceonSelectListener
  278. {
  279. voidonSelect(Stringtext);
  280. }
  281. }


代码里的注释都写的很清楚了。接下来,我们就用写好的PickerView实现文章开头的图片效果吧~

首先看MainActivity的布局:

[html] view plain copy print ?
  1. <RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
  2. android:layout_width="match_parent"
  3. android:layout_height="match_parent"
  4. android:background="#000000">
  5. <RelativeLayout
  6. android:layout_width="wrap_content"
  7. android:layout_height="wrap_content"
  8. android:layout_centerInParent="true"
  9. android:background="#ffffff">
  10. <com.jingchen.timerpicker.PickerView
  11. android:id="@+id/minute_pv"
  12. android:layout_width="80dp"
  13. android:layout_height="160dp"/>
  14. <TextView
  15. android:id="@+id/minute_tv"
  16. android:layout_width="wrap_content"
  17. android:layout_height="wrap_content"
  18. android:layout_centerVertical="true"
  19. android:layout_toRightOf="@id/minute_pv"
  20. android:text="分"
  21. android:textColor="#ffaa33"
  22. android:textSize="26sp"
  23. android:textStyle="bold"/>
  24. <com.jingchen.timerpicker.PickerView
  25. android:id="@+id/second_pv"
  26. android:layout_width="80dp"
  27. android:layout_height="160dp"
  28. android:layout_toRightOf="@id/minute_tv"/>
  29. <TextView
  30. android:id="@+id/second_tv"
  31. android:layout_width="wrap_content"
  32. android:layout_height="wrap_content"
  33. android:layout_centerVertical="true"
  34. android:layout_toRightOf="@id/second_pv"
  35. android:text="秒"
  36. android:textColor="#ffaa33"
  37. android:textSize="26sp"
  38. android:textStyle="bold"/>
  39. </RelativeLayout>
  40. </RelativeLayout>
两个PickerView两个TextView,很简单。

下面是MainActivity的代码:

[java] view plain copy print ?
  1. packagecom.jingchen.timerpicker;
  2. importjava.util.ArrayList;
  3. importjava.util.List;
  4. importcom.jingchen.timerpicker.PickerView.onSelectListener;
  5. importandroid.app.Activity;
  6. importandroid.os.Bundle;
  7. importandroid.view.Menu;
  8. importandroid.widget.TextView;
  9. importandroid.widget.Toast;
  10. publicclassMainActivityextendsActivity
  11. {
  12. PickerViewminute_pv;
  13. PickerViewsecond_pv;
  14. @Override
  15. protectedvoidonCreate(BundlesavedInstanceState)
  16. {
  17. super.onCreate(savedInstanceState);
  18. setContentView(R.layout.activity_main);
  19. minute_pv=(PickerView)findViewById(R.id.minute_pv);
  20. second_pv=(PickerView)findViewById(R.id.second_pv);
  21. List<String>data=newArrayList<String>();
  22. List<String>seconds=newArrayList<String>();
  23. for(inti=0;i<10;i++)
  24. {
  25. data.add("0"+i);
  26. }
  27. for(inti=0;i<60;i++)
  28. {
  29. seconds.add(i<10?"0"+i:""+i);
  30. }
  31. minute_pv.setData(data);
  32. minute_pv.setOnSelectListener(newonSelectListener()
  33. {
  34. @Override
  35. publicvoidonSelect(Stringtext)
  36. {
  37. Toast.makeText(MainActivity.this,"选择了"+text+"分",
  38. Toast.LENGTH_SHORT).show();
  39. }
  40. });
  41. second_pv.setData(seconds);
  42. second_pv.setOnSelectListener(newonSelectListener()
  43. {
  44. @Override
  45. publicvoidonSelect(Stringtext)
  46. {
  47. Toast.makeText(MainActivity.this,"选择了"+text+"秒",
  48. Toast.LENGTH_SHORT).show();
  49. }
  50. });
  51. }
  52. @Override
  53. publicbooleanonCreateOptionsMenu(Menumenu)
  54. {
  55. getMenuInflater().inflate(R.menu.main,menu);
  56. returntrue;
  57. }
  58. }

OK了,自定义自己的TimerPicker就是这么简单~

源码下载


更多相关文章

  1. Flutter 基础组件之 Stack
  2. 学Android(安卓)Space控件,只看这篇文章就行了
  3. android popupwindow 模拟新浪、腾讯title弹框效果
  4. 针对android游戏截图分享
  5. Android(安卓)N进入分屏代码分析二
  6. Custom View
  7. Android获取当前位置,location为空
  8. 获取高德key
  9. Android获取View的内容图片

随机推荐

  1. 自定义Android应用程序标题条
  2. Android(安卓)Menu
  3. Android/java 多线程(六)-AsyncTask使用
  4. Android(安卓)EditView 属性大全
  5. Android属性
  6. 2013.11.29 ——— android layout不显示
  7. android adb shell 命令大全
  8. android的init.rc文件的语法
  9. Android图形系统的底层实现
  10. Android动态加载——加载已安装APK中的类