Chat-Message-Box so breit wie Textinhalt

So möchte ich Chat-Nachricht Container so breit wie die Nachricht ist. möchte ich etwas wirklich ähnlich zu dieser Art von Chat-Nachricht erreichen: http://img.creativemark.co.uk/uploads/images/805/15805/img3File.png Chat-Message-Box so breit wie Textinhalt

Hier ist mein Plan, mit denen ich zu kämpfen habe:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:tools="http://schemas.android.com/tools" 
xmlns:app="http://schemas.android.com/apk/res-auto" 
android:orientation="horizontal" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:id="@+id/single_message_view" 
android:layout_margin="5dp"> 

<LinearLayout 
    android:layout_marginEnd="15dp" 
    android:layout_marginStart="15dp" 
    android:layout_alignParentEnd="true" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:minWidth="100dp" 
    android:orientation="vertical"> 

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

     <TextView 
      android:layout_width="wrap_content" 
      android:layout_weight="1" 
      android:layout_height="wrap_content" 
      android:text="author" 
      android:id="@+id/sender_data" 
      android:layout_marginEnd="5dp" 
      android:textColor="@color/colorWhite" /> 

     <TextView 
      android:layout_width="wrap_content" 
      android:layout_weight="1" 
      android:textAlignment="textEnd" 
      android:layout_height="wrap_content" 
      android:text="date" 
      android:textColor="@color/colorWhite" 
      android:id="@+id/send_date" /> 

    </LinearLayout> 

    <RelativeLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:orientation="vertical" 
     android:id="@+id/message_content" 
     android:background="@drawable/msg_haze" 
     > 

     <TextView 
      android:layout_margin="10dp" 
      android:layout_alignParentTop="true" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:textColor="@color/colorWhite" 
      android:id="@+id/message_text" 
      android:text="content" /> 

     <LinearLayout 
      android:layout_margin="10dp" 
      android:minWidth="100dp" 
      android:layout_below="@id/message_text" 
      android:id="@+id/tags_container" 
      android:orientation="horizontal" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content"> 

      <android.support.v7.widget.RecyclerView 
       android:layout_marginTop="5dp" 
       android:layout_marginBottom="5dp" 
       android:id="@+id/message_tags" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       app:layoutManager="LinearLayoutManager" 
       tools:listitem="@layout/item_tag" /> 
     </LinearLayout> 

     <ImageView 
      android:layout_marginBottom="10dp" 
      android:layout_marginEnd="10dp" 
      android:paddingBottom="10dp" 
      android:layout_alignParentEnd="true" 
      android:layout_alignParentBottom="true" 
      android:layout_width="15dp" 
      android:layout_height="15dp" 
      android:id="@+id/message_state" /> 

     <LinearLayout 
      android:id="@+id/attachment_holder" 
      android:layout_marginTop="10dp" 
      android:padding="5dp" 
      android:visibility="gone" 
      android:orientation="vertical" 
      android:layout_alignParentBottom="true" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:background="@drawable/attachments_haze"> 

      <android.support.v7.widget.RecyclerView 
       android:id="@+id/attachments" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       app:layoutManager="GridLayoutManager"/> 

      <ImageView 
       android:id="@+id/attachment" 
       android:visibility="gone" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" /> 
     </LinearLayout> 

    </RelativeLayout> 
</LinearLayout>

Quelle

2017-02-02 wegtis

die Chat-Nachricht, die angezeigt werden müssen um 9 Patch-Bilder zu verwenden, die es Ihnen ermöglichen, Bitmap-Bilder zu erstellen, die automatisch die Größe des Inhalts der Ansicht anpassen

Quelle

2017-02-02 13:51:39 Basavannevva

Normalerweise müssen wir für diese Art von Chat-Blase Verwenden Sie the nine patch image. Dieses Neun-Patch-Bild kann je nach Inhalt nach Größe angepasst werden.

Unten sind neun Patch-Image für senden und empfangen Nachricht.

speichern Bild als .9.png Erweiterung. Verwenden Sie dieses Bild, um Hintergrund zu geben.

Quelle

2017-02-02 14:00:30

Ich denke, dies wird nicht für diese spezielle Frage notwendig ist, als ob Sie das Bild Referenz in der Frage öffnen können, gibt es ein einfaches quadratischen Box-Gehäuse mit flacher Farbe kann die mit einem selbst ziehbaren erhalten werden. Keine Notwendigkeit für ein 9-Patch-Bild. Legen Sie das Layout einfach logisch fest, indem Sie eine Farbe verwenden, die für Hintergrundzwecke gezeichnet werden kann. Veröffentlichen Sie das gesamte Layout in einer Weile. – Mit

Ja das ist auch möglich. aber das ist nur ein Hinweis. Die meisten (nicht alle) Chat-Blasen bestehen aus dem neunen Patch-Bild. –

ja, du hast absolut recht, das ist y ich erwähnte "das wird nicht notwendig sein für dieses spezielle problem" – Mit

stimme mit @basavannevva .. 9 Patch-Bild erstreckt sich automatisch .. Sie müssen seinen Inhaltsbereich und Stretch-Bereich bereitstellen. Es gibt viele Online-Tools, die ein 9-Patch-Image erstellen können. und ich denke, sogar Android Studio kann 9 Patch-Datei bearbeiten.

Quelle

2017-02-02 14:02:03

temp_black.xml (Dies wird als Hintergrund der Chat-Box verwendet werden, können Sie die Farbe in der folgenden Datei zu #FFFFFF ändern, um die gewünschte Ausgabe zu erhalten)

<?xml version="1.0" encoding="UTF-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" > 

    <solid android:color="#000000"/> 

    <padding 
     android:bottom="0dip" 
     android:left="0dip" 
     android:right="0dip" 
     android:top="0dip" /> 

</shape>

temp_white.xml (Diese ist der schwarze Punkt zwischen dem Namen des Versenders und der Zeit, ich weiß, dass im Bild die Farbe schwarz ist, aber als Referenz habe ich dies gemacht, Sie können nicht nur die Farbe in unter XML bearbeiten, um die Ausgabe Ihrer Wahl zu erhalten)

temp.xml (Die Layoutdatei)

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

    <LinearLayout 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_gravity="left|center_vertical" 
     android:layout_margin="10dp" 
     android:background="@drawable/temp_black" 
     android:paddingRight="10dp" 
     android:orientation="horizontal"> 

     <ImageView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_gravity="center" 
      android:adjustViewBounds="true" 
      android:src="@mipmap/ic_launcher"/> 

     <LinearLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_gravity="center" 
      android:layout_marginLeft="10dp" 
      android:orientation="vertical"> 

      <TextView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_gravity="left|center_vertical" 
       android:text="Sample Text Sample Text" 
       android:textSize="16sp" 
       android:textColor="#FFFFFF"/> 

      <LinearLayout 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:layout_gravity="left|center_vertical" 
       android:layout_marginTop="5dp" 
       android:orientation="horizontal"> 

       <TextView 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_gravity="left|center_vertical" 
        android:text="Name" 
        android:textSize="11sp" 
        android:textColor="#FFFFFF"/> 

       <ImageView 
        android:layout_width="5dp" 
        android:layout_height="5dp" 
        android:layout_gravity="center" 
        android:layout_marginLeft="10dp" 
        android:layout_marginRight="10dp" 
        android:adjustViewBounds="true" 
        android:src="@drawable/temp_white"/> 

       <TextView 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_gravity="left|center_vertical" 
        android:text="Time" 
        android:textSize="11sp" 
        android:textColor="#FFFFFF"/> 

      </LinearLayout> 

     </LinearLayout> 

    </LinearLayout> 

</LinearLayout>

Schließlich wird das Ausgangsbild

Quelle

2017-02-02 14:42:47 Mit

Ändern Sie einfach das Layout Schwerkraft nach rechts | center_vertical für die Anzeige der Chat-Box auf der anderen Seite, falls erforderlich, lassen Sie es mich wissen, kann ich Ihnen mit beiden Seiten enthalten – Mit

Chat-Message-Box so breit wie Textinhalt

Antwort

Verwandte Themen