Erstellen einer sehr angepassten Listenansicht auf Android (dh eine vertikale Linie mit Sprechblasen aufgereiht)

Question

Ich habe eine normale Listview aber unser Design-Team hat freundlicherweise etwas gemacht, das sieht gut aus, für eine Präsentation und wie Sie es erraten können ist jetzt gefragt, dass es so aussieht!

Listenansicht

Raupen

Aber ich bin zu kämpfen, etwas einmal in der Nähe zu finden, was ich brauche und ich weiß wirklich nicht, wo zu beginnen!

Jedes Element im Moment ist ein Zeilenlistenelement in einer Listenansicht, also wie bekomme ich eine fast Git Stil Spur Spur, die den Status des Elements inline widerspiegelt?

Answer 1

Verwenden Sie beim Erstellen von ListView kein Padding oder Divider.

Hier ähnliche Fragen:

Android - How to show a vertical line on the background of a ListView (and according to row height)?

How do create this type of Listview in Android?

Answer 2

Ok so in der richtigen Richtung mit Google Ozgur wies mich freundlicherweise so nach dem Fehlschlagen, was ich mit war eine Auftragsliste Aktivität endete (order_list_activity.xml)

<?xml version="1.0" encoding="utf-8"?> 
<android.support.v4.widget.DrawerLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:id="@+id/drawer_layout" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="horizontal" 
    android:gravity="center" 
    android:layout_marginTop="20dp"> 


<RelativeLayout 
    android:layout_width="40dp" 
    android:layout_height="match_parent" 
    android:gravity="center" 
    android:layout_marginTop="0dp" 
    android:layout_marginBottom="-20dp" 
    android:layout_marginLeft="15dp"> 

    <View 
     android:layout_marginTop="45dp" 
     android:layout_marginLeft="31dp" 
     android:layout_width="10dp" 
     android:layout_height="match_parent" 
     android:background="#F1EFF3" 
     android:gravity="center" 
     android:layout_centerHorizontal="false"/> 
    <ListView 
     android:id="@+id/OrderList" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:divider="@null" 
     android:dividerHeight="0dp" 
     android:background="@drawable/list_selector_item"> 
    </ListView> 

    </RelativeLayout> 


</android.support.v4.widget.DrawerLayout> 

(Es gab eine Liste Selektor Artikel aber seine emtpy) list_selector_item.xml

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

Folge von einem job_list_item.xml

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="fill_parent" 
    android:paddingBottom="20dp" 
    android:paddingLeft="5dp" 
    android:paddingTop="20dp"> 

    <ImageView 
     android:id="@+id/icon" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_marginBottom="10dp" 
     android:layout_marginLeft="2dp" 
     android:layout_marginRight="12dp" 
     android:layout_marginTop="20dp" 
     android:background="@drawable/job_icon_circle" 
     android:contentDescription="" 
     android:padding="5dp" /> 

    <LinearLayout 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
     android:layout_marginRight="5dp" 
     android:orientation="vertical"> 

     <LinearLayout 
      android:layout_width="fill_parent" 
      android:layout_height="wrap_content" 
      android:layout_marginLeft="60dp" 
      android:layout_marginTop="20dp" 
      android:layout_weight="1" 
      android:background="@drawable/job_list_bubble" 
      android:orientation="horizontal" 
      android:paddingBottom="5dp"> 


      <TableLayout 
       android:layout_width="match_parent" 
       android:layout_height="match_parent"> 

       <TableRow> 

        <TextView 
         android:id="@+id/time" 
         android:layout_width="120dp" 
         android:layout_height="match_parent" 
         android:layout_marginLeft="30dp" 
         android:layout_marginTop="0dp" 
         android:layout_toRightOf="@id/icon" 
         android:gravity="center_vertical" 
         android:maxWidth="120dp" 
         android:text="Distance" 
         android:textColor="#ff0000" 
         android:textSize="20sp" /> 

        <TableLayout> 

         <TableRow> 

          <TextView 
           android:id="@+id/postCode" 
           android:layout_width="120dp" 
           android:layout_height="match_parent" 
           android:layout_gravity="right" 
           android:layout_marginTop="0dp" 
           android:layout_toRightOf="@id/icon" 
           android:gravity="center_vertical" 
           android:maxWidth="120dp" 
           android:paddingRight="3dp" 
           android:text="CW11 2XQ" 
           android:textColor="#000000" 
           android:textSize="20sp" /> 

         </TableRow> 

         <TableRow> 

         </TableRow> 
        </TableLayout> 

       </TableRow> 

       <TableRow> 

        <TextView 
         android:id="@+id/jobId" 
         android:layout_width="wrap_content" 
         android:layout_height="wrap_content" 
         android:layout_marginLeft="30dp" 
         android:layout_marginTop="0dp" 
         android:layout_toRightOf="@id/icon" 
         android:text="OrderId" 
         android:textColor="#000000" 
         android:textSize="14sp" /> 

        <ImageView 
         android:id="@+id/imgNotes" 
         android:layout_width="75px" 
         android:layout_height="75px" 
         android:layout_marginLeft="95dp" 
         android:layout_marginRight="15dp" 
         android:background="@drawable/notes" 
         android:contentDescription="" /> 

       </TableRow> 

       <TableRow> 

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

        </LinearLayout> 

       </TableRow> 

       <TableRow> 

       </TableRow> 

       <TableRow> 

        <TextView 
         android:id="@+id/OrderItemSummary" 
         android:layout_width="fill_parent" 
         android:layout_height="fill_parent" 
         android:layout_marginLeft="30dp" 
         android:layout_span="2" 
         android:width="275dp" 
         android:ellipsize="none" 
         android:maxLines="100" 
         android:maxWidth="275dp" 
         android:scrollHorizontally="false" /> 

       </TableRow> 
      </TableLayout> 


     </LinearLayout> 

    </LinearLayout> 
</RelativeLayout> 

und schließlich ein ziehbar job_list_bubble.xml

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

    <item android:top="30dp"> 
     <rotate 
      android:fromDegrees="-45" 
      android:pivotX="0%" 
      android:pivotY="0%" 
      android:toDegrees="0" > 
      <shape android:shape="rectangle" > 
       <solid android:color="#F1EFF3" /> 
      </shape> 
     </rotate> 
    </item> 
    <item android:left="20dp"> 
     <shape android:shape="rectangle" > 
      <solid android:color="#F1EFF3" /> 

      <corners android:radius="5dp" /> 
     </shape> 
    </item> 

</layer-list> 

Sie werden einige der hackyness dafür haben zu ignorieren Die App ist ein vernachlässigter Bereich, der von nicht-androiden Menschen aufgegriffen und erstellt wurde!

Aber das Endergebnis sieht ein wenig wie diese