Android类似电商类的多级选择

Android类似电商类的多级选择

看到这个图大家就知道是什么了，很多电商APP中都是有这种商品的多级选择，我也有上网查找了一下，有很多办法可以做出这种效果而且效果更好，今天我就说说我这种

我觉得最简单的。其实就是两个ListView的联动。

通过点击左侧的ListView得到item的下标，把得到的下标传给右侧的ListView，右侧的ListView再根据下标进行加载数据。很简单对吧。

布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">
        <ListView
            android:id="@+id/list_one"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent"
            android:divider="@null"
            android:scrollbars="none"
            >
        </ListView>
    <ListView
        android:id="@+id/list_two"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="3"
        android:divider="@null"
        android:background="#ffff"
        android:scrollbars="none">
    </ListView>
</LinearLayout>

就是两个ListView而已。

MainACtivity:

   leftAdapter = new LeftAdapter(MainActivity.this,Menus, select);
        rightAdapter = new RightAdapter(MainActivity.this,Data, select);
        one.setAdapter(leftAdapter);
        two.setAdapter(rightAdapter);
        one.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                select=position;
                //因为选中左侧的菜单后背景颜色会变，所以每次点击都要刷新一下
                leftAdapter.notifyDataSetChanged();
                //用来确定选中的位置
                leftAdapter.setSelect(position);
                //用来给右侧传递左侧的下标
                rightAdapter.setSelect(position);
                two.setAdapter(rightAdapter);
            }
        });
        two.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                Toast.makeText(MainActivity.this,Data[select][position],Toast.LENGTH_SHORT).show();
            }
        });

MainActivity就是给ListVIew设置显示的数据，和传递下标，就是这么简单。

看一下LeftAdapter:

public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder holder;
        if (convertView == null) {
            convertView = inflate(context, R.layout.listview_item_one, null);
            holder = new ViewHolder();
            holder.tv = convertView.findViewById(R.id.item_one);
            convertView.setTag(holder);
        } else {
            holder = (ViewHolder) convertView.getTag();
        }
        LinearLayout.LayoutParams selectParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
        selectParams.setMargins(1,1,0,0);
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
        params.setMargins(1,0,1,0);
        if (position == select) {
            holder.tv.setBackgroundColor(Color.parseColor("#ffffff"));
            holder.tv.setLayoutParams(selectParams);
        } else {
            holder.tv.setBackgroundColor(Color.parseColor("#dedede"));
            holder.tv.setLayoutParams(params);
        }
        holder.tv.setText(mMenu[position]);
        return convertView;
    }

    public void setSelect(int index) {
        select = index;
    }

    private class ViewHolder {
        TextView tv;
    }

我这里继承的是baseAdapter,继承后实现几个必要的方法，这里我们就只关注getView这个方法。其中

  LinearLayout.LayoutParams selectParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
        selectParams.setMargins(1,1,0,0);
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
        params.setMargins(1,0,1,0);

这两个在这里是TextView告诉他父布局LinearLayout他想要的参数，setMargins是给左侧item设置偏移，如果不设置就会是这样

可以看到每个Item有间距，然后判断position的位置是否是选择的位置设置背景颜色。

RightAdapter和LeftAdapter是差不多一样的，就只是 设置显示的时候不一样：

  @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder viewHolder;
        if (convertView == null) {
            convertView = View.inflate(context, R.layout.listview_item_two, null);
            viewHolder = new ViewHolder();
            viewHolder.tv = convertView.findViewById(R.id.item_two);
            convertView.setTag(viewHolder);
        } else {
            viewHolder = (ViewHolder) convertView.getTag();
        }
        viewHolder.tv.setText(Data[select][position]);
        return convertView;
    }

    public void setSelect(int index) {
        this.select = index;
    }

    private class ViewHolder {
        TextView tv;
    }
}

他这里显示是左侧下标的数据

 viewHolder.tv.setText(Data[select][position]);

好了这就是listview的一个简单联动。