2016-11-09 6 views
1

Ich versuche, diese benutzerdefinierte Zeile für meine ListView zu erstellen. Durch die Magie von Photoshop hier ist das, was ich zu tun versuche:Benutzerdefinierte Zeile für Listenansicht

enter image description here

Aber wenn ich meine Listenansicht ausführen, wird es herauskommen wie folgt aus:

enter image description here

kann jemand helfen ich finde heraus, was ich falsch mache mit der Aussicht?

Hier ist meine row.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="match_parent" 
    android:orientation="horizontal" 
    android:padding="5dp"> 

    <!-- ListRow Left sied Thumbnail image --> 
    <LinearLayout 
     android:id="@+id/thumbnail" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:layout_alignParentLeft="true"> 

     <ImageView 
      android:id="@+id/list_image" 
      android:layout_width="64dp" 
      android:layout_height="64dp" 
      android:layout_alignParentRight="true" 
      android:background="@color/COLOR_GREY" /> 
    </LinearLayout> 

    <!-- Item Name --> 
    <TextView 
     android:id="@+id/txtItemName" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignTop="@+id/thumbnail" 
     android:layout_toRightOf="@+id/thumbnail" 
     android:text="Item Name" 
     android:textColor="#040404" 
     android:textSize="15dip" 
     android:textStyle="bold" 
     android:typeface="sans" /> 

    <!-- progress count --> 
    <TextView 
     android:id="@+id/txtProgress" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_below="@+id/thumbnail" 
     android:layout_alignLeft="@+id/thumbnail" 
     android:text="Item Name" 
     android:textColor="#040404" 
     android:textSize="15dip" 
     android:textStyle="bold" 
     android:typeface="sans" /> 

    <!-- Retry button --> 
    <Button 
     android:id="@+id/btnRetry" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignTop="@id/txtItemName" 
     android:layout_toRightOf="@id/txtItemName" 
     android:layout_alignParentRight="true" 
     android:layout_centerVertical="true" 
     android:layout_marginRight="5dp" 
     android:text="Retry" /> 

    <!-- Delete button --> 
    <Button 
     android:id="@+id/btnDelete" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignTop="@id/btnRetry" 
     android:layout_toRightOf="@id/btnRetry" 
     android:layout_alignParentRight="true" 
     android:layout_centerVertical="true" 
     android:layout_marginRight="5dp" 
     android:text="Delete" /> 

    <!-- ProgressBar --> 
    <ProgressBar 
     style="?android:attr/progressBarStyleHorizontal" 
     android:layout_below="@id/txtItemName" 
     android:layout_alignLeft="@id/txtItemName" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:id="@+id/progressBarItem" /> 

</RelativeLayout> 
+0

Zunächst verwendet "RelativeLayout" nicht "Ausrichtung", LinearLayout dann, wenn Sie es sind Verweisen auf eine Ansicht Sie verwenden nicht das '+' - Zeichen, wenn Sie auf ihre ID zugreifen. Sie wird nur zum Erstellen einer neuen ID verwendet. Also zuerst würde ich das beheben. Und Sie verwenden die volle Breite für das Layout mit dem ImageView, so dass die anderen Elemente auf dem Bildschirm erscheinen –

Antwort

1

Dies ist das Layout meist wie auf Ihrem Bild fertig, muß nur mit den Tasten ändern, um sie sieht besser zu machen.

In RelativeLayout Sie brauchen nicht Orientierung und für Text verwenden sp statt dip

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:id="@+id/row" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:baselineAligned="false" 
    android:gravity="center_vertical"> 

<!-- ListRow Left sied Thumbnail image --> 

<ImageView 
    android:id="@+id/list_image" 
    android:layout_width="64dp" 
    android:layout_height="64dp" 
    android:layout_centerVertical="true" 
    android:layout_alignParentLeft="true" 
    android:layout_alignParentStart="true" 
    app:srcCompat="@mipmap/ic_launcher" /> 

<!-- Item Name --> 
<TextView 
    android:id="@+id/txtItemName" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_toRightOf="@+id/list_image" 
    android:layout_toEndOf="@+id/list_image" 
    android:text="Item Name" 
    android:textColor="#040404" 
    android:textSize="15dip" 
    android:textStyle="bold" 
    android:typeface="sans" /> 

<!-- progress count --> 
<TextView 
    android:id="@+id/txtProgress" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_alignParentRight="true" 
    android:layout_alignParentEnd="true" 
    android:text="100" 
    android:textColor="#040404" 
    android:textSize="15sp" 
    android:textStyle="bold" 
    android:typeface="sans" /> 

<!-- Retry button --> 
<Button 

    android:id="@+id/btnRetry" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_toLeftOf="@id/btnDelete" 
    android:layout_toStartOf="@+id/btnDelete" 
    android:text="Retry" /> 

<!-- Delete button --> 
<Button 
    android:id="@+id/btnDelete" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_alignParentRight="true" 
    android:layout_alignParentEnd="true" 
    android:text="Delete" /> 

<!--&lt;!&ndash; ProgressBar &ndash;&gt;--> 
<ProgressBar 
    style="?android:attr/progressBarStyleHorizontal" 
    android:layout_below="@id/txtItemName" 
    android:layout_toLeftOf="@+id/txtProgress" 
    android:layout_toStartOf="@+id/txtProgress" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_toRightOf="@+id/list_image" 
    android:layout_toEndOf="@+id/list_image" 
    android:progress="100" 
    android:id="@+id/progressBarItem" /> 

Sie weitere Tipps verwenden finden können, wie mit Layouts arbeiten, indem sie kleine Teile des Layouts bearbeiten und im Stackoverflow durchsuchen und dann lernen, wie man größere Layouts macht. Denn bevor Sie wirklich einige Komponenten in lineare Layouts umbrechen mussten, können Sie jetzt mit Android Studio 2.2 ConstraintLayout verwenden

+0

Entschuldigung, mit Ihrem Layout erscheint jetzt nichts. –

+0

Ich habe von Design-Seite überprüft, es funktioniert.Wie versuchst du es? – aleksandrbel

0

Warum Sie Image innerhalb LinelarLayout mit?

prüfen dies:

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

    <!-- ListRow Left sied Thumbnail image --> 

    <ImageView 
     android:id="@+id/list_image" 
     android:layout_width="64dp" 
     android:layout_height="64dp" 
     android:layout_alignParentLeft="true" 
     android:background="@color/COLOR_GREY" /> 

    <!-- Item Name --> 
    <TextView 
     android:id="@+id/txtItemName" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignTop="@id/list_image" 
     android:layout_toRightOf="@id/list_image" 
     android:text="Item Name" 
     android:textColor="#040404" 
     android:layout_marginLeft="10dp" 
     android:textSize="15sp" 
     android:textStyle="bold" 
     android:typeface="sans" /> 

    <!-- progress count --> 
    <TextView 
     android:id="@+id/txtProgress" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentRight="true" 
     android:layout_marginRight="5dp" 
     android:layout_alignBottom="@id/list_image" 
     android:text="Item Name" 
     android:textColor="#040404" 
     android:textSize="15sp" 
     android:textStyle="bold" 
     android:typeface="sans" /> 


    <!-- Delete button --> 
    <Button 
     android:id="@+id/btnDelete" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignTop="@id/btnRetry" 
     android:layout_alignParentRight="true" 
     android:layout_centerVertical="true" 
     android:layout_marginRight="5dp" 
     android:text="Delete" /> 

    <!-- Retry button --> 
    <Button 
     android:id="@+id/btnRetry" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignTop="@id/txtItemName" 
     android:layout_toLeftOf="@id/btnDelete" 
     android:layout_centerVertical="true" 
     android:layout_marginRight="5dp" 
     android:text="Retry" /> 

    <!-- ProgressBar --> 
    <ProgressBar 
     style="?android:attr/progressBarStyleHorizontal" 
     android:layout_alignBottom="@id/list_image" 
     android:layout_toRightOf="@id/list_image" 
     android:layout_marginLeft="10dp" 
     android:layout_marginRight="5dp" 
     android:layout_toLeftOf="@id/txtProgress" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:id="@+id/progressBarItem" /> 

</RelativeLayout> 

Auch nicht vergessen, dass in sp textsize sollte

Wenn Sie Knopfgrößen ändern wollen - einfach ersetzen:

android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 

und legen Sie Ihre benutzerdefinierte Breite und Höhe in dp wie:

android:layout_width="25dp" 
    android:layout_height="25dp" 
+1

und denken Sie daran, dass Sie ein neues Layout für verschiedene Bildschirmgrößen erstellen müssen, da Sie eine feste Breite und festlegen Höhe –

+0

@AhmadAlsanie Ja, danke!) –

+0

Entschuldigung, mit Ihrem Layout erscheint jetzt nichts. –

Verwandte Themen