Android ListView或RecyclerView+TabLayout 实现联动效果

前几天项目里面有用到商品详情展示，需要实现ListView滑动切换不同的Tab,项目里面我用的是RecyclerView实现的（原理和listView一样）,下面就用list View写一个简单的联动功能。

一   思路其实很简单，我就不一步一步详细介绍了，直接看代码吧。

 1 xml布局：

2. listview的适配器：

package com.example.yangai00.yy_tab_xiangshangtuodong.tab_listview_shi_xian_tao_bao_xiang_qing;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;

import com.example.yangai00.yy_tab_xiangshangtuodong.R;

import java.util.List;

/**
 * Created by yangai00 on 2018/7/24.
 */

public class MyLV_Adaptes extends BaseAdapter {
    private List list;
    private Context context;


    public MyLV_Adaptes(List list, Context context) {
        this.list = list;
        this.context = context;
    }


    @Override
    public int getCount() {
        return list.size();
    }

    @Override
    public Object getItem(int i) {
        return null;
    }

    @Override
    public long getItemId(int i) {
        return 0;
    }

    @Override
    public View getView(int i, View view, ViewGroup viewGroup) {
        ViewHolder holder = null;
        if (view == null) {
            view = LayoutInflater.from(context).inflate(R.layout.my_listview, null);
            holder = new ViewHolder(view);
            view.setTag(holder);
        } else {
            holder = (ViewHolder) view.getTag();
        }
        holder.mLV_Name.setText(list.get(i));
        return view;
    }

    public static class ViewHolder {
        public View rootView;
        public TextView mLV_Name;

        public ViewHolder(View rootView) {
            this.rootView = rootView;
            this.mLV_Name = (TextView) rootView.findViewById(R.id.mLV_Name);
        }

    }
}

3.   MainActivity代码：

package com.example.yangai00.yy_tab_xiangshangtuodong.tab_listview_shi_xian_tao_bao_xiang_qing;
import android.graphics.Color;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v7.app.AppCompatActivity;
import android.text.SpannableStringBuilder;
import android.text.Spanned;
import android.text.style.AbsoluteSizeSpan;
import android.text.style.ForegroundColorSpan;
import android.view.View;
import android.widget.AbsListView;
import android.widget.ListView;
import com.example.yangai00.yy_tab_xiangshangtuodong.R;
import java.lang.reflect.Field;
import java.util.ArrayList;
import java.util.List;
import butterknife.BindView;
import butterknife.ButterKnife;
public class Main2Activity extends AppCompatActivity implements AbsListView.OnScrollListener {
    @BindView(R.id.mTab2)
    TabLayout mTab2;
    @BindView(R.id.mLV)
    ListView mLV;
    private List list;
    private MyLV_Adaptes myLV_adaptes;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);
        ButterKnife.bind(this);
        //往TabLayout里面添加Tab
        initadd();
        //listView的数据
        initData();
        //监听
        initJianTing();
    }

    private void initJianTing() {
       //listview的监听，实现AbsListView.OnScrollListener接口，重写onScrollStateChanged（）和onScroll 方法
        mLV.setOnScrollListener(this);
       //通过for获取到mTab2里面的每一个tab
        for (int i = 0; i < mTab2.getTabCount(); i++) {
            TabLayout.Tab tabAt = mTab2.getTabAt(i);
            if (tabAt == null) {
             //通过tabAt获取此类的字节码
                Class aClass = tabAt.getClass();
                try {
                    //通过getDeclaredField方法获取此类的所有成员变量，基类除外；
                    Field mField = aClass.getDeclaredField("mView");
                    //注意此setAccessible(true);方法必须调用
                    mField.setAccessible(true);
                    //获取对象
                    View view = (View) mField.get(tabAt);
                   //判空
                    if (view == null)
                        return;
                    view.setTag(i);
                    //监听
                    view.setOnClickListener(new View.OnClickListener() {

                        private int id;
                        //根据吗mTab2的索引和ListView进行配对；
                        @Override
                        public void onClick(View view) {
                            id = (int) view.getTag();
                            switch (id) {
                                case 0:
                                    mLV.setSelection(0);
                                    break;
                                case 1:
                                    mLV.setSelection(50);
                                    break;
                                case 2:
                                    mLV.setSelection(100);
                                    break;
                            }
                        }
                    });


                } catch (NoSuchFieldException e) {
                    e.printStackTrace();
                } catch (IllegalAccessException e) {
                    e.printStackTrace();
                }
            }
        }
    }

    private void initData() {
        list = new ArrayList<>();
        for (int i = 0; i < 150; i++) {
            list.add("我想回家" + i);
        }
       //listView的Adaptes
        myLV_adaptes = new MyLV_Adaptes(list, this);
        mLV.setAdapter(myLV_adaptes);
    }

    private void initadd() {
        for (int i = 0; i < 3; i++) {
            String tabitem = null;
            switch (i) {
                case 0:
                    tabitem = "详情1";
                    break;
                case 1:
                    tabitem = "详情2";
                    break;
                case 2:
                    tabitem = "详情3";
                    break;
            }
           //通过new SpannableStringBuilder添加tab的名称
            SpannableStringBuilder mTabitem= new SpannableStringBuilder(tabitem);
            mTabitem.setSpan(new ForegroundColorSpan(Color.BLACK), 0, tabitem.length(),     Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
            mTabitem.setSpan(new AbsoluteSizeSpan(22, true), 0, tabitem.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
            mTab2.addTab(mTab2.newTab().setText(mTabitem), i, i == 0);
        }
    }
//在onScroll的方法里获取到切换的索引并赋值给pop;
    private int pop;
//通过list View的滑动事件，来匹配吗mTab2的索引并刷新数据
    @Override
    public void onScrollStateChanged(AbsListView absListView, int i) {
        switch (pop) {
            case 0:
                TabLayout.Tab tabAt1 = mTab2.getTabAt(0);
                tabAt1.select();
                break;
            case 30:
                TabLayout.Tab tabAt2 = mTab2.getTabAt(1);
                tabAt2.select();
                break;
            case 60:
                TabLayout.Tab tabAt3 = mTab2.getTabAt(2);
                tabAt3.select();
                break;
            case 90:
                TabLayout.Tab tabAt4 = mTab2.getTabAt(0);
                tabAt4.select();
                break;
            case 120:
                TabLayout.Tab tabAt5 = mTab2.getTabAt(2);
                tabAt5.select();
                break;
        }

    }
//通过滑动并记录要切换的索引，
    @Override
    public void onScroll(AbsListView absListView, int i, int i1, int i2) {
        switch (i) {
            case 0:
                pop = 0;
                break;
            case 30:
                pop = 30;
                break;
            case 60:
                pop = 60;
                break;
            case 90:
                pop = 90;
                break;
            case 120:
                pop = 120;
                break;
        }
    }
}

4.  listview的适配器引入的布局：

    



  至此一个简单的联动效果就实现了。