锐客网

  1. 首页 > 睿知 > it技术 > >

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

IT知识选择器自定义控件pickerView

临文乍了了，彻卷兀若无。这篇文章主要讲述Android自定义控件实战——滚动选择器PickerView相关的知识，希望能为你提供帮助。
    转载请声明出处http://blog.csdn.net/zhongkejingwang/article/details/38513301
  手机里设置闹钟需要选择时间，那个选择时间的控件就是滚动选择器，前几天用手机刷了MIUI，发现自带的那个时间选择器效果挺好看的，于是就自己仿写了一个，权当练手。先来看效果：
                                                                 

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

文章图片

效果还行吧？实现思路就是自定义一个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中心的偏移量。用图片表示如下：
Android自定义控件实战——滚动选择器PickerView

文章图片


难点2：
      text的居中。绘制text的时候不仅要使其在x方向上居中，还要在y方向上居中，在x方向上比较简单，设置Paint的Align为Align.CENTER就行了，但是y方向上很蛋疼，需要计算text的baseline。
难点3：
【Android自定义控件实战——滚动选择器PickerView】    循环滚动。为了解决循环滚动的问题我把存放text的List从中间往上下摊开，通过不断地moveHeadToTail和moveTailToHead使选中的text始终是list的中间position的值。
   
      以上就是几个难点，了解了之后可以来看PickerView的代码了：

[java]  view plain  copy
  1. package  com.jingchen.timerpicker;    
  2.    
  3. import  java.util.ArrayList;    
  4. import  java.util.List;    
  5. import  java.util.Timer;    
  6. import  java.util.TimerTask;    
  7.    
  8. import  android.content.Context;    
  9. import  android.graphics.Canvas;    
  10. import  android.graphics.Paint;    
  11. import  android.graphics.Paint.Align;    
  12. import  android.graphics.Paint.FontMetricsInt;    
  13. import  android.graphics.Paint.Style;    
  14. import  android.os.Handler;    
  15. import  android.os.Message;    
  16. import  android.util.AttributeSet;    
  17. import  android.view.MotionEvent;    
  18. import  android.view.View;    
  19.    
  20. /** 
  21.   *  滚动选择器 
  22.   *   
  23.   *  @author  chenjing 
  24.   *   
  25.   */   
  26. public  class  PickerView  extends  View   
  27. {   
  28.    
  29.         public  static  final  String  TAG  =  "PickerView";    
  30.         /** 
  31.           *  text之间间距和minTextSize之比 
  32.           */   
  33.         public  static  final  float  MARGIN_ALPHA  =  2.8f;    
  34.         /** 
  35.           *  自动回滚到中间的速度 
  36.           */   
  37.         public  static  final  float  SPEED  =  2;    
  38.    
  39.         private  List< String>   mDataList;    
  40.         /** 
  41.           *  选中的位置，这个位置是mDataList的中心位置，一直不变 
  42.           */   
  43.         private  int  mCurrentSelected;    
  44.         private  Paint  mPaint;    
  45.    
  46.         private  float  mMaxTextSize  =  80;    
  47.         private  float  mMinTextSize  =  40;    
  48.    
  49.         private  float  mMaxTextAlpha  =  255;    
  50.         private  float  mMinTextAlpha  =  120;    
  51.    
  52.         private  int  mColorText  =  0x333333;    
  53.    
  54.         private  int  mViewHeight;    
  55.         private  int  mViewWidth;    
  56.    
  57.         private  float  mLastDownY;    
  58.         /** 
  59.           *  滑动的距离 
  60.           */   
  61.         private  float  mMoveLen  =  0;    
  62.         private  boolean  isInit  =  false;    
  63.         private  onSelectListener  mSelectListener;    
  64.         private  Timer  timer;    
  65.         private  MyTimerTask  mTask;    
  66.    
  67.         Handler  updateHandler  =  new  Handler()   
  68.         {   
  69.    
  70.                 @Override   
  71.                 public  void  handleMessage(Message  msg)   
  72.                 {   
  73.                         if  (Math.abs(mMoveLen)  <   SPEED)   
  74.                         {   
  75.                                 mMoveLen  =  0;    
  76.                                 if  (mTask  !=  null)   
  77.                                 {   
  78.                                         mTask.cancel();    
  79.                                         mTask  =  null;    
  80.                                         performSelect();    
  81.                                 }   
  82.                         }  else   
  83.                                 //  这里mMoveLen  /  Math.abs(mMoveLen)是为了保有mMoveLen的正负号，以实现上滚或下滚   
  84.  

      推荐阅读


    上一篇：高级控件安卓5——滚动视图列表视图[ListViewSimpleAdapter类]

    下一篇：您有一份专业电商APP制作指南