欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android实现网易Tab分类排序控件实现

程序员文章站 2022-07-21 15:20:42
先看看效果图: 1、xml布局引入

先看看效果图:

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事件,执行位置调整动画,并且在调整完毕后,进行新位置的设置

完整代码:https://github.com/ganchuanpu/sorttablayout.git

 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。