2

我在我的应用程序中使用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);
            }
        }
    }
}

有任何想法吗 ？

4

4 回答 4

1

这发生在我身上没有使用 any 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;
}
于 2019-03-15T20:20:08.450 回答
0

您是否通过从消息模型的 getId 获得的 id 检查代码中的发件人 ID 是否与发送方和接收方不同？根据需要在Adapter初始化中确定senderId的库：

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

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

于 2020-06-29T08:03:06.747 回答
0

对于使用默认 MessagesListAdapter 和 ViewHolders 的任何人，传出的图片消息 ImageView 没有设置对齐方式，但它们的父视图宽度设置为 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);
        }
    }
};
于 2021-04-16T18:58:51.287 回答
0

通过使用设置固定宽度来修复它ConstraintLayout

val holdersConfig = MessageHolders()
    .setIncomingTextConfig(
        CustomIncomingTextMessageViewHolder::class.java,
        R.layout.item_custom_incoming_text_message
    )

这是我的item_custom_outcoming_image_message

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/imageMessageContainer"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="16dp"
    android:layout_marginTop="8dp"
    android:layout_marginRight="16dp"
    android:layout_marginBottom="8dp"
    tools:context=".chatting.ChattingFragment">

    <com.stfalcon.chatkit.utils.RoundedImageView
        android:id="@id/image"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:src="@drawable/ic_chat_pick_image"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_percent=".8"
        tools:srcCompat="@tools:sample/backgrounds/scenic" />

    <View
        android:id="@id/imageOverlay"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="@id/image"
        app:layout_constraintEnd_toEndOf="@id/image"
        app:layout_constraintStart_toStartOf="@id/image"
        app:layout_constraintTop_toTopOf="@id/image"
        tools:visibility="gone" />

    <ImageView
        android:id="@+id/status"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingStart="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/image"
        tools:src="@drawable/ic_message_status_processing" />

    <TextView
        android:id="@id/messageTime"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="@id/status"
        app:layout_constraintEnd_toStartOf="@+id/status"
        app:layout_constraintTop_toTopOf="@id/status"
        tools:text="12:15" />

</androidx.constraintlayout.widget.ConstraintLayout>
于 2021-10-03T14:37:42.867 回答