Wie das Aussehen einer Listview-Zeilen anpassen

Question

Ich mag würde einen Listview haben, in der die Zeilen:

• haben abgerundete Ecken;
• sind teilweise gefärbt (der linke Teil jeder Reihe);
• enthalten in ihrem farbigen Bereich eine Form, die mit einer anderen Farbe gefüllt ist. Hier

ist ein Beispiel aus einer anderen App:

ich zur Zeit zwei Leitungen haben, aber ich habe nicht mit einem von ihnen gelingen.

Meine erste Führung (Form)

Ich fand, wie abgerundete Ecken zu erhalten, indem eine Form verwendet und es als Hintergrund für die Listenansicht verwenden.

Die ziehbar Formdatei „rounded_rectangle.xml“:

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

    <corners 
     android:bottomRightRadius="7dp" 
     android:bottomLeftRadius="7dp" 
     android:topLeftRadius="7dp" 
     android:topRightRadius="7dp"/> 

</shape> 

Die Aktivität Datei:

<?xml version="1.0" encoding="utf-8"?> 
<FrameLayout  xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:custom="http://schemas.android.com/apk/res-auto" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    xmlns:tools="http://schemas.android.com/tools" 
    app:layout_behavior="@string/appbar_scrolling_view_behavior" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    // ... 
    <ListView 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_above="@+id/splitView" 
     android:id="@+id/lv_player" 
     android:layout_alignParentTop="true" 
     android:background="@drawable/rounded_rectangle"/> 

    // ... 

</FrameLayout> 

Aber ich weiß nicht, wie eine Form zu verwenden, eine Reihe teilweise gefärbt haben oder zeichne ein Symbol. Ich kann die Form mit einer Farbe füllen, aber dann sind die Reihen vollständig gefärbt.

Meine zweite Führung (Vektor)

Ich fand auch, dass ich einen Vektor als Hintergrund meiner Listview verwenden können. Der Vorteil ist, dass ich mit Pfaden zeichnen kann, was ich will.

Ein Beispiel für eine Vektordatei:

<vector xmlns:android="http://schemas.android.com/apk/res/android" 
    android:height="64dp" 
    android:width="64dp" 
    android:viewportHeight="600" 
    android:viewportWidth="600" > 

    <path 
     android:name="w" 
     android:fillColor="#000000" 
     android:pathData="m 290,103 l-200,0 c -50,0 -50,-100 0,-100 l200,0 z" 
    /> 
</vector> 

ich einen Weg für den farbigen Bereich meiner Zeilen und ein anderes für das Symbol einfach erstellen kann. Nun, das Problem ist, dass ich nicht weiß, wie man die Größe des Vektors auf die Größe der Linie skaliert.

Wissen Sie, was die beste Option wäre und wie kann ich das erwartete Ergebnis erzielen?

Vielen Dank im Voraus.

Answer 1

Betrachten Sie eine CardView, es wird Ihnen helfen, die abgerundeten Ecken zu bekommen. Innerhalb der CardView erstellen Sie eine RelativeLayout, um den Rest der oben genannten Sachen zu bekommen.

Hier ist ein gutes Tutorial: https://guides.codepath.com/android/Using-the-CardView

Answer 2

Zunächst einmal müssen Sie separat Ihre Phantasie Element erstellen, wie XML-Layout der Beschreibung des benutzerdefinierten Element enthalten mit:

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

<TextView 
    android:id="@+id/optionName" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_marginLeft="10dp" 
    android:layout_marginStart="10dp" 
    android:layout_weight="10" 
    android:fontFamily="sans-serif-medium" 
    android:text="@string/option" 
    android:textAppearance="?android:attr/textAppearanceMedium" 
    android:textColor="@android:color/white" 
    android:textStyle="bold" /> 

<CheckBox 
    android:id="@+id/activated" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_weight="1" 
    android:gravity="center" /> 

als erstellen Sie Ihre Adapter, der Ihre Liste haben Ihr Layout machen als ein Element erweitert

public class ListOptionsAdapter BaseAdapter {

List<OptionsObject> Features = new ArrayList<OptionsObject>(); 
LayoutInflater inflater; 
Context context; 

public ListOptionsAdapter(List<OptionsObject> features, Context context) { 
    super(); 
    Features = features; 
    inflater = LayoutInflater.from(context); 
    this.context = context; 
} 

@Override 
public int getCount() { 
    return Features.size(); 
} 

@Override 
public OptionsObject getItem(int position) { 
    return Features.get(position); 
} 

@Override 
public long getItemId(int position) { 
    return position; 
} 

@Override 
public View getView(final int position, View convertView, ViewGroup parent) { 

    ViewHolder holder; 

    if (convertView == null) { 
     convertView = inflater.inflate(R.layout.item_list_view, parent, false); 
     holder = new ViewHolder(); 
     holder.optionName = (TextView) convertView.findViewById(R.id.optionName); 
     holder.isActivate = (CheckBox) convertView.findViewById(R.id.activated); 
     convertView.setTag(holder); 

    } else { 
     holder = (ViewHolder) convertView.getTag(); 
    } 

    return convertView; 
} 

static class ViewHolder { 
    TextView optionName; 
    CheckBox isActivate; 
} 

}

danach wie oben i den Namen des Layouts angegeben i als Punkt in dem Verfahren verwenden getView() und beeinflussen jedes Element der Ansicht Halter

NB: in getView Sie müssen geben sie die Werte für die Elemente, dass sie angezeigt werden oder sie freilassen, wenn u dont need

danach einfach in meiner Tätigkeit Klasse i mein Listview und mein Adapter rufen

OptionList = (ListView) findViewById(R.id.optionList); 
adapter = new ListOptionsAdapter(Features, getApplicationContext(), this); 
OptionList.setAdapter(adapter);