仿網易Tab分類排序控制項實現

1、XML佈局引入

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

2、設置數據源數據，也就是每個item的對應文本數據

//構造數據源，暫時僅支持String
List<String> data = new ArrayList<String>();
for (int i = 0; i < 20; i ++) {
    data.add("item" + i);
}
//設置數據源
vSortLayout.setShowData(data, 1);

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

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

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

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

未完善的自定義功能

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的方法邏輯根據配置參數區域的參數進行計算配置

@Override
protected void onLayout(boolean arg0, int arg1, int arg2, int arg3, int arg4) {
    
    final int childCount = getChildCount();
    
    int row = 0;
    int column = 0;
    int startWidth = 0;
    int startHeight = 0;
    
    for (int i = 0; i < childCount; i++) {
        View childeView = childList.get(i);
        row = i / 4;
        column = i % 4;
        startWidth = (int) ((column * (mRowWidth + 2 * mRowMagin) + mRowMagin) * mChildeItemSize);
        startHeight = (int) ((row * (mColumnHeight + 2 * mColumnMagin) + mColumnMagin) * mChildeItemSize);
        childeView.layout(startWidth ,startHeight ,(int)(startWidth + mRowWidth * mChildeItemSize),
                 (int)(startHeight + mColumnHeight * mChildeItemSize));
    }
    
}

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

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

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事件，執行位置調整動畫，並且在調整完畢後，進行新位置的設置

完整代碼：https://github.com/ganchuanpu/SortTabLayout.git