温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

怎么在Android项目中实现一个Tab分类排序控件

发布时间:2020-11-30 17:40:34 来源:亿速云 阅读:280 作者:Leah 栏目:移动开发

怎么在Android项目中实现一个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事件,执行位置调整动画,并且在调整完毕后,进行新位置的设置

看完上述内容,你们掌握怎么在Android项目中实现一个Tab分类排序控件的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注亿速云行业资讯频道,感谢各位的阅读!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI