先看看效果圖：
1、XML布局引入
<com.net168.lib.SortTabLayout android:id="@+id/layout" android:layout_width="match_parent" android:layout_height="wrap_content" />
2、設置數據源數據，也就是每個item的對應文本數據
//構造數據源，暫時僅支持StringList<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的方法邏輯根據配置參數區域的參數進行計算配置
@Overrideprotected 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
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
