相似微信5.x朋友圈的彈出框評論功能

實現對一個主題評論並顯示評論列表,首先想到的是須要使用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