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：因為博主的業務需求，二級導航標簽是動態獲取的數據，存在數據僅有一條的情況，這種情況就可以隱藏掉二級導航標簽。