客製化UI元件(2) Custom UI components- double thumbs seek bar

這次遇到的是比較棘手的,因為考慮到傳入值的關系,所以就使用了泛型類別,

泛型要注意的是轉換的介面,有沒有轉對型態。

這次客製化的是double thumbs的seek bar,

從網路上找到一個example拿來用,也依實際需求改了一下code

在這支code裡可以學的東西有滿多的,介紹一下吧!!

Basic Concept

一開始要有一個概念,在UI上的control不管是誰,都是用「畫」出來的,

所以這個class是繼承ImageView,主要實作2個method : onDraw() -> 呈現什麼在畫面上,  onTouchEvent()
->接event到自訂的listener

Implementation

canvas)``` 畫在canvas上,
  

 ```onTouchEvent(MotionEvent event)``` 把收進來的event,去對應到要做的事,

MotionEvent.ACTION_DOWN , MotionEvent.ACTION_MOVE, MotionEvent.ACTION_UP``` ** ** **自訂listener** RangeSeekBar.java 1.定義interface [![][1]][1] 2.宣告使用時就會是 OnRangeSeekBarChangeListener listener; 3.將listener與touchEvent結合,即為:
public boolean onTouchEvent(MotionEvent event){

     switch(event.getAction() & MotionEvent.ACTION_MASK){//這邊還沒弄懂mask的作用是什麼 

     case MotionEvent.ACTION_DOWN:
               ...
     case MotionEvent.ACTION_MOVE:
               ...
               listener.onRangeSeekBarValuesChanged(bar,minvalue,maxvalue); 
               break;
     case MotionEvent.ACTION_UP:
               ...
               listener.onStopRangeSeekBarValuesChanged(bar,minvalue,maxvalue); 
               break;
     ....
     }

4.定義listener的setter

     public void setOnRangeSeekBarChangeListener(OnRangeSeekBarChangeListener<T> 
listener){
          this.listener = listener;
     }

使用自定元件時,

1.外部呼叫使用的時後,

RangeSeekBar<Integer> rangeSeekBar;
rangeSeekBar = new RangeSeekBar<Integer>();
rangeSeekBar.setOnRangeSeekBarChangeListener(new OnRangeSeekBarChangeListener(){ 
     @Override
     public void onRangeSeekBarValuesChanged(){
     ...
     }

     @Override
     public voidonStopRangeSeekBarValuesChanged(){
     ...
     }
});