仿淘宝商品详情页TabLayout+ListView

第一次写博客，我是一名Android的小码农写代码也有三四年了。有点好玩的跟大家分享一下

项目对商品详情页改版有新需求。顶部是一个渐变的Title包括“宝贝”，“详情”，“推荐”三个文本，下边是一个竖向滑动的列表显示商品详情和推荐商品。要求两部分关联起来，也就是点横向的文本下边的列表能滑动到相应item，相反亦然。  

自然而然我就想到了 TabLayout + ListView实现（RecyclerView原理都是一样的）。

我贴出关键的代码：

1).向tabLayout中添加tab

for (int i = 0; i < 3; i++) {
    String text = null;
    switch (i) {
        case 0:
            text = "宝贝";
            break;
        case 1:
            text = "详情";
            break;
        case 2:
            text = "推荐";
            break;
    }
    SpannableStringBuilder textC = new SpannableStringBuilder(text);
    textC.setSpan(new ForegroundColorSpan(Color.BLACK), 0, text.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
    textC.setSpan(new AbsoluteSizeSpan(22, true), 0, text.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);

    tabLayout.addTab(tabLayout.newTab().setText(textC), i, i == 0);
}

2).添加tabLayout监听，选中一项后是listview滑动到相应的item。

这里需要注意的一点是，一种触发回调的是用户点击了tab，另一种是滑动listview利用反射触发的这个回调

tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
    @Override
    public void onTabSelected(final TabLayout.Tab tab) {

        if (isInv) {
            return;
        }
        listView.post(new Runnable() {
            @Override
            public void run() {

                int position = 0;
                switch (tab.getPosition()) {
                    case 0:
                        position = 0;
                        break;
                    case 1:
                        position = 1;
                        break;
                    case 2:
                        position = adapter.imgCount;
                        break;
                }

                listView.requestFocusFromTouch();//获取焦点
                  // 保存当前第一个可见的item的索引和偏移量
                 int height = CommonUtils.dip2px(ProductDetailActivity.this,
                        PreferencesUtils.getInt(ProductDetailActivity.this, AppConst.STATUS_BAR, 48));
                listView.setSelectionFromTop(position, height);
            }
        });
    }

    @Override
    public void onTabUnselected(TabLayout.Tab tab) {

    }

    @Override
    public void onTabReselected(TabLayout.Tab tab) {

    }
});

3）.listview滑动监听

/*
 * ListView滚动距离
 */
@Override
public void scrollYDistance(AbsListView view, int distance, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
    super.scrollYDistance(view, distance, firstVisibleItem, visibleItemCount, totalItemCount);

    //做通栏适配，title是覆盖在listview上面firstVisibleItem可能被title遮挡住不能显示，其实为第一个可见的item

    if (firstVisibleItem == 0 || firstVisibleItem == adapter.imgCount - 1) {
        if (listView.getChildAt(0).getBottom() < titleHeight) {
            return;
        }
    }
    
    RecommendProductBean item = (RecommendProductBean) adapter.getItem(firstVisibleItem);
    //0:商品详情图片;  1：推荐item;  2：商品详情title;  3：推荐位title
    if (distance < Enums.SCREEN_HEIGHT_TO_PX - 100) {
        if (currentIndex == 0) {
            return;
        }
        currentIndex = 0;
    } else {
        Logger.e("item.getItemType()....  " + item.getItemType());

        switch (item.getItemType()) {
            case 0:
            case 2:
                if (currentIndex == 1) {
                    return;
                }
                currentIndex = 1;
                break;
            case 1:
            case 3:
                if (currentIndex == 2) {
                    return;
                }
                currentIndex = 2;
                break;
            default:
                return;
        }
    }

    try {
        isInv = true;
        Class clz = tabLayout.getClass();
        Method animateToTab = clz.getDeclaredMethod("selectTab", new Class[]{TabLayout.Tab.class});
        animateToTab.setAccessible(true);
        animateToTab.invoke(tabLayout, new Object[]{tabLayout.getTabAt(currentIndex)});
        isInv = false;
    } catch (Exception e) {
        e.printStackTrace();
        isInv = false;
    }

}