TabLayout与RecyclerView的联合使用(不使用ViewPager)

来源:互联网 发布:网络黄金通缉人名单 编辑:程序博客网 时间:2024/06/15 21:11

前言:TabLayout是Google官方的design-support jar包中的一个组件,一般情况下是与ViewPager共同使用:通过setupWithViewPager将TabLayout与ViewPager关联即可滑动切换,今天说的是TabLayout与RecyclerView的使用,与ViewPager半毛钱关系都没有。

既然不使用ViewPager那么就不会滑动切换了,我项目中确实是这样做的,完全没必要滑动切换啊徒增N++代码....


进入正题:

先上图

1.布局搭建:

<span style="font-size:14px;"><RelativeLayout    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="rain.tablayoutdemo.MainActivity">    <android.support.design.widget.TabLayout        android:id="@+id/tlTabTitle"        android:layout_width="match_parent"        android:layout_height="40dp"        android:layout_marginBottom="10dp"        app:tabIndicatorColor="@color/titleBg"        app:tabMode="fixed"        app:tabSelectedTextColor="@color/titleBg"/>    <android.support.v7.widget.RecyclerView        android:id="@+id/recyclerView"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_below="@+id/tlTabTitle">    </android.support.v7.widget.RecyclerView></RelativeLayout></span>


2.设置Tab

<span style="font-size:14px;">private String titles[] = new String[]{"Android", "IOS", "PHP", "Python", "Html"};    /**     * 设置导航标题     */    private void initTab() {        mTitles.setOnTabSelectedListener(tabSelectedListener);        mTitles.addTab(mTitles.newTab().setText(titles[0]).setTag(Constans.TAG_ANDROID));        mTitles.addTab(mTitles.newTab().setText(titles[1]).setTag(Constans.TAG_IOS));        mTitles.addTab(mTitles.newTab().setText(titles[2]).setTag(Constans.TAG_PHP));        mTitles.addTab(mTitles.newTab().setText(titles[3]).setTag(Constans.TAG_PYTHON));        mTitles.addTab(mTitles.newTab().setText(titles[4]).setTag(Constans.TAG_HTML));    }</span>

重写TabLayout的监听事件
<span style="font-size:14px;">    /**     * 标题选择监听     */    private TabLayout.OnTabSelectedListener tabSelectedListener = new TabLayout.OnTabSelectedListener() {        @Override        public void onTabSelected(TabLayout.Tab tab) {            mListStyle = (int) tab.getTag();            mRecyclerView.setLayoutManager(new LinearLayoutManager(MainActivity.this, LinearLayoutManager.VERTICAL, false));            mRecyclerView.setAdapter(new mRecyclerViewAdapter(mListStyle, images,MainActivity.this));            mRecyclerView.getAdapter().notifyDataSetChanged();        }        @Override        public void onTabUnselected(TabLayout.Tab tab) {        }        @Override        public void onTabReselected(TabLayout.Tab tab) {        }    };</span>

3. 这里增加了不同类别的图片显示使用了Glide..
具体操作在RecyclerView 适配器.

<span style="font-size:14px;">    private List<String> images = new ArrayList<>();    private void initView() {        images.add(0, "http://i2.buimg.com/574168/3a58750867fa9b72.jpg");        images.add(1, "http://i2.buimg.com/574168/de9245f2499a9064.png");        images.add(2, "http://i2.buimg.com/574168/08b84aa22853082f.jpg");        images.add(3, "http://i2.buimg.com/574168/f4e415b3a3f4d1a5.jpg");        images.add(4, "http://i2.buimg.com/574168/24776f28e89758a9.jpg");        mTitles = (TabLayout) findViewById(R.id.tlTabTitle);       </span> mRecyclerView = (RecyclerView) findViewById(R.id.recyclerView);    }

4.RecyclerView 适配器

<span style="font-size:14px;">public class mRecyclerViewAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {    private int mListStyle;    private Context mContext;    private List<String> mImages = new ArrayList<>();    private int size = 20;    private static final int TYPE_ANDROID = 0;    private static final int TYPE_IOS = 1;    private static final int TYPE_PHP = 2;    private static final int TYPE_PYTHON = 3;    private static final int TYPE_HTML = 4;    private static final int TYPE_NODATA = 5;    private static final int TYPE_MORE = 6;    public mRecyclerViewAdapter(int mListStyle, List<String> images, Context context) {        this.mListStyle = mListStyle;        this.mContext = context;        this.mImages = images;    }    @Override    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {        final LayoutInflater inflater = LayoutInflater.from(mContext);        if (viewType == TYPE_ANDROID || viewType == TYPE_IOS ||                viewType == TYPE_PHP || viewType == TYPE_PYTHON || viewType == TYPE_HTML)            return new ItemViewHolder(inflater.inflate(R.layout.recyclerview_item, parent, false));        if (viewType == TYPE_NODATA)            return new NoDataViewHolder(inflater.inflate(R.layout.recyclerview_item_nodata, parent, false));        return new MoreOrderViewHolder(inflater.inflate(R.layout.recyclerview_item_more, parent, false));    }    @Override    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {        if (holder instanceof ItemViewHolder)            ((ItemViewHolder) holder).showData();    }    @Override    public int getItemViewType(int position) {        if (size == 0 ) return TYPE_NODATA;        if (mListStyle == Constans.TAG_ANDROID) return TYPE_ANDROID;        if (mListStyle == Constans.TAG_IOS) return TYPE_IOS;        if (mListStyle == Constans.TAG_PHP) return TYPE_PHP;        if (mListStyle == Constans.TAG_PYTHON) return TYPE_PYTHON;        if (mListStyle == Constans.TAG_HTML) return TYPE_HTML;        return TYPE_NODATA;    }    @Override    public int getItemCount() {        if (size == 0) return 1;        return 20;    }    private class ItemViewHolder extends RecyclerView.ViewHolder {        private final ImageView mImage;        private final TextView mContent;        public ItemViewHolder(View view) {            super(view);            mImage = (ImageView) view.findViewById(R.id.imvImageView);            mContent = (TextView) view.findViewById(R.id.txvContent);        }        public void showData() {            switch (mListStyle) {                case Constans.TAG_ANDROID:                    ImageCacheManager.show(mContext,mImages.get(0),mImage);                    mContent.setText("Android");                    break;                case Constans.TAG_IOS:                    ImageCacheManager.show(mContext,mImages.get(1),mImage);                    mContent.setText("IOS");                    break;                case Constans.TAG_PHP:                    ImageCacheManager.show(mContext,mImages.get(2),mImage);                    mContent.setText("PHP");                    break;                case Constans.TAG_PYTHON:                    ImageCacheManager.show(mContext,mImages.get(3),mImage);                    mContent.setText("Python");                    break;                case Constans.TAG_HTML:                    ImageCacheManager.show(mContext,mImages.get(4),mImage);                    mContent.setText("Html");                    break;            }        }    }    private class NoDataViewHolder extends RecyclerView.ViewHolder {        public NoDataViewHolder(View view) {            super(view);        }    }    private class MoreOrderViewHolder extends RecyclerView.ViewHolder {        public MoreOrderViewHolder(View view) {            super(view);        }    }}</span>



这里以展示不同类型的Item为例,代码很简单,不做过多讲解...

关于Glide使用,这里我写了一个帮助类,ImageCacheManager ,不管使用Glide还是Picasso简单修改即可使用(详见代码)


源码下载地址

最后:这是我个人搭建的博客,欢迎访问... 我的博客链接





0 0
原创粉丝点击