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

1.效果图

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)副容器布局


    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"
        />

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


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:因为博主的业务需求,二级导航标签是动态获取的数据,存在数据仅有一条的情况,这种情况就可以隐藏掉二级导航标签。

转载于:https://www.cnblogs.com/apeandcat/p/8622394.html

你可能感兴趣的:(Android ---------- TabLayout 实战 (二) 仿京东商品详情页)