Android自訂View實現左右滑動選擇出生年份_Android

自訂view的第三篇，模仿的是微博運動介面的個人出生日期設定view，先看看我的效果圖：

支援設定初始年份，左右滑動選擇出生年份，對應的TextView的值也會改變。這個動畫效果弄了好久，感覺還是比較生硬，與微博那個還是有點區別。大家有改進的方案，歡迎一起交流。

自訂View四部曲，這裡依舊是這個套路，看看怎麼實現的。

1.自訂view的屬性：
在res/values/ 下建立一個attrs.xml ， 在裡面定義我們的屬性以及聲明我們的整個樣式。

<?xml version="1.0" encoding="utf-8"?><resources> //自訂屬性名,定義公用屬性 <attr name="titleSize" format="dimension"></attr> <attr name="titleText" format="string"></attr> <attr name="titleColor" format="color"></attr> <attr name="outCircleColor" format="color"></attr> <attr name="inCircleColor" format="color"></attr> <attr name="lineColor" format="color"></attr> <declare-styleable name="MyScrollView">  <attr name="titleSize"></attr>  <attr name="titleColor"></attr>  <attr name="lineColor"></attr> </declare-styleable></resources>

依次定義了字型大小，字型顏色，線的顏色3個屬性，format是值該屬性的取實值型別。
然後就是在布局檔案中申明我們的自訂view：

 <TextView  android:id="@+id/year_txt"  android:layout_width="wrap_content"  android:layout_height="wrap_content"  android:layout_margin="30dp"  android:text="出生年份 (年)"  android:textSize="20dp" /> <com.example.tangyangkai.myview.MyScrollView  android:id="@+id/scroll_view"  android:layout_width="match_parent"  android:layout_height="70dp"  myscroll:lineColor="@color/font_text"  myscroll:titleColor="@color/strong"  myscroll:titleSize="30dp"> </com.example.tangyangkai.myview.MyScrollView>

自訂view的屬性我們可以自己進行設定，記得最後要引入我們的命名空間，
xmlns:app=”http://schemas.Android.com/apk/res-auto”

2.擷取自訂view的屬性：

 public MyScrollView(Context context) {  this(context, null); } public MyScrollView(Context context, AttributeSet attrs) {  this(context, attrs, 0); } public MyScrollView(final Context context, AttributeSet attrs, int defStyleAttr) {  super(context, attrs, defStyleAttr);  //擷取我們自訂的樣式屬性  TypedArray array = context.getTheme().obtainStyledAttributes(attrs, R.styleable.MyScrollView, defStyleAttr, 0);  int n = array.getIndexCount();  for (int i = 0; i < n; i++) {   int attr = array.getIndex(i);   switch (attr) {    case R.styleable.MyScrollView_lineColor:     // 預設顏色設定為黑色     lineColor = array.getColor(attr, Color.BLACK);     break;    case R.styleable.MyScrollView_titleColor:     textColor = array.getColor(attr, Color.BLACK);     break;    case R.styleable.MyScrollView_titleSize:     // 預設設定為16sp，TypeValue也可以把sp轉化為px     textSize = array.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(       TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()));     break;   }  }  array.recycle();  init(); } private void init() {  //初始化  mPaint = new Paint();  mPaint.setAntiAlias(true);  mBound = new Rect();  mTxtBound = new Rect();  bigTxtSize = textSize;  oneSize = textSize - 15;  thirdSize = textSize - 15; }

自訂View一般需要實現一下三個構造方法，這三個構造方法是一層調用一層的，屬於遞進關係。因此，我們只需要在最後一個構造方法中來獲得View的屬性以及進行一些必要的初始化操作。盡量不要在onDraw的過程中去執行個體化對象，因為這是一個頻繁重複執行的過程，new是需要分配記憶體空間的，如果在一個頻繁重複的過程中去大量地new對象會造成記憶體浪費的情況。

3.重寫onMesure方法確定view大小：

上一篇自訂View的文章介紹的很詳細，這裡就不重複了，重點放在onDraw方法裡面：
Android自訂View仿微博運動積分動畫效果

4.重寫onDraw方法進行繪畫：

之前說過對於比較複雜的自訂View，重寫onDraw方法之前，首先在草稿本上將大致的樣子畫出來，座標，起始點都可以簡單標註一下。這個方法很實用，思路很清晰。

A點的位置就是繪製數位初始位置，B點的位置就是繪製豎線的起始位置。確定好這兩個初始位置，我們只要寫一個迴圈，找到規律，依次繪製出後面的線與字即可。因為涉及左右滑動的事件處理，所以需要Android事件分發的知識來進行處理。

 @Override public boolean dispatchTouchEvent(MotionEvent ev) {  int action = ev.getAction();  int x = (int) ev.getX();  int y = (int) ev.getY();  switch (action) {   case MotionEvent.ACTION_DOWN:    xDown = x;    yDown = y;    break;   case MotionEvent.ACTION_MOVE:    xMove = x;    yMove = y;    dx = xMove - xDown;    int dy = yMove - yDown;    //如果是從左向右滑動    if (xMove > xDown && Math.abs(dx) > mTouchSlop * 2 && Math.abs(dy) < mTouchSlop) {     state = 1;    }    //如果是從右向左滑動    if (xMove < xDown && Math.abs(dx) > mTouchSlop * 2 && Math.abs(dy) < mTouchSlop) {     state = 2;    }    break;   case MotionEvent.ACTION_UP:    break;  }  return super.dispatchTouchEvent(ev); }

重寫View的dispatchTouchEvent方法來區別左右滑動，mTouchSlop是Android預設的滑動最小距離，如果水平方向滑動的距離大於豎直方向滑動的距離，就判斷為水平滑動。這裡為了不讓滑動那麼明顯，我讓水平滑動的距離大於預設距離的兩倍才判定左右滑動。state是記錄滑動的狀態。

 

 @Override public boolean onTouchEvent(MotionEvent ev) {  int action = ev.getAction();  switch (action) {   case MotionEvent.ACTION_DOWN:    break;   case MotionEvent.ACTION_MOVE:    if (state == 1 && bigTxtSize - oneSize > -15) {     bigTxtSize = bigTxtSize - 1;     oneSize = oneSize + 1;     postInvalidate();    }    if (state == 2 && bigTxtSize - thirdSize > -15) {     bigTxtSize = bigTxtSize - 1;     thirdSize = thirdSize + 1;     postInvalidate();    }    break;   case MotionEvent.ACTION_UP:    if (state == 1) {     size = size - 1;     bigTxtSize = textSize;     oneSize = textSize - 15;     postInvalidate();     listener.OnScroll(size);     state = 0;    }    if (state == 2) {     size = size + 1;     bigTxtSize = textSize;     thirdSize = textSize - 15;     postInvalidate();     listener.OnScroll(size);     state = 0;    }    break;  }  return true; }

重寫View的onTouchEvent方法來處理View的點擊事件。
(1)示範動態圖中，左右滑動的過程中，中間數字會從大變小，左右的數字會從小變大，bigTxtSize代表中間的數字大小，oneSize代表從左至右第二個數位大小，thirdSize代表從左至右第四個數位大小。在滑動過程中再使用postInvalidate()方法來一直調用onDraw方法來重新進行繪製，達到數字大小變化的效果。
(2)滑動結束以後進行判斷，如果是從左向右滑動，就會將數字減一；如果是從右向左滑動，就會將數字加一。最後將數字大小，滑動狀態恢複到預設值。
(3)最後一定要返回true，表示消費當前滑動事件，不然滑動沒反應

滑動的操作已經全部處理好，接下來就是繪製：

 @Override protected void onDraw(Canvas canvas) {  txtSize = size - 2;  bigText = String.valueOf(size);  smallText = String.valueOf(txtSize);  mPaint.setColor(lineColor);  canvas.drawLine(0, 0, getWidth(), 0, mPaint);  canvas.drawLine(0, getHeight(), getWidth(), getHeight(), mPaint);  lineX = getWidth() / 10;  for (int i = 0; i < 5; i++) {   if (i == 2) {    mPaint.setTextSize(bigTxtSize);    if (bigTxtSize == textSize - 15) {     mPaint.setColor(lineColor);     canvas.drawLine(lineX, 0, lineX, getHeight() / 5, mPaint);    } else {     mPaint.setColor(textColor);     canvas.drawLine(lineX, 0, lineX, getHeight() / 3, mPaint);    }    mPaint.getTextBounds(bigText, 0, bigText.length(), mBound);    canvas.drawText(bigText, lineX - mBound.width() / 2, getHeight() / 2 + mBound.height() * 3 / 4, mPaint);   } else if (i == 0 || i == 4) {    mPaint.setColor(lineColor);    mPaint.setTextSize(textSize - 15);    mPaint.getTextBounds(smallText, 0, smallText.length(), mTxtBound);    canvas.drawLine(lineX, 0, lineX, getHeight() / 5, mPaint);    canvas.drawText(String.valueOf(txtSize), lineX - mTxtBound.width() / 2, getHeight() / 2 + mTxtBound.height() * 3 / 4, mPaint);   } else if (i == 1) {    mPaint.setTextSize(oneSize);    if (oneSize == textSize) {     mPaint.setColor(textColor);     canvas.drawLine(lineX, 0, lineX, getHeight() / 3, mPaint);    } else {     mPaint.setColor(lineColor);     canvas.drawLine(lineX, 0, lineX, getHeight() / 5, mPaint);    }    mPaint.getTextBounds(smallText, 0, smallText.length(), mTxtBound);    canvas.drawText(String.valueOf(txtSize), lineX - mTxtBound.width() / 2, getHeight() / 2 + mTxtBound.height() * 3 / 4, mPaint);   } else {    mPaint.setTextSize(thirdSize);    if (thirdSize == textSize) {     mPaint.setColor(textColor);     canvas.drawLine(lineX, 0, lineX, getHeight() / 3, mPaint);    } else {     mPaint.setColor(lineColor);     canvas.drawLine(lineX, 0, lineX, getHeight() / 5, mPaint);    }    mPaint.getTextBounds(smallText, 0, smallText.length(), mTxtBound);    canvas.drawText(String.valueOf(txtSize), lineX - mTxtBound.width() / 2, getHeight() / 2 + mTxtBound.height() * 3 / 4, mPaint);   }   txtSize++;   lineX += getWidth() / 5;  } }

這裡其實就是得到滑動操作的數字尺寸大小，然後進行繪製，最後將數字每次加一，lineX是B點的初始位置，每次加上寬度的五分之一。

5.得到當前的設定值
可以看到View上面的TextView也會跟著下面設定的值改變，所以這裡我們需要單獨處理一下。介面回調，簡單暴力的方式。

在onTouchEvent的case MotionEvent.ACTION_UP中，得到最後設定的值

  listener.OnScroll(size);

然後就是對應的Activity了：

public class SecondActivity extends AppCompatActivity implements MyScrollView.OnScrollListener { private MyScrollView scrollView; private TextView txt; @Override protected void onCreate(Bundle savedInstanceState) {  super.onCreate(savedInstanceState);  setContentView(R.layout.activity_second);  initview(); } private void initview() {  scrollView = (MyScrollView) findViewById(R.id.scroll_view);  scrollView.setSize(1992);  scrollView.setListener(this);  txt = (TextView) findViewById(R.id.year_txt);  txt.setText("出生年份" + scrollView.getSize() + " (年)"); } @Override public void OnScroll(int size) {  txt.setText("出生年份" + size + " (年)"); }}

實現介面的方法，進行初始化，設定初始值，然後就是在介面的方法更新資料即可。

自訂view的第一篇：Android自訂View實現BMI指數條

自訂view的第二篇：Android自訂View仿微博運動積分動畫效果

OK，下一篇自訂View再見。

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援雲棲社區。