android - Androidでwhatsappメッセージのレイアウトを模倣する

Question

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>

そして、これは私のJavaファイルがどのように見えるかです

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.widget.EditText;
import android.widget.FrameLayout;
import android.widget.TextView;


public class MainActivity extends Activity {

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


    @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.edit_text);

        TextView text = new TextView(this);
        text.setText(message.getText());


        FrameLayout msgs = (FrameLayout) findViewById(R.id.message_pane);
        msgs.addView(text);
    }

}

送信をクリックすると、メッセージは FrameLayout に表示されますが、次のメッセージはすべて同じ場所に移動します。それらを以前のメッセージの下に移動する方法と、Whatsapp のレイアウトを実装するために使用できるより良いレイアウトがあれば知りたいです。ありがとう。

score 6 · Accepted Answer

ハハ、やっと動くようになりました。uiautomatorviewer (CommonsWare が推奨) を使用して、それらの構造を表示することができました。それを機能させるには、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>

android - Androidでwhatsappメッセージのレイアウトを模倣する

1 に答える 1

Related

Reference