Android中ListView左右联动

效果图：
这里写图片描述
思路：
1左右是两个listView，左边显示类型，右边显示类型和内容

2左边控制右边
左边的条目点击事件中拿到左边点击的类型，循环右边的数据，
当判断左边类型和右边类型相等时，定位右边listView的位置
lvTest.setSelection(i);并且return；
代码：

//      类型listView的条目点击事件，定位右边列表
        lvType.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
//              左边类型
                String typeT=listType.get(position);
               for(int i = 0; i < list.size(); i++) {
//                 右边类型
                   String type=list.get(i).type;
                   if(typeT.equals(type)) {
//                     把定位listView的位置
                       lvTest.setSelection(i);
                       return;
                   }
               }
            }
        });

3右边控制左边
写右边listWiew的滑动监听setOnScrollListener，在onScroll方法中的参数firstVisibleItem显示第一个
条目的位置，拿到第一个条目对应的位置，传给类型的适配器，在类型适配器中判断选中
代码：

//      右边listView的滑动事件，点亮左边的选中
        lvTest.setOnScrollListener(new AbsListView.OnScrollListener() {
            @Override
            public void onScrollStateChanged(AbsListView view, int scrollState) {
            }
            @Override
            public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
//              三个参数
//              firstVisibleItem：当前能看见的第一个item的ID（从0开始）
//              visibleItemCount：当前可见的item总数
//              totalItemCount：列表中适配器总数量，也就是整个ListView中item总数
                Logger.t("111").d("firstVisibleItem"+firstVisibleItem);
                String type = list.get(firstVisibleItem).type;
                typeAdapter.select(type);
            }
        });

4右边的listView中显示分类
其实每一个条目都有分类，只是不是一个分类的时候隐藏了；
实现代码：
在适配器的getView方法中：判断上一条和当前条目的类型是否一致，一样就隐藏，不一样就显示

  //      当前条目类型
        String  type=goosList.get(position).type;

        if (position == 0) {
            viewHolder.tvType.setVisibility(View.VISIBLE);
        } else {
            //      上一个条目类型
            String nextType = goosList.get(position - 1).type;
            if (type.equals(nextType)) {
                viewHolder.tvType.setVisibility(View.GONE);
            } else {
                viewHolder.tvType.setVisibility(View.VISIBLE);
            }
        }

讲完了，下面贴出所有的代码：
MainActivity中

package com.zhh.listviewtest;

import android.app.Activity;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.AbsListView;
import android.widget.AdapterView;
import android.widget.ListView;
import android.widget.TextView;

import com.orhanobut.logger.Logger;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends Activity {
    private ListView lvTest;
    private ListView lvType;

    List<String> listType;
    List<MyContent> list;

//  类型适配器
    TypeAdapter  typeAdapter;
//  内容适配器
    SelectAdapter  selectAdapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        myOnclick();
    }
    private void initView() {
        lvType = findViewById(R.id.lvType);
        lvTest = findViewById(R.id.lvTest);

//      绑定类型
        listType = getDataType();
        typeAdapter = new TypeAdapter(listType,MainActivity.this);
        lvType.setAdapter(typeAdapter);

//      绑定内容
        list = getData();
        selectAdapter = new SelectAdapter(list,MainActivity.this);
        lvTest.setAdapter(selectAdapter);


    }
    private void myOnclick() {
//      类型listView的条目点击事件，定位右边列表
        lvType.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
//              左边类型
                String typeT=listType.get(position);
               for(int i = 0; i < list.size(); i++) {
//                 右边类型
                   String type=list.get(i).type;
                   if(typeT.equals(type)) {
//                     把定位listView的位置
                       lvTest.setSelection(i);
                       return;
                   }
               }
            }
        });
//      右边listView的滑动事件，点亮左边的选中
        lvTest.setOnScrollListener(new AbsListView.OnScrollListener() {
            @Override
            public void onScrollStateChanged(AbsListView view, int scrollState) {
            }
            @Override
            public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
//              三个参数
//              firstVisibleItem：当前能看见的第一个item的ID（从0开始）
//              visibleItemCount：当前可见的item总数
//              totalItemCount：列表中适配器总数量，也就是整个ListView中item总数
                Logger.t("111").d("firstVisibleItem"+firstVisibleItem);
                String type = list.get(firstVisibleItem).type;
                typeAdapter.select(type);
            }
        });

    }
    private List<MyContent> getData(){
        List<MyContent>list = new ArrayList<>();
       for(int i = 0; i < 50; i++) {
           MyContent myContent = new MyContent();
           myContent.name="内容"+i;
           if(i<=10) {
               myContent.type="类型0";
           }
           else if(i>10&&i<=20) {
               myContent.type="类型1";
           }
           else if(i>20&&i<=30) {
               myContent.type="类型2";
           }
           else if(i>30&&i<=40) {
               myContent.type="类型3";
           }
           else if(i>40&&i<=50) {
               myContent.type="类型4";
           }
           else if(i>50&&i<=100) {
               myContent.type="类型5";
           }
           list.add(myContent);
       }
        return list;
    }
    private List<String> getDataType(){
        List<String>list = new ArrayList<>();
        for(int i = 0; i < 10; i++) {
            list.add("类型"+i);
        }
        return list;
    }

}

MainActivity的布局文件activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical"
    >
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    >
    <ListView
        android:id="@+id/lvType"
        android:layout_width="100dp"
        android:layout_height="match_parent">

    </ListView>

    <ListView
        android:id="@+id/lvTest"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </ListView>
</LinearLayout>
</LinearLayout>

左边类型列表的适配器TypeAdapter

package com.zhh.listviewtest;

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

import java.util.List;

/**
 * Created by 16838 on 2018/7/10.
 */
public class TypeAdapter extends BaseAdapter{
    private List<String> goosList;
    private Context context;
    private String typeW="";
    public TypeAdapter(List<String> goosList, Context context){
        this.goosList=goosList;
        this.context=context;
    }
    public void select(String typeW){
        this.typeW=typeW;
        notifyDataSetChanged();
    }

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

    @Override
    public Object getItem(int position) {
        return goosList.get(position);
    }

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

    @Override
    public View getView(final int position, View convertView, ViewGroup parent) {
        ViewHolder viewHolder=null;
        if(convertView==null) {
            viewHolder=new ViewHolder();
            convertView=LayoutInflater.from(context).inflate(R.layout.item_type_goods, null);
            viewHolder.tvName =convertView.findViewById(R.id.tvName);

            convertView.setTag(viewHolder);
        }else{
            viewHolder= (ViewHolder) convertView.getTag();
        }
        viewHolder.tvName.setText(goosList.get(position)+ "");

        if(typeW.equals(goosList.get(position))) {
//          点亮
            viewHolder.tvName.setTextColor(Color.parseColor("#FF0033"));

        }else{
            viewHolder.tvName.setTextColor(Color.parseColor("#666666"));
        }


        return convertView;
    }
    //  适配器中的GridView缓存类
    class ViewHolder {
        //      商品名称
        TextView tvName;

    }






}

TypeAdapter对应的条目布局item_type_goods.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:padding="10dp"
    android:background="#FF99CC"
    android:layout_marginTop="1dp"
    android:gravity="center_vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"

    >

    <TextView
        android:id="@+id/tvName"
        android:textSize="16sp"
        android:text="类型"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />



</LinearLayout>

右边列表对应的适配器SelectAdapter

package com.zhh.listviewtest;

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 java.util.List;

/**
 * Created by 16838 on 2018/7/10.
 */
public class SelectAdapter extends BaseAdapter{


    private List<MyContent> goosList;
    private Context context;
    public SelectAdapter(List<MyContent> goosList, Context context){
        this.goosList=goosList;
        this.context=context;

    }


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

    @Override
    public Object getItem(int position) {
        return goosList.get(position);
    }

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

    @Override
    public View getView(final int position, View convertView, ViewGroup parent) {
        ViewHolder viewHolder=null;
        if(convertView==null) {
            viewHolder=new ViewHolder();
            convertView=LayoutInflater.from(context).inflate(R.layout.item_select_goods, null);
            viewHolder.tvName =convertView.findViewById(R.id.tvName);
            viewHolder.tvType =convertView.findViewById(R.id.tvType);
            convertView.setTag(viewHolder);
        }else{
            viewHolder= (ViewHolder) convertView.getTag();
        }
        viewHolder.tvName.setText(goosList.get(position).name+ "");
        viewHolder.tvType.setText(goosList.get(position).type+"");


//      当前条目类型
        String  type=goosList.get(position).type;

        if (position == 0) {
            viewHolder.tvType.setVisibility(View.VISIBLE);
        } else {
            //      上一个条目类型
            String nextType = goosList.get(position - 1).type;
            if (type.equals(nextType)) {
                viewHolder.tvType.setVisibility(View.GONE);
            } else {
                viewHolder.tvType.setVisibility(View.VISIBLE);
            }
        }



        return convertView;
    }
    //  适配器中的GridView缓存类
    class ViewHolder {
        //      商品名称
        TextView tvName;
        TextView tvType;

    }






}

SelectAdapter对应的布局item_select_goods

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:background="#fff"
    android:layout_marginTop="1dp"
    android:gravity="center_vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <TextView
        android:id="@+id/tvType"
        android:textSize="16sp"
        android:text="类型"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#66CCFF"
        android:gravity="center_vertical"
        android:paddingLeft="20dp"
        />
    <TextView
        android:id="@+id/tvName"
        android:textSize="16sp"
        android:text="商品名"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:gravity="center_vertical"
        android:paddingLeft="20dp"
        />



</LinearLayout>

对应的实体类MyContent：

package com.zhh.listviewtest;

/**
 * Created by 16838 on 2018/7/11.
 */
public class MyContent {
    public String name;
    public String type;


}

源码下载：
TestLayout —- listviewtest
https://download.csdn.net/download/zhaihaohao1/10536934

Android中ListView左右联动

猜你喜欢