如何更改我的聊天布局输出，就像 whatsapp 聊天布局一样？

Question

我正在开发一个 android 应用程序，目前我有一个聊天窗口布局，我的聊天窗口输出如下（当我向其他人发送消息时）

但我希望我的输出为，

我的布局代码如下，

<?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="horizontal"
    android:paddingBottom="5dp"
    android:paddingTop="5dp"
    android:paddingLeft="10dp">

    <TextView
        android:id="@+id/txtInfo"
        android:layout_width="wrap_content"
        android:layout_height="30sp"
        android:layout_gravity="right"
        android:layout_marginRight="50dp"
        android:paddingRight="5dp"
        android:paddingTop="5dp"
        android:textSize="12sp"
        android:textColor="@color/lightred"
        android:textStyle="italic"
        />

    <TextView
        android:id="@+id/txtMsg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="16dp"
        android:layout_marginRight="200dp"
        android:background="@color/grey"
        android:textColor="@color/white"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:paddingTop="5dp"
        android:paddingBottom="5dp"
        android:textStyle="italic|bold"
        />

</LinearLayout>

我的编程代码如下，

public class MessagesListAdapter extends BaseAdapter {

        private Context context;
        private List<ChatMessageObjects> messagesItems;

        public MessagesListAdapter(Context context, List<ChatMessageObjects> navDrawerItems) {
            this.context = context;
            this.messagesItems = navDrawerItems;
        }

        @Override
        public int getCount() {
            return messagesItems.size();
        }

        @Override
        public Object getItem(int position) {
            return messagesItems.get(position);
        }

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


        @Override
        public View getView(int position, View convertView, ViewGroup parent) {

            ChatMessageObjects m = messagesItems.get(position);

            LayoutInflater mInflater = (LayoutInflater) context
                    .getSystemService(Activity.LAYOUT_INFLATER_SERVICE);

            if (messagesItems.get(position).getMessage_type() == Constants.IS_TYPE_CHAT_IMAGE) {
                convertView = mInflater.inflate(R.layout.chat_image,
                        null);

                ImageView imageView = (ImageView) convertView.findViewById(R.id.imgView);
                TextView imageLabel = (TextView) convertView.findViewById(R.id.lblImage);
                if (messagesItems.get(position).isSelf() == 0) {
                    Log.i(Constants.TAG, " the value is from others");
                    try {
                        URL url = new URL(messagesItems.get(position).getMessage());
                        HttpURLConnection connection = (HttpURLConnection) url.openConnection();
                        connection.setDoInput(true);
                        connection.connect();
                        InputStream input = connection.getInputStream();
                        imageView.setImageBitmap(BitmapFactory.decodeStream(input));
                    } catch (IOException e) {
                        Log.i(Constants.TAG, e.toString());
                    }
                } else if (messagesItems.get(position).isSelf() == 1) {
                    Log.i(Constants.TAG, " the value is itself");
                    imageView.setImageURI(Uri.fromFile(imgFile));
                    imageLabel.setText(messagesItems.get(position).getFromName());
                }
            } else if (messagesItems.get(position).getMessage_type() == Constants.MESSAGE_TYPE_MSG) {
             // message belongs to you, so load the right aligned layout
                if (messagesItems.get(position).isSelf() == 1) {
                    convertView = mInflater.inflate(R.layout.chat_message_right,
                            null);
                    TextView txtMsg = (TextView) convertView.findViewById(R.id.txtMsg);
                    //date and time declared on date here
                    TextView date = (TextView) convertView.findViewById(R.id.txtInfo);
                    try {
                        //actualDate contains date "(i.e)27-Aug-2015 6:20:25 am/pm" in this format
                        String actualDate = m.getDate();
                        Date FormatDate = new SimpleDateFormat("dd-MMM-yyyy h:mm:ss a").parse(actualDate);
                        //actualDate converted from "(i.e)27-Aug-2015 6:20:25 am/pm" to "6:20 pm" in this
                        //format for display the chat time for every chat message .
                        dateResult = new SimpleDateFormat("h:mm a").format(FormatDate);

                    } catch (ParseException e) {

                        e.printStackTrace();
                    }
                    date.setText(dateResult);//date display as like this"6:20pm"
                    txtMsg.setText(m.getMessage());

                } else if (messagesItems.get(position).isSelf() == 0) {
                    // message belongs to other person, load the left aligned layout
                    convertView = mInflater.inflate(R.layout.chat_message_left,
                            null);
                    TextView lblFrom = (TextView) convertView.findViewById(R.id.lblMsgFrom);
                    TextView txtMsg = (TextView) convertView.findViewById(R.id.txtMsg);
                    //date and time added here
                    TextView date = (TextView) convertView.findViewById(R.id.txtInfo);
                    txtMsg.setText(m.getMessage());
                    date.setText(m.getDate());
                }

            }

            return convertView;
        }

    }
}

我怎样才能达到预期的输出。请建议我需要更改的内容。

Answer 1

试试这个。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:emojicon="http://schemas.android.com/apk/res-auto"
android:id="@+id/view_send_txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:gravity="end"
android:layout_margin="10dp"
android:orientation="vertical"
android:visibility="visible">


<TextView
    android:id="@+id/txt_send"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="3dp"
    android:layout_marginEnd="20dp"
    android:layout_marginLeft="5dp"
    android:layout_marginRight="20dp"
    android:layout_marginStart="5dp"
    android:layout_marginTop="5dp"
    android:lineSpacingExtra="1dp"
    android:minWidth="150dp"
    android:padding="5dp"
    android:textColor="@color/lightred"
    android:singleLine="false"
    android:textSize="18sp" />

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|bottom"
    android:layout_marginEnd="30dp"
    android:layout_marginRight="30dp"
    android:gravity="center_vertical"
    android:orientation="horizontal"
    android:paddingBottom="7dp">


    <TextView
        android:id="@+id/txt_send_timer"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginLeft="15dp"
        android:layout_marginStart="15dp"
        android:background="@color/grey"
        android:textColor="@color/white"
        android:textSize="13sp" />
</LinearLayout>