Erstellen komplexer Android XML-Komponente

Question

Ich versuche, die folgende XML-Liste zu machen:

original list

Mit der Zeit habe ich diese bekam:

my component (which will go inside a list)

Hier ist mein XML-Komponentencode:

list_item_issue.xml

<LinearLayout 
xmlns:android="http://schemas.android.com/apk/res/android" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:orientation="horizontal" 
android:weightSum="1"> 

<ImageView 
    android:id="@+id/imageView" 
    android:layout_width="38dp" 
    android:layout_height="38dp" 
    android:layout_marginLeft="@dimen/_5dp" 
    android:layout_marginTop="8dp" 
    android:adjustViewBounds="true" 
    android:cropToPadding="false" 
    android:scaleType="fitXY" 
    android:src="@drawable/circle_line_shape" 
    android:tint="@color/colorGray" /> 

<com.daasuu.bl.BubbleLayout 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_marginTop="10dp" 
    android:layout_marginLeft="10dp" 
    android:layout_marginRight="@dimen/_5dp" 
    android:padding="3dp" 
    app:bl_arrowDirection="left" 
    app:bl_arrowHeight="14dp" 
    app:bl_arrowPosition="10dp" 
    app:bl_arrowWidth="8dp" 
    app:bl_cornersRadius="0dp" 
    app:bl_strokeWidth="0.5dp"> 

    <RelativeLayout 
     xmlns:android="http://schemas.android.com/apk/res/android" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:layout_marginLeft="@dimen/_5dp" 
     android:orientation="horizontal"> 

     <TextView 
      android:id="@+id/parent_list_issue_title_text_view" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_gravity="center_vertical" 
      android:layout_marginRight="3dp" 
      android:text="Titulo de la incidencia" 
      android:textSize="12sp" 
      android:textColor="@android:color/black" /> 

     <TextView 
      android:id="@+id/parent_list_issue_subtitle_text_view" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_below="@+id/parent_list_issue_title_text_view" 
      android:textColor="@color/grey_semi_transparent" 
      android:textSize="10sp" 
      android:text="Subtitulo de la incidencia - Texto de prueba aplicación" /> 

     <ImageButton 
      android:id="@+id/parent_list_item_expand_arrow" 
      android:layout_width="30dp" 
      android:layout_height="25dp" 
      android:src="@drawable/arrow_drop_down_circle" 
      android:paddingRight="5dp" 
      android:layout_centerVertical="true" 
      android:layout_alignParentEnd="true" 
      android:adjustViewBounds="true" 
      android:cropToPadding="false" 
      android:scaleType="fitXY" 
      android:background="@color/white"/> 

    </RelativeLayout> 

</com.daasuu.bl.BubbleLayout> 

Hier ist meine circle_line_shape.xml

<?xml version="1.0" encoding="utf-8"?> 
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item> 
     <bitmap android:src="@drawable/ic_circle" 
       android:gravity="center" /> 
    </item> 
</layer-list> 

Problem ist, dass ich keine Ahnung, wie diese Kreise + vertikale Linien mit dem BubbleLayout ausgerichtet zu machen, wie Sie auf sehen das ursprüngliche Listenbild.

¿Soll ich meine Layoutstruktur ändern?

Vielen Dank!

Answer 1

Verwenden Sie ein RelativeLayout, kein lineares. Machen Sie die Bildansicht match_parent height. Machen Sie das Bubble layout_toEndOf der Bildansicht. Machen Sie relative_layout selbst zu wrap_content. Dadurch wird das relative Layout zur Höhe des Bubble-Layouts und das Bild zur Höhe des relativen Layouts.