Android開源系列：仿網易Tab分類排序控制項實現

標籤：

前言

產品：網易新聞那個Tab排序好帥。

開發：哦~

然後這個東東在幾天后就出現了。。。。。

（PS:差不多一年沒回來寫部落格了~~~~(>_<)~~~~，順便把名字從 enjoy風鈴 修改為 碼農叔叔）

 

 

使用方法

1、XML布局引入

<com.net168.lib.SortTabLayout     android:id="@+id/layout"    android:layout_width="match_parent"    android:layout_height="wrap_content"    />

2、設定資料來源資料，也就是每個item的對應文本資料

1 //構造資料來源，暫時僅支援String2 List<String> data = new ArrayList<String>();3 for (int i = 0; i < 20; i ++) {4     data.add("item" + i);5 }6 //設定資料來源7 vSortLayout.setShowData(data, 1);

3、設定監聽，用於互動點擊和長按的事件

 1 vSortLayout.setOnSelectListener(new onSelectListener() { 2     //點擊事件，點擊Tab布局裡面的item觸發 3     @Override 4     public void onSelect(View v, int index) { 5         Toast.makeText(MainActivity.this, "你點擊了item ，內容為：" + ((TextView)v).getText(), Toast.LENGTH_SHORT).show(); 6     } 7     //長按事件，長按Tab布局裡面的item觸發 8     @Override 9     public void onLongSelect(View v) {10         Toast.makeText(MainActivity.this, "長按Tab，開始排列", Toast.LENGTH_SHORT).show();11     }12 });

4、開始排序和結束排序的介面

1 //如果參數是true的話，開始排序，也就是可以拖動2 vSortLayout.setIsMoveList(true);3 //結束排序，並且會返回選擇tab的當前新位置4 vSortLayout.getAndFinishSortData();

 5、基本沒有其他的了~

 

未完善的自訂功能

1、現在僅僅是支援String，並且布局也無法自訂，後續可能會完善Tab的item的View的自訂輸入

2、現在布局的行數和間距由硬代碼控制，並沒有形成簡便易懂的介面暴漏

PS:調試間距的方法，主要調試下列幾個參數

/** * 配置參數地區 * mMaxRow ： 每行的個數 * Magin Width Tab的間隔和本身的寬度的佔比 * 例如mMaxRow = 4，則寬度會由此策略分配 * |Magin|View|Magin|View|Magin|View|Magin|View|Magin| * 記控制項寬度為這麼分配 ： 總寬度 = 5 * Magin + 4 * View， 而 Magin ： View = mRowMagin ： mRowWidth * 可以推匯出各個控制項的寬度，高度也如此計算 */private final int mMaxRow = 4;private final int mRowMagin = 5;private final int mRowWidth = 26;private final int mColumnMagin = 4;private final int mColumnHeight = 10;

3、復原不流暢，後期可以引入Scroller來控制緩慢復原

原理實現

1、布局item排序採用基於ViewGroup的自訂布局，在onLayout的方法邏輯根據配置參數地區的參數進行計算配置

 1 @Override 2 protected void onLayout(boolean arg0, int arg1, int arg2, int arg3, int arg4) { 3      4     final int childCount = getChildCount(); 5      6     int row = 0; 7     int column = 0; 8     int startWidth = 0; 9     int startHeight = 0;10     11     for (int i = 0; i < childCount; i++) {12         View childeView = childList.get(i);13         row = i / 4;14         column = i % 4;15         startWidth = (int) ((column * (mRowWidth + 2 * mRowMagin) + mRowMagin) * mChildeItemSize);16         startHeight = (int) ((row * (mColumnHeight + 2 * mColumnMagin) + mColumnMagin) * mChildeItemSize);17         childeView.layout(startWidth ,startHeight ,(int)(startWidth + mRowWidth * mChildeItemSize),18                  (int)(startHeight + mColumnHeight * mChildeItemSize));19     }20     21 }

2、滑動模組部分，在onTouchEvent裡面根據座標的捕獲，有座標分析出對應的子Item，利用View.layout()方法讓拖動的View跟隨手指移動，參加代碼

 1 private void moveChildView(float x, float y) { 2     if (mMoveChildView != null) { 3         int left = (int) (((mChildIndex % 4) * (mRowWidth + 2 * mRowMagin) + mRowMagin) * mChildeItemSize); 4         int top = (int) (((mChildIndex / 4) * (mColumnHeight + 2 * mColumnMagin) + mColumnMagin) * mChildeItemSize); 5         int width = (int) (left + mRowWidth * mChildeItemSize); 6         int heigth = (int) (top + mColumnHeight * mChildeItemSize); 7         int moveX = (int) (x - beginX); 8         int moveY = (int) (y - beginY); 9         mMoveChildView.layout(left + moveX, top + moveY, width + moveX, heigth + moveY);10         mMoveChildView.invalidate();11     }12 }

3、動畫模組，由於考慮低版本和不想引入過多的開源庫，故採用普通的動畫實現
具體參見beginAnimation(final int start,final int end, boolean forward)方法。

4、整體流程

a、Touch的down事件，捕捉當前的x、y資料，計算出被移動的View的所對應index，並且其餘view開始抖動動畫

b、move事件，將被選中的view根據x、y利用layout方法進行跟隨手指移動

c、up事件，執行位置調整動畫，並且在調整完畢後，進行新位置的設定

 

結語

因為懶，所以懶~

控制項是為了需求而寫，並沒有開源那般易於擴充，後續有時間會進行最佳化

github地址：https://github.com/CodeFarmerUncle168/SortTabLayout

 

碼農叔叔（enjoy風鈴）
出處：http://www.cnblogs.com/net168/
本文著作權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文串連，否則下次不給你轉載了

Android開源系列：仿網易Tab分類排序控制項實現