PopupWindow+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="vertical"
>
<!--扩展的view-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FFF"
android:padding="10dp"
>

<TextView
android:id="@+id/home_popup_tv_advice_location"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#fff"
android:text="text"
/>

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:background="#fff"
android:text="text"
/>
</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:baselineAligned="false"
android:orientation="horizontal"
>
<!-- 左边的一级联动 -->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="2"
android:background="@color/silveryGrey"
>

<ListView
android:id="@+id/home_pop_listview_left"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:divider="#30000000"
android:dividerHeight="1dp"
android:scrollbars="none"
android:scrollingCache="false"
/>
</FrameLayout>
<!-- 右边的二级联动 -->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#FFF"
>

<ListView
android:id="@+id/home_pop_listview_right"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:divider="#30000000"
android:dividerHeight="1dp"
android:scrollbars="none"
android:scrollingCache="false"/>
</FrameLayout>
</LinearLayout>
</LinearLayout>

左边的ListView的item布局home_pop_listview_left.xml
<?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="vertical"
android:layout_margin="10dp"
>
<TextView
android:id="@+id/item_home_double_lv_left_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp"/>
</LinearLayout>

右边的ListView的item布局home_pop_listview_right.xml
<?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:layout_margin="10dp"
android:orientation="vertical"
>
<TextView
android:id="@+id/item_home_double_lv_right_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp"
/>

</LinearLayout>

然后再编写各个ListView的适配器

/**
* 一级联动的 listview的 适配器
*/
class FirstClassAdapter extends BaseAdapter {
private Context context;
private List<DoubleLvFirstItem> list;

public FirstClassAdapter(Context context, List<DoubleLvFirstItem> list) {
this.context = context;
this.list = list;
}

@Override
public int getCount() {
return list == null ? 0 : list.size();
}

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

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

@Override
public View getView(int position, View convertView, ViewGroup viewGroup) {
ViewHolder holder;
if (convertView == null) {
convertView = LayoutInflater.from(context).inflate(R.layout.item_home_double_listview_left, null);
holder = new ViewHolder();

holder.nameTV = (TextView) convertView.findViewById(R.id.item_home_double_lv_left_name);
convertView.setTag(holder);
} else {
holder = (ViewHolder) convertView.getTag();
}

//选中和没选中时，设置不同的颜色
if (position == selectedPosition) {
convertView.setBackgroundColor(Color.WHITE);
holder.nameTV.setTextColor(UIUtils.getColor(R.color.pink));
} else {
convertView.setBackgroundColor(UIUtils.getColor(R.color.silveryGrey50Transparent));
holder.nameTV.setTextColor(Color.BLACK);
}

holder.nameTV.setText(list.get(position).getName());

return convertView;
}

//        一级联动选中的位置
private int selectedPosition = -1;

public void setSelectedPosition(int selectedPosition) {
this.selectedPosition = selectedPosition;
}

public int getSelectedPosition() {
return selectedPosition;
}

private class ViewHolder {
TextView nameTV;
}
}

二级联动的 listview的 适配器

/**
* 二级联动的 listview的 适配器
*/
class SecondClassAdapter extends BaseAdapter {
private Context context;
private List<DoubleLvSecondItem> list;
//            选中二级联动的时候记录一级联动的位置
private int mFirstPosition = -1;
//        一级联动 现在被选中的位置
private int mFirstCurrentPosition;

public SecondClassAdapter(Context context, List<DoubleLvSecondItem> list) {
this.context = context;
this.list = list;
}

@Override
public int getCount() {
return list == null ? 0 : list.size();
}

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

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

@Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder;
if (convertView == null) {
holder = new ViewHolder();
convertView = LayoutInflater.from(context).inflate(R.layout.item_home_double_listview_right, null);
holder.nameTV = (TextView) convertView.findViewById(R.id.item_home_double_lv_right_name);
convertView.setTag(holder);
} else {
holder = (ViewHolder) convertView.getTag();
}
//              选中和没选中时，设置不同的颜色
if (position == selectedPosition) {
holder.nameTV.setTextColor(UIUtils.getColor(R.color.pink));
} else {
holder.nameTV.setTextColor(Color.BLACK);
}

//            选中和没选中时,给二级联动的item设置不同的颜色
if (position == selectedPosition && mFirstPosition == mFirstCurrentPosition) {
convertView.setBackgroundColor(Color.WHITE);
holder.nameTV.setTextColor(UIUtils.getColor(R.color.pink));
} else {
convertView.setBackgroundColor(Color.WHITE);
holder.nameTV.setTextColor(Color.BLACK);
}
holder.nameTV.setText(list.get(position).getName());
return convertView;
}

private int selectedPosition = -1;

public void setSelectedPosition(int selectedPosition) {
this.selectedPosition = selectedPosition;
}

public void setFirstPosition(int firstPosition) {
mFirstPosition = firstPosition;
}

public void setFirstCurrentPosition(int firstCurrentPosition) {
mFirstCurrentPosition = firstCurrentPosition;
}

private class ViewHolder {
TextView nameTV;
}

}

初始化 popupWindow 和 listview

/**
* 初始化 popupWindow 和 listview
*/
private void initPopup() {
mPopupWindow = new PopupWindow(getActivity());
View view = LayoutInflater.from(mContext).inflate(R.layout.item_home_popup_layout, null);
mHomePopListviewLeft = (ListView) view.findViewById(R.id.home_pop_listview_left);
mHomePopListviewRight = (ListView) view.findViewById(R.id.home_pop_listview_right);
TextView mHomePopupTvAdviceLocation = (TextView) view.findViewById(R.id.home_popup_tv_advice_location);

//       将view添加到  popup里面
mPopupWindow.setContentView(view);
mPopupWindow.setBackgroundDrawable(new PaintDrawable());
mPopupWindow.setFocusable(true);

//        popupWindow消失的监听
mPopupWindow.setOnDismissListener(new PopupWindow.OnDismissListener() {
@Override
public void onDismiss() {

}
});

//为了方便扩展，这里的两个ListView均使用BaseAdapter.如果分类名称只显示一个字符串，建议改为ArrayAdapter.
//加载一级分类
final FirstClassAdapter firstAdapter = new FirstClassAdapter(mContext, mFirstList);
mHomePopListviewLeft.setAdapter(firstAdapter);

//加载左侧第一行对应右侧二级分类
mSecondList = new ArrayList<>();
mSecondList.addAll(mFirstList.get(0).getSecondList());
final SecondClassAdapter secondAdapter = new SecondClassAdapter(mContext, mSecondList);
mHomePopListviewRight.setAdapter(secondAdapter);

//左侧ListView点击事件
mHomePopListviewLeft.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
//二级数据
List<DoubleLvSecondItem> list2 = mFirstList.get(position).getSecondList();
//如果没有二级类，则直接跳转
if (list2 == null || list2.size() == 0) {
mPopupWindow.dismiss();

int firstId = mFirstList.get(position).getId();
String selectedName = mFirstList.get(position).getName();

handleResult(firstId, -1, selectedName);
return;
}

//                如果有二级联动的数据,那么 更新数据
FirstClassAdapter adapter = (FirstClassAdapter) (parent.getAdapter());
//如果上次点击的就是这一个item，则不进行任何操作
if (adapter.getSelectedPosition() == position) {
return;
}

//根据左侧一级分类选中情况，更新背景色
adapter.setSelectedPosition(position);
adapter.notifyDataSetChanged();

//显示右侧二级分类
updateSecondListView(list2, secondAdapter, position);
}

});

//右侧ListView点击事件
mHomePopListviewRight.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
//关闭popupWindow，显示用户选择的分类
mPopupWindow.dismiss();

int firstPosition = firstAdapter.getSelectedPosition();
int firstId = mFirstList.get(firstPosition).getId();
int secondId = mFirstList.get(firstPosition).getSecondList().get(position).getId();
String selectedName = mFirstList.get(firstPosition).getSecondList().get(position)
.getName();
//根据右侧二级分类选中情况，更新背景色
SecondClassAdapter adapter = (SecondClassAdapter) parent.getAdapter();
adapter.setSelectedPosition(position);
adapter.setFirstPosition(firstPosition);
adapter.notifyDataSetChanged();

handleResult(firstId, secondId, selectedName);
}
});

}

设置弹出popupWindow的宽高.

/**
* 设置弹出popupWindow的宽高.
*/
private void setPopup() {
mHomeTab.post(new Runnable() {
@Override
public void run() {
// ScreenUtils查看最下面的工具类
int h = ScreenUtils.getScreenH(getActivity());
int height2 = mHomeLinearHead.getMeasuredHeight();
//                整个 界面的高度减去顶部点击的高度
//                就是pupupWindow 的高度
int identifier = getResources().getIdentifier("status_bar_height", "dimen", "android");
int stasusBarHeight = 0;
if (identifier > 0) {
stasusBarHeight = getResources().getDimensionPixelSize(identifier);
}
int popupHeight = h - height2 - stasusBarHeight;

mPopupWindow.setHeight(popupHeight);
}
});
//ScreenUtils 查看最下面的工具类
mPopupWindow.setWidth(ScreenUtils.getScreenW(getActivity()));
}

刷新右侧ListView

/**
* 刷新右侧ListView
*
* @param list2
* @param secondAdapter
* @param position
*/
private void updateSecondListView(List<DoubleLvSecondItem> list2,
SecondClassAdapter secondAdapter, int position) {
mSecondList.clear();
mSecondList.addAll(list2);
secondAdapter.setFirstCurrentPosition(position);
secondAdapter.notifyDataSetChanged();
}

处理 点击结果之后的处理逻辑

/**
* 处理 点击结果之后的处理逻辑
*
* @param firstId
* @param secondId
* @param selectedName
*/
private void handleResult(int firstId, int secondId, String selectedName) {
String text = "first id:" + firstId + ",second id:" + secondId;
Toast.makeText(mContext, text, Toast.LENGTH_SHORT).show();

}

//最后显示popupwindow
if (mPopupWindow.isShowing()) {
mPopupWindow.dismiss();
} else {
//                    在那个控件下面显示
mPopupWindow.showAsDropDown(mHomeLinearHead);
}

使用到的工具类

public class ScreenUtils {
private static int screenW;
private static int screenH;

public static int getScreenW(Activity mActivity){
if (screenW == 0){
initScreen(mActivity);
}
return screenW;
}

public static int getScreenH(Activity mActivity){
if (screenH == 0){
initScreen(mActivity);
}
return screenH;
}

private static void initScreen(Activity mActivity){
DisplayMetrics metric = new DisplayMetrics();
mActivity.getWindowManager().getDefaultDisplay().getMetrics(metric);
screenW = metric.widthPixels;
screenH = metric.heightPixels;
}
}