模仿android中的whatsapp消息布局

我正在尝试用android重新创建whatsapp的布局，这就是我目前所拥有的

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">


    <FrameLayout
        android:id="@+id/message_pane"
        android:layout_height="wrap_content"
        android:minHeight="300dp"
        android:layout_width="match_parent"
        android:foregroundGravity="fill">



    </FrameLayout>


    <LinearLayout
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:gravity="bottom"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:id="@+id/linearLayout">

        <EditText
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:hint="@string/edit_text"
            android:id="@+id/edit_text" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/send_text"
            android:onClick="sendMessage"/>

    </LinearLayout>


</RelativeLayout>

当我单击send时，消息确实会显示在FrameLayout上，但下一条消息都会显示在同一位置。 我想知道如何让他们去下面以前的消息，如果有任何更好的布局，我可以用来实现Whatsapp的布局。

---

谢谢。

哈哈，终于可以使用uiautomatorviewer（由Commonware建议）查看它们的结构了。 事实证明，除了Listview之外，我还必须实现一个自定义适配器才能让它工作，下面是代码，以防有人感兴趣

MessageAdapter.java

package com.example.mestchat.Adapter;

/**
 * Created by elimence on 6/1/13.
 */
import java.util.List;

import android.app.Activity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.TextView;
import com.example.mestchat.MessageData;
import com.example.mestchat.R;

public class MessageAdapter extends ArrayAdapter {
    private final Activity activity;
    private final List messages;

    public MessageAdapter(Activity activity, List objs) {
        super(activity, R.layout.message_list , objs);
        this.activity = activity;
        this.messages = objs;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        View rowView = convertView;
        MessageView msgView = null;

        if(rowView == null)
        {
            // Get a new instance of the row layout view
            LayoutInflater inflater = activity.getLayoutInflater();
            rowView = inflater.inflate(R.layout.message_list, null);

            // Hold the view objects in an object,
            // so they don't need to be re-fetched
            msgView = new MessageView();
            msgView.msg = (TextView) rowView.findViewById(R.id.message_text);

            // Cache the view objects in the tag,
            // so they can be re-accessed later
            rowView.setTag(msgView);
        } else {
            msgView = (MessageView) rowView.getTag();
        }

        // Transfer the stock data from the data object
        // to the view objects
        MessageData currentMsg =  (MessageData)messages.get(position);
        msgView.msg.setText(currentMsg.getMessage());

        return rowView;
    }

    protected static class MessageView {
        protected TextView msg;
    }
}

MessageData.java

package com.example.mestchat;

/**
 * Created by elimence on 6/1/13.
 */

public class MessageData {
    private String message;

    public MessageData(String message) {
        this.message = message;
    }
    public void setMessage(String message) {
        this.message = message;
    }
    public String getMessage() {
        return message;
    }
}


package com.example.mestchat;

import android.app.ListActivity;
import android.os.AsyncTask;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.widget.*;
import com.example.mestchat.Adapter.MessageAdapter;
import com.example.mestchat.REST.RestWebServices;

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


public class MainActivity extends ListActivity {

    MessageAdapter adapter;

    List msgs;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        msgs =  new ArrayList();
        adapter = new MessageAdapter(this, msgs);
        setListAdapter(adapter);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

    public void sendMessage(View view) {    
        EditText message = (EditText) findViewById(R.id.enter_message);
        String mText = message.getText().toString();

        msgs.add(new MessageData(mText));
        adapter.notifyDataSetChanged();
        message.setText("");
    }

}

message_list.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:gravity="fill_horizontal"
    android:layout_height="wrap_content">

    <RelativeLayout
        android:layout_height="wrap_content"
        android:layout_width="match_parent">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="right"
            android:layout_marginTop="@dimen/activity_horizontal_margin"
            android:textColor="@color/black"
            android:background="@color/white"
            android:id="@+id/message_text" />

    </RelativeLayout>

</LinearLayout>

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical">


    <!--<FrameLayout-->
        <!--android:background="@color/header_color"-->
        <!--android:layout_width="match_parent"-->
        <!--android:layout_height="0dp"-->
        <!--android:layout_weight="1">-->

    <!--</FrameLayout>-->

    <LinearLayout
        android:layout_width="match_parent"
        android:orientation="vertical"
        android:layout_height="0dp"
        android:layout_weight="10">

        <FrameLayout
            android:layout_height="0dp"
            android:layout_width="match_parent"
            android:layout_weight="11">

            <ListView
                android:id="@android:id/list"
                android:background="@drawable/background"
                android:drawSelectorOnTop="false"
                android:layout_height="match_parent"
                android:layout_width="match_parent"
                android:footerDividersEnabled="true">


            </ListView>

        </FrameLayout>


        <FrameLayout
            android:layout_height="0dp"
            android:layout_width="match_parent"
            android:layout_weight="1">

            <LinearLayout
                android:layout_height="match_parent"
                android:layout_width="match_parent"
                android:background="@color/send_box_color"
                android:id="@+id/linearLayout">

                <EditText
                    android:id="@+id/enter_message"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:hint="@string/edit_text" />

                <Button
                    android:id="@+id/send_button"
                    android:layout_width="45dp"
                    android:layout_height="30dp"
                    android:background="@drawable/send_btn"
                    android:onClick="sendMessage"/>

            </LinearLayout>

        </FrameLayout>

    </LinearLayout>

</LinearLayout>

---

哈哈，终于可以使用uiautomatorviewer（由Commonware推荐）查看它们的结构了。 事实证明，除了Listview之外，我还必须实现一个自定义适配器才能让它工作，下面是代码，以防有人感兴趣

MessageAdapter.java

package com.example.mestchat.Adapter;

/**
 * Created by elimence on 6/1/13.
 */
import java.util.List;

import android.app.Activity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.TextView;
import com.example.mestchat.MessageData;
import com.example.mestchat.R;

public class MessageAdapter extends ArrayAdapter {
    private final Activity activity;
    private final List messages;

    public MessageAdapter(Activity activity, List objs) {
        super(activity, R.layout.message_list , objs);
        this.activity = activity;
        this.messages = objs;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        View rowView = convertView;
        MessageView msgView = null;

        if(rowView == null)
        {
            // Get a new instance of the row layout view
            LayoutInflater inflater = activity.getLayoutInflater();
            rowView = inflater.inflate(R.layout.message_list, null);

            // Hold the view objects in an object,
            // so they don't need to be re-fetched
            msgView = new MessageView();
            msgView.msg = (TextView) rowView.findViewById(R.id.message_text);

            // Cache the view objects in the tag,
            // so they can be re-accessed later
            rowView.setTag(msgView);
        } else {
            msgView = (MessageView) rowView.getTag();
        }

        // Transfer the stock data from the data object
        // to the view objects
        MessageData currentMsg =  (MessageData)messages.get(position);
        msgView.msg.setText(currentMsg.getMessage());

        return rowView;
    }

    protected static class MessageView {
        protected TextView msg;
    }
}

MessageData.java

package com.example.mestchat;

/**
 * Created by elimence on 6/1/13.
 */

public class MessageData {
    private String message;

    public MessageData(String message) {
        this.message = message;
    }
    public void setMessage(String message) {
        this.message = message;
    }
    public String getMessage() {
        return message;
    }
}


package com.example.mestchat;

import android.app.ListActivity;
import android.os.AsyncTask;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.widget.*;
import com.example.mestchat.Adapter.MessageAdapter;
import com.example.mestchat.REST.RestWebServices;

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


public class MainActivity extends ListActivity {

    MessageAdapter adapter;

    List msgs;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        msgs =  new ArrayList();
        adapter = new MessageAdapter(this, msgs);
        setListAdapter(adapter);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

    public void sendMessage(View view) {    
        EditText message = (EditText) findViewById(R.id.enter_message);
        String mText = message.getText().toString();

        msgs.add(new MessageData(mText));
        adapter.notifyDataSetChanged();
        message.setText("");
    }

}

message_list.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:gravity="fill_horizontal"
    android:layout_height="wrap_content">

    <RelativeLayout
        android:layout_height="wrap_content"
        android:layout_width="match_parent">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="right"
            android:layout_marginTop="@dimen/activity_horizontal_margin"
            android:textColor="@color/black"
            android:background="@color/white"
            android:id="@+id/message_text" />

    </RelativeLayout>

</LinearLayout>

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical">


    <!--<FrameLayout-->
        <!--android:background="@color/header_color"-->
        <!--android:layout_width="match_parent"-->
        <!--android:layout_height="0dp"-->
        <!--android:layout_weight="1">-->

    <!--</FrameLayout>-->

    <LinearLayout
        android:layout_width="match_parent"
        android:orientation="vertical"
        android:layout_height="0dp"
        android:layout_weight="10">

        <FrameLayout
            android:layout_height="0dp"
            android:layout_width="match_parent"
            android:layout_weight="11">

            <ListView
                android:id="@android:id/list"
                android:background="@drawable/background"
                android:drawSelectorOnTop="false"
                android:layout_height="match_parent"
                android:layout_width="match_parent"
                android:footerDividersEnabled="true">


            </ListView>

        </FrameLayout>


        <FrameLayout
            android:layout_height="0dp"
            android:layout_width="match_parent"
            android:layout_weight="1">

            <LinearLayout
                android:layout_height="match_parent"
                android:layout_width="match_parent"
                android:background="@color/send_box_color"
                android:id="@+id/linearLayout">

                <EditText
                    android:id="@+id/enter_message"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:hint="@string/edit_text" />

                <Button
                    android:id="@+id/send_button"
                    android:layout_width="45dp"
                    android:layout_height="30dp"
                    android:background="@drawable/send_btn"
                    android:onClick="sendMessage"/>

            </LinearLayout>

        </FrameLayout>

    </LinearLayout>

</LinearLayout>

使用

uiautomatorviewer

检查WhatsApp的UI，以确定其视图层次结构。谢谢，工作正常使用

uiautomatorviewer

检查WhatsApp的UI，以确定其视图层次结构。谢谢，工作正常