23.商品列表（TabLayout的使用）

来源：互联网发布：linux下mysql启动失败编辑：程序博客网时间：2024/05/23 17:05

实现步骤：

1.首先加入dependence依赖（这个需要根据你自己的appcompent的版本来导入，比如

compile 'com.android.support:appcompat-v7:23.2.0'

），就要导入23.2.0的tablayout的架包以及在布局中使用TabLayout

compile 'com.android.support:design:23.2.0'

*********************不能用上面的依赖，会使得布局文件出现显示异常，不会报错，但是会有奇怪的东西显示，应该用下面的版本，要两者版本相同

compile 'com.android.support:design:23.0.1'compile 'com.android.support:appcompat-v7:23.0.1'

2.编写含有TabLayout的布局文件，然后在Activity中加载这个布局，然后初始化TabLayout,并且赋值

TabLayout布局页面：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:orientation="vertical"    android:layout_width="match_parent"    android:layout_height="match_parent">    <zuo.com.ui.widget.ByToolBar        android:id="@+id/tool_bar"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:background="?attr/colorPrimary"        android:minHeight="?attr/actionBarSize"        app:isShowSearchView="false"        app:contentInsetEnd="56dp"        app:title="商品列表"/>    <android.support.design.widget.TabLayout        android:id="@+id/tab_layout"        android:layout_width="match_parent"        android:layout_height="wrap_content"        style="@style/customTabLayout"        app:tabGravity="fill"        app:tabMode="fixed"        >    </android.support.design.widget.TabLayout><!--显示在tablayout下面的文字-->    <LinearLayout        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:minHeight="30dp"        android:gravity="center_vertical"        android:padding="5dp"        android:background="@color/material_yellow">        <TextView            android:id="@+id/txt_summary"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:textColor="@color/black"/>    </LinearLayout>    <!--下面就是下拉刷新和recyclerview-->    <com.cjj.MaterialRefreshLayout        android:id="@+id/refresh_layout"        android:layout_width="match_parent"        android:layout_height="match_parent"        app:overlay="false"        app:wave_show="false"        app:wave_color="#90ffffff"        app:progress_colors="@array/material_colors"        app:wave_height_type="higher"        >        <android.support.v7.widget.RecyclerView            android:id="@+id/recycler_view"            android:layout_width="match_parent"            android:layout_height="match_parent">        </android.support.v7.widget.RecyclerView>    </com.cjj.MaterialRefreshLayout></LinearLayout>

在style中tablayout的样式：

<!--TabLayout的样式-->    <style name="customTabLayout" parent="Widget.Design.TabLayout">        <!--<item name="tabMaxWidth">@dimen/tab_max_width</item>-->        <item name="tabIndicatorColor">#eb4f38</item>        <item name="tabIndicatorHeight">2dp</item>        <item name="tabPaddingStart">12dp</item>        <item name="tabPaddingEnd">12dp</item>        <item name="tabBackground">@color/white</item>        <item name="tabTextAppearance">@style/customTabTextAppearance</item>        <item name="tabSelectedTextColor">#eb4f38</item>    </style>    <style name="customTabTextAppearance" parent="TextAppearance.Design.Tab">        <item name="android:textSize">14sp</item>        <item name="android:textColor">@color/black</item>        <item name="textAllCaps">true</item>    </style>

3.在Activity中使用tablayout:

public class TabListActivity extends AppCompatActivity {    private TabLayout tabLayout;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.layout_tab_list_activity);        tabLayout= (TabLayout) findViewById(R.id.tab_layout);        initTab();    }    private void initTab(){           TabLayout.Tab tab=tabLayout.newTab();            tab.setText("默认");        tabLayout.addTab(tab);         tab=tabLayout.newTab();        tab.setText("价格");        tabLayout.addTab(tab);         tab=tabLayout.newTab();        tab.setText("销量");        tabLayout.addTab(tab);    }}

4.在recyclerview中运用以前的技术，显示数据

5.******************根据tablayout的点击事件，不同的点击事件可以获取不同的值，然后根据不同的值，传入到recycerview的adapter中，执行相应的操作,代码如下：

public class TabListActivity extends AppCompatActivity implements View.OnClickListener, TabLayout.OnTabSelectedListener {    private int campaignId=0;    private int orderBy=0;    private int curPage=1;    private int pageSize=10;    private OkHttpHelper httpHelper=OkHttpHelper.getInstance();    private TabLayoutBean tabLayoutBean;    private TabLayout tabLayout;    private Toolbar toolbar;   private RecyclerView recyclerView;    private TabLayoutAdapter tabLayoutAdapter;    private TextView textView;    private MaterialRefreshLayout materialRefreshLayout;    //切换tablayout时候，需要标记的状态    public static final int TAG_DEFAULT=0;    public static final int TAG_SALE=1;    public static final int TAG_PRICE=2;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.layout_tab_list_activity);        tabLayout= (TabLayout) findViewById(R.id.tab_layout);        toolbar= (Toolbar) findViewById(R.id.toolbar);        recyclerView= (RecyclerView) findViewById(R.id.recycler_view);        textView= (TextView) findViewById(R.id.txt_summary);        materialRefreshLayout= (MaterialRefreshLayout) findViewById(R.id.refresh_layout);        toolbar.setNavigationOnClickListener(this);        initIntent();        initTab();        initTabLayoutData();        initMaterialLayout();    }    //抓取homefragment传来的Intent数据    private void initIntent(){        Intent intent=getIntent();        Bundle bundle=intent.getExtras();        //campaignId=bundle.getInt("ID")-10;      //  Log.d("123123",bundle.getInt("ID")+"");        if(bundle.getInt("ID")>10){            campaignId=bundle.getInt("ID")-10;        }else{            campaignId=bundle.getInt("ID");        }    }    private void initTab(){           TabLayout.Tab tab=tabLayout.newTab();            tab.setText("默认");        tab.setTag(TAG_DEFAULT);        tabLayout.addTab(tab);         tab=tabLayout.newTab();        tab.setText("销量");        tab.setTag(TAG_SALE);        tabLayout.addTab(tab);         tab=tabLayout.newTab();        tab.setText("价格");        tab.setTag(TAG_PRICE);        tabLayout.addTab(tab);        tabLayout.setOnTabSelectedListener(this);    }    @Override    public void onTabSelected(TabLayout.Tab tab) {        orderBy = (int) tab.getTag();        initTabLayoutData();    }    @Override    public void onTabUnselected(TabLayout.Tab tab) {    }    @Override    public void onTabReselected(TabLayout.Tab tab) {    }

效果图：

0 0