如何更改我的聊天布局输出如同whatsapp聊天布局?
问题描述:
我正在开发一个Android应用程序,我现在有一个聊天窗口布局,我的聊天窗口输出正在下面(当我发送给他人的消息时)
I am developing an android application, In that i have a chat window layout at present my chat window ouput is looking below (when i am send the message to others)
但我预计我的输出为
but i am expected my output as,
我的布局代码在下面,
<?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;
}
}
}
我实现我的输出,我预计。请建议我需要更改。
how can i achieve my output as i am expected. Please suggest me what i am need to change.
答
尝试这样。
<?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>