firebase友好的聊天聊天气泡左右

时间:2017-10-23 05:46:06

标签: android listview firebase

我使用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>

4 个答案:

答案 0 :(得分:0)

你好@Parjanya你必须检查类型并根据条件你可以隐藏一个并显示其他

答案 1 :(得分:0)

对我来说,我使用了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>

非常基础,需要修复,但这会给你一个开端。

答案 2 :(得分:0)

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

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

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

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

我希望它可以帮到你。

谢谢:)

答案 3 :(得分:-1)

只需两个字答案......

使用重力

<强>例如

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

其中_chat_view是您的Message(LinearLayout)容器。