2017-08-01 1 views
1

Comment créer ListView comme ça, enter image description hereComment créer un objet ListView qui correspondent à la directive matériel

google a la documentation à ce sujet,

https://material.io/guidelines/layout/metrics-keylines.html#metrics-keylines-keylines-spacing

Mais il n'y a pas explaination comment faire cela,

Voici ma tentative jusqu'à présent, je ne suis pas sûr de la marge/rembourrage et le séparateur, est-il un tutoriel comment faire cette mise en page

Ceci est la mise en page de l'article RecyclerView:

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:id="@+id/parent_view" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_gravity="center" 
    android:clickable="true" 
    android:focusable="true" 
    android:foreground="?attr/selectableItemBackground" 
    android:paddingLeft="16dp" 
    android:paddingRight="16dp" 
    android:transitionName="parent_view" 
    tools:ignore="UnusedAttribute"> 

    <ImageView 
     android:id="@+id/image_layanan" 
     android:layout_width="40dp" 
     android:layout_height="40dp" 
     android:layout_marginTop="16dp" 
     android:transitionName="image_layanan"/> 

    <TextView 
     android:id="@+id/text_layanan" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_marginLeft="16dp" 
     android:layout_marginStart="16dp" 
     android:layout_marginTop="10dp" 
     android:layout_toEndOf="@id/image_layanan" 
     android:layout_toRightOf="@+id/image_layanan" 
     android:textAppearance="?attr/textAppearanceListItem" 
     android:textSize="16sp" 
     android:transitionName="text_layanan" 
     tools:text="string/item_title"/> 

    <TextView 
     android:id="@+id/text_dokter" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_below="@+id/text_layanan" 
     android:layout_marginLeft="16dp" 
     android:layout_marginStart="16dp" 
     android:layout_toEndOf="@+id/image_layanan" 
     android:layout_toRightOf="@+id/image_layanan" 
     android:ellipsize="end" 
     android:maxLines="1" 
     android:textAppearance="?attr/textAppearanceListItem" 
     android:textColor="#212121" 
     android:textSize="14sp" 
     android:transitionName="text_dokter" 
     tools:text="string/item_desc"/> 

    <TextView 
     android:id="@+id/text_jam" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_below="@id/text_dokter" 
     android:layout_marginLeft="16dp" 
     android:layout_marginStart="16dp" 
     android:layout_toEndOf="@id/image_layanan" 
     android:layout_toRightOf="@id/image_layanan" 
     android:textSize="13sp" 
     android:transitionName="text_jam"/> 

    <TextView 
     android:id="@+id/text_pasien" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_below="@id/text_jam" 
     android:layout_marginBottom="14dp" 
     android:layout_marginLeft="16dp" 
     android:layout_marginStart="16dp" 
     android:layout_toEndOf="@id/image_layanan" 
     android:layout_toRightOf="@id/image_layanan" 
     android:textSize="13sp" 
     android:transitionName="text_pasien"/> 

    <View 
     android:layout_width="match_parent" 
     android:layout_height="1px" 
     android:layout_alignLeft="@+id/text_pasien" 
     android:layout_alignStart="@+id/text_pasien" 
     android:layout_below="@+id/text_pasien" 
     android:background="#212121"/> 

</RelativeLayout> 
+0

Que voulez-vous connaître ? Juste à propos de la partie design? Ou l'implémentation complète en Java – MrLeblond

+0

La partie design, je ne pense pas que mon design soit correct. – nyongrand

+0

tel que le diviseur – nyongrand

Répondre

3

Pour obtenir diviseur partiel (ou quel que soit le nom) J'utilise ceci:

créer une extension classe RecyclerView.ItemDecoration

public class RecyclerViewItemDivider extends RecyclerView.ItemDecoration { 
    private static final int[] ATTRS = new int[]{android.R.attr.listDivider}; 

    private Drawable mDivider; 

    public RecyclerViewItemDivider(Context context) { 
     final TypedArray a = context.obtainStyledAttributes(ATTRS); 
     mDivider = a.getDrawable(0); 
     a.recycle(); 
    } 

    @Override 
    public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) { 
     // this is the left start point for divider, 
     // I think there is better method without hardcoded the view 
     // main_content is my RectclerView item main content 
     // R.dimen.activity_horizontal_margin should be 16dp if use google guidelines 
     int left = (int)parent.findViewById(R.id.main_content).getX() + 
       (int)parent.getContext().getResources().getDimension(R.dimen.activity_horizontal_margin); 
     int right = parent.getWidth() - parent.getPaddingRight(); 

     int childCount = parent.getChildCount(); 
     for (int i = 0; i < childCount; i++) { 
      View child = parent.getChildAt(i); 

      RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child.getLayoutParams(); 

      int top = child.getBottom() + params.bottomMargin; 
      int bottom = top + mDivider.getIntrinsicHeight(); 

      mDivider.setBounds(left, top, right, bottom); 
      mDivider.draw(c); 
     } 
    } 
} 

Ensuite il vous suffit pour l'utiliser comme ceci:

RecyclerViewItemDivider divider = new RecyclerViewItemDivider(recyclerView.getContext()); 
recyclerView.addItemDecoration(divider);