Android ---------- TabLayout 实战 (二) 仿京东商品详情页

1.效果图

2.原理：TabLayout提供了一个水平的布局用来展示 Tabs 作为一级标签导航；用横向布局的recycleview作为第二级标签导航。

3.添加依赖： compile 'com.android.support:design:27.+ ‘

4.布局文件：

　　（1）主容器布局

<android.support.design.widget.TabLayout

android:id="@+id/tablayout"

android:layout_width="match_parent"

android:layout_height="30dp"

app:tabTextAppearance="@style/MyTabLayoutTextAppearanceInverse"   // 设置标签的字体大小  在style文件里进行设置

app:tabIndicatorHeight="2dp"  // 设置便签下划线的高度（厚度）      不设置的话，默认大小就可以    设置为0dp就是不显示下划线

app:tabIndicatorColor="#007aff" // 设置标签下划线的颜色

app:tabSelectedTextColor="#007aff" // 设置选中标签的字体的颜色

app:tabTextColor="@android:color/darker_gray" /> //设置未选中标签的字体的颜色

 

<android.support.v4.view.ViewPager

     android:id="@+id/vpager"

　　　android:layout_width="match_parent"

　　　android:layout_height="200dp" />

　　（2）副容器布局

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/tv_tab"
        android:layout_height="30dp"
        android:layout_width="match_parent"
        />

    。。。。。。
    。。。。。。

</LinearLayout>
</ScrollView>

5.控制器部分代码：

　　（一）Tablayout 的控制器代码参考我之前的一篇 Android TabLayout 实战 (一)

　　（二）RecycleView 的控制器部分代码

RecyclerView mRecyclerView = (RecyclerView)view.findViewById(R.id.tv_tab);
LinearLayoutManager linearLayoutManager = new LinearLayoutManager(context);
                linearLayoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);
                mRecyclerView.setLayoutManager(linearLayoutManager);
                //设置适配器
                DataAdapter adapter = new DataAdapter();
                adapter.setOnItemClickListener(new OnRecyclerViewItemClickListener() {
                    @Override
                    public void onItemClick(View view, int position) {
                        。。。
                        。。。
                        adapter.notifyDataSetChanged();
                    }
                });
                mRecyclerView.setAdapter(adapter);

　　　　原理：为RecycleView添加监听事件，点击哪个标签获得position，从而刷新适配器。

6.Tips：因为博主的业务需求，二级导航标签是动态获取的数据，存在数据仅有一条的情况，这种情况就可以隐藏掉二级导航标签。