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();

4000
//用来确定选中的位置
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的一个简单联动。