实现类似QQ通讯录中新建短信时选择联系人的效果

效果如下:

Activity的上面是GridView,下面是ListView

 

项目结构：

 

 

实现起来很简单。注释代码中都有，直接上代码：

 

ChoosePanelAdapter.java:

import java.util.List;

import android.content.Context;
import android.graphics.drawable.Drawable;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.Button;
import android.widget.GridView;

/**
 * This is the adapter of GridView. 
 * Make every Item of GridView setOnClickListener in the method of getView(),
 * when Item clicked,get the background drawable of this Item.
 * If it's normal drawable,then go through all the items of GridView and set normal drawable.
 * If it's selected drawable,delete the data of arrayList by Item id,and call notifyDataSetChanged()
 * 
 * 这个是GridView的数据适配器。
 * 在getView()中让每一个Item都设置了OnClickListener,在点击事件触发的时候，判断下当前Item的背景图片
 * 如果是normal，则遍历所有的Item，将背景设置为normal,将当前被点击的Item的背景图片设置成selected，
 * 如果是selected，就根据索引删除当前的Item的数据源，并调用notifyDataSetChanged()，刷新。
 * 
 * @author MichaelYe
 * @since 2012-8-28
 * */
public class ChoosePanelAdapter extends BaseAdapter
{
	private Context context;
	private List<String> arrayList;
	private Drawable iconDefalut;
	private Drawable iconSelected;
	public ChoosePanelAdapter(Context context, List<String> arrayList)
	{
		this.context = context;
		this.arrayList = arrayList;
		iconDefalut = context.getResources().getDrawable(R.drawable.icon_default);
		iconSelected = context.getResources().getDrawable(R.drawable.icon_selected);
	}

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

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

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

	@Override
	public View getView(final int position, View convertView, ViewGroup parent)
	{
		Button button;
        if (convertView == null)
        {
        	button = new Button(context);
	    }
	    else
	    {
	    	button = (Button) convertView;
	    }
        button.setText(arrayList.get(position));
        button.setBackgroundDrawable(iconDefalut);
        button.setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View v) {
				if(v.getBackground() == iconSelected)//判断当前的背景是哪个
				{
					arrayList.remove(position);
					ChoosePanelAdapter.this.notifyDataSetChanged();
				}
				else
				{
					ChoosePanelAdapter.this.setButtonDefaultState(v);
					v.setBackgroundDrawable(iconSelected);
				}
				v.invalidate();
			}
		});
	    return button;
	}
	
	/**
	 * set all the buttons state normal
	 * 
	 * 设置按钮背景图片为默认状态
	 * 
	 * */
	private void setButtonDefaultState(View v)
	{
		GridView gvParent = (GridView)v.getParent();
		int childCount = gvParent.getChildCount();
		for(int i = 0; i < childCount; i++)
		{
			gvParent.getChildAt(i).setBackgroundDrawable(iconDefalut);
		}
		gvParent.invalidate();
	}
}

 

MainActivity.java

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

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ArrayAdapter;
import android.widget.GridView;
import android.widget.ListView;

/**
 * use GridView make the effect like QQ Address Book when choose a contact 
 * 
 * 类似QQ通讯录中的短信模块中选择联系人的效果，使用的是GridView
 * 
 * @author MichaelYe
 * @since 2012-8-28
 * */
public class MainActivity extends Activity 
{

	private GridView gvPanel;
	private ListView listView;
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        gvPanel = (GridView)findViewById(R.id.gv_panel);
        listView = (ListView)findViewById(R.id.listview);
        
        final List<String> data = this.getData();
        final List<String> panelArrayList = new ArrayList<String>();
        final ChoosePanelAdapter adapter = new ChoosePanelAdapter(MainActivity.this, panelArrayList);
        
        listView.setAdapter(new ArrayAdapter<String>(MainActivity.this,
        		android.R.layout.simple_expandable_list_item_1, data));
        
        listView.setOnItemClickListener(new OnItemClickListener() 
        {
			@Override
			public void onItemClick(AdapterView<?> parent, View view,
					int position, long id) 
			{
				panelArrayList.add(data.get(position));
				adapter.notifyDataSetChanged();
			}
		});
        
        gvPanel.setAdapter(adapter);
    }

    /**
     * DataSource
     * 
     * 
     * */
    private List<String> getData()
    {
    	List<String> list = new ArrayList<String>();
    	list.add("张三");
    	list.add("李四");
    	list.add("王五");
    	list.add("赵六");
    	list.add("乔丹");
    	list.add("爱斯基摩");
    	list.add("维也纳");
    	list.add("周星星");
    	return list;
    }
}

 

 布局文件activity_main.xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <GridView
        android:id="@+id/gv_panel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:numColumns="auto_fit"
        android:columnWidth="60dp"
        android:layout_alignParentTop="true"
        android:verticalSpacing="5dp"
	    android:horizontalSpacing="5dp"
	    android:stretchMode="columnWidth"
         />

    <ListView 
        android:id="@+id/listview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/gv_panel"
        />
    
</RelativeLayout>

 

项目下载地址：

https://github.com/michaelye/DemoChooseValues