类似微信5.x朋友圈的弹出框评论功能

jxnk

2014-09-23

实现对一个主题评论并显示评论列表,首先想到的是需要使用ListView控件,

下面是layout下的xml布局文件:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/list_selector"
    android:orientation="horizontal"
    android:padding="5dip" >

    <LinearLayout
        android:id="@+id/thumbnail"
        android:layout_width="120dip"
        android:layout_height="120dip"
        android:layout_alignParentLeft="true"
        android:layout_marginRight="5dip"
        android:background="@drawable/image_bg"
        android:padding="1dip" >

        <ImageView
            android:id="@+id/group_image"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerInside"
            android:src="@drawable/copyright" />
    </LinearLayout>
    <TextView
        android:id="@+id/group_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/thumbnail"
        android:layout_toRightOf="@+id/thumbnail"
        android:text="测试朋友圈评论功能"
        android:textColor="#040404"
        android:textSize="15sp"
        android:textStyle="bold"
        android:typeface="sans" />

    <TextView
        android:id="@+id/group_content"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/thumbnail"
        android:text="狗狗见到蟒，冲过去照头上就舔"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textColor="#343434"
        android:textSize="12sp" />

    <ImageView
        android:id="@+id/group_discuss_popup"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignRight="@+id/group_content"
        android:layout_below="@+id/group_content"
        android:background="@drawable/coment_pressed" />

    <TextView
        android:id="@+id/group_createtime"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/TextView09"
        android:layout_toLeftOf="@+id/group_discuss_popup"
        android:gravity="right"
        android:text="2014-08-24 15:45"
        android:textColor="#10bcc9"
        android:textSize="12sp"
        android:textStyle="bold" />

    <RelativeLayout
        android:id="@+id/rl_bottom"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true" >

        <Button
            android:id="@+id/group_discuss_submit"
            android:layout_width="60dp"
            android:layout_height="40dp"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginRight="10dp"
            android:background="@drawable/chat_send_button_bg"
            android:onClick="discussSubmit"
            android:text="发送"
            android:textSize="20sp" />

        <EditText
            android:id="@+id/group_discuss"
            android:layout_width="fill_parent"
            android:layout_height="40dp"
            android:layout_centerVertical="true"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_toLeftOf="@id/group_discuss_submit"
            android:hint="评论"
            android:singleLine="true"
            android:textSize="18sp" >
            <requestFocus />
        </EditText>
    </RelativeLayout>

	<ListView
	    android:id="@+id/group_discuss_list"
	    android:layout_width="fill_parent"
	    android:layout_height="wrap_content"
	    android:layout_alignParentRight="true"
	    android:layout_below="@+id/group_discuss_popup"
	    android:layout_marginTop="14dp"
	    android:divider="#b5b5b5"
	    android:dividerHeight="1dp"
	    android:listSelector="@drawable/list_selector" />

	<TextView
	    android:id="@+id/TextView09"
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content"
	    android:layout_alignBottom="@+id/thumbnail"
	    android:layout_marginBottom="40dp"
	    android:layout_toRightOf="@+id/thumbnail"
	    android:text="时间:"
	    android:textColor="#040404"
	    android:textSize="12sp"
	    android:textStyle="bold"
	    android:typeface="sans" />

</RelativeLayout>

然后在Activity类的onCreate方法里,获取ListView的实例,并对每一个item增加监听器

//为防止layout界面上的EditText在进入页面时就弹出输入法,隐藏软键盘
        getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_HIDDEN);
        
        listView = (ListView)findViewById(R.id.group_discuss_list);
        this.discussOnItemClickListener();

每一个item增加监听器的方法discussOnItemClickListener()

/**
     * 评论列表被单击后的事件监听
     */
    private void discussOnItemClickListener() {
        //为评论的每一行添加单击事件
		listView.setOnItemClickListener(new OnItemClickListener() {
			@Override
			public void onItemClick(AdapterView<?> parent, View view,int position, long id) {	
				//获得父贴的发帖人
				Map<String, String> posMap = discussList.get(position);				
				//设置pusername
				pname = posMap.get("username");
				
				//取得填写评论editText的实例
				EditText disInputText = (EditText)findViewById(R.id.group_discuss);
				disInputText.setHint("回复" + pname);
				
				disInputText.requestFocus();				
			}			
		});		            	
    }

接下来重点说说单击评论图标之后的弹出框,同样在Activity类的onCreate方法中,给评论图标增加onclick监听器,然后增加两个弹出项赞,评论,并且给这两个item增加监听,代码如下:

groupPopup = (ImageView) findViewById(R.id.group_discuss_popup);
		groupPopup.setOnClickListener(titlePopupOnclick);
		
		titlePopup = new TitlePopup(this, Utils.dip2px(this, 165), Utils.dip2px(this, 40));
		titlePopup.addAction(new ActionItem(this, "赞", R.drawable.circle_praise));
		titlePopup.addAction(new ActionItem(this, "评论",R.drawable.circle_comment));
		
		titlePopup.setItemOnClickListener(this);

监听的方法实现

/**
	 * 单击评论按钮,弹出菜单的item click 监听
	 */
	@Override
	public void onItemClick(ActionItem actionItem,int position) {
		//position,0-赞;1-评论
		switch(position){
		case 0://赞
			break;
		case 1://评论
			EditText disInputText = (EditText)findViewById(R.id.group_discuss);
			disInputText.requestFocus();
			
			break;
		default:
			break;
		}
	}

很简单,就是当单击item里的评论时,请求EditText输入框的焦点,调出输入法.

最后我们来说说添加评论功能,demo只是模拟添加了一些评论,真实环境下显然首先需要向服务端提交数据,然后从服务端请求评论列表.demo中只是在Activity类里维护一个全局List简单代替.然后使用一个BaseAdapter的实现类,实现其getView方法来显示出来.

Map<String, String> map = new HashMap<String, String>();
    	//给map设置要显示的值
    	map.put("distime", DateUtils.formaterDate2YMDHm(new Date(System.currentTimeMillis())));
    	map.put("content", content);
    	
    	//设置父贴的发帖人信息
    	map.put("puid", puid + "");
    	map.put("pname", pname);
    	
    	//设置自己的信息
    	map.put("uid", uid + "");
    	map.put("username", username);

    	discussList.add(map);
    	
	ListLazyAdapter adapter = new ListLazyAdapter(this, discussList);		
        listView.setAdapter(adapter); 			//设置adapter

基本上就以上三部分主要功能,可以实现一个简单的单击显示弹出框之后的评论功能.

效果图如下:

本文示例源代码下载地址:

http://download.csdn.net/detail/gaolu/7963061

android