ChatKit库:传入图像的错误边距

Question

我正在使用ChatKit库(https://github.com/stfalcon-studio/ChatKit/)作为应用程序中的聊天功能。在库提供的消息列表中，我还包括了图像消息。

它工作得很好，但气泡的图像布局不明确，如下所示：

​

​

气泡图片1和3应该在(右侧的)上对齐，但它们是位于可用空间中的左侧的，用于接收消息。

注意，默认的文本消息气泡正确地显示在右边。

我没有在库中为布局找到任何属性来配置这种行为。

这是用于消息列表的XML：

    <android.support.v4.widget.SwipeRefreshLayout

        android:id="@+id/swipe_refresh_comments"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.stfalcon.chatkit.messages.MessagesList
            android:id="@+id/messagesList"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_above="@+id/input_comment"
            app:incomingDefaultBubbleColor="@color/lightGrayRetail"
            app:incomingTimeTextColor="@color/white"
            app:incomingDefaultBubblePressedColor="@color/lightGrayRetail"
            app:incomingDefaultImageOverlayPressedColor="@color/lightGrayRetail"
            app:outcomingDefaultBubblePressedColor="@color/pinkRetail"
            app:outcomingDefaultImageOverlayPressedColor="@color/pinkRetail"
            app:outcomingDefaultBubbleColor="@color/pinkRetail"
            app:outcomingTimeTextColor="@color/colorMaterialGray" />

    </android.support.v4.widget.SwipeRefreshLayout>

我收到的文本信息布局布局：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="8dp"
    android:layout_marginLeft="16dp"
    android:layout_marginRight="16dp"
    android:layout_marginTop="8dp">

    <TextView
        android:id="@+id/displayNameTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignStart="@+id/bubble"
        android:layout_marginStart="8dp"
        android:layout_marginBottom="8dp"
        android:textColor="@color/colorMaterialGray"/>

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@id/messageUserAvatar"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_marginEnd="8dp"
        android:src="@drawable/woman" />

    <ImageView
        android:id="@+id/onlineIndicator"
        android:layout_width="12dp"
        android:layout_height="12dp"
        android:layout_alignEnd="@id/messageUserAvatar"
        android:layout_alignTop="@id/messageUserAvatar"
        android:layout_marginEnd="5dp" />

    <LinearLayout
        android:id="@id/bubble"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="30dp"
        android:layout_below="@+id/displayNameTextView"
        android:layout_toEndOf="@id/messageUserAvatar"
        android:orientation="vertical">

        <TextView
            android:id="@id/messageText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="4dp"
            android:layout_marginStart="8dp"/>

    </LinearLayout>

    <TextView
        android:id="@+id/incomingTimeTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignEnd="@id/bubble"
        android:layout_below="@id/bubble"
        android:layout_marginEnd="4dp"
        android:text="18:00"
        android:layout_marginTop="4dp"
        android:textColor="@color/colorMaterialGray" />

</RelativeLayout>

输出布局：

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="8dp"
    android:layout_marginLeft="16dp"
    android:layout_marginRight="16dp"
    android:layout_marginTop="8dp">

    <LinearLayout
        android:id="@id/bubble"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_marginStart="40dp"
        android:orientation="vertical">

        <TextView
            android:id="@id/messageText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

    </LinearLayout>

    <TextView
        android:id="@+id/outcomingTimeTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignStart="@id/bubble"
        android:layout_below="@id/bubble"
        android:textColor="@color/colorMaterialGray"
        android:layout_marginStart="16dp"/>

</RelativeLayout>

输出的MessageHolder：

public class CustomOutcomingMessageViewHolder extends MessageHolders.OutcomingTextMessageViewHolder<Comment> {

    private TextView mOutcomingTimeTextView;

    public CustomOutcomingMessageViewHolder(View itemView) {
        super(itemView);
        mOutcomingTimeTextView = itemView.findViewById(R.id.outcomingTimeTextView);
    }

    @Override
    public void onBind(Comment comment) {
        super.onBind(comment);
        if(comment.getmContent() != null){
            if(comment.getmContent().length() > 3){
                SimpleDateFormat timeOutput = new SimpleDateFormat("HH:mm", Locale.FRANCE);
                String commentPostedTime = timeOutput.format(comment.getmPostedDate());
                mOutcomingTimeTextView.setText(commentPostedTime);
            }
        }
    }
}

有什么想法吗？

Answer 1

这种情况发生在我没有使用任何MessageHolder的情况下，我可以通过为所有图像分配相同的宽度来修复它：

int width = Math.round( (float) getScreenWidthHeight().x * 0.8f); // width = 80% of screen's max width
int height = Math.round((float) bitmap.getHeight() / ((float) bitmap.getWidth() / (float) width));
Bitmap scaledBitmap = Bitmap.createScaledBitmap(bitmap), width, height, true);

其中getScreenWidthHeight()是：

private Point getScreenWidthHeight(Activity activity) {
    Display display = activity.getWindowManager(). getDefaultDisplay();
    Point size = new Point();
    display.getSize(size);
    return size;
}

Answer 2

通过消息模型的getId获得的id，您是否检查了代码中的发件人id对于发送方和接收方是不同的？根据库，您需要在适配器初始化中确定senderId：

MessagesListAdapter<Message> adapter = new MessagesListAdapter<>(senderId, 
imageLoader);
messagesList.setAdapter(adapter);

库根据senderIds比较决定是左对齐还是右对齐。

Answer 3

对于任何使用默认MessagesListAdapter和ViewHolders的人，传出图片消息ImageViews没有设置它们的对齐设置，但是它们的父视图宽度被设置为match_parent，这就是图像没有正确对齐的原因。

item_outcoming_image_message.xml：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="8dp"
    android:layout_marginLeft="16dp"
    android:layout_marginRight="16dp"
    android:layout_marginTop="8dp">

    <com.stfalcon.chatkit.utils.RoundedImageView
        android:id="@id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:layout_marginLeft="@dimen/message_outcoming_bubble_margin_left"
        android:layout_marginStart="@dimen/message_outcoming_bubble_margin_left" />

因此，在查看了一些库代码之后，我发现一个解决方案就是简单地覆盖onBindViewHolder()：

messagesAdapter = new MessagesListAdapter<Message>(senderId, imageLoader) {
    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        super.onBindViewHolder(holder, position);
        if (holder.getItemViewType() == -132) { // -132 is an outgoing picture message
            RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) holder.itemView.findViewById(com.stfalcon.chatkit.R.id.image).getLayoutParams();
            params.addRule(RelativeLayout.ALIGN_PARENT_END);
        }
    }
};