2

メッセージが左右に表示されるリストビューを使用して、チャットのようなビューを作成しようとしています。左のメッセージのマークアップは

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="5dp"
    android:gravity="left">

    <TextView
        android:id="@+id/MessageListItemText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#000000"
        android:background="@drawable/RoundedCornersBlue"
        android:padding="8dp"
        android:text="realy long realy long realy long realy long realy long realy long realy long realy long "
        android:layout_marginRight="5dp" />
    <TextView
        android:id="@+id/MessageListItemDate"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:textColor="#cbc4b1"
        android:text="23:11"
        android:gravity="center_horizontal|center_vertical" />
 </LinearLayout>

しかし、2 番目のテキストビュー (タイムスタンプ) がありません。

http://i.stack.imgur.com/JxDXQ.jpg

右のメッセージには次のマークアップがあります

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="5dp"
    android:gravity="right">
    <TextView
        android:id="@+id/MessageListItemDate"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:textColor="#cbc4b1"
        android:text="12:34"
        android:gravity="center_horizontal|center_vertical" />
    <TextView
        android:id="@+id/MessageListItemText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#000000"
        android:text="realy long realy long realy long realy long realy long realy long realy long realy long "
        android:background="@drawable/RoundedCornersBlue"
        android:padding="8dp"
        android:layout_marginLeft="5dp" />
</LinearLayout>

http://i.stack.imgur.com/1MnyW.jpg

これも欲しい感じです。左と右の唯一の違いは、LinearLayout の android:gravity と、LinearLayout 内のテキストビューの順序です。

私が間違っていることは何ですか？または、どうすればこのタイプのデザインを実現できますか

ありがとう、ミハイ

4

3 に答える 3

2

最近、まったく同じ問題に遭遇しました。少し前に答えを探しましたが、他の人にとっては役立つかもしれません。これが私がそれに対処した方法です：

これは、私の conversation_item の xml コードです。デフォルトでは、すべてが左側に立っています。

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:id="@+id/conversationItemRelativeLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:paddingTop="5dp"
                android:paddingBottom="5dp"
                android:paddingLeft="11dp"
                android:paddingRight="11dp"
                >

    <ImageView
            android:id="@+id/conversationUserImage"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:background="@drawable/my_ears_placeholder_grey_background"
            android:layout_alignBottom="@+id/conversationBubble"
            />

    <TextView
            android:id="@+id/conversationDate"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Time Ago"
            android:layout_below="@id/conversationUserImage"
            android:layout_marginTop="5dp"

            />

    <TextView
            android:id="@+id/conversationBubble"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@id/conversationUserImage"
            android:text="Exemple Text"
            android:background="@drawable/bubbleleft"
            android:gravity="center"
            />

    <ImageView
            android:id="@+id/messagePicture"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@id/conversationUserImage"
            android:gravity="center"
            />

</RelativeLayout>

次に、xml を複製する代わりに、カスタム アダプターによって呼び出されるメソッドを使用して、コードでレイアウトの変更を設定します。

private View getConversationItem(Message message) {

        View view = LayoutInflater.from(ConversationActivity.this).inflate(R.layout.conversation_item, null);
        ...

        if (message.iAmOwner()) {          
                conversationBubble.setBackground(getResources().getDrawable(R.drawable.bubbleleft));
                messagePicture.setBackground(getResources().getDrawable(R.drawable.bubbleleft));                               
                ImageLoader.getInstance().displayImage(myPictureURL, conversationUserImage, options);
                ...
        }
        else {    
                ImageLoader.getInstance().displayImage(senderPictureURL, conversationUserImage, options);
                conversationBubble.setBackground(getResources().getDrawable(R.drawable.bubbleright));
                messagePicture.setBackground(getResources().getDrawable(R.drawable.bubbleright));


            RelativeLayout.LayoutParams conversationUserImageParams = (RelativeLayout.LayoutParams)       conversationUserImage.getLayoutParams();
            conversationUserImageParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);
            conversationUserImage.setLayoutParams(conversationUserImageParams);

            RelativeLayout.LayoutParams conversationDateParams = (RelativeLayout.LayoutParams)conversationDate.getLayoutParams();
            conversationDateParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);
            conversationDate.setLayoutParams(conversationDateParams);

            RelativeLayout.LayoutParams conversationBubbleParams = (RelativeLayout.LayoutParams) conversationBubble.getLayoutParams();
            conversationBubbleParams.addRule(RelativeLayout.LEFT_OF,R.id.conversationUserImage);


            RelativeLayout.LayoutParams messagePictureParams = (RelativeLayout.LayoutParams) messagePicture.getLayoutParams();
            messagePictureParams.addRule(RelativeLayout.LEFT_OF,R.id.conversationUserImage);

            messagePictureParams.removeRule(RelativeLayout.RIGHT_OF);
            conversationBubbleParams.removeRule(RelativeLayout.RIGHT_OF);

            conversationBubble.setLayoutParams(conversationBubbleParams);
            messagePicture.setLayoutParams(messagePictureParams);

        }

        return view;
    }

お役に立てれば。乾杯

于 2013-07-31T16:04:57.777 に答える
1

チャット用に2つの異なるxmlを作成する必要はありません。あなたはこれを単一で達成することができます。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/txtsenderdt"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="left|center"
            android:text="07:03"
            android:textColor="@android:color/darker_gray"
            android:textSize="18dp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/txtsender"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="left"
            android:background="@drawable/chat1"
            android:text="realy long realy long realy long realy long realy long realy long realy long realy long realy long realy long realy long realy long realy long realy long realy long realy long"
            android:textSize="18dp" />
    </LinearLayout>

</LinearLayout>
于 2012-10-31T10:11:13.897 に答える
0

first in message left で使用LinearLayoutしているため、使用可能なすべてのスペースが埋められます。したがって、このように変更する必要がありますorientation="horizontal"TextViewLinearLayoutRelativeLayout

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="5dp"
    android:gravity="left">

    <TextView
        android:id="@+id/MessageListItemDate"
        android:layout_width="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_height="fill_parent"
        android:textColor="#cbc4b1"
        android:text="23:11"
        android:gravity="center_horizontal|center_vertical" />

    <TextView
        android:id="@+id/MessageListItemText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#000000"
        android:layout_toLeftOf="@id/MessageListItemDate"
        android:background="@drawable/RoundedCornersBlue"
        android:padding="8dp"
        android:text="realy long realy long realy long realy long realy long realy long realy long realy long "
        android:layout_marginRight="5dp" />
</RelativeLayout>
于 2012-10-31T10:14:47.733 に答える