2015-05-29 3 views
15

Ich versuche zu machen RecyclerView und GridLayoutManager zu verwenden, um ein 3 Spalten Raster zu machen, und ich verwende ItemDecoration auf Spaltenabstand zu machen, jetzt das Problem ist die Sache des Breite in der dritten Spalte ist kleiner als der Artikel in der ersten und zweiten Spalte! Sehen Sie sich die Bildschirmaufnahme unten an.Einzelteile sind nicht die gleiche Breite, wenn RecyclerView GridLayoutManager mit zu Säulenabstand von ItemDecoration

enter image description here

Wenn ich nicht hinzufügen, die benutzerdefinierte ItemDecoration-RecyclerView, ist alles in Ordnung.

Hier ist mein Code:

MainActivity.java:

public class MainActivity extends AppCompatActivity { 

    private RecyclerView mRecyclerView; 
    private MyAdapter mAdapter; 

    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     setContentView(R.layout.activity_main); 

     mRecyclerView = (RecyclerView) findViewById(R.id.recycler_view); 
     mAdapter = new MyAdapter(); 
     mRecyclerView.setAdapter(mAdapter); 

     GridLayoutManager gridLayoutManager = new GridLayoutManager(this, 3); 
     mRecyclerView.setLayoutManager(gridLayoutManager); 

     int horizontalSpacing = 20; 
     int verticalSpacing = 10; 
     SpacingDecoration decoration = new SpacingDecoration(horizontalSpacing, verticalSpacing, true); 
     mRecyclerView.addItemDecoration(decoration); 
    } 


    private static class MyAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> { 

     private int[] mColors = new int[]{Color.RED, Color.BLUE, Color.MAGENTA}; 

     private static class ItemHolder extends RecyclerView.ViewHolder { 

      public MyTextView title; 

      public ItemHolder(View itemView) { 
       super(itemView); 
       title = (MyTextView) itemView.findViewById(android.R.id.text1); 
       title.setTextColor(Color.WHITE); 
      } 
     } 

     @Override 
     public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { 
      View itemView = LayoutInflater.from(parent.getContext()).inflate(R.layout.item, parent, false); 
      ItemHolder holder = new ItemHolder(itemView); 
      holder.itemView.setOnClickListener(itemClickListener); 
      return holder; 
     } 

     @Override 
     public void onBindViewHolder(RecyclerView.ViewHolder rHolder, int position) { 
      ItemHolder holder = (ItemHolder) rHolder; 

      holder.title.setText(String.format("[%d]width:%d", position, holder.itemView.getWidth())); 
      holder.itemView.setBackgroundColor(mColors[position % mColors.length]); 
      holder.itemView.setTag(position); 
      holder.title.setTag(position); 
     } 

     @Override 
     public int getItemCount() { 
      return 50; 
     } 

     private View.OnClickListener itemClickListener = new View.OnClickListener() { 
      @Override 
      public void onClick(View v) { 
       int position = (int) v.getTag(); 
       showText(v.getContext(), String.format("[%d]->width:%d", position, v.getWidth())); 
      } 
     }; 

    } 

    public static class SpacingDecoration extends RecyclerView.ItemDecoration { 

     private int mHorizontalSpacing = 5; 
     private int mVerticalSpacing = 5; 
     private boolean isSetMargin = true; 

     public SpacingDecoration(int hSpacing, int vSpacing, boolean setMargin) { 
      isSetMargin = setMargin; 
      mHorizontalSpacing = hSpacing; 
      mVerticalSpacing = vSpacing; 
     } 

     @Override 
     public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) { 
      boolean isSetMarginLeftAndRight = this.isSetMargin; 
      int bottomOffset = mVerticalSpacing; 
      int leftOffset = 0; 
      int rightOffset = 0; 

      RecyclerView.LayoutParams lp = (RecyclerView.LayoutParams) view.getLayoutParams(); 
      if (parent.getLayoutManager() instanceof GridLayoutManager) { 
       GridLayoutManager lm = (GridLayoutManager) parent.getLayoutManager(); 
       GridLayoutManager.LayoutParams gridLp = (GridLayoutManager.LayoutParams) lp; 

       if (gridLp.getSpanSize() == lm.getSpanCount()) { 
        // Current item is occupied the whole row 
        // We just need to care about margin left and right now 
        if (isSetMarginLeftAndRight) { 
         leftOffset = mHorizontalSpacing; 
         rightOffset = mHorizontalSpacing; 
        } 
       } else { 
        // Current item isn't occupied the whole row 
        if (gridLp.getSpanIndex() > 0) { 
         // Set space between items in one row 
         leftOffset = mHorizontalSpacing; 
        } else if (gridLp.getSpanIndex() == 0 && isSetMarginLeftAndRight) { 
         // Set left margin of a row 
         leftOffset = mHorizontalSpacing; 
        } 
        if (gridLp.getSpanIndex() == lm.getSpanCount() - gridLp.getSpanSize() && isSetMarginLeftAndRight) { 
         // Set right margin of a row 
         rightOffset = mHorizontalSpacing; 
        } 
       } 
      } 
      outRect.set(leftOffset, 0, rightOffset, bottomOffset); 
     } 
    } 


    private static Toast sToast; 

    public static void showText(Context context, String text) { 
     if (sToast != null) { 
      sToast.cancel(); 
     } 
     sToast = Toast.makeText(context, text, Toast.LENGTH_LONG); 
     sToast.show(); 
    } 
} 

activity_main.xml

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

    <android.support.v7.widget.RecyclerView 
     android:id="@+id/recycler_view" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent"/> 

</RelativeLayout> 

item.xml

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" 
       android:orientation="vertical"> 

    <com.example.liuqing.rvgldemo.MyTextView 
     android:id="@android:id/text1" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:padding="5dp" 
     android:textColor="#ffffff" 
     android:textAppearance="?android:attr/textAppearanceMedium"/> 
</LinearLayout> 

MyTextView.java

public class MyTextView extends TextView { 

    public MyTextView(Context context) { 
     super(context); 
    } 

    public MyTextView(Context context, AttributeSet attrs) { 
     super(context, attrs); 
    } 

    public MyTextView(Context context, AttributeSet attrs, int defStyleAttr) { 
     super(context, attrs, defStyleAttr); 
    } 

    @Override 
    public void onWindowFocusChanged(boolean hasWindowFocus) { 
     super.onWindowFocusChanged(hasWindowFocus); 
     if (hasWindowFocus) { 
      setText("[" + getTag() + "]width:" + getWidth()); 
     } 
    } 
} 

Es wird sehr zu schätzen wissen, wenn jemand dieses Problem erklären kann.

Antwort

9

Ich habe den Grund des Problems selbst gefunden. Der Versatz, der in ItemDecoration gemacht wurde, wird als Teil der Abmessungen (Breite und Höhe) des Gegenstandes betrachtet!

Werfen wir einen Blick auf den Beispielcode und Screenshot in der obigen Frage. Die Breite der Bildschirmaufnahme beträgt 480 Pixel, hier sind es 3 Spalten, die Breite jedes Elements beträgt 480/3 = 160 Pixel. In SpacingDecoration, ich füge einen linken Offset (20 Pixel) auf der ersten und zweiten Spalte, so dass die Breite des Inhalts der ersten und zweiten Spalte Inhalt ist 160-20 = 140, dann füge ich links und rechts Offset auf der dritten Spalte Element, Die Breite des Inhalts der dritten Spalte ist also 160-20-20 = 120.

Jetzt wollen wir den Inhalt jedes Elements (das farbige Rechteck) die gleiche Breite haben, müssen wir berechnen, wie viel jedes Spaltenelement den gesamten Abstand einer Zeile, aber ich bin arm, detaillierte Analyse zu schreiben, also hier ich Schreiben Sie einen groben Berechnungsprozess, Sie können ihn passieren und zum Schluss springen.

spacing = 20 
columnCount = 3 
rowWidth = 480 
itemWidth = rowWidth/columnCount 
itemOccupiedSpacing = (spacing * (columnCount + 1))/columnCount = spacing + spacing * (1/columnCount) 
itemContentWidth = itemWidth - itemOccupiedSpacing 

firstItemLeftOffset = spacing = spacing * (3/columnCount) 
firstItemRightOffset = itemOccupiedSpacing - spacing = spacing * (1/columnCount) 
secondItemLeftOffset = spacing - firstRightOffset = spacing * (2/columnCount) 
secondItemRightOffset = itemOccupiedSpacing - secondLeftOffset = spacing * (2/columnCount) 
thirdItemLeftOffset = itemOccupiedSpacing - secondLeftOffset = spacing * (1/columnCount) 
thirdItemRightOffset = spacing = spacing * (3/columnCount) 

können wir schließen:

itemLeftOffset = spacing * ((columnCount - colunmnIndex)/columnCount) 
itemRightOffset = spacing * ((colunmnIndex + 1)/columnCount) 

colunmnIndex größer als 0 und kleiner als column.


Hier ist meine individuelle ItemDecoration für Abstand, es funktioniert gut mit LinearLayoutManager, GridLayoutManager und StaggeredGridLayoutManager, werden alle Elemente die gleiche Breite sind. Sie können es direkt in Ihrem Code verwenden.

public class SpacingDecoration extends ItemDecoration { 

    private int mHorizontalSpacing = 0; 
    private int mVerticalSpacing = 0; 
    private boolean mIncludeEdge = false; 

    public SpacingDecoration(int hSpacing, int vSpacing, boolean includeEdge) { 
     mHorizontalSpacing = hSpacing; 
     mVerticalSpacing = vSpacing; 
     mIncludeEdge = includeEdge; 
    } 

    @Override 
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) { 
     super.getItemOffsets(outRect, view, parent, state); 
     // Only handle the vertical situation 
     int position = parent.getChildAdapterPosition(view); 
     if (parent.getLayoutManager() instanceof GridLayoutManager) { 
      GridLayoutManager layoutManager = (GridLayoutManager) parent.getLayoutManager(); 
      int spanCount = layoutManager.getSpanCount(); 
      int column = position % spanCount; 
      getGridItemOffsets(outRect, position, column, spanCount); 
     } else if (parent.getLayoutManager() instanceof StaggeredGridLayoutManager) { 
      StaggeredGridLayoutManager layoutManager = (StaggeredGridLayoutManager) parent.getLayoutManager(); 
      int spanCount = layoutManager.getSpanCount(); 
      StaggeredGridLayoutManager.LayoutParams lp = (StaggeredGridLayoutManager.LayoutParams) view.getLayoutParams(); 
      int column = lp.getSpanIndex(); 
      getGridItemOffsets(outRect, position, column, spanCount); 
     } else if (parent.getLayoutManager() instanceof LinearLayoutManager) { 
      outRect.left = mHorizontalSpacing; 
      outRect.right = mHorizontalSpacing; 
      if (mIncludeEdge) { 
       if (position == 0) { 
        outRect.top = mVerticalSpacing; 
       } 
       outRect.bottom = mVerticalSpacing; 
      } else { 
       if (position > 0) { 
        outRect.top = mVerticalSpacing; 
       } 
      } 
     } 
    } 

    private void getGridItemOffsets(Rect outRect, int position, int column, int spanCount) { 
     if (mIncludeEdge) { 
      outRect.left = mHorizontalSpacing * (spanCount - column)/spanCount; 
      outRect.right = mHorizontalSpacing * (column + 1)/spanCount; 
      if (position < spanCount) { 
       outRect.top = mVerticalSpacing; 
      } 
      outRect.bottom = mVerticalSpacing; 
     } else { 
      outRect.left = mHorizontalSpacing * column/spanCount; 
      outRect.right = mHorizontalSpacing * (spanCount - 1 - column)/spanCount; 
      if (position >= spanCount) { 
       outRect.top = mVerticalSpacing; 
      } 
     } 
    } 
} 
+1

In Ihrer Formel, die '+ 1 'am rechten Rand ist nicht wirklich' + 1', sollte es '+ spanSize des cell' sein. (Sie können die span-Größe mit dem spanSizeLookup oder in den LayoutParams der Zelle abrufen) – pdegand59

2

Ich habe geschrieben eine robustere ItemDecoration basierend auf @AvatarQing ‚s Antwort: SCommonItemDecoration

Sie gleichen vertikalen oder horizontalen Abstand zwischen den Elementen gesetzt, außer Sie anderen Raum auf unterschiedliche Art der Elemente festlegen .

enter image description here

+0

Vielen Dank für die Freigabe @Bos! Wichtige Teile Ihrer Klasse sind jetzt enthalten und wurden für die Bibliothek https://github.com/davideas/FlexibleAdapter verbessert, um erweiterte Funktionen zu handhaben. – Davidea