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

打賞

免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2022 CODEPRJ.COM