[Android应用] 仿QQHD长按好友列表显示操作条

前言：

       玩了公司的调试pad，玩了一下QQHD mini软件，哈 本人对Android QQ不感冒，不过好像写的不错，仿Iphone对话模式仿的 ... -。-  可能标题写的不清晰，唉 算了，能想到就这样了 .. 先看图（红色圈圈部分），长按然后显示操作条，包括对话，空间等！

图片：

               

思路：

        1、用 ListView （我用listView，多级菜单就没弄了）重写 Adapter 和 List Item 的显示隐藏来实现。

        2、List 中每一个 Item 都有这样的工具栏存在，长按列表项时候让它显示出来

        3、当失去焦点时候隐藏，或者长按其 Item 的时候隐藏自己，显示其他

       

 这样想想就不难实现了，下面是实现：

1、主界面很简单，就一个ListView，布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

   <ListView 
       android:id="@+id/info_list" 
       android:layout_width="fill_parent"
       android:layout_height="fill_parent" />

</LinearLayout>

2、ListView 每一项的 Item 布局文件，工具栏默认为隐藏状态：

<?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" >
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">
    	<TextView 
        	android:id="@+id/txt_item"
        	android:layout_width="fill_parent"
        	android:layout_height="60dip" />
    	
	</LinearLayout>
	<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
	    android:id="@+id/layout_tip_bar"
	    android:layout_width="fill_parent"
	    android:layout_height="80dip"
	    android:gravity="right"
	    android:background="@drawable/tip_background"
	    android:visibility="gone">
		<LinearLayout 
		    android:id="@+id/layout_item1"
		    android:orientation="vertical"
		    android:layout_width="wrap_content"
		    android:layout_height="60dip"
		    android:layout_marginLeft="80dip"
		    android:layout_margin="8dip">
		    <ImageView 
		        android:layout_width="50dip"
		        android:layout_height="42dip"
		        android:background="@android:drawable/ic_dialog_dialer" />
	    	<TextView 
	    	    android:layout_width="fill_parent"
	    	    android:layout_height="20dip"
	    	    android:textColor="@android:color/white"
	    	    android:textSize="12sp"
	    	    android:text="@string/item1"
	    	    android:gravity="center_horizontal"/>
		</LinearLayout>
	    <LinearLayout 
		    android:id="@+id/layout_item2"
		    android:orientation="vertical"
		    android:layout_width="wrap_content"
		    android:layout_height="60dip"
		    android:layout_toRightOf="@id/layout_item1"
		    android:layout_marginLeft="80dip"
		    android:layout_marginRight="50dip"
		    android:layout_margin="8dip">
		    <ImageView 
		        android:layout_width="50dip"
		        android:layout_height="42dip"
		        android:background="@android:drawable/ic_dialog_email" />
	    	<TextView 
	    	    android:layout_width="fill_parent"
	    	    android:layout_height="20dip"
	    	    android:textColor="@android:color/white"
	    	    android:textSize="12sp"
	    	    android:gravity="center_horizontal"
	    	    android:text="@string/item2"/>
		</LinearLayout>
	</RelativeLayout>
    
</LinearLayout>

【备注】如果 xml 代码看的有点乏味，可以直接看图片，然后根据自己思维布局

3、接下来就是 Adapter 的重写了，都烂了 相信你都知道了，^_^

public class ListAdapter extends BaseAdapter {
	
	private Context context = null;
	private LayoutInflater inflater = null;
	// 展现的信息
	private ArrayList<String> infoList = null;
	
	public ListAdapter(Context context, ArrayList<String> infoList) {
		this.context = context;
		this.infoList = infoList;
		this.inflater = (LayoutInflater) context.getSystemService(context.LAYOUT_INFLATER_SERVICE);
	}
	
	public int getCount() {
		return this.infoList.size();
	}

	public Object getItem(int position) {
		return this.infoList.get(position);
	}

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

	public View getView(int position, View convertView, ViewGroup parent) {
		// 防止内存泄漏
		if(convertView == null) {
			convertView = (View)this.inflater.inflate(R.layout.item, null);
		}
		TextView textView = (TextView)convertView.findViewById(R.id.txt_item);
		textView.setText(this.infoList.get(position));
		return convertView;
	}
}

4、下面是Activitiy，主要数据都在这里处理，包括单击，长按事件

public class ListItemBarShowActivity extends Activity implements 
			OnItemClickListener, OnItemLongClickListener {
	/** Called when the activity is first created. */
	private ListView listView = null;
	private ListAdapter listAdapter = null;
	private ArrayList<String> infoList = null;
	// 工具栏 【备注1】
	private RelativeLayout tipLayout = null;
	private ObjectClickListener oListener = null;
	
	
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        // 初始化
        init();
    }
    
    @Override
	public void onItemClick(AdapterView<?> parent, View view, int position,
			long id) {
    	// 如果当前有显示，隐藏起来 【备注2】
    	if(this.tipLayout != null) {
    		this.tipLayout.setVisibility(View.GONE);
    	}
    }
    
    @Override
	public boolean onItemLongClick(AdapterView<?> parent, View view,
			int position, long id) {
    	// 先让之前显示的隐藏掉 【备注2】
    	if(tipLayout != null) {
    		tipLayout.setVisibility(View.GONE);
    	}
    	tipLayout = (RelativeLayout)view.findViewById(R.id.layout_tip_bar);
		tipLayout.setVisibility(View.VISIBLE);
		// 要设置聚焦，不然怎么点击都是listView的单击事件
		tipLayout.setFocusable(true);
		tipLayout.findViewById(R.id.layout_item1).setOnClickListener(this.oListener);
		tipLayout.findViewById(R.id.layout_item2).setOnClickListener(this.oListener);
		return true;
	}
    
    /** 工具栏工具单击事件 */
    private class ObjectClickListener implements OnClickListener {
		@Override
		public void onClick(View v) {
			switch (v.getId()) {
			case R.id.layout_item1: // 【备注3】
				Toast.makeText(ListItemBarShowActivity.this, "item1 Click", Toast.LENGTH_SHORT).show();
				break;
			case R.id.layout_item2:
				Toast.makeText(ListItemBarShowActivity.this, "item2 Click", Toast.LENGTH_SHORT).show();
				break;
			}
		}
    	
    }
    
    /** 初始化 */
    private void init() {
    	 this.infoList = new ArrayList<String>();
    	 this.oListener = new ObjectClickListener();
    	 infoList.add("第一个");
    	 infoList.add("第二个");
    	 infoList.add("第三个");
    	 infoList.add("第四个");
    	 this.listAdapter = new ListAdapter(this, this.infoList);
         this.listView = (ListView)this.findViewById(R.id.info_list);
         this.listView.setOnItemClickListener(this);
         this.listView.setOnItemLongClickListener(this);
         this.listView.setAdapter(this.listAdapter);
    }

}

【备注1】：用成员变量来保存工具栏整个 layout 是为了显示和隐藏只操作一个对象

【备注2】：先判断不为空，不然在变量未初始时候会报错，里面有2种，

                   第一种是随便点击任意非本身 item 就消失掉工具栏（看QQHD）

                   第二种是长按其他 Item 项本身消失，长按那个显示

【备注3】：这里 layout 按下无动态反馈，可以动态显示，或者设置 view.setBackgroundDrawable(**) 给用户反馈

这个只是初步，仅仅实现了思路，如果要做的好还要包括布局，美化等等 ..，好了 看看效果图吧 !

     

想要整个工程的，可以留下邮箱.. 或者下载 这里