firebase 友好的聊天气泡左右

Question

我使用 firebase 制作了 FriendlyChat

但是所有文本都出现在同一行，无论是来自发送者还是接收者！

我想应用左右对齐的聊天气泡，但不知道从哪里开始

我还想将文本视图包装在聊天气泡图像中？但我不知道该怎么做？

任何帮助！

public class MessageAdapter extends ArrayAdapter<FriendlyMessage> {
public MessageAdapter(Context context, int resource, List<FriendlyMessage> objects) {
    super(context, resource, objects);
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    if (convertView == null) {
        convertView = ((Activity) getContext()).getLayoutInflater().inflate(R.layout.item_message, parent, false);
    }

    ImageView photoImageView = (ImageView) convertView.findViewById(R.id.photoImageView);
    TextView messageTextView = (TextView) convertView.findViewById(R.id.messageTextView);
    TextView authorTextView = (TextView) convertView.findViewById(R.id.nameTextView);

    FriendlyMessage message = getItem(position);

    boolean isPhoto = message.getPhotoUrl() != null;
    if (isPhoto) {
        messageTextView.setVisibility(View.GONE);
        photoImageView.setVisibility(View.VISIBLE);
        Glide.with(photoImageView.getContext())
                .load(message.getPhotoUrl())
                .into(photoImageView);
    } else {
        messageTextView.setVisibility(View.VISIBLE);
        photoImageView.setVisibility(View.GONE);
        messageTextView.setText(message.getText());
    }
    authorTextView.setText(message.getName());

    return convertView;
}

}

item_message.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/lp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="@dimen/activity_horizontal_margin"
    android:layout_marginStart="@dimen/activity_horizontal_margin"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/photoImageView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true" />

    <TextView
        android:id="@+id/messageTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_weight="0"
        android:background="@drawable/messenger_bubble_large_white"
        android:padding="2dp"
        android:textAppearance="?android:attr/textAppearanceLarge"
        tools:text="Message" />

    <TextView
        android:id="@+id/nameTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="0"
        android:textAppearance="?android:attr/textAppearanceSmall"
        tools:text="Name" />

</LinearLayout>

Answer 1

嗨@Parjanya，您必须检查类型并根据条件您可以隐藏一个并显示另一个

Answer 2

对我来说，我使用了 2 个不同的 viewHolder 和 2 个不同的 xml。我的代码如下；

MessageChatAdapter.java;

public class MessageChatAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {  
private List<ChatMessage> mChatList;
public static final int SENDER = 0;
public static final int RECIPIENT = 1;

public MessageChatAdapter(List<ChatMessage> listOfFireChats) {
    mChatList = listOfFireChats;     
}

@Override
public int getItemViewType(int position) {
    if (mChatList.get(position).getRecipientOrSenderStatus() == SENDER) {
        return SENDER;
    } else {
        return RECIPIENT;
    }
}

@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup viewGroup, int viewType) {
    RecyclerView.ViewHolder viewHolder;
    LayoutInflater inflater = LayoutInflater.from(viewGroup.getContext());

    switch (viewType) {
        case SENDER:
            View viewSender = inflater.inflate(R.layout.layout_sender_message, viewGroup, false);
            viewHolder = new ViewHolderSender(viewSender);
            break;
        case RECIPIENT:
            View viewRecipient = inflater.inflate(R.layout.layout_recipient_message, viewGroup, false);
            viewHolder = new ViewHolderRecipient(viewRecipient);
            break;
        default:
            View viewSenderDefault = inflater.inflate(R.layout.layout_sender_message, viewGroup, false);
            viewHolder = new ViewHolderSender(viewSenderDefault);
            break;
    }
    return viewHolder;
}

@Override
public void onBindViewHolder(RecyclerView.ViewHolder viewHolder, int position) {

    switch (viewHolder.getItemViewType()) {
        case SENDER:
            ViewHolderSender viewHolderSender = (ViewHolderSender) viewHolder;
            configureSenderView(viewHolderSender, position);
            break;
        case RECIPIENT:
            ViewHolderRecipient viewHolderRecipient = (ViewHolderRecipient) viewHolder;
            configureRecipientView(viewHolderRecipient, position);
            break;
    }


}

private void configureSenderView(ViewHolderSender viewHolderSender, int position) {
    ChatMessage senderFireMessage = mChatList.get(position);
    viewHolderSender.getSenderMessageTextView().setText(senderFireMessage.getMessage());
    viewHolderSender.getmTimeStamp().setText(converteTimestamp(senderFireMessage.getTimestap()));

}

private void configureRecipientView(ViewHolderRecipient viewHolderRecipient, int position) {
    ChatMessage recipientFireMessage = mChatList.get(position);
    viewHolderRecipient.getRecipientMessageTextView().setText(recipientFireMessage.getMessage());
    viewHolderRecipient.getmTimeStamp().setText(converteTimestamp(recipientFireMessage.getTimestap()));
}

/*==============ViewHolder===========*/

/*ViewHolder for Sender*/

public class ViewHolderSender extends RecyclerView.ViewHolder  {

    private TextView mSenderMessageTextView;
    private TextView mTimeStamp;

    public ViewHolderSender(View itemView) {
        super(itemView);
        mSenderMessageTextView = (TextView) itemView.findViewById(R.id.text_view_sender_message);
        mTimeStamp = (TextView) itemView.findViewById(R.id.textView2);         
    }

    public TextView getSenderMessageTextView() {
        return mSenderMessageTextView;
    }

    public TextView getmTimeStamp() {
        return mTimeStamp;
    }
}


/*ViewHolder for Recipient*/
public class ViewHolderRecipient extends RecyclerView.ViewHolder {

    private TextView mRecipientMessageTextView;
    private TextView mTimeStamp;

    public ViewHolderRecipient(View itemView) {
        super(itemView);
        mRecipientMessageTextView = (TextView) itemView.findViewById(R.id.text_view_recipient_message);
        mTimeStamp = (TextView) itemView.findViewById(R.id.textView2);      
    }

    public TextView getRecipientMessageTextView() {
        return mRecipientMessageTextView;
    }

    public TextView getmTimeStamp() {
        return mTimeStamp;
    }
}

layout_sender_message.xml

<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="wrap_content">
    <TextView
        android:id="@+id/text_view_sender_message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="I am doing ok"
        android:padding="8dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="2dp"
        android:textStyle="bold"
        android:textSize="14sp"
        android:textColor="#FFFFFF"
        android:background="@drawable/sender_rounded_corners"
        android:layout_alignParentRight="true" />
    <TextView
        android:id="@+id/textView2"
        android:layout_width="60dp"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/text_view_sender_message"
        android:layout_gravity="bottom"
        android:layout_toLeftOf="@id/text_view_sender_message"
        android:text="TextView"
        android:textSize="12sp"
        android:textStyle="italic"/>

</RelativeLayout>

layout_recipient_message.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:tools="http://schemas.android.com/tools"
              android:layout_width="match_parent"
              android:orientation="horizontal"
              android:layout_height="wrap_content">
    <TextView
        android:id="@+id/text_view_recipient_message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="Hi. How are you?"
        android:padding="8dp"
        android:textStyle="bold"
        android:layout_marginRight="10dp"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="2dp"
        android:textColor="#727272"
        android:textSize="15sp"
        android:background="@drawable/recipient_rounded_corners"/>

    <TextView
        android:id="@+id/textView2"
        android:layout_width="69dp"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/text_view_recipient_message"
        android:text="TextView"
        android:textSize="12sp"
        android:layout_gravity="bottom"
        android:textStyle="italic"/>

</LinearLayout>

非常基本，需要修复，但这会给你一个良好的开端。

Answer 3

我认为您应该为聊天左右气泡使用两个不同的自定义组件。

设置为TextView的背景，并设置显示和隐藏两个聊天气泡的布尔条件。

如果您想了解更多有关使用 firebase 的信息和演示，请查看以下链接：

https://www.androidtutorialpoint.com/firebase/real-time-android-chat-application-using-firebase-tutorial/

希望对你有帮助。

谢谢:)

Answer 4

只有两个字回答...

使用重力

例如

LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams)  _chat_view.getLayoutParams();
lp.gravity = Gravity.END | Gravity.RIGHT;
_chat_view.setLayoutParams(lp);

_chat_view 是您的 Message (LinearLayout) 容器。