仿百度外卖、美团外卖、淘点点等左右联动ListView菜单展示

    

！！左边Listview项滚出屏幕后有问题，没有联动，有空再研究。。。

最近做项目时想把店铺内菜单展示做成百度外卖、美团外卖和淘点点的样子，网上没找到完美的Demo，所以只能自己瞎搞了；从Libraries for developers上找了个PinnedHeaderListView作为菜单展示页（即右半部分），左边店内分类用普通ListView就行（左半部分），主要方法就两个：

1. 左边ListView的setOnItemClickListener，点击左边分类时右边对应分类滚动到顶部（到底则停止滚动）

left_listView.setOnItemClickListener(new OnItemClickListener() {

			@Override
			public void onItemClick(AdapterView<?> arg0, View view, int position,
					long arg3) {
				isScroll = false;

				for (int i = 0; i < left_listView.getChildCount(); i++)
				{
					if (i == position)
					{
						left_listView.getChildAt(i).setBackgroundColor(Color.rgb(255, 255, 255));
					} else
					{
						left_listView.getChildAt(i).setBackgroundColor(Color.TRANSPARENT);
					}
				}

				int rightSection = 0;
				for(int i=0;i<position;i++){
					rightSection += sectionedAdapter.getCountForSection(i)+1;
				}
				right_listview.setSelection(rightSection);
				
			}

		});

2. 右边PinnedHeaderListView的setOnScrollListener，右边菜单上下滚动时左边对应分类滚动到对应位置

right_listview.setOnScrollListener(new OnScrollListener() {
			
			@Override
			public void onScrollStateChanged(AbsListView arg0, int arg1) {
				
			}
			
			@Override
			public void onScroll(AbsListView view, int firstVisibleItem,
					int visibleItemCount, int totalItemCount) {
				if(isScroll){
					for (int i = 0; i < left_listView.getChildCount(); i++)
					{
						
						if (i == sectionedAdapter.getSectionForPosition(firstVisibleItem))
						{
							left_listView.getChildAt(i).setBackgroundColor(
									Color.rgb(255, 255, 255));
						} else
						{
							left_listView.getChildAt(i).setBackgroundColor(Color.TRANSPARENT);

						}
					}
						
				}else{
					isScroll = true;
				}
			}
		});

还有一个比较重要的是右边PinnedHeaderListView的Adapter，具体内容可以下载源码自己研究改动

public class TestSectionedAdapter extends SectionedBaseAdapter {
	
	private Context mContext;
	private String[] leftStr;
	private String[][] rightStr;
	
	public TestSectionedAdapter(Context context, String[] leftStr, String[][] rightStr){
		this.mContext = context;
		this.leftStr = leftStr;
		this.rightStr = rightStr;
	}

    @Override
    public Object getItem(int section, int position) {
        return rightStr[section][position];
    }

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

    @Override
    public int getSectionCount() {
        return leftStr.length;
    }

    @Override
    public int getCountForSection(int section) {
        return rightStr[section].length;
    }

    @Override
    public View getItemView(final int section, final int position, View convertView, ViewGroup parent) {
        LinearLayout layout = null;
        if (convertView == null) {
            LayoutInflater inflator = (LayoutInflater) parent.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            layout = (LinearLayout) inflator.inflate(R.layout.list_item, null);
        } else {
            layout = (LinearLayout) convertView;
        }
        ((TextView) layout.findViewById(R.id.textItem)).setText(rightStr[section][position]);
        layout.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View arg0) {
				Toast.makeText(mContext, rightStr[section][position], Toast.LENGTH_SHORT).show();
			}
		});
        return layout;
    }

    @Override
    public View getSectionHeaderView(int section, View convertView, ViewGroup parent) {
        LinearLayout layout = null;
        if (convertView == null) {
            LayoutInflater inflator = (LayoutInflater) parent.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            layout = (LinearLayout) inflator.inflate(R.layout.header_item, null);
        } else {
            layout = (LinearLayout) convertView;
        }
        layout.setClickable(false);
        ((TextView) layout.findViewById(R.id.textItem)).setText(leftStr[section]);
        return layout;
    }

}

  我的效果图：

                     奉上源码