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

 更新时间:2017年03月27日 14:13:13   作者:ganchuanpu  
这篇文章主要为大家详细介绍了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

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

相关文章

  • Android Activity 与Service进行数据交互详解

    Android Activity 与Service进行数据交互详解

    这篇文章主要介绍了Android Activity 与Service进行数据交互的相关资料,在开发Android App的时候经常会使用这样的功能,需要的朋友可以参考下
    2016-10-10
  • 浅析Android代码质量管理

    浅析Android代码质量管理

    本篇文章给大家分享了Android代码质量管理的相关知识点以及重点分析,对此有兴趣的朋友可以参考学习下。
    2018-05-05
  • android选择视频文件上传到后台服务器

    android选择视频文件上传到后台服务器

    这篇文章主要介绍了android选择视频文件上传到后台服务器的相关资料,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • Android端使用Modbus协议的简单方法

    Android端使用Modbus协议的简单方法

    Modbus协议是全球第一个用于工业现场的总线协议,与外设交互可以采用串口通信,tcp等方式,这篇文章主要给大家介绍了关于Android端使用Modbus协议的简单方法,需要的朋友可以参考下
    2021-11-11
  • Android 听筒模式的具体实现实例

    Android 听筒模式的具体实现实例

    这篇文章主要介绍了Android 听筒模式的具体实现实例,有需要的朋友可以参考一下
    2013-12-12
  • Android TextView实现词组高亮的示例代码

    Android TextView实现词组高亮的示例代码

    本篇文章主要介绍了Android TextView实现词组高亮的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • Android Handler实现闪屏页倒计时代码

    Android Handler实现闪屏页倒计时代码

    这篇文章主要介绍了Android Handler实现闪屏页倒计时代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • Android实现文字滚动效果

    Android实现文字滚动效果

    这篇文章主要为大家详细介绍了Android实现文字滚动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • python gstreamer实现视频快进/快退/循环播放功能

    python gstreamer实现视频快进/快退/循环播放功能

    这篇文章主要介绍了python gstreamer 实现视频快进/快退/循环播放功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-03-03
  • Android打包上传AAR文件到Maven仓库的示例

    Android打包上传AAR文件到Maven仓库的示例

    这篇文章主要介绍了Android打包上传AAR文件到Maven仓库的示例,帮助大家更好的理解和学习使用Android开发,感兴趣的朋友可以了解下
    2021-03-03

最新评论