RecyclerView и GridLayoutManager: создание одной ячейки больше

Question

Я пытаюсь сделать макет, как показано ниже! единственное, что я хочу, - сделать первую ячейку больше, чем другие. то, что я пытался до сих пор код ниже:

 final AdapterFirstPage mAdapter = new AdapterFirstPage(mItems); 
    mRecycle.setAdapter(mAdapter); 
    final GridLayoutManager mng_layout = new GridLayoutManager(this, 6); 
    mng_layout.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() { 
     @Override 
     public int getSpanSize(int position) { 
      int index = position%2 ; 
      switch(index){ 
       case 0: return 4; 
       case 1: return 2; 
       case 2: return 2; 
       case 3: return 3; 
       case 4: return 3; 
       default: return -1; 
      } 

     } 
    }); 
     mRecycle.setLayoutManager(mng_layout); 

на самом деле я играл с spanCount и изменил его с 6 до 4 и до сих пор я не близко к изображению ниже! Может ли кто-нибудь помочь мне в этом?

Answer 1

Вы можете сделать это программно следующим образом:

private GridLayout setUpGrid(List<PictureUrlWithStatus> picWithStatusList) { 

    if (picWithStatusList == null) { // No Photos present i.e. no Photos are added 
     return null; 
    } 

    GridLayout.LayoutParams gridLayoutParams = new GridLayout.LayoutParams(); 
    gridLayoutParams.height = LayoutParams.MATCH_PARENT; 
    gridLayoutParams.width = LayoutParams.MATCH_PARENT; 

    GridLayout gridLayout = new GridLayout(this); 
    gridLayout.setLayoutParams(gridLayoutParams); 
    gridLayout.removeAllViews(); 

    int total_gridCount = picWithStatusList.size(); 
    int column = 3; 
    int rowSize = total_gridCount/column; 
    gridLayout.setColumnCount(column); 

    //(For First Image which occupies 2 rows), If you are drawing less than 3 images, use 2 rows, else setRowCount as the default (rowSize + 1), extra as the first Image occupies 2 rows and still draws only 3 images. 
    if (rowSize == 0) 
     gridLayout.setRowCount(2); 
    else 
     gridLayout.setRowCount(rowSize + 1); 

    for (int c = 0;/*getcount from picWithStatusList*/; c++) { 
     RelativeLayout.LayoutParams imageLayoutParam = new RelativeLayout.LayoutParams(
       LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT); 

     //The ImageView to load image 
     ImageView profilePic = new ImageView(this); 
     profilePic.setImageDrawable(getResources().getDrawable(
       R.drawable.ic_launcher)); 
     profilePic.setScaleType(ScaleType.CENTER_CROP); 
     profilePic.setLayoutParams(imageLayoutParam); 

     RelativeLayout.LayoutParams picstatusLayoutParam = new RelativeLayout.LayoutParams(
       LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT); 
     picstatusLayoutParam.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM); 

     //The View for Text written Below Image 
     TextView profilePicStatus = new TextView(this); 
     profilePicStatus.setTextSize(TypedValue.COMPLEX_UNIT_SP, 10); 
     profilePicStatus.setGravity(Gravity.CENTER_HORIZONTAL); 
     profilePicStatus.setPadding(0, 2, 0, 0); 
     profilePicStatus.setLayoutParams(picstatusLayoutParam); 

     RelativeLayout.LayoutParams contentLayoutParams = new RelativeLayout.LayoutParams(
       LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT); 
     contentLayoutParams.addRule(RelativeLayout.CENTER_HORIZONTAL); 
     RelativeLayout contentLayout = new RelativeLayout(this); 
     contentLayout.addView(profilePic); 
     contentLayout.addView(profilePicStatus); 
     contentLayout.setLayoutParams(contentLayoutParams); 

     if (c >= 0) { 
      if (c == 0) { 
       LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(
         2 * width/3, 2 * width/3); 
       GridLayout.LayoutParams param = new GridLayout.LayoutParams(
         layoutParams); 
       param.setGravity(Gravity.CENTER); 
       param.columnSpec = GridLayout.spec(c, 2); 
       param.rowSpec = GridLayout.spec(0, 2); 

       //Load image into profilePic (ImageView), I am assuming you have imageurl in profilePicWithStatus 

       //The text written on top of the images. 
       profilePicStatus.setText(c + " "); 
       contentLayout.setLayoutParams(param); 
      } else { 
       LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(
         1 * width/3, 1 * width/3); 
       GridLayout.LayoutParams param = new GridLayout.LayoutParams(
         layoutParams); 
       param.setGravity(Gravity.CENTER); 

       //Load image into profilePic (ImageView), I am assuming you have imageurl in profilePicWithStatus 

       //The Text to be written on the top of image with align bottom 
       profilePicStatus.setText(c + " "); 
       contentLayout.setLayoutParams(param); 
      } 

     } 
     gridLayout.addView(contentLayout); 
    } 
    return gridLayout; 
} 

Кроме того,

PictureUrlWithStatus класс следующим образом:

private class PictureUrlWithStatus { 
    // url is the Picture url and status will be 'Y'/'y' or 'N'/'n' 
    String url, status; 

    public PictureUrlWithStatus(String pictureUrl, String pictureStatus) { 
     this.url = pictureUrl; 
     this.status = pictureStatus; 
    } 
} 

Это должно установить вас

Answer 2

Не следует использовать GridLayoutM если вы хотите достичь разных элементов размера. Вы должны реализовать свой собственный LayoutManager, например, this.

Answer 3

Это ограничение GridLayoutManager. Для вертикальной прокрутки элементы могут распространяться только на столбцы и наоборот. Это значительно упрощает вычисления компоновки, когда вы не можете расширять их как по строкам, так и по столбцам.

Если вы пытаетесь сделать что-то действительно простое, как в вашей иллюстрации, - только охватывая как строки, так и столбцы на самом первом изображении - тогда я бы предложил пересмотреть это, чтобы ваши первые три изображения находились на одной строке. Ваши второе и третье изображения справа от большого изображения фактически будут частью одного и того же элемента списка.

• Измените адаптер, чтобы иметь специальный элемент, представляющий вторую позицию; например, список элементов, включающий второй и третий элементы.

• Измените адаптер, чтобы полностью игнорировать третий элемент. Таким образом, для позиции адаптера 2 (основанной на нуле), которая обычно возвращает третий элемент, возвращает четвертый элемент и т. Д. Пропущенный третий элемент был представлен в списке со вторым элементом.

• Дайте этому специальному элементу (списку) другой вид. Создайте представление, которое складывает два изображения по вертикали. Затем привязка будет включать второй и третий элементы из этого списка.

Ваш номер пролета, очевидно, 3, поскольку у вас есть три столбца. Первый элемент имеет размер пролета 2, второй/третий комбинированный элемент имеет размер пролета 1.

Подстройте поля на двойном представлении, чтобы соответствовать полях от RecyclerView, и вы находитесь в бизнесе.