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 of outcoming：

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);
        }
    }
};

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

3 个答案: