先看看效果图:
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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程小技巧。
总结以上是内存溢出为你收集整理的Android实现网易Tab分类排序控件实现全部内容,希望文章能够帮你解决Android实现网易Tab分类排序控件实现所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)